Chore: Animate Thumbnails Sidebar

box · Mar 6, 2019 · 5dd1f05 · 5dd1f05
1 parent f2da5da
commit 5dd1f05
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 7 deletions.
diff --git a/src/lib/ThumbnailsSidebar.js b/src/lib/ThumbnailsSidebar.js
@@ -1,10 +1,10 @@
 import isFinite from 'lodash/isFinite';
 import VirtualScroller from './VirtualScroller';
-import { CLASS_HIDDEN } from './constants';
 import BoundedCache from './BoundedCache';
 
 const CLASS_BOX_PREVIEW_THUMBNAIL = 'bp-thumbnail';
 const CLASS_BOX_PREVIEW_THUMBNAIL_NAV = 'bp-thumbnail-nav';
+const CLASS_BOX_PREVIEW_THUMBNAILS_CLOSED = 'bp-thumbnails-closed';
 const CLASS_BOX_PREVIEW_THUMBNAIL_IMAGE = 'bp-thumbnail-image';
 const CLASS_BOX_PREVIEW_THUMBNAIL_IMAGE_LOADED = 'bp-thumbnail-image-loaded';
 const CLASS_BOX_PREVIEW_THUMBNAIL_IS_SELECTED = 'bp-thumbnail-is-selected';
@@ -416,7 +416,7 @@ class ThumbnailsSidebar {
      * @return {boolean} true if the sidebar is open, false if not
      */
     isOpen() {
-        return this.anchorEl && !this.anchorEl.classList.contains(CLASS_HIDDEN);
+        return this.anchorEl && !this.anchorEl.classList.contains(CLASS_BOX_PREVIEW_THUMBNAILS_CLOSED);
     }
 
     /**
@@ -428,7 +428,7 @@ class ThumbnailsSidebar {
             return;
         }
 
-        this.anchorEl.classList.remove(CLASS_HIDDEN);
+        this.anchorEl.classList.remove(CLASS_BOX_PREVIEW_THUMBNAILS_CLOSED);
 
         this.virtualScroller.scrollIntoView(this.currentPage - 1);
     }
@@ -442,7 +442,7 @@ class ThumbnailsSidebar {
             return;
         }
 
-        this.anchorEl.classList.add(CLASS_HIDDEN);
+        this.anchorEl.classList.add(CLASS_BOX_PREVIEW_THUMBNAILS_CLOSED);
     }
 
     /**

diff --git a/src/lib/VirtualScroller.scss b/src/lib/VirtualScroller.scss
@@ -1,6 +1,7 @@
 .bp-vs {
     flex: 1 0 auto;
     overflow-y: auto;
+    overflow-x: hidden;
 
     .bp-vs-list {
         margin: 0;

diff --git a/src/lib/_common.scss b/src/lib/_common.scss
@@ -151,6 +151,12 @@ $header-height: 48px;
         flex: 1 1 auto;
         outline: none;
         position: relative;
+        // transition: left 300ms cubic-bezier(0.4, 0, 0.2, 1);
+        // position: absolute;
+        // bottom: 0;
+        // left: 0;
+        // right: 0;
+        // top: 0;
     }
 
     .bp-content.bp-is-fullscreen {

diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js
@@ -127,7 +127,7 @@ class DocBaseViewer extends BaseViewer {
 
         if (this.options.enableThumbnailsSidebar) {
             this.thumbnailsSidebarEl = document.createElement('div');
-            this.thumbnailsSidebarEl.className = `${CLASS_BOX_PREVIEW_THUMBNAILS_CONTAINER} ${CLASS_HIDDEN}`;
+            this.thumbnailsSidebarEl.className = `${CLASS_BOX_PREVIEW_THUMBNAILS_CONTAINER} bp-thumbnails-closed`;
             this.thumbnailsSidebarEl.setAttribute('data-testid', 'thumbnails-sidebar');
             this.containerEl.parentNode.insertBefore(this.thumbnailsSidebarEl, this.containerEl);
         }
@@ -1340,7 +1340,7 @@ class DocBaseViewer extends BaseViewer {
         this.emitMetric({ name: metricName, data: pagesCount });
         this.emit(eventName);
 
-        this.resize();
+        setTimeout(() => this.resize(), 200);
     }
 
     /**

diff --git a/src/lib/viewers/doc/_docBase.scss b/src/lib/viewers/doc/_docBase.scss
@@ -6,7 +6,14 @@ $thumbnail-border-radius: 4px;
     .bp-thumbnails-container {
         border-right: solid 1px $seesee;
         display: flex;
-        flex: 0 0 201px; // Accounts for the 1px border on the right so the remaining width is actually 180
+        flex: 0 0 auto; // Accounts for the 1px border on the right so the remaining width is actually 180
+        transition: width 300ms cubic-bezier(.4, 0, .2, 1);
+        width: 201px;
+    }
+
+    .bp-thumbnails-container.bp-thumbnails-closed {
+        width: 0;
+        overflow: hidden;
     }
 
     .bp-thumbnail {