From 0a8f08907a18ee7ce1801ee2625ca8976ef6475a Mon Sep 17 00:00:00 2001
From: Jared Stoffan <jstoffan@users.noreply.github.com>
Date: Thu, 29 Apr 2021 14:35:53 -0700
Subject: [PATCH] feat(documents): Add drop shadow for document pages and
 placeholders (#1367)

---
 src/lib/viewers/doc/Document.scss     | 16 +++++++---------
 src/lib/viewers/doc/Presentation.scss | 13 +++++--------
 src/lib/viewers/doc/_docBase.scss     | 19 ++++++++++++++++---
 src/lib/viewers/doc/_loading.scss     |  6 ------
 src/lib/viewers/doc/_mixins.scss      | 10 ++++++++++
 5 files changed, 38 insertions(+), 26 deletions(-)
 delete mode 100644 src/lib/viewers/doc/_loading.scss
 create mode 100644 src/lib/viewers/doc/_mixins.scss

diff --git a/src/lib/viewers/doc/Document.scss b/src/lib/viewers/doc/Document.scss
index 2c5af7923..de6da9f6c 100644
--- 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
index be5e9c412..36ee771e8 100644
--- 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
index f4a691f38..fcb55daaa 100644
--- 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
deleted file mode 100644
index f5244d08d..000000000
--- a/src/lib/viewers/doc/_loading.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import '~box-ui-elements/es/styles/constants/colors';
-
-@mixin bp-LoadingGhost {
-    background: $bdl-gray-05 url('../../icons/loading_ghost.gif') repeat-y;
-    background-size: 100% 100%;
-}
diff --git a/src/lib/viewers/doc/_mixins.scss b/src/lib/viewers/doc/_mixins.scss
new file mode 100644
index 000000000..c38bbf354
--- /dev/null
+++ 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);
+}