From cbfd0f32dc2460b4df80c6b664dd79c7259168c1 Mon Sep 17 00:00:00 2001
From: Braun Patrik <braun.patrik@aut.bme.hu>
Date: Mon, 10 Jul 2017 22:41:30 +0200
Subject: [PATCH] improving lightbox

---
 .../lightbox/lightbox.gallery.component.css   |  1 -
 .../lightbox/lightbox.gallery.component.html  |  2 +-
 .../lightbox/lightbox.gallery.component.ts    | 40 +++++++++----------
 3 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.css b/frontend/app/gallery/lightbox/lightbox.gallery.component.css
index 63ff984..90a533a 100644
--- a/frontend/app/gallery/lightbox/lightbox.gallery.component.css
+++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.css
@@ -90,7 +90,6 @@ info-panel {
   position: fixed;
   height: 100vh;
   right: 0;
-  width: 0;
   top: 0;
   transition: all 0.3s ease-in-out;
 }
diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.html b/frontend/app/gallery/lightbox/lightbox.gallery.component.html
index c9b59d7..f434183 100644
--- a/frontend/app/gallery/lightbox/lightbox.gallery.component.html
+++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.html
@@ -23,7 +23,7 @@
                               endLeft:photoDimension.left}}"
   -->
   <div id="controllers-container" #controls
-       [style.width.px]="contentWidth">
+       [style.width.px]="getScreenWidth()">
     <div id="controls">
       <a *ngIf="activePhoto" [href]="activePhoto.gridPhoto.getPhotoPath()"
          [download]="activePhoto.gridPhoto.photo.name"><span class="glyphicon glyphicon-download-alt highlight"
diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.ts b/frontend/app/gallery/lightbox/lightbox.gallery.component.ts
index 1ab5554..c0e90bf 100644
--- a/frontend/app/gallery/lightbox/lightbox.gallery.component.ts
+++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.ts
@@ -41,13 +41,11 @@ export class GalleryLightboxComponent implements OnDestroy {
 
   public infoPanelVisible = false;
   public infoPanelWidth = 0;
-  public contentWidth = 0;
 
 
   constructor(public fullScreenService: FullScreenService,
               private changeDetector: ChangeDetectorRef, private overlayService: OverlayService,
               private _builder: AnimationBuilder) {
-    this.contentWidth = this.getScreenWidth();
   }
 
 
@@ -148,11 +146,9 @@ export class GalleryLightboxComponent implements OnDestroy {
     this.overlayService.showOverlay();
     this.blackCanvasOpacity = 1.0;
     this.showPhoto(this.gridPhotoQL.toArray().indexOf(selectedPhoto), false);
-    this.contentWidth = this.getScreenWidth();
   }
 
   public hide() {
-    this.hideInfoPanel();
     this.fullScreenService.exitFullScreen();
 
     const lightboxDimension = this.activePhoto.getDimension();
@@ -173,6 +169,8 @@ export class GalleryLightboxComponent implements OnDestroy {
       this.overlayService.hideOverlay();
     }, 500);
 
+    this.hideInfoPanel(false);
+
   }
 
   animatePhoto(from: Dimension, to: Dimension = from) {
@@ -267,7 +265,6 @@ export class GalleryLightboxComponent implements OnDestroy {
     this.infoPanelWidth = 400;
     const endPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo);
     this.animatePhoto(starPhotoPos, endPhotoPos);
-    this.contentWidth = this.getScreenWidth();
     this.animateLightbox(<Dimension>{
         top: 0,
         left: 0,
@@ -285,7 +282,7 @@ export class GalleryLightboxComponent implements OnDestroy {
     }
   }
 
-  hideInfoPanel() {
+  hideInfoPanel(animate: boolean = true) {
     this.iPvisibilityTimer = setTimeout(() => {
       this.iPvisibilityTimer = null;
       this.infoPanelVisible = false;
@@ -294,20 +291,23 @@ export class GalleryLightboxComponent implements OnDestroy {
     const starPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo);
     this.infoPanelWidth = 0;
     const endPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo);
-    this.animatePhoto(starPhotoPos, endPhotoPos);
-    this.contentWidth = this.getScreenWidth();
-    this.animateLightbox(<Dimension>{
-        top: 0,
-        left: 0,
-        width: this.getScreenWidth() - 400,
-        height: this.getScreenHeight()
-      },
-      <Dimension>{
-        top: 0,
-        left: 0,
-        width: this.getScreenWidth(),
-        height: this.getScreenHeight()
-      });
+    if (animate) {
+      this.animatePhoto(starPhotoPos, endPhotoPos);
+    }
+    if (animate) {
+      this.animateLightbox(<Dimension>{
+          top: 0,
+          left: 0,
+          width: this.getScreenWidth() - 400,
+          height: this.getScreenHeight()
+        },
+        <Dimension>{
+          top: 0,
+          left: 0,
+          width: this.getScreenWidth(),
+          height: this.getScreenHeight()
+        });
+    }
   }