From 459c2d909d869727c3fbdcd6044024909af53219 Mon Sep 17 00:00:00 2001 From: Damyon Wiese Date: Wed, 25 Jul 2018 10:28:54 +0800 Subject: [PATCH 1/2] MDL-62884 privacy: Fix styles An action menu displayed inside a table needs to be tested on every theme. It is required to ensure that the menu displays correctly, even when it would display outside the scrollable region for the table. --- admin/tool/dataprivacy/classes/output/data_requests_table.php | 1 + admin/tool/dataprivacy/styles.css | 4 ++++ lib/outputcomponents.php | 3 +++ 3 files changed, 8 insertions(+) diff --git a/admin/tool/dataprivacy/classes/output/data_requests_table.php b/admin/tool/dataprivacy/classes/output/data_requests_table.php index d8b0644a0db..e0ec183a46e 100644 --- a/admin/tool/dataprivacy/classes/output/data_requests_table.php +++ b/admin/tool/dataprivacy/classes/output/data_requests_table.php @@ -212,6 +212,7 @@ class data_requests_table extends table_sql { $actionsmenu->set_menu_trigger(get_string('actions')); $actionsmenu->set_owner_selector('request-actions-' . $requestid); $actionsmenu->set_alignment(\action_menu::TL, \action_menu::BL); + $actionsmenu->set_constraint('[data-region=data-requests-table] > .no-overflow'); return $OUTPUT->render($actionsmenu); } diff --git a/admin/tool/dataprivacy/styles.css b/admin/tool/dataprivacy/styles.css index a3510528a4e..e6ddf934b25 100644 --- a/admin/tool/dataprivacy/styles.css +++ b/admin/tool/dataprivacy/styles.css @@ -24,3 +24,7 @@ dd a.contactdpo { /* Reverting dd's left margin */ margin-left: inherit; } + +[data-region="data-requests-table"] .moodle-actionmenu { + min-width: 150px; +} diff --git a/lib/outputcomponents.php b/lib/outputcomponents.php index db773a63e25..4e17d443c29 100644 --- a/lib/outputcomponents.php +++ b/lib/outputcomponents.php @@ -4383,6 +4383,9 @@ class action_menu implements renderable, templatable { * The constraint is applied when the dialogue is shown and limits the display of the dialogue to within the * element the constraint identifies. * + * This is required whenever the action menu is displayed inside any CSS element with the .no-overflow class + * (flexible_table and any of it's child classes are a likely candidate). + * * @param string $ancestorselector A snippet of CSS used to identify the ancestor to contrain the dialogue to. */ public function set_constraint($ancestorselector) { From a3124b15dc18bbf68d87999ba25b4ee69e715cb8 Mon Sep 17 00:00:00 2001 From: Damyon Wiese Date: Fri, 17 Aug 2018 14:21:49 +0800 Subject: [PATCH 2/2] MDL-62884 privacy: Additional fix for popper.js For a table with action menus inside a scrollable region, we need to ensure the table is at least big enough. --- theme/boost/scss/moodle/core.scss | 2 ++ theme/boost/style/moodle.css | 3 ++- theme/bootstrapbase/less/moodle/core.less | 2 ++ theme/bootstrapbase/style/moodle.css | 1 + 4 files changed, 7 insertions(+), 1 deletion(-) diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss index 53e5411f775..42dee5d4dd0 100644 --- a/theme/boost/scss/moodle/core.scss +++ b/theme/boost/scss/moodle/core.scss @@ -286,8 +286,10 @@ form.popupform div { overflow: auto; } +// Minimum height required for a menu in a table inside a scrollable div. .no-overflow > .generaltable { margin-bottom: 0; + min-height: 10em; } // Accessibility features diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index 75d8bfaff8e..c5bc71629f7 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -8999,7 +8999,8 @@ form.popupform div { overflow: auto; } .no-overflow > .generaltable { - margin-bottom: 0; } + margin-bottom: 0; + min-height: 10em; } .accesshide { position: absolute; diff --git a/theme/bootstrapbase/less/moodle/core.less b/theme/bootstrapbase/less/moodle/core.less index ed6680bce35..dea8b817706 100644 --- a/theme/bootstrapbase/less/moodle/core.less +++ b/theme/bootstrapbase/less/moodle/core.less @@ -374,8 +374,10 @@ form.popupform div { .pagelayout-report .no-overflow { overflow: visible; } +// Minimum height required for a menu in a table inside a scrollable div. .no-overflow > .generaltable { margin-bottom: 0; + min-height: 10em; } // Accessibility features diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css index c5a4a99cf93..0412634475f 100644 --- a/theme/bootstrapbase/style/moodle.css +++ b/theme/bootstrapbase/style/moodle.css @@ -2676,6 +2676,7 @@ form.popupform div { } .no-overflow > .generaltable { margin-bottom: 0; + min-height: 10em; } .accesshide { position: absolute;