Deprecate overlay tools in creme.utils.

HybirdCorp · Feb 19, 2025 · 402a6c2 · 402a6c2
1 parent 966be01
commit 402a6c2
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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($(
+                             '<h2><img src="${src}"><span>${label}</span></h2>'.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
@@ -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
@@ -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;
 }