From c72f27fdefbb0d65b4b7f9127ce06938528ccfb0 Mon Sep 17 00:00:00 2001 From: ferran Date: Mon, 17 Mar 2025 13:09:51 +0100 Subject: [PATCH] MDL-84897 course: fix process monitor in Bootstrap 5 --- .../local/process_monitor/monitor.min.js | 2 +- .../local/process_monitor/monitor.min.js.map | 2 +- lib/amd/src/local/process_monitor/monitor.js | 4 +-- .../local/process_monitor/monitor.mustache | 28 ++++++++++--------- theme/boost/scss/moodle/process-monitor.scss | 6 ++-- theme/boost/style/moodle.css | 6 ++-- theme/classic/style/moodle.css | 6 ++-- 7 files changed, 28 insertions(+), 26 deletions(-) diff --git a/lib/amd/build/local/process_monitor/monitor.min.js b/lib/amd/build/local/process_monitor/monitor.min.js index 97fca51de16..89d3d0e82e1 100644 --- a/lib/amd/build/local/process_monitor/monitor.min.js +++ b/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 * @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 \ No newline at end of file diff --git a/lib/amd/build/local/process_monitor/monitor.min.js.map b/lib/amd/build/local/process_monitor/monitor.min.js.map index 32a60c76ff3..2e39010c86b 100644 --- a/lib/amd/build/local/process_monitor/monitor.min.js.map +++ b/lib/amd/build/local/process_monitor/monitor.min.js.map @@ -1 +1 @@ -{"version":3,"file":"monitor.min.js","sources":["../../../src/local/process_monitor/monitor.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see .\n\n/**\n * The file upload monitor component.\n *\n * @module core/local/process_monitor/monitor\n * @class core/local/process_monitor/monitor\n * @copyright 2022 Ferran Recio \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport Templates from 'core/templates';\nimport {BaseComponent} from 'core/reactive';\nimport {manager} from 'core/local/process_monitor/manager';\n\nexport default class extends BaseComponent {\n\n /**\n * Constructor hook.\n */\n create() {\n // Optional component name for debugging.\n this.name = 'process_monitor';\n // Default query selectors.\n this.selectors = {\n QUEUELIST: `[data-for=\"process-list\"]`,\n CLOSE: `[data-action=\"hide\"]`,\n };\n // Default classes to toggle on refresh.\n this.classes = {\n HIDE: `d-none`,\n };\n }\n\n /**\n * Static method to create a component instance form the mustache template.\n *\n * @param {string} query the DOM main element query selector\n * @param {object} selectors optional css selector overrides\n * @return {this}\n */\n static init(query, selectors) {\n return new this({\n element: document.querySelector(query),\n reactive: manager,\n selectors,\n });\n }\n\n /**\n * Initial state ready method.\n *\n * @param {Object} state the initial state\n */\n stateReady(state) {\n this._updateMonitor({state, element: state.display});\n this.addEventListener(this.getElement(this.selectors.CLOSE), 'click', this._closeMonitor);\n state.queue.forEach((element) => {\n this._createListItem({state, element});\n });\n }\n\n /**\n * Return the component watchers.\n *\n * @returns {Array} of watchers\n */\n getWatchers() {\n return [\n // State changes that require to reload some course modules.\n {watch: `queue:created`, handler: this._createListItem},\n {watch: `display:updated`, handler: this._updateMonitor},\n ];\n }\n\n /**\n * Create a monitor item.\n *\n * @param {object} args the watcher arguments\n * @param {object} args.element the item state data\n */\n async _createListItem({element}) {\n const {html, js} = await Templates.renderForPromise(\n 'core/local/process_monitor/process',\n {...element}\n );\n const target = this.getElement(this.selectors.QUEUELIST);\n Templates.appendNodeContents(target, html, js);\n }\n\n /**\n * Create a monitor item.\n *\n * @param {object} args the watcher arguments\n * @param {object} args.element the display state data\n */\n _updateMonitor({element}) {\n this.element.classList.toggle(this.classes.HIDE, element.show !== true);\n }\n\n /**\n * Close the monitor.\n */\n _closeMonitor() {\n this.reactive.dispatch('setShow', false);\n }\n}\n"],"names":["BaseComponent","create","name","selectors","QUEUELIST","CLOSE","classes","HIDE","query","this","element","document","querySelector","reactive","manager","stateReady","state","_updateMonitor","display","addEventListener","getElement","_closeMonitor","queue","forEach","_createListItem","getWatchers","watch","handler","html","js","Templates","renderForPromise","target","appendNodeContents","classList","toggle","show","dispatch"],"mappings":";;;;;;;;0KA4B6BA,wBAKzBC,cAESC,KAAO,uBAEPC,UAAY,CACbC,sCACAC,mCAGCC,QAAU,CACXC,2BAWIC,MAAOL,kBACR,IAAIM,KAAK,CACZC,QAASC,SAASC,cAAcJ,OAChCK,SAAUC,iBACVX,UAAAA,YASRY,WAAWC,YACFC,eAAe,CAACD,MAAAA,MAAON,QAASM,MAAME,eACtCC,iBAAiBV,KAAKW,WAAWX,KAAKN,UAAUE,OAAQ,QAASI,KAAKY,eAC3EL,MAAMM,MAAMC,SAASb,eACZc,gBAAgB,CAACR,MAAAA,MAAON,QAAAA,aASrCe,oBACW,CAEH,CAACC,sBAAwBC,QAASlB,KAAKe,iBACvC,CAACE,wBAA0BC,QAASlB,KAAKQ,iDAU3BP,QAACA,oBACbkB,KAACA,KAADC,GAAOA,UAAYC,mBAAUC,iBAC/B,qCACA,IAAIrB,UAEFsB,OAASvB,KAAKW,WAAWX,KAAKN,UAAUC,8BACpC6B,mBAAmBD,OAAQJ,KAAMC,IAS/CZ,0BAAeP,QAACA,oBACPA,QAAQwB,UAAUC,OAAO1B,KAAKH,QAAQC,MAAuB,IAAjBG,QAAQ0B,MAM7Df,qBACSR,SAASwB,SAAS,WAAW"} \ No newline at end of file +{"version":3,"file":"monitor.min.js","sources":["../../../src/local/process_monitor/monitor.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see .\n\n/**\n * The file upload monitor component.\n *\n * @module core/local/process_monitor/monitor\n * @class core/local/process_monitor/monitor\n * @copyright 2022 Ferran Recio \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport Templates from 'core/templates';\nimport {BaseComponent} from 'core/reactive';\nimport {manager} from 'core/local/process_monitor/manager';\n\nexport default class extends BaseComponent {\n\n /**\n * Constructor hook.\n */\n create() {\n // Optional component name for debugging.\n this.name = 'process_monitor';\n // Default query selectors.\n this.selectors = {\n QUEUELIST: `[data-for=\"process-list\"]`,\n CLOSE: `[data-action=\"hide\"]`,\n };\n // Default classes to toggle on refresh.\n this.classes = {\n SHOW: 'show',\n };\n }\n\n /**\n * Static method to create a component instance form the mustache template.\n *\n * @param {string} query the DOM main element query selector\n * @param {object} selectors optional css selector overrides\n * @return {this}\n */\n static init(query, selectors) {\n return new this({\n element: document.querySelector(query),\n reactive: manager,\n selectors,\n });\n }\n\n /**\n * Initial state ready method.\n *\n * @param {Object} state the initial state\n */\n stateReady(state) {\n this._updateMonitor({state, element: state.display});\n this.addEventListener(this.getElement(this.selectors.CLOSE), 'click', this._closeMonitor);\n state.queue.forEach((element) => {\n this._createListItem({state, element});\n });\n }\n\n /**\n * Return the component watchers.\n *\n * @returns {Array} of watchers\n */\n getWatchers() {\n return [\n // State changes that require to reload some course modules.\n {watch: `queue:created`, handler: this._createListItem},\n {watch: `display:updated`, handler: this._updateMonitor},\n ];\n }\n\n /**\n * Create a monitor item.\n *\n * @param {object} args the watcher arguments\n * @param {object} args.element the item state data\n */\n async _createListItem({element}) {\n const {html, js} = await Templates.renderForPromise(\n 'core/local/process_monitor/process',\n {...element}\n );\n const target = this.getElement(this.selectors.QUEUELIST);\n Templates.appendNodeContents(target, html, js);\n }\n\n /**\n * Create a monitor item.\n *\n * @param {object} args the watcher arguments\n * @param {object} args.element the display state data\n */\n _updateMonitor({element}) {\n this.element.classList.toggle(this.classes.SHOW, element.show === true);\n }\n\n /**\n * Close the monitor.\n */\n _closeMonitor() {\n this.reactive.dispatch('setShow', false);\n }\n}\n"],"names":["BaseComponent","create","name","selectors","QUEUELIST","CLOSE","classes","SHOW","query","this","element","document","querySelector","reactive","manager","stateReady","state","_updateMonitor","display","addEventListener","getElement","_closeMonitor","queue","forEach","_createListItem","getWatchers","watch","handler","html","js","Templates","renderForPromise","target","appendNodeContents","classList","toggle","show","dispatch"],"mappings":";;;;;;;;0KA4B6BA,wBAKzBC,cAESC,KAAO,uBAEPC,UAAY,CACbC,sCACAC,mCAGCC,QAAU,CACXC,KAAM,oBAWFC,MAAOL,kBACR,IAAIM,KAAK,CACZC,QAASC,SAASC,cAAcJ,OAChCK,SAAUC,iBACVX,UAAAA,YASRY,WAAWC,YACFC,eAAe,CAACD,MAAAA,MAAON,QAASM,MAAME,eACtCC,iBAAiBV,KAAKW,WAAWX,KAAKN,UAAUE,OAAQ,QAASI,KAAKY,eAC3EL,MAAMM,MAAMC,SAASb,eACZc,gBAAgB,CAACR,MAAAA,MAAON,QAAAA,aASrCe,oBACW,CAEH,CAACC,sBAAwBC,QAASlB,KAAKe,iBACvC,CAACE,wBAA0BC,QAASlB,KAAKQ,iDAU3BP,QAACA,oBACbkB,KAACA,KAADC,GAAOA,UAAYC,mBAAUC,iBAC/B,qCACA,IAAIrB,UAEFsB,OAASvB,KAAKW,WAAWX,KAAKN,UAAUC,8BACpC6B,mBAAmBD,OAAQJ,KAAMC,IAS/CZ,0BAAeP,QAACA,oBACPA,QAAQwB,UAAUC,OAAO1B,KAAKH,QAAQC,MAAuB,IAAjBG,QAAQ0B,MAM7Df,qBACSR,SAASwB,SAAS,WAAW"} \ No newline at end of file diff --git a/lib/amd/src/local/process_monitor/monitor.js b/lib/amd/src/local/process_monitor/monitor.js index 0d44848c999..9d192e58294 100644 --- a/lib/amd/src/local/process_monitor/monitor.js +++ b/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); } /** diff --git a/lib/templates/local/process_monitor/monitor.mustache b/lib/templates/local/process_monitor/monitor.mustache index cdd8257e35e..5328d3fd753 100644 --- a/lib/templates/local/process_monitor/monitor.mustache +++ b/lib/templates/local/process_monitor/monitor.mustache @@ -32,21 +32,23 @@ }}
-
-
- {{#title}} {{title}} {{/title}} - {{^title}} {{#str}} progress, core {{/str}} {{/title}} -
- +
+
+
+ {{#title}} {{title}} {{/title}} + {{^title}} {{#str}} progress, core {{/str}} {{/title}} +
+ +
+
-
{{#js}} require(['core/local/process_monitor/monitor'], function(component) { diff --git a/theme/boost/scss/moodle/process-monitor.scss b/theme/boost/scss/moodle/process-monitor.scss index 04bd657488b..2eaf1227ada 100644 --- a/theme/boost/scss/moodle/process-monitor.scss +++ b/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; diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index b65ab40c5b9..2c390baeaa3 100644 --- a/theme/boost/style/moodle.css +++ b/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; diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css index fddb47c17df..15593e11455 100644 --- a/theme/classic/style/moodle.css +++ b/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;