Chore: address PR comments

box · Mar 6, 2019 · 8a4795b · 8a4795b
1 parent 3bd5b2e
commit 8a4795b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 11 deletions.
diff --git a/src/lib/viewers/doc/_docBase.scss b/src/lib/viewers/doc/_docBase.scss
@@ -1,22 +1,30 @@
 @import '../../boxuiVariables';
 
 $thumbnail-border-radius: 4px;
+$thumbnail-sidebar-width: 201px;
 
 .bp {
     .bp-thumbnails-container {
         border-right: solid 1px $seesee;
         bottom: 0;
         display: flex;
         flex: 0 0 auto;
-        left: -201px;
+        left: 0;
         position: absolute;
         top: 0;
-        transition: left 300ms cubic-bezier(.4, 0, .2, 1);
-        width: 201px; // Accounts for the 1px border on the right so the remaining width is actually 180
+        transform: translateX(-$thumbnail-sidebar-width);
+        transition: transform 300ms cubic-bezier(.4, 0, .2, 1);
+        width: $thumbnail-sidebar-width; // Accounts for the 1px border on the right so the remaining width is actually 180
     }
 
-    &.bp-thumbnails-open .bp-thumbnails-container {
-        left: 0;
+    &.bp-thumbnails-open {
+        .bp-thumbnails-container {
+            transform: translateX(0);
+        }
+
+        .bp-content {
+            left: $thumbnail-sidebar-width;
+        }
     }
 
     .bp-thumbnail {
@@ -76,10 +84,6 @@ $thumbnail-border-radius: 4px;
             border-color: $black;
         }
     }
-
-    &.bp-thumbnails-open .bp-content {
-        left: 201px;
-    }
 }
 
 .bp-theme-dark {

diff --git a/test/integration/document/Thumbnails.e2e.test.js b/test/integration/document/Thumbnails.e2e.test.js
@@ -44,9 +44,9 @@ describe('Preview Document Thumbnails', () => {
     it('Should render thumbnails when toggled', () => {
         showDocumentPreview({ enableThumbnailsSidebar: true });
 
-        toggleThumbnails().should('be.visible');
+        toggleThumbnails().should('have.css', 'transform', 'matrix(1, 0, 0, 1, 0, 0)'); // translateX(0)
 
-        toggleThumbnails().should('not.be.visible');
+        toggleThumbnails().should('have.css', 'transform', 'matrix(1, 0, 0, 1, -201, 0)'); // translateX(-201px)
     });
 
     it('Should be able to change page by clicking on the thumbnail', () => {