MDL-72776 theme_boost: new editing progress effect

course/amd/src/actions.js

@@ -201,7 +201,13 @@ define(
          * @returns {Node}
          */
         var addSectionLightbox = function(sectionelement) {
-            var lightbox = M.util.add_lightbox(Y, Y.Node(sectionelement.get(0)));
+            const item = sectionelement.get(0);
+            var lightbox = M.util.add_lightbox(Y, Y.Node(item));
+            if (item.dataset.for == 'section' && item.dataset.id) {
+                courseeditor.dispatch('sectionLock', [item.dataset.id], true);
+                lightbox.setAttribute('data-state', 'section');
+                lightbox.setAttribute('data-state-id', item.dataset.id);
+            }
             lightbox.show();
             return lightbox;
         };
@@ -237,6 +243,14 @@ define(
             if (lightbox) {
                 window.setTimeout(function() {
                     lightbox.hide();
+                    // Unlock state if necessary.
+                    if (lightbox.getAttribute('data-state')) {
+                        courseeditor.dispatch(
+                            `${lightbox.getAttribute('data-state')}Lock`,
+                            [lightbox.getAttribute('data-state-id')],
+                            false
+                        );
+                    }
                 }, delay);
             }
         };
@@ -776,18 +790,13 @@ define(
                     return;
                 }
 
-                // Send the element is locked. Reactive events are only triggered when the state
-                // read only mode is restored. We want to notify the interface the element is
-                // locked so we need to do a quick lock operation before performing the rest
-                // of the mutation.
-                statemanager.setReadOnly(false);
-                cm.locked = true;
-                statemanager.setReadOnly(true);
+                // Send the element is locked.
+                courseeditor.dispatch('cmLock', [cm.id], true);
 
                 // Now we do the real mutation.
                 statemanager.setReadOnly(false);
 
-                // This locked will take effect when the read only is restored.
+                // This unlocked will take effect when the read only is restored.
                 cm.locked = false;
 
                 switch (action) {

course/format/amd/src/local/content/section.js

@@ -82,12 +82,12 @@ export default class extends DndSection {
     }
 
     /**
-    * Validate if the drop data can be dropped over the component.
-    *
-    * @param {Object} dropdata the exported drop data.
-    * @returns {boolean}
-    */
-   validateDropData(dropdata) {
+     * Validate if the drop data can be dropped over the component.
+     *
+     * @param {Object} dropdata the exported drop data.
+     * @returns {boolean}
+     */
+    validateDropData(dropdata) {
         // If the format uses one section per page sections dropping in the content is ignored.
        if (dropdata?.type === 'section' && this.reactive.sectionReturn != 0) {
             return false;

lib/amd/src/local/reactive/basecomponent.js

@@ -466,6 +466,7 @@ export default class {
             if (target.hasAttribute('draggable')) {
                 target.setAttribute('draggable', false);
             }
+            target.setAttribute('aria-busy', true);
         } else {
             // Enable interactions.
             target.style.pointerEvents = null;
@@ -474,6 +475,7 @@ export default class {
             if (target.hasAttribute('draggable')) {
                 target.setAttribute('draggable', true);
             }
+            target.setAttribute('aria-busy', false);
         }
     }
 

theme/boost/scss/moodle/course.scss

 /* course.less */
 
-$course-editinprogress-bg: $gray-100 !default;
-
 /* COURSE CONTENT */
 
 .section_add_menus {
@@ -189,24 +187,59 @@ body:not(.editing)  .sitetopic ul.section {
             }
         }
     }
+    // Remove old spinners if the reactive state is ready.
+    .course-content .stateready .section .spinner {
+        display: none;
+    }
+    // New editing in progress spinners.
     .editinprogress {
-        opacity: .7;
-        animation: editinprogress-pulse 2s infinite linear;
+        position: relative;
+
+        & > * {
+            opacity: .4;
+        }
+
+        .corelightbox,
+        .lightbox {
+            display: none;
+        }
+
+        &:after {
+            position: absolute;
+            font-family: "FontAwesome";
+            font-size: 20px;
+            color: $gray-600;
+            content: "";
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 30px;
+            height: 30px;
+            left: calc(50% - 15px);
+            top: calc(50% - 15px);
+            animation: editinprogress-rotation 2s infinite linear;
+        }
+
+        // Prevent inner editingprogress.
+        .editinprogress {
+            &:after {
+                display: none;
+            }
+        }
     }
 }
 
-@keyframes editinprogress-pulse {
+@keyframes editinprogress-rotation {
     0% {
-        background-color: $course-editinprogress-bg;
-        filter: grayscale(60%);
+        opacity: 0;
+        transform: rotate(0deg);
     }
     50% {
-        background-color: darken($course-editinprogress-bg, 5%);
-        filter: grayscale(40%);
+        opacity: 1;
     }
     100% {
-        background-color: $course-editinprogress-bg;
-        filter: grayscale(60%);
+        opacity: 0;
+        transform: rotate(359deg);
     }
 }
 

theme/boost/style/moodle.css

@@ -13774,20 +13774,42 @@ body:not(.editing) .sitetopic ul.section {
                  */
   padding-left: 2rem; }
+.editing .course-content .stateready .section .spinner {
+  display: none; }
+
 .editing .editinprogress {
-  opacity: .7;
-  animation: editinprogress-pulse 2s infinite linear; }
-@keyframes editinprogress-pulse {
+  position: relative; }
+  .editing .editinprogress > * {
+    opacity: .4; }
+  .editing .editinprogress .corelightbox,
+  .editing .editinprogress .lightbox {
+    display: none; }
+  .editing .editinprogress:after {
+    position: absolute;
+    font-family: "FontAwesome";
+    font-size: 20px;
+    color: #6a737b;
+    content: "";
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 30px;
+    height: 30px;
+    left: calc(50% - 15px);
+    top: calc(50% - 15px);
+    animation: editinprogress-rotation 2s infinite linear; }
+  .editing .editinprogress .editinprogress:after {
+    display: none; }
+@keyframes editinprogress-rotation {
   0% {
-    background-color: #f8f9fa;
-    filter: grayscale(60%); }
+    opacity: 0;
+    transform: rotate(0deg); }
   50% {
-    background-color: #e9ecef;
-    filter: grayscale(40%); }
+    opacity: 1; }
   100% {
-    background-color: #f8f9fa;
-    filter: grayscale(60%); } }
+    opacity: 0;
+    transform: rotate(359deg); } }
 .editing_show + .editing_assign,
 .editing_hide + .editing_assign {

theme/classic/style/moodle.css

@@ -13774,20 +13774,42 @@ body:not(.editing) .sitetopic ul.section {
                  */
   padding-left: 2rem; }
+.editing .course-content .stateready .section .spinner {
+  display: none; }
+
 .editing .editinprogress {
-  opacity: .7;
-  animation: editinprogress-pulse 2s infinite linear; }
-@keyframes editinprogress-pulse {
+  position: relative; }
+  .editing .editinprogress > * {
+    opacity: .4; }
+  .editing .editinprogress .corelightbox,
+  .editing .editinprogress .lightbox {
+    display: none; }
+  .editing .editinprogress:after {
+    position: absolute;
+    font-family: "FontAwesome";
+    font-size: 20px;
+    color: #6a737b;
+    content: "";
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 30px;
+    height: 30px;
+    left: calc(50% - 15px);
+    top: calc(50% - 15px);
+    animation: editinprogress-rotation 2s infinite linear; }
+  .editing .editinprogress .editinprogress:after {
+    display: none; }
+@keyframes editinprogress-rotation {
   0% {
-    background-color: #f8f9fa;
-    filter: grayscale(60%); }
+    opacity: 0;
+    transform: rotate(0deg); }
   50% {
-    background-color: #e9ecef;
-    filter: grayscale(40%); }
+    opacity: 1; }
   100% {
-    background-color: #f8f9fa;
-    filter: grayscale(60%); } }
+    opacity: 0;
+    transform: rotate(359deg); } }
 .editing_show + .editing_assign,
 .editing_hide + .editing_assign {