From 402a6c22fee4e428178e190d8d49a3c36fff8018 Mon Sep 17 00:00:00 2001 From: Fabre Florian Date: Wed, 19 Feb 2025 16:38:29 +0100 Subject: [PATCH] Deprecate overlay tools in creme.utils. --- CHANGELOG.txt | 3 ++ .../chantilly/creme_core/css/list_view.css | 33 +++++++++++++++++++ .../static/creme_core/js/list_view.core.js | 18 +++++++--- .../creme_core/static/creme_core/js/utils.js | 5 +++ .../icecream/creme_core/css/list_view.css | 24 ++++++++++++++ 5 files changed, 78 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.txt b/CHANGELOG.txt index fc7ec963e..169f81d4b 100644 --- a/CHANGELOG.txt +++ b/CHANGELOG.txt @@ -180,6 +180,9 @@ - creme.ajax.decodeSearchData() is deprecated; Use _.decodeURLSearchData() instead - creme.exports.exportAs() is deprecated; Use creme.lv_widget.DownloadAction instead. - creme.utils.confirmSubmit() is deprecated; Use the new 'creme_core-hatmenubar-delete' or 'delete' actions instead. + - creme.utils.showPageLoadOverlay() is deprecated; Use creme.dialog.Overlay instead. + - creme.utils.hidePageLoadOverlay() is deprecated; Use creme.dialog.Overlay instead. + - creme.utils.overlay() is deprecated; Use creme.dialog.Overlay instead. - Add RelativeURL() class as an alternative of URL() that do not accepts relative paths (e.g '/list?page=1' is not a valid URL) * Use Object.assign instead of $.extend to remove the dependency to jQuery for : RGBColor, DateFaker, BrowserVersion & Assert. * Use Object.assign instead of $.extend for sketch components. diff --git a/creme/creme_core/static/chantilly/creme_core/css/list_view.css b/creme/creme_core/static/chantilly/creme_core/css/list_view.css index 18e577d15..c7e96709c 100644 --- a/creme/creme_core/static/chantilly/creme_core/css/list_view.css +++ b/creme/creme_core/static/chantilly/creme_core/css/list_view.css @@ -86,6 +86,39 @@ float: right; } +.ui-creme-listview-standalone .list-controls { + margin-top: -10px; + margin-right: 8px; +} + +.ui-creme-listview-standalone.is-loading { + overflow: visible !important; +} + +.ui-creme-listview-standalone .floatThead-container ~ .ui-creme-overlay { + z-index: 99; +} + +.ui-creme-listview .lv-loading { + background-color: white; + opacity: .70; + filter: Alpha(Opacity=70); +} + +.ui-creme-listview .lv-loading .overlay-content { + display: flex; + align-items: center; + justify-content: center; +} + +.ui-creme-listview .lv-loading .overlay-content span { + padding-left: 10px; +} + +.ui-creme-listview-popup .list-controls { + margin-top: 5px; +} + /* Listview page - page header and controls - end */ /* Listview page header buttons */ diff --git a/creme/creme_core/static/creme_core/js/list_view.core.js b/creme/creme_core/static/creme_core/js/list_view.core.js index 2e7634c20..0c9a61020 100644 --- a/creme/creme_core/static/creme_core/js/list_view.core.js +++ b/creme/creme_core/static/creme_core/js/list_view.core.js @@ -371,6 +371,7 @@ }); this._element = null; + this._overlay = new creme.dialog.Overlay(); this._loading = false; this.selectionMode(options.selectionMode); @@ -513,18 +514,17 @@ _updateLoadingState: function(state) { if (state !== this.isLoading()) { - /* - * TODO : Toggle css class like bricks - * this._element.toggleClass('is-loading', state); - */ - this._loading = state; + this._element.toggleClass('is-loading', state); + this._overlay.update(state, '', state ? 100 : 0); + /* if (state) { creme.utils.showPageLoadOverlay(); } else { creme.utils.hidePageLoadOverlay(); } + */ } }, @@ -609,6 +609,7 @@ var element = this._element; this._unbindColumnFilters(element); + this._overlay.unbind(element); this._element = null; return this; @@ -621,6 +622,13 @@ this._element = element; this._selections.bind(element); + this._overlay.addClass('lv-loading') + .content($( + '

${label}

'.template({ + src: creme_media_url('images/wait.gif'), + label: gettext('Loading…') + }) + )).bind(element); this._bindActions(element); diff --git a/creme/creme_core/static/creme_core/js/utils.js b/creme/creme_core/static/creme_core/js/utils.js index 1a75ac57d..cbd7b5c6a 100644 --- a/creme/creme_core/static/creme_core/js/utils.js +++ b/creme/creme_core/static/creme_core/js/utils.js @@ -58,17 +58,21 @@ creme.utils.goTo = function(url, data) { // TODO : deprecate it ? never used creme.utils.showPageLoadOverlay = function() { // console.log('show loading overlay'); + console.warn('creme.utils.showPageLoadOverlay is deprecated; Use creme.dialog.Overlay instead.'); creme.utils.loading('', false); }; // TODO : deprecate it ? never used creme.utils.hidePageLoadOverlay = function() { // console.log('hide loading overlay'); + console.warn('creme.utils.showPageLoadOverlay is deprecated; Use creme.dialog.Overlay instead.'); creme.utils.loading('', true); }; // TODO : deprecate it ? Only used in old creme.ajax.* methods (see ajax.js) creme.utils.loading = function(div_id, is_loaded, params) { + console.warn('creme.utils.loading is deprecated; Use creme.dialog.Overlay instead.'); + var overlay = creme.utils._overlay; if (overlay === undefined) { @@ -223,6 +227,7 @@ creme.utils.ajaxQuery = function(url, options, data) { } }); + /* TODO : remove this feature. */ if (options.waitingOverlay) { query.onStart(function() { creme.utils.showPageLoadOverlay(); diff --git a/creme/creme_core/static/icecream/creme_core/css/list_view.css b/creme/creme_core/static/icecream/creme_core/css/list_view.css index bbd0b8f61..f2b3f0906 100644 --- a/creme/creme_core/static/icecream/creme_core/css/list_view.css +++ b/creme/creme_core/static/icecream/creme_core/css/list_view.css @@ -135,6 +135,30 @@ margin-right: 8px; } +.ui-creme-listview-standalone.is-loading { + overflow: visible !important; +} + +.ui-creme-listview-standalone .floatThead-container ~ .ui-creme-overlay { + z-index: 99; +} + +.ui-creme-listview .lv-loading { + background-color: white; + opacity: .70; + filter: Alpha(Opacity=70); +} + +.ui-creme-listview .lv-loading .overlay-content { + display: flex; + align-items: center; + justify-content: center; +} + +.ui-creme-listview .lv-loading .overlay-content span { + padding-left: 10px; +} + .ui-creme-listview-popup .list-controls { margin-top: 5px; }