feat(documents): Add drop shadow for document pages and placeholders (#…

…1367)
box · Apr 29, 2021 · 0a8f089 · 0a8f089
1 parent 086752a
commit 0a8f089
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 26 deletions.
diff --git a/src/lib/viewers/doc/Document.scss b/src/lib/viewers/doc/Document.scss
@@ -15,6 +15,7 @@
     left: 0;
     margin: 0;
     overflow-y: scroll;
+    background-color: $ffive;
     opacity: 1;
     transition: opacity .5s;
 
@@ -26,16 +27,13 @@
         opacity: 0;
     }
 
-    .bp-preload {
-        background-color: $ffive;
-
-        .bp-theme-dark & {
-            background-color: $sunset-grey;
-        }
+    .bp-theme-dark & {
+        background-color: $sunset-grey;
     }
 
     .bp-preload-content,
-    .bp-preload-overlay {
+    .bp-preload-overlay,
+    .bp-preload-placeholder::before {
         position: absolute;
         top: 0;
         right: 0;
@@ -52,10 +50,10 @@
     }
 
     .bp-preload-placeholder {
-        @include bp-LoadingGhost;
+        @include bp-DocGhost;
+        @include bp-DocShadow;
 
         position: relative;
         margin: 15px auto 30px;
-        overflow: hidden;
     }
 }
diff --git a/src/lib/viewers/doc/Presentation.scss b/src/lib/viewers/doc/Presentation.scss
@@ -35,6 +35,7 @@
     bottom: 0;
     left: 0;
     margin: 0;
+    background-color: $ffive;
     transition: opacity .5s;
 
     &.bp-is-invisible {
@@ -45,12 +46,8 @@
         opacity: 0;
     }
 
-    .bp-preload {
-        background-color: $ffive;
-
-        .bp-theme-dark & {
-            background-color: $sunset-grey;
-        }
+    .bp-theme-dark & {
+        background-color: $sunset-grey;
     }
 
     .bp-preload-content,
@@ -72,9 +69,9 @@
     }
 
     .bp-preload-placeholder {
-        @include bp-LoadingGhost;
+        @include bp-DocGhost;
+        @include bp-DocShadow;
 
         margin: auto;
-        overflow: hidden;
     }
 }
diff --git a/src/lib/viewers/doc/_docBase.scss b/src/lib/viewers/doc/_docBase.scss
@@ -1,6 +1,6 @@
 @import '../../boxuiVariables';
 @import './annotations';
-@import './loading';
+@import './mixins';
 @import './theme';
 
 $pdfjs-highlight: #b400aa !default;
@@ -74,7 +74,7 @@ $thumbnail-sidebar-width: 191px; // Extra pixel to account for sidebar border
 
     .bp-thumbnail:not(.bp-thumbnail-image-loaded) {
         .bp-thumbnail-nav {
-            @include bp-LoadingGhost;
+            @include bp-DocGhost;
         }
     }
 
@@ -256,6 +256,19 @@ $thumbnail-sidebar-width: 191px; // Extra pixel to account for sidebar border
         border: 0;
         border-image: none;
 
+        // Add shadow to an underlying element to avoid overlapping shadows on canvasWrapper and loadingIcon
+        &::before {
+            @include bp-DocShadow;
+
+            position: absolute;
+            top: $pdfjs-page-padding;
+            right: 0;
+            bottom: $pdfjs-page-padding;
+            left: 0;
+            display: block;
+            content: '';
+        }
+
         // Override loading icon styles from pdf.js
         .loadingIcon {
             top: $pdfjs-page-padding;
@@ -264,7 +277,7 @@ $thumbnail-sidebar-width: 191px; // Extra pixel to account for sidebar border
 
             // Display the ghost state only if the page does not already have rendered content (e.g. during a resize)
             &:first-child {
-                @include bp-LoadingGhost;
+                @include bp-DocGhost;
             }
         }
 

diff --git a/src/lib/viewers/doc/_loading.scss b/src/lib/viewers/doc/_loading.scss
diff --git a/src/lib/viewers/doc/_mixins.scss b/src/lib/viewers/doc/_mixins.scss
@@ -0,0 +1,10 @@
+@import '~box-ui-elements/es/styles/constants/colors';
+
+@mixin bp-DocGhost {
+    background: $bdl-gray-10 url('../../icons/loading_ghost.gif') repeat-y;
+    background-size: 100% 100%;
+}
+
+@mixin bp-DocShadow {
+    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .1);
+}