Merge branch 'MDL-78954-master' of https://github.com/ferranrecio/moodle

moodle · Sep 8, 2023 · fbcf8db · fbcf8db
2 parents 5fdd1f7 + e715b7a
commit fbcf8db
Show file tree

Hide file tree

Showing 8 changed files with 326 additions and 83 deletions.
diff --git a/lib/outputcomponents.php b/lib/outputcomponents.php
@@ -4431,7 +4431,7 @@ public function set_menu_trigger($trigger, $extraclasses = '') {
     /**
      * Classes for the trigger menu
      */
-    const DEFAULT_KEBAB_TRIGGER_CLASSES = 'btn btn-icon d-flex align-items-center justify-content-center';
+    const DEFAULT_KEBAB_TRIGGER_CLASSES = 'btn btn-icon d-flex align-items-center justify-content-center no-caret';
 
     /**
      * Setup trigger as in the kebab menu.

diff --git a/theme/boost/scss/moodle.scss b/theme/boost/scss/moodle.scss
@@ -8,6 +8,7 @@ $breadcrumb-divider-rtl: "◀" !default;
 // Massive, needs broken up.
 @import "moodle/variables";
 @import "moodle/core";
+@import "moodle/action-menu";
 @import "moodle/icons";
 @import "moodle/admin";
 @import "moodle/blocks";

diff --git a/theme/boost/scss/moodle/action-menu.scss b/theme/boost/scss/moodle/action-menu.scss
@@ -0,0 +1,119 @@
+.action-menu .dropdown-toggle {
+    text-decoration: none;
+    display: inline-block;
+}
+
+.action-menu {
+    white-space: nowrap;
+    display: inline;
+
+    // Kebab action menus do no show chevrons or extra dropdown icons.
+    .dropdown-toggle.no-caret {
+        &::after {
+            display: none;
+        }
+
+        &::before {
+            display: none;
+        }
+    }
+
+    .dropdown.downleft .dropdown-subpanel-content {
+        right: 0;
+        left: auto;
+    }
+
+    .dropdown-subpanel.content-displayed {
+        background-color: $gray-200;
+    }
+
+    .dropdown-subpanel-content {
+        max-width: $modal-sm;
+        box-shadow: 0 0 1rem rgba($black, .15);
+
+        a:focus {
+            outline: solid $primary;
+        }
+    }
+
+    .dropdown-subpanel-content.show {
+        @include optional-animation(0.15s animate-pop);
+    }
+
+    // Chevrons in sub panel items are always to end.
+    .dropdown-subpanel .dropdown-item {
+        &::after {
+            border: 0;
+            @extend .fa-solid;
+            content: fa-content($fa-var-chevron-right);
+        }
+
+        &::before {
+            display: none;
+        }
+    }
+}
+
+@keyframes animate-pop {
+    0% {
+        transform: scale(0.90, 0.90);
+    }
+
+    100% {
+        transform: scale(1, 1);
+    }
+}
+
+.dir-rtl .action-menu {
+
+    // Chevrons in subpanels items are always to end.
+    .dropdown-subpanel .dropdown-item {
+        &::after {
+            border: 0;
+            @extend .fa-solid;
+            content: fa-content($fa-var-chevron-left);
+        }
+
+        &::before {
+            display: none;
+        }
+    }
+}
+
+// Make links in a menu clickable anywhere in the row.
+.dropdown-item {
+    a {
+        display: block;
+        width: 100%;
+        color: $body-color;
+    }
+
+    &.active,
+    &:active,
+    &:hover,
+    &:focus,
+    &:focus-within {
+        outline: 0;
+        background-color: $dropdown-link-active-bg;
+        color: $dropdown-link-active-color;
+
+        a {
+            color: $dropdown-link-active-color;
+        }
+    }
+
+    &[aria-current="true"],
+    &[aria-selected="true"] {
+        position: relative;
+        display: flex;
+        align-items: center;
+
+        &:before {
+            @extend .fa-solid;
+            content: fa-content($fa-var-check);
+            position: absolute;
+            left: 0.4rem;
+            font-size: 0.7rem;
+        }
+    }
+}
diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
@@ -39,6 +39,14 @@ $font-size-xs: ($font-size-base * .75) !default;
     }
 }
 
+@mixin optional-animation($animation) {
+    animation: $animation;
+
+    @media (prefers-reduced-motion: reduce) {
+        animation: none;
+    }
+}
+
 .context-header-settings-menu .dropdown-toggle > .icon,
 #region-main-settings-menu .dropdown-toggle > .icon {
     height: 24px;
@@ -359,33 +367,6 @@ img.resize {
     width: 1em;
 }
 
-.action-menu .dropdown-toggle {
-    text-decoration: none;
-    display: inline-block;
-}
-
-.action-menu {
-    white-space: nowrap;
-    display: inline;
-
-    .dropdown.downleft .dropdown-subpanel-content {
-        right: 0;
-        left: auto;
-    }
-
-    .dropdown-subpanel.content-displayed {
-        background-color: $gray-200;
-    }
-
-    .dropdown-subpanel-content {
-        max-width: $modal-sm;
-
-        a:focus {
-            outline: solid $primary;
-        }
-    }
-}
-
 .block img.resize {
     height: 0.9em;
     width: 0.8em;

diff --git a/theme/boost/scss/moodle/course.scss b/theme/boost/scss/moodle/course.scss
@@ -1534,9 +1534,6 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
         .actions {
             position: relative;
         }
-        .dropdown-toggle::after {
-            display: none;
-        }
         // Override '.btn.btn-icon' styles from buttons.scss to make action menu buttons smaller.
         .action-menu .btn.btn-icon {
             height: ($icon-width + 15px);

diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
@@ -2085,6 +2085,10 @@
 .block_navigation .block_tree [aria-expanded=false] > p:before,
 .block_settings .block_tree [aria-expanded=true] > p:before,
 .block_navigation .block_tree [aria-expanded=true] > p:before,
+.dropdown-item[aria-current=true]:before,
+.dropdown-item[aria-selected=true]:before,
+.dir-rtl .action-menu .dropdown-subpanel .dropdown-item::after,
+.action-menu .dropdown-subpanel .dropdown-item::after,
 .dropup .dropdown-toggle::after,
 .dropright .dropdown-toggle::after,
 .dropleft .dropdown-toggle::before,
@@ -4944,6 +4948,10 @@
 .block_navigation .block_tree [aria-expanded=false] > p:before,
 .block_settings .block_tree [aria-expanded=true] > p:before,
 .block_navigation .block_tree [aria-expanded=true] > p:before,
+.dropdown-item[aria-current=true]:before,
+.dropdown-item[aria-selected=true]:before,
+.dir-rtl .action-menu .dropdown-subpanel .dropdown-item::after,
+.action-menu .dropdown-subpanel .dropdown-item::after,
 .dropup .dropdown-toggle::after,
 .dropright .dropdown-toggle::after,
 .dropleft .dropdown-toggle::before,
@@ -4983,6 +4991,10 @@
 .block_navigation .block_tree [aria-expanded=false] > p:before,
 .block_settings .block_tree [aria-expanded=true] > p:before,
 .block_navigation .block_tree [aria-expanded=true] > p:before,
+.dropdown-item[aria-current=true]:before,
+.dropdown-item[aria-selected=true]:before,
+.dir-rtl .action-menu .dropdown-subpanel .dropdown-item::after,
+.action-menu .dropdown-subpanel .dropdown-item::after,
 .dropup .dropdown-toggle::after,
 .dropright .dropdown-toggle::after,
 .dropleft .dropdown-toggle::before,
@@ -23237,29 +23249,6 @@ img.resize {
   width: 1em;
 }
 
-.action-menu .dropdown-toggle {
-  text-decoration: none;
-  display: inline-block;
-}
-
-.action-menu {
-  white-space: nowrap;
-  display: inline;
-}
-.action-menu .dropdown.downleft .dropdown-subpanel-content {
-  right: 0;
-  left: auto;
-}
-.action-menu .dropdown-subpanel.content-displayed {
-  background-color: #e9ecef;
-}
-.action-menu .dropdown-subpanel-content {
-  max-width: 300px;
-}
-.action-menu .dropdown-subpanel-content a:focus {
-  outline: solid #0f6cbf;
-}
-
 .block img.resize {
   height: 0.9em;
   width: 0.8em;
@@ -26014,6 +26003,92 @@ blockquote {
     min-width: calc(300px - 25px);
   }
 }
+.action-menu .dropdown-toggle {
+  text-decoration: none;
+  display: inline-block;
+}
+
+.action-menu {
+  white-space: nowrap;
+  display: inline;
+}
+.action-menu .dropdown-toggle.no-caret::after {
+  display: none;
+}
+.action-menu .dropdown-toggle.no-caret::before {
+  display: none;
+}
+.action-menu .dropdown.downleft .dropdown-subpanel-content {
+  right: 0;
+  left: auto;
+}
+.action-menu .dropdown-subpanel.content-displayed {
+  background-color: #e9ecef;
+}
+.action-menu .dropdown-subpanel-content {
+  max-width: 300px;
+  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
+}
+.action-menu .dropdown-subpanel-content a:focus {
+  outline: solid #0f6cbf;
+}
+.action-menu .dropdown-subpanel-content.show {
+  animation: 0.15s animate-pop;
+}
+@media (prefers-reduced-motion: reduce) {
+  .action-menu .dropdown-subpanel-content.show {
+    animation: none;
+  }
+}
+.action-menu .dropdown-subpanel .dropdown-item::after {
+  border: 0;
+  content: "\f054";
+}
+.action-menu .dropdown-subpanel .dropdown-item::before {
+  display: none;
+}
+
+@keyframes animate-pop {
+  0% {
+    transform: scale(0.9, 0.9);
+  }
+  100% {
+    transform: scale(1, 1);
+  }
+}
+.dir-rtl .action-menu .dropdown-subpanel .dropdown-item::after {
+  border: 0;
+  content: "\f053";
+}
+.dir-rtl .action-menu .dropdown-subpanel .dropdown-item::before {
+  display: none;
+}
+
+.dropdown-item a {
+  display: block;
+  width: 100%;
+  color: #1d2125;
+}
+.dropdown-item.active, .dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus, .dropdown-item:focus-within {
+  outline: 0;
+  background-color: #0f6cbf;
+  color: #fff;
+}
+.dropdown-item.active a, .dropdown-item:active a, .dropdown-item:hover a, .dropdown-item:focus a, .dropdown-item:focus-within a {
+  color: #fff;
+}
+.dropdown-item[aria-current=true], .dropdown-item[aria-selected=true] {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.dropdown-item[aria-current=true]:before, .dropdown-item[aria-selected=true]:before {
+  content: "\f00c";
+  position: absolute;
+  left: 0.4rem;
+  font-size: 0.7rem;
+}
+
 .icon {
   font-size: 16px;
   width: 16px;
@@ -29185,9 +29260,6 @@ span.editinstructions .alert-link {
 .activity-item .activity-actions .actions {
   position: relative;
 }
-.activity-item .activity-actions .dropdown-toggle::after {
-  display: none;
-}
 .activity-item .activity-actions .action-menu .btn.btn-icon {
   height: 31px;
   width: 31px;

diff --git a/theme/boost/upgrade.txt b/theme/boost/upgrade.txt
@@ -3,6 +3,7 @@ information provided here is intended especially for theme designers.
 
 === 4.3 ===
 * The $activity-iconcontainer-height and $activity-iconcontainer-width variables have been changed from 50px to 52px.
+* New SCSS mixin optional_animate to animate an element unless if the user has reduced motion in their preferences.
 
 === 4.0 ===
 * Following the adopted standards, breadcrumbs have been removed for pages that reside on the 1st level within a course