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

2025-04-21 00:12:56 +02:00 · 2023-09-07 19:28:54 +08:00 · 2023-09-07 19:28:54 +08:00 · fbcf8db9d3
commit fbcf8db9d3
parent 5fdd1f768b e715b7a791
8 changed files with 326 additions and 83 deletions
--- a/lib/outputcomponents.php
+++ b/lib/outputcomponents.php
@ -4431,7 +4431,7 @@ class action_menu implements renderable, templatable {
    /**
     * 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.
--- 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";
--- 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;
+        }
+    }
+}
--- 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;
--- 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);
--- 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;
--- 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
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/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;