From 112625d571a72711ce4679ad185b8f03f6cf5475 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mikel=20Mart=C3=ADn?= Date: Tue, 9 Apr 2024 12:28:57 +0200 Subject: [PATCH 1/2] MDL-81307 core_behat: Backport closing drawer steps Backport 'I close block drawer if open' and 'I keep block drawer closed' behat steps added in MDL-75762 for 4.3 onwards. --- lib/tests/behat/behat_navigation.php | 32 ++++++++++++++++++++++++++++ lib/upgrade.txt | 3 +++ 2 files changed, 35 insertions(+) diff --git a/lib/tests/behat/behat_navigation.php b/lib/tests/behat/behat_navigation.php index d48e00b4b66..f5b737d1279 100644 --- a/lib/tests/behat/behat_navigation.php +++ b/lib/tests/behat/behat_navigation.php @@ -1466,4 +1466,36 @@ class behat_navigation extends behat_base { throw new ExpectationException('The edit mode could not be turned off', $this->getSession()); } } + + /** + * Close the block drawer if it is open. + * + * This is necessary as in Behat the block drawer is open at each page load (disregarding user's settings) + * As the block drawer is positioned at the front of some contextual dialogs on the grade report for example. + * @Given I close block drawer if open + * @return void + */ + public function i_close_block_drawer_if_open() { + if ($this->running_javascript()) { + $xpath = "//button[contains(@data-action,'closedrawer')][contains(@data-placement,'left')]"; + $node = $this->getSession()->getPage()->find('xpath', $xpath); + if ($node && $node->isVisible()) { + $ishidden = $node->getAttribute('aria-hidden-tab-index'); + if (!$ishidden) { + $this->execute('behat_general::i_click_on', [$node, 'NodeElement']); + } + } + } + } + + /** + * I close the block drawer and keep it closed. + * + * @Given I keep block drawer closed + * @return void + */ + public function i_keep_block_drawer_closed() { + set_user_preference('behat_keep_drawer_closed', 1); + $this->i_close_block_drawer_if_open(); + } } diff --git a/lib/upgrade.txt b/lib/upgrade.txt index 5080744ea45..7a07804319d 100644 --- a/lib/upgrade.txt +++ b/lib/upgrade.txt @@ -5,6 +5,9 @@ information provided here is intended especially for developers. * The `html_writer::select_time` method has a `$timezone` parameter to use when formatting the time parameter * New Behat `heading` named selector to more easily assert the presence of H1-H6 elements on the page +* New behat behat_navigation::i_close_block_drawer_if_open() and behat_navigation::i_keep_block_drawer_closed() + to ensure in some test that the block drawer is closed. This helps with random failures due to the block drawer + being forced open in all behat tests. === 4.2.5 === From 7f186655759aa2ea86a56a81d4d96f03ed5707f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mikel=20Mart=C3=ADn?= Date: Tue, 26 Mar 2024 16:10:08 +0100 Subject: [PATCH 2/2] MDL-81307 core_courseformat: Add bulk styles for small devices --- .../local/content/bulkedittools.mustache | 12 ++++++------ course/format/tests/behat/bulk_select.feature | 13 +++++++++++++ theme/boost/scss/moodle/course.scss | 19 +++++++++++++++++++ theme/boost/scss/moodle/debug.scss | 2 +- theme/boost/style/moodle.css | 18 +++++++++++++++++- theme/classic/style/moodle.css | 18 +++++++++++++++++- 6 files changed, 73 insertions(+), 9 deletions(-) diff --git a/course/format/templates/local/content/bulkedittools.mustache b/course/format/templates/local/content/bulkedittools.mustache index a29f6dc4797..b2a3a8d29c2 100644 --- a/course/format/templates/local/content/bulkedittools.mustache +++ b/course/format/templates/local/content/bulkedittools.mustache @@ -35,7 +35,7 @@ } }} {{< core/sticky_footer }} - {{$ stickyclasses }} justify-content-between {{/ stickyclasses }} + {{$ stickyclasses }} justify-content-center bulkactions {{/ stickyclasses }} {{$ disable }} data-disable="true" {{/ disable }} {{$ extradata }} data-for="bulkedittools" {{/ extradata }} {{$ stickycontent }} @@ -45,7 +45,7 @@ {{#str}} selectall {{/str}} -
+
{{^hasactions}} {{#str}} nobulkaction, core_courseformat {{/str}} {{/hasactions}} @@ -60,8 +60,8 @@ data-for="bulkaction" {{#title}} title="{{title}}" {{/title}} > - {{#pix}}{{icon}}{{/pix}} - {{name}} + {{#pix}}{{icon}}{{/pix}} + {{name}} {{/actions}} @@ -69,7 +69,7 @@ {{/hasactions}}
-
+
-
+
{{#str}} bulkselection, core_courseformat, 0 {{/str}}
diff --git a/course/format/tests/behat/bulk_select.feature b/course/format/tests/behat/bulk_select.feature index d3efb82e6a4..d2157caad08 100644 --- a/course/format/tests/behat/bulk_select.feature +++ b/course/format/tests/behat/bulk_select.feature @@ -227,3 +227,16 @@ Feature: Bulk activity and section selection. When I click on "Select topic Topic 1" "checkbox" And I click on "Select topic Topic 2" "checkbox" Then I should see "2 selected" in the "sticky-footer" "region" + + Scenario: Bulk selection in small devices + Given I change the viewport size to "mobile" + And I close block drawer if open + When I click on "Bulk edit" "button" + Then I should not see "0 selected" in the "sticky-footer" "region" + And I should not see "Select all" in the "sticky-footer" "region" + And I should not see "Availability" in the "sticky-footer" "region" + And I should not see "Duplicate" in the "sticky-footer" "region" + And I should not see "Move" in the "sticky-footer" "region" + And I should not see "Delete" in the "sticky-footer" "region" + And I click on "Close bulk edit" "button" in the "sticky-footer" "region" + And "sticky-footer" "region" should not be visible diff --git a/theme/boost/scss/moodle/course.scss b/theme/boost/scss/moodle/course.scss index dfc189a8a19..2684adfc548 100644 --- a/theme/boost/scss/moodle/course.scss +++ b/theme/boost/scss/moodle/course.scss @@ -1633,3 +1633,22 @@ $activity-add-hover: theme-color-level('primary', -10) !default; margin-left: 2rem; } } + +// Custom styles for bulk actions sticky footer in small devices. +.stickyfooter.bulkactions { + @include media-breakpoint-down(sm) { + .form-check, + .bulkaction-name, + .bulkcount { + display: none; + } + .actions button { + padding: 0 map-get($spacers, 2); + } + .bulkcancel { + position: absolute; + top: 0; + right: 0; + } + } +} diff --git a/theme/boost/scss/moodle/debug.scss b/theme/boost/scss/moodle/debug.scss index cd9638ced0a..6f6497b7181 100644 --- a/theme/boost/scss/moodle/debug.scss +++ b/theme/boost/scss/moodle/debug.scss @@ -10,7 +10,7 @@ body.behat-site { // Sticky footer can overlap with elements so we keep it relative for behat. &.hasstickyfooter .stickyfooter, .stickyfooter { - position: inherit; + position: relative; z-index: inherit; } diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index 5a7b9288a18..e5d4f3e2bbc 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -29236,6 +29236,22 @@ span.editinstructions .alert-link { margin-left: 2rem; } } +@media (max-width: 767.98px) { + .stickyfooter.bulkactions .form-check, + .stickyfooter.bulkactions .bulkaction-name, + .stickyfooter.bulkactions .bulkcount { + display: none; + } + .stickyfooter.bulkactions .actions button { + padding: 0 0.5rem; + } + .stickyfooter.bulkactions .bulkcancel { + position: absolute; + top: 0; + right: 0; + } +} + /* Anchor link offset fix. This makes hash links scroll 60px down to account for the fixed header. */ :target { scroll-margin-top: 70px; @@ -35387,7 +35403,7 @@ body.behat-site .fixed-top { } body.behat-site.hasstickyfooter .stickyfooter, body.behat-site .stickyfooter { - position: inherit; + position: relative; z-index: inherit; } body.behat-site .dropdown-item { diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css index c47512de246..a2f28a377cc 100644 --- a/theme/classic/style/moodle.css +++ b/theme/classic/style/moodle.css @@ -29236,6 +29236,22 @@ span.editinstructions .alert-link { margin-left: 2rem; } } +@media (max-width: 767.98px) { + .stickyfooter.bulkactions .form-check, + .stickyfooter.bulkactions .bulkaction-name, + .stickyfooter.bulkactions .bulkcount { + display: none; + } + .stickyfooter.bulkactions .actions button { + padding: 0 0.5rem; + } + .stickyfooter.bulkactions .bulkcancel { + position: absolute; + top: 0; + right: 0; + } +} + /* Anchor link offset fix. This makes hash links scroll 60px down to account for the fixed header. */ :target { scroll-margin-top: 60px; @@ -35321,7 +35337,7 @@ body.behat-site .fixed-top { } body.behat-site.hasstickyfooter .stickyfooter, body.behat-site .stickyfooter { - position: inherit; + position: relative; z-index: inherit; } body.behat-site .dropdown-item {