From 136fa1ef0cfadd7484d969a9cd43fbad72d8261d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikel=20Mart=C3=ADn?= <mikel@moodle.com>
Date: Fri, 8 Sep 2023 14:46:53 +0200
Subject: [PATCH] MDL-77805 reportbuilder: Improve filter dropdown UI

- Modify the filters dropdown UI to have a fixed height and inner scroll.
This will improve displaying long filter dropdowns.
- Modify the filters dropdown buttons to be always displayed sticked to the bottom.
- Clean unused styles in filters dropdown
---
 .../templates/local/filters/area.mustache     |  4 +-
 .../templates/local/filters/header.mustache   |  4 +-
 theme/boost/scss/moodle/core.scss             | 12 ++++++
 theme/boost/scss/moodle/reportbuilder.scss    | 39 +++++++++++--------
 theme/boost/style/moodle.css                  | 31 +++++++++------
 theme/classic/style/moodle.css                | 31 +++++++++------
 6 files changed, 77 insertions(+), 44 deletions(-)

diff --git a/reportbuilder/templates/local/filters/area.mustache b/reportbuilder/templates/local/filters/area.mustache
index d87fc077536..512de6b76bd 100644
--- a/reportbuilder/templates/local/filters/area.mustache
+++ b/reportbuilder/templates/local/filters/area.mustache
@@ -38,8 +38,8 @@
 </button>
 {{! Filters content }}
 <div class="filters-dropdown dropdown-menu dropdown-menu-right moodle-has-zindex" aria-labelledby="dropdownFiltersButton">
-    <div id="filters" class="reportbuilder-filters-sidebar" data-region="report-filters">
-        <div class="p-3">
+    <div id="filters" class="reportbuilder-filters-sidebar scroll-shadow" data-region="report-filters">
+        <div class="px-3 pt-3">
             {{#filtersform}}
                 <div class="reportbuilder-filters-wrapper" data-region="filters-form">
                     {{{filtersform}}}
diff --git a/reportbuilder/templates/local/filters/header.mustache b/reportbuilder/templates/local/filters/header.mustache
index 5a3bf473e14..e8e2f78c6ad 100644
--- a/reportbuilder/templates/local/filters/header.mustache
+++ b/reportbuilder/templates/local/filters/header.mustache
@@ -24,9 +24,9 @@
         "name": "Date modified"
     }
 }}
-<div class="filter pb-3 mb-3 border-bottom" data-filter-for="{{name}}">
+<div class="filter pb-3 mb-3" data-filter-for="{{name}}">
     <div class="filter-header d-flex align-items-start justify-content-between">
-        <div class="filter-name">
+        <div class="filter-name text-truncate">
             {{{name}}}
         </div>
     </div>
diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index bdcb9da25ff..fc64f6cd034 100644
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -2895,6 +2895,18 @@ $scrollbar-track: lighten($primary, 40%);
     }
 }
 
+// Add top/bottom shadow to scrolling area.
+@mixin scroll-shadow($background-colour: $white, $shadow-colour: $black, $shadow-size: 1rem) {
+    background:
+        linear-gradient($background-colour 30%, rgba($background-colour, 0)) center top,
+        linear-gradient(rgba($background-colour, 0), $background-colour 70%) center bottom,
+        radial-gradient(farthest-side at 50% 0, rgba($shadow-colour, 0.2), rgba($shadow-colour, 0)) center top,
+        radial-gradient(farthest-side at 50% 100%, rgba($shadow-colour, 0.2), rgba($shadow-colour, 0)) center bottom;
+    background-repeat: no-repeat;
+    background-size: 100% $shadow-size, 100% $shadow-size, 100% calc(#{$shadow-size} / 2), 100% calc(#{$shadow-size} / 2);
+    background-attachment: local, local, scroll, scroll;
+}
+
 // Generic dropzones and dragging styles.
 
 body.dragging {
diff --git a/theme/boost/scss/moodle/reportbuilder.scss b/theme/boost/scss/moodle/reportbuilder.scss
index dc6ca46a939..c6482efa44b 100644
--- a/theme/boost/scss/moodle/reportbuilder.scss
+++ b/theme/boost/scss/moodle/reportbuilder.scss
@@ -34,10 +34,12 @@
 //
 
 $rb-filters-dropdown-width: 27rem !default;
+$rb-filters-dropdown-height: 30rem !default;
+$rb-filters-footer-height: 4rem;
 
 .reportbuilder-wrapper .filters-dropdown {
     width: $rb-filters-dropdown-width;
-    padding: 0;
+    padding: 0 0 $rb-filters-footer-height 0;
     z-index: $zindex-modal;
     overflow: hidden;
     @include media-breakpoint-down(sm) {
@@ -45,24 +47,29 @@ $rb-filters-dropdown-width: 27rem !default;
     }
 }
 .reportbuilder-filters-sidebar {
-    max-height: calc(100vh - #{$navbar-height} - 1rem);
+    max-height: $rb-filters-dropdown-height;
     overflow-y: auto;
+    border-bottom: 1px solid $dropdown-border-color;
     @include thin-scrolls($white);
+    @include scroll-shadow();
+
     .filter {
-        .filter-header {
-            font-size: $h5-font-size;
-            .filter-name {
-                font-size: $font-size-base;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                padding-right: map-get($spacers, 3);
-            }
-            .filter-name:hover {
-                white-space: normal;
-                text-overflow: clip;
-                word-break: break-all;
-            }
+        &:not(:nth-last-child(2)) {
+            border-bottom: 1px solid $dropdown-border-color;
+        }
+        .filter-name:hover {
+            white-space: normal;
+            text-overflow: clip;
+            word-break: break-all;
+        }
+    }
+    .form-group[data-groupname="buttonar"] {
+        position: absolute;
+        bottom: 0;
+        height: $rb-filters-footer-height;
+        align-items: center;
+        .col-form-label {
+            display: none !important; /* stylelint-disable-line declaration-no-important */
         }
     }
 }
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 0985355e6b1..6cfc449d438 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -37784,7 +37784,7 @@ div.editor_atto_toolbar button .icon {
 
 .reportbuilder-wrapper .filters-dropdown {
   width: 27rem;
-  padding: 0;
+  padding: 0 0 4rem 0;
   z-index: 1050;
   overflow: hidden;
 }
@@ -37795,10 +37795,15 @@ div.editor_atto_toolbar button .icon {
 }
 
 .reportbuilder-filters-sidebar {
-  max-height: calc(100vh - 60px - 1rem);
+  max-height: 30rem;
   overflow-y: auto;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
   scrollbar-width: thin;
   scrollbar-color: #6a737b #fff;
+  background: linear-gradient(#fff 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), #fff 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center bottom;
+  background-repeat: no-repeat;
+  background-size: 100% 1rem, 100% 1rem, 100% calc(1rem / 2), 100% calc(1rem / 2);
+  background-attachment: local, local, scroll, scroll;
 }
 .reportbuilder-filters-sidebar::-webkit-scrollbar {
   width: 12px;
@@ -37814,21 +37819,23 @@ div.editor_atto_toolbar button .icon {
 .reportbuilder-filters-sidebar::-webkit-scrollbar-thumb:hover {
   background-color: #495057;
 }
-.reportbuilder-filters-sidebar .filter .filter-header {
-  font-size: 1.171875rem;
+.reportbuilder-filters-sidebar .filter:not(:nth-last-child(2)) {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
 }
-.reportbuilder-filters-sidebar .filter .filter-header .filter-name {
-  font-size: 0.9375rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding-right: 1rem;
-}
-.reportbuilder-filters-sidebar .filter .filter-header .filter-name:hover {
+.reportbuilder-filters-sidebar .filter .filter-name:hover {
   white-space: normal;
   text-overflow: clip;
   word-break: break-all;
 }
+.reportbuilder-filters-sidebar .form-group[data-groupname=buttonar] {
+  position: absolute;
+  bottom: 0;
+  height: 4rem;
+  align-items: center;
+}
+.reportbuilder-filters-sidebar .form-group[data-groupname=buttonar] .col-form-label {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
 
 .reportbuilder-filters-wrapper .mform.full-width-labels .fdate_selector,
 .reportbuilder-conditions-list .mform.full-width-labels .fdate_selector {
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 39d4c4990b2..9e5a191b840 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -37718,7 +37718,7 @@ div.editor_atto_toolbar button .icon {
 
 .reportbuilder-wrapper .filters-dropdown {
   width: 27rem;
-  padding: 0;
+  padding: 0 0 4rem 0;
   z-index: 1050;
   overflow: hidden;
 }
@@ -37729,10 +37729,15 @@ div.editor_atto_toolbar button .icon {
 }
 
 .reportbuilder-filters-sidebar {
-  max-height: calc(100vh - 50px - 1rem);
+  max-height: 30rem;
   overflow-y: auto;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
   scrollbar-width: thin;
   scrollbar-color: #6a737b #fff;
+  background: linear-gradient(#fff 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), #fff 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center bottom;
+  background-repeat: no-repeat;
+  background-size: 100% 1rem, 100% 1rem, 100% calc(1rem / 2), 100% calc(1rem / 2);
+  background-attachment: local, local, scroll, scroll;
 }
 .reportbuilder-filters-sidebar::-webkit-scrollbar {
   width: 12px;
@@ -37748,21 +37753,23 @@ div.editor_atto_toolbar button .icon {
 .reportbuilder-filters-sidebar::-webkit-scrollbar-thumb:hover {
   background-color: #495057;
 }
-.reportbuilder-filters-sidebar .filter .filter-header {
-  font-size: 1.171875rem;
+.reportbuilder-filters-sidebar .filter:not(:nth-last-child(2)) {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
 }
-.reportbuilder-filters-sidebar .filter .filter-header .filter-name {
-  font-size: 0.9375rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding-right: 1rem;
-}
-.reportbuilder-filters-sidebar .filter .filter-header .filter-name:hover {
+.reportbuilder-filters-sidebar .filter .filter-name:hover {
   white-space: normal;
   text-overflow: clip;
   word-break: break-all;
 }
+.reportbuilder-filters-sidebar .form-group[data-groupname=buttonar] {
+  position: absolute;
+  bottom: 0;
+  height: 4rem;
+  align-items: center;
+}
+.reportbuilder-filters-sidebar .form-group[data-groupname=buttonar] .col-form-label {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
 
 .reportbuilder-filters-wrapper .mform.full-width-labels .fdate_selector,
 .reportbuilder-conditions-list .mform.full-width-labels .fdate_selector {