L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-77805 reportbuilder: Improve filter dropdown UI

Browse Source 
- 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
This commit is contained in:
Mikel Martín
2023-11-02 18:08:05 +01:00
parent e4d1369475
commit 136fa1ef0c
6 changed files with 77 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
reportbuilder/templates/local/filters/area.mustache
+2 -2
View File
@@ -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}}}
reportbuilder/templates/local/filters/header.mustache
+2 -2
View File
@@ -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>
theme/boost/scss/moodle/core.scss
+12
View File
@@ -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 {
theme/boost/scss/moodle/reportbuilder.scss
+23 -16
View File
@@ -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 */
}
}
}
theme/boost/style/moodle.css
+19 -12
View File
@@ -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 {
theme/classic/style/moodle.css
+19 -12
View File
@@ -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 {