MDL-67663 mod_forum: Fix focus order of the grading form
authorJun Pataleta <jun@moodle.com>
Tue, 10 Mar 2020 04:49:07 +0000 (12:49 +0800)
committerJun Pataleta <jun@moodle.com>
Thu, 9 Apr 2020 09:50:08 +0000 (17:50 +0800)
* Focus should flow from the form header down to the forum posts, and
then to the grading panel itself.

12 files changed:
mod/forum/amd/build/local/grades/grader.min.js
mod/forum/amd/build/local/grades/grader.min.js.map
mod/forum/amd/build/local/grades/local/grader/selectors.min.js
mod/forum/amd/build/local/grades/local/grader/selectors.min.js.map
mod/forum/amd/src/local/grades/grader.js
mod/forum/amd/src/local/grades/local/grader/selectors.js
mod/forum/templates/local/grades/grader.mustache
mod/forum/templates/local/grades/local/grader/content.mustache
mod/forum/templates/local/grades/local/grader/grading.mustache
theme/boost/scss/moodle/modules.scss
theme/boost/style/moodle.css
theme/classic/style/moodle.css

index 42f26d6..c72ef09 100644 (file)
Binary files a/mod/forum/amd/build/local/grades/grader.min.js and b/mod/forum/amd/build/local/grades/grader.min.js differ
index 76138fc..06ac4ef 100644 (file)
Binary files a/mod/forum/amd/build/local/grades/grader.min.js.map and b/mod/forum/amd/build/local/grades/grader.min.js.map differ
index fee7890..6999237 100644 (file)
Binary files a/mod/forum/amd/build/local/grades/local/grader/selectors.min.js and b/mod/forum/amd/build/local/grades/local/grader/selectors.min.js differ
index bcd975c..18a5b88 100644 (file)
Binary files a/mod/forum/amd/build/local/grades/local/grader/selectors.min.js.map and b/mod/forum/amd/build/local/grades/local/grader/selectors.min.js.map differ
index 6302914..6cb345f 100644 (file)
@@ -35,6 +35,8 @@ import {debounce} from 'core/utils';
 import {fillInitialValues} from 'core_grades/grades/grader/gradingpanel/comparison';
 import * as Modal from 'core/modal_factory';
 import * as ModalEvents from 'core/modal_events';
+import {subscribe} from 'core/pubsub';
+import DrawerEvents from 'core/drawer_events';
 
 const templateNames = {
     grader: {
@@ -278,6 +280,35 @@ const registerEventListeners = (graderLayout, userPicker, saveGradeFunction, use
         const users = searchForUsers(userList, searchInput.value);
         renderSearchResults(searchResultsContainer, users);
     }, 300));
+
+    // Remove the right margin of the content container when the grading panel is hidden so that it expands to full-width.
+    subscribe(DrawerEvents.DRAWER_HIDDEN, (drawerRoot) => {
+        const gradingPanel = drawerRoot[0];
+        if (gradingPanel.querySelector(Selectors.regions.gradingPanel)) {
+            setContentContainerMargin(graderContainer, 0);
+        }
+    });
+
+    // Bring back the right margin of the content container when the grading panel is shown to give space for the grading panel.
+    subscribe(DrawerEvents.DRAWER_SHOWN, (drawerRoot) => {
+        const gradingPanel = drawerRoot[0];
+        if (gradingPanel.querySelector(Selectors.regions.gradingPanel)) {
+            setContentContainerMargin(graderContainer, gradingPanel.offsetWidth);
+        }
+    });
+};
+
+/**
+ * Adjusts the right margin of the content container.
+ *
+ * @param {HTMLElement} graderContainer The container for the grader app.
+ * @param {Number} rightMargin The right margin value.
+ */
+const setContentContainerMargin = (graderContainer, rightMargin) => {
+    const contentContainer = graderContainer.querySelector(Selectors.regions.moduleContainer);
+    if (contentContainer) {
+        contentContainer.style.marginRight = `${rightMargin}px`;
+    }
 };
 
 /**
index b2bd51f..e98a2a9 100644 (file)
@@ -42,6 +42,7 @@ export default {
     },
     regions: {
         bodyContainer: getDataSelector('region', 'body-container'),
+        moduleContainer: getDataSelector('region', 'module_content_container'),
         moduleReplace: getDataSelector('region', 'module_content'),
         pickerRegion: getDataSelector('region', 'user_picker'),
         gradingPanel: getDataSelector('region', 'grade'),
index 7f81561..2eef2d4 100644 (file)
@@ -44,8 +44,8 @@
     {{> mod_forum/local/grades/local/grader/navigation }}
 
     <div class="d-flex flex-grow-1 h-100 position-relative">
-        {{#drawer}}{{> mod_forum/local/grades/local/grader/grading }}{{/drawer}}
         {{> mod_forum/local/grades/local/grader/content }}
+        {{#drawer}}{{> mod_forum/local/grades/local/grader/grading }}{{/drawer}}
     </div>
 </div>
 {{#js}}
index 6f24231..665399e 100644 (file)
@@ -30,7 +30,7 @@
     {
     }
 }}
-<div class="grader-module-content w-100 h-100">
+<div class="grader-module-content w-100 h-100" data-region="module_content_container">
     <div data-region="module_content" class="grader-module-content-display">
         {{> mod_forum/local/grades/local/grader/module_content_placeholder }}
     </div>
index 706c74a..0e6030f 100644 (file)
         <div class="h-100 w-100 bg-white d-flex flex-column">
             <div class="flex-shrink-0 d-flex flex-column">
                 <div class="header-container bg-light">
+                    <div class="info-container d-flex align-items-center">
+                        <button
+                            class="btn btn-icon icon-size-3 icon-no-margin colour-inherit"
+                            data-action="collapse-grading-drawer"
+                            aria-controls="grading-drawer-{{uniqid}}"
+                            aria-expanded="true"
+                            title="{{#str}} closebuttontitle, core {{/str}}"
+                        >
+                            <span class="dir-ltr-hide">{{#pix}} t/left, core {{/pix}}</span>
+                            <span class="dir-rtl-hide">{{#pix}} t/right, core {{/pix}}</span>
+                        </button>
+                        <div class="ml-auto mr-auto text-center" data-region="status-container">
+                            {{> mod_forum/local/grades/local/grader/status_placeholder }}
+                        </div>
+                    </div>
                     <div
                         id="searchbox-{{uniqid}}"
                         class="user-search-container d-flex flex-grow-1 align-items-center collapsed"
                             </button>
                         </div>
                     </div>
-                    <div class="info-container d-flex align-items-center">
-                        <button
-                            class="btn btn-icon icon-size-3 icon-no-margin colour-inherit"
-                            data-action="collapse-grading-drawer"
-                            aria-controls="grading-drawer-{{uniqid}}"
-                            aria-expanded="true"
-                            title="{{#str}} closebuttontitle, core {{/str}}"
-                        >
-                            <span class="dir-ltr-hide">{{#pix}} t/left, core {{/pix}}</span>
-                            <span class="dir-rtl-hide">{{#pix}} t/right, core {{/pix}}</span>
-                        </button>
-                        <div class="ml-auto mr-auto text-center" data-region="status-container">
-                            {{> mod_forum/local/grades/local/grader/status_placeholder }}
-                        </div>
-                    </div>
                 </div>
                 <div class="border-bottom px-3 pt-2" data-region="user_picker">
                     {{> mod_forum/local/grades/local/grader/user_picker_placeholder }}
index 55c0802..f961a82 100644 (file)
@@ -717,10 +717,6 @@ $grading-content-show-content-button-padding-left: calc(#{map-get($spacers, 2) *
         @include transition(margin-right .2s ease-in-out);
     }
 
-    .grader-grading-panel.hidden + .grader-module-content {
-        margin-right: 0;
-    }
-
     .drawer-button {
         position: relative;
 
index fc53575..668c815 100644 (file)
@@ -16494,9 +16494,6 @@ select {
     .path-mod-forum .unified-grader .grader-module-content {
       transition: none; } }
 
-.path-mod-forum .unified-grader .grader-grading-panel.hidden + .grader-module-content {
-  margin-right: 0; }
-
 .path-mod-forum .unified-grader .drawer-button {
   position: relative; }
   .path-mod-forum .unified-grader .drawer-button.active::after {
index a360666..cd721e2 100644 (file)
@@ -16720,9 +16720,6 @@ select {
     .path-mod-forum .unified-grader .grader-module-content {
       transition: none; } }
 
-.path-mod-forum .unified-grader .grader-grading-panel.hidden + .grader-module-content {
-  margin-right: 0; }
-
 .path-mod-forum .unified-grader .drawer-button {
   position: relative; }
   .path-mod-forum .unified-grader .drawer-button.active::after {