Merge branch 'MDL-84897-main' of https://github.com/ferranrecio/moodle

lib/amd/build/local/process_monitor/monitor.min.js

@@ -6,6 +6,6 @@ define("core/local/process_monitor/monitor",["exports","core/templates","core/re
    * @class      core/local/process_monitor/monitor
    * @copyright  2022 Ferran Recio <ferran@moodle.com>
    * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
-   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_templates=(obj=_templates)&&obj.__esModule?obj:{default:obj};class _default extends _reactive.BaseComponent{create(){this.name="process_monitor",this.selectors={QUEUELIST:'[data-for="process-list"]',CLOSE:'[data-action="hide"]'},this.classes={HIDE:"d-none"}}static init(query,selectors){return new this({element:document.querySelector(query),reactive:_manager.manager,selectors:selectors})}stateReady(state){this._updateMonitor({state:state,element:state.display}),this.addEventListener(this.getElement(this.selectors.CLOSE),"click",this._closeMonitor),state.queue.forEach((element=>{this._createListItem({state:state,element:element})}))}getWatchers(){return[{watch:"queue:created",handler:this._createListItem},{watch:"display:updated",handler:this._updateMonitor}]}async _createListItem(_ref){let{element:element}=_ref;const{html:html,js:js}=await _templates.default.renderForPromise("core/local/process_monitor/process",{...element}),target=this.getElement(this.selectors.QUEUELIST);_templates.default.appendNodeContents(target,html,js)}_updateMonitor(_ref2){let{element:element}=_ref2;this.element.classList.toggle(this.classes.HIDE,!0!==element.show)}_closeMonitor(){this.reactive.dispatch("setShow",!1)}}return _exports.default=_default,_exports.default}));
+   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_templates=(obj=_templates)&&obj.__esModule?obj:{default:obj};class _default extends _reactive.BaseComponent{create(){this.name="process_monitor",this.selectors={QUEUELIST:'[data-for="process-list"]',CLOSE:'[data-action="hide"]'},this.classes={SHOW:"show"}}static init(query,selectors){return new this({element:document.querySelector(query),reactive:_manager.manager,selectors:selectors})}stateReady(state){this._updateMonitor({state:state,element:state.display}),this.addEventListener(this.getElement(this.selectors.CLOSE),"click",this._closeMonitor),state.queue.forEach((element=>{this._createListItem({state:state,element:element})}))}getWatchers(){return[{watch:"queue:created",handler:this._createListItem},{watch:"display:updated",handler:this._updateMonitor}]}async _createListItem(_ref){let{element:element}=_ref;const{html:html,js:js}=await _templates.default.renderForPromise("core/local/process_monitor/process",{...element}),target=this.getElement(this.selectors.QUEUELIST);_templates.default.appendNodeContents(target,html,js)}_updateMonitor(_ref2){let{element:element}=_ref2;this.element.classList.toggle(this.classes.SHOW,!0===element.show)}_closeMonitor(){this.reactive.dispatch("setShow",!1)}}return _exports.default=_default,_exports.default}));
 
 //# sourceMappingURL=monitor.min.js.map

lib/amd/src/local/process_monitor/monitor.js

@@ -41,7 +41,7 @@ export default class extends BaseComponent {
         };
         // Default classes to toggle on refresh.
         this.classes = {
-            HIDE: `d-none`,
+            SHOW: 'show',
         };
     }
 
@@ -108,7 +108,7 @@ export default class extends BaseComponent {
      * @param {object} args.element the display state data
      */
     _updateMonitor({element}) {
-        this.element.classList.toggle(this.classes.HIDE, element.show !== true);
+        this.element.classList.toggle(this.classes.SHOW, element.show === true);
     }
 
     /**

lib/templates/local/process_monitor/monitor.mustache

@@ -32,21 +32,23 @@
 }}
 <div
     id="process-monitor-{{uniqid}}"
-    class="popover-process-monitor d-none shadow"
+    class="popover-process-monitor modal shadow"
 >
-    <div class="modal-header " data-region="header">
-        <h5 class="modal-title" data-region="title">
-            {{#title}} {{title}} {{/title}}
-            {{^title}} {{#str}} progress, core {{/str}} {{/title}}
-        </h5>
-        <button
-            type="button"
-            class="btn-close"
-            data-action="hide"
-            aria-label="{{#str}}closebuttontitle, core{{/str}}"
-        ></button>
+    <div class="modal-content">
+        <div class="modal-header " data-region="header">
+            <h5 class="modal-title" data-region="title">
+                {{#title}} {{title}} {{/title}}
+                {{^title}} {{#str}} progress, core {{/str}} {{/title}}
+            </h5>
+            <button
+                type="button"
+                class="btn-close"
+                data-action="hide"
+                aria-label="{{#str}}closebuttontitle, core{{/str}}"
+            ></button>
+        </div>
+        <div data-for="process-list" class="process-list modal-body"></div>
     </div>
-    <div data-for="process-list" class="process-list"></div>
 </div>
 {{#js}}
 require(['core/local/process_monitor/monitor'], function(component) {

theme/boost/scss/moodle/process-monitor.scss

@@ -9,10 +9,10 @@ $popover-process-monitor-scroll-bg: $gray-100 !default;
     position: fixed;
     right: $popover-process-monitor-right;
     bottom: $popover-process-monitor-bottom;
+    left: initial;
+    top: initial;
     width: $popover-process-monitor-width;
-    background-color: $white;
-    @include border-radius();
-    border: $border-width solid $border-color;
+    height: auto;
 
     .process-list {
         max-height: $popover-process-monitor-max-height;

theme/boost/style/moodle.css

@@ -40681,10 +40681,10 @@ div.editor_atto_toolbar button .icon {
   position: fixed;
   right: 2rem;
   bottom: 5rem;
+  left: initial;
+  top: initial;
   width: 350px;
-  background-color: #fff;
-  border-radius: 0.5rem;
-  border: 1px solid #dee2e6;
+  height: auto;
 }
 .popover-process-monitor .process-list {
   max-height: 30vh;

theme/classic/style/moodle.css

@@ -40615,10 +40615,10 @@ div.editor_atto_toolbar button .icon {
   position: fixed;
   right: 2rem;
   bottom: 5rem;
+  left: initial;
+  top: initial;
   width: 350px;
-  background-color: #fff;
-  border-radius: 0.375rem;
-  border: 1px solid #dee2e6;
+  height: auto;
 }
 .popover-process-monitor .process-list {
   max-height: 30vh;