MDL-72456 theme_boost: detect drawers scroll

theme/boost/amd/src/drawers.js

@@ -40,6 +40,11 @@ const SELECTORS = {
     TOGGLEBTN: '[data-toggler="drawers"][data-action="toggle"]',
     DRAWERS: '[data-region="fixed-drawer"]',
     CONTAINER: '#page.drawers',
+    DRAWERCONTENT: '.drawercontent',
+};
+
+const CLASSES = {
+    SCROLLED: 'scrolled',
 };
 
 /**
@@ -173,6 +178,25 @@ const enableDrawerTooltips = (drawerNode) => {
     });
 };
 
+/**
+ * Add scroll listeners to a drawer element.
+ *
+ * @param {HTMLElement} drawerNode the drawer main node
+ * @private
+ */
+const addInnerScrollListener = (drawerNode) => {
+    const content = drawerNode.querySelector(SELECTORS.DRAWERCONTENT);
+    if (!content) {
+        return;
+    }
+    content.addEventListener("scroll", () => {
+        drawerNode.classList.toggle(
+            CLASSES.SCROLLED,
+            content.scrollTop != 0
+        );
+    });
+};
+
 /**
  * The Drawers class is used to control on-screen drawer elements.
  *
@@ -246,6 +270,8 @@ export default class Drawers {
             disableDrawerTooltips(this.drawerNode);
         }
 
+        addInnerScrollListener(this.drawerNode);
+
         drawerMap.set(drawerNode, this);
     }
 
@@ -520,9 +546,9 @@ const scroller = () => {
     if (drawerLayout) {
         drawerLayout.addEventListener("scroll", () => {
             if (drawerLayout.scrollTop >= window.innerHeight) {
-                body.classList.add('scrolled');
+                body.classList.add(CLASSES.SCROLLED);
             } else {
-                body.classList.remove('scrolled');
+                body.classList.remove(CLASSES.SCROLLED);
             }
         });
     }

theme/boost/scss/moodle/courseindex.scss

@@ -102,7 +102,6 @@ $courseindex-item-current: $primary !default;
         // Completion.
         .completioninfo {
             min-width: 24px;
-            transform: scale(0.7);
 
             &.completion_complete {
                 color: $success;

theme/boost/scss/moodle/drawer.scss

@@ -124,7 +124,7 @@ $right-drawer-width: 320px;
         right: 0;
         height: calc(100% - #{$navbar-height});
         width: $right-drawer-width;
-        box-shadow: -2px 2px 4px rgba(0, 0, 0, .08);
+        box-shadow: -2px 2px 4px $drawer-shadow-color;
         padding: 0;
         visibility: visible;
         opacity: 1;
@@ -158,7 +158,7 @@ $right-drawer-width: 320px;
 
 .dir-rtl {
     [data-region=right-hand-drawer] {
-        box-shadow: 2px 2px 4px rgba(0, 0, 0, .08);
+        box-shadow: 2px 2px 4px $drawer-shadow-color;
     }
 }
 
@@ -233,6 +233,9 @@ $right-drawer-width: 320px;
     display: flex;
     align-items: center;
 }
+.drawer.scrolled .drawerheader {
+    box-shadow: 0 8px 11px -7px $drawer-shadow-color;
+}
 
 @include media-breakpoint-down(md) {
     .drawer-md {
@@ -252,6 +255,7 @@ $right-drawer-width: 320px;
 
 .drawercontent {
     position: relative;
+    z-index: -1;
     height: calc(100% - #{$navbar-height});
     display: flex;
     flex-direction: column;

theme/boost/style/moodle.css

@@ -14712,7 +14712,7 @@ body.drawer-ease {
     right: 0;
     height: calc(100% - 60px);
     width: 320px;
-    box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.08);
+    box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.25);
     padding: 0;
     visibility: visible;
     opacity: 1; }
@@ -14736,7 +14736,7 @@ body.drawer-ease {
     overflow: hidden; } }
 
 .dir-rtl [data-region=right-hand-drawer] {
-  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.08); }
+  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); }
 
 .drawer {
   transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease;
@@ -14781,6 +14781,9 @@ body.drawer-ease {
   display: flex;
   align-items: center; }
 
+.drawer.scrolled .drawerheader {
+  box-shadow: 0 8px 11px -7px rgba(0, 0, 0, 0.25); }
+
 @media (max-width: 991.98px) {
   .drawer-md {
     display: block;
@@ -14845,6 +14848,7 @@ body.drawer-ease {
 
 .drawercontent {
   position: relative;
+  z-index: -1;
   height: calc(100% - 60px);
   display: flex;
   flex-direction: column;
@@ -20963,8 +20967,7 @@ div.editor_atto_toolbar button .icon {
     .courseindex .courseindex-item.pageitem a {
       color: black; }
   .courseindex .courseindex-item .completioninfo {
-    min-width: 24px;
-    transform: scale(0.7); }
+    min-width: 24px; }
     .courseindex .courseindex-item .completioninfo.completion_complete {
       color: #357a32; }
     .courseindex .courseindex-item .completioninfo.completion_fail {

theme/classic/style/moodle.css

@@ -14712,7 +14712,7 @@ body.drawer-ease {
     right: 0;
     height: calc(100% - 50px);
     width: 320px;
-    box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.08);
+    box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.25);
     padding: 0;
     visibility: visible;
     opacity: 1; }
@@ -14736,7 +14736,7 @@ body.drawer-ease {
     overflow: hidden; } }
 
 .dir-rtl [data-region=right-hand-drawer] {
-  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.08); }
+  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); }
 
 .drawer {
   transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease;
@@ -14781,6 +14781,9 @@ body.drawer-ease {
   display: flex;
   align-items: center; }
 
+.drawer.scrolled .drawerheader {
+  box-shadow: 0 8px 11px -7px rgba(0, 0, 0, 0.25); }
+
 @media (max-width: 991.98px) {
   .drawer-md {
     display: block;
@@ -14845,6 +14848,7 @@ body.drawer-ease {
 
 .drawercontent {
   position: relative;
+  z-index: -1;
   height: calc(100% - 50px);
   display: flex;
   flex-direction: column;
@@ -20909,8 +20913,7 @@ div.editor_atto_toolbar button .icon {
     .courseindex .courseindex-item.pageitem a {
       color: black; }
   .courseindex .courseindex-item .completioninfo {
-    min-width: 24px;
-    transform: scale(0.7); }
+    min-width: 24px; }
     .courseindex .courseindex-item .completioninfo.completion_complete {
       color: #357a32; }
     .courseindex .courseindex-item .completioninfo.completion_fail {