Move the editing interval message to the bottom and keep it present a…

…t all times
Wirecloud · Jul 2, 2024 · 196f94e · 196f94e
1 parent f9702d0
commit 196f94e
Show file tree

Hide file tree

Showing 10 changed files with 240 additions and 96 deletions.
diff --git a/src/js_tests/styledelements/NotebookSpec.js b/src/js_tests/styledelements/NotebookSpec.js
@@ -468,32 +468,32 @@
 
         });
 
-        describe("addButton(button, position)", function () {
+        describe("addToEastSection(elem, position)", function () {
             let element;
 
             beforeEach(function () {
                 element = new StyledElements.Notebook();
             });
 
             it("throws an exception if button is not a button", function () {
-                expect(function () {element.addButton(null);}).toThrow(jasmine.any(TypeError));
+                expect(function () {element.addToEastSection(null);}).toThrow(jasmine.any(TypeError));
             });
 
             it("place buttons on the right by default", function () {
                 const button = new StyledElements.Button();
-                element.addButton(button);
+                element.addToEastSection(button);
                 expect(element.tabWrapper.east.children).toEqual([element.moveRightButton, button]);
             });
 
             it("place buttons on the right by default", function () {
                 const button = new StyledElements.Button();
-                element.addButton(button, 'right');
+                element.addToEastSection(button, 'right');
                 expect(element.tabWrapper.east.children).toEqual([element.moveRightButton, button]);
             });
 
             it("should allow to add buttons on the left side", function () {
                 const button = new StyledElements.Button();
-                element.addButton(button, 'left');
+                element.addToEastSection(button, 'left');
                 expect(element.tabWrapper.west.children).toEqual([button, element.moveLeftButton]);
             });
         });

diff --git a/src/js_tests/wirecloud/ui/WorkspaceTabViewSpec.js b/src/js_tests/wirecloud/ui/WorkspaceTabViewSpec.js
@@ -44,10 +44,10 @@
             id: "8",
             preferences: {
                 get: jasmine.createSpy("get").and.callFake(function (key) {
-                    if (options && key in options.customPreferences) {
+                    if (options && options.customPreferences && key in options.customPreferences) {
                         return options.customPreferences[key];
                     } else if (key === "screenSizes") {
-                        return [{id: 0, moreOrEqual: 0, lessOrEqual: -1}];
+                        return [{id: 0, moreOrEqual: 0, lessOrEqual: -1, name: "Default"}];
                     }
                 }),
                 addEventListener: jasmine.createSpy("addEventListener")
@@ -84,6 +84,7 @@
         return {
             addEventListener: jasmine.createSpy("addEventListener"),
             buildAddWidgetButton: jasmine.createSpy("buildAddWidgetButton").and.returnValue(),
+            updateEditingInterval: jasmine.createSpy("updateEditingInterval"),
             model: workspace
         };
     };
@@ -935,6 +936,47 @@
 
         });
 
+        describe("getEditingIntervalElement()", () => {
+
+            it("should return the editing interval element without link if customWidth is -1", () => {
+                const workspace = create_workspace();
+                const model = create_tab();
+                const tab = new ns.WorkspaceTabView("1", notebook, {
+                    model: model,
+                    workspace: workspace
+                });
+
+                tab.dragboard.customWidth = -1;
+
+                const elem = tab.getEditingIntervalElement();
+
+                // It should NOT contain a link
+                expect(elem.querySelector('a')).toBe(null);
+            });
+
+            it("should return the editing interval element with link if customWidth is not -1", () => {
+                const workspace = create_workspace();
+                const model = create_tab();
+                const tab = new ns.WorkspaceTabView("1", notebook, {
+                    model: model,
+                    workspace: workspace
+                });
+
+                tab.dragboard.customWidth = 10;
+
+                const elem = tab.getEditingIntervalElement();
+
+                // It should contain a link
+                expect(elem.querySelector('a')).not.toBe(null);
+
+                tab.quitEditingInterval = jasmine.createSpy("quitEditingInterval");
+                elem.querySelector('a').click();
+
+                expect(tab.quitEditingInterval).toHaveBeenCalled();
+            });
+
+        });
+
         describe("setEditingInterval(moreOrEqual, lessOrEqual, name)", () => {
 
             it("should set the editing interval", () => {
@@ -949,11 +991,6 @@
 
                 tab.setEditingInterval(0, 10, "name");
                 expect(tab.dragboard.setCustomDragboardWidth).toHaveBeenCalledWith(5);
-                tab.quitEditingInterval = jasmine.createSpy("quitEditingInterval");
-
-                tab.intervalEditionIndicator.querySelector(".wc-editing-interval-close").click();
-
-                expect(tab.quitEditingInterval).toHaveBeenCalled();
 
                 tab.setEditingInterval(10, -1, "name");
                 expect(tab.dragboard.setCustomDragboardWidth).toHaveBeenCalledWith(10);
@@ -976,16 +1013,51 @@
                 tab.quitEditingInterval();
 
                 expect(tab.dragboard.restoreDragboardWidth).toHaveBeenCalled();
+            });
 
-                const intervalEditionIndicator = {
-                    remove: jasmine.createSpy("remove")
-                };
+        });
 
-                tab.intervalEditionIndicator = intervalEditionIndicator;
-                tab.quitEditingInterval();
+        describe("updateEditingIntervalName()", () => {
+
+            it("should update the editing interval name", () => {
+                const workspace = create_workspace();
+                const model = create_tab({
+                    customPreferences: {
+                        screenSizes: [
+                            {id: 0, moreOrEqual: 0, lessOrEqual: 800, name: "Default"},
+                            {id: 1, moreOrEqual: 801, lessOrEqual: 1000, name: "Default-1"},
+                            {id: 2, moreOrEqual: 1001, lessOrEqual: -1, name: "Default-2"}
+                        ]
+                    }
+                });
+                const tab = new ns.WorkspaceTabView("1", notebook, {
+                    model: model,
+                    workspace: workspace
+                });
+
+                Object.defineProperty(window, 'innerWidth', {
+                    value: 800,
+                    writable: true
+                });
+
+                tab.dragboard.customWidth = -1;
+
+                tab.updateEditingIntervalName();
+                expect(tab.editingIntervalName).toBe("Default");
+
+                window.innerWidth = 900;
+                tab.updateEditingIntervalName();
+                expect(tab.editingIntervalName).toBe("Default-1");
+
+                window.innerWidth = 1001;
+                tab.updateEditingIntervalName();
+                expect(tab.editingIntervalName).toBe("Default-2");
+
+                tab.dragboard.customWidth = 10;
+                tab.updateEditingIntervalName();
+                expect(tab.editingIntervalName).toBe("Default");
 
-                expect(intervalEditionIndicator.remove).toHaveBeenCalled();
-                expect(tab.intervalEditionIndicator).toBe(null);
+                window.innerWidth = 800;
             });
 
         });

diff --git a/src/js_tests/wirecloud/ui/WorkspaceViewSpec.js b/src/js_tests/wirecloud/ui/WorkspaceViewSpec.js
@@ -112,6 +112,7 @@
                     this.id = "8";
                     this.createWidget = jasmine.createSpy("createWidget");
                     this.findWidget = jasmine.createSpy("findWidget");
+                    this.getEditingIntervalElement = jasmine.createSpy("getEditingIntervalElement").and.returnValue(document.createElement('div'));
                     this.widgets = [];
                     this.dragboard = {
                         _updateIWidgetSizes: jasmine.createSpy("_updateIWidgetSizes"),
@@ -757,15 +758,15 @@
                 const view = new ns.WorkspaceView(1);
                 const workspace = create_workspace();
                 workspace.isAllowed.and.returnValue(true);
-                spyOn(StyledElements.Notebook.prototype, "addButton");
+                spyOn(StyledElements.Notebook.prototype, "addToEastSection");
                 spyOn(StyledElements.Notebook.prototype, "createTab").and.callThrough();
                 view.loadWorkspace(workspace);
 
                 // Check the interface provides a button for creating tabs
                 const tab = {};
                 workspace.createTab.and.returnValue(Promise.resolve(tab));
 
-                const button = view.notebook.addButton.calls.argsFor(0)[0];
+                const button = view.notebook.addToEastSection.calls.argsFor(1)[0];
                 spyOn(button, "disable");
                 spyOn(button, "enable");
                 button.click();
@@ -787,12 +788,12 @@
                 const view = new ns.WorkspaceView(1);
                 const workspace = create_workspace();
                 workspace.isAllowed.and.returnValue(true);
-                spyOn(StyledElements.Notebook.prototype, "addButton");
+                spyOn(StyledElements.Notebook.prototype, "addToEastSection");
                 spyOn(StyledElements.Notebook.prototype, "createTab").and.callThrough();
                 view.loadWorkspace(workspace);
                 workspace.createTab.and.returnValue(Promise.reject());
 
-                const button = view.notebook.addButton.calls.argsFor(0)[0];
+                const button = view.notebook.addToEastSection.calls.argsFor(1)[0];
                 spyOn(button, "disable");
                 spyOn(button, "enable");
                 view.notebook.createTab.calls.reset();

diff --git a/src/wirecloud/commons/static/js/StyledElements/Addon.js b/src/wirecloud/commons/static/js/StyledElements/Addon.js
@@ -60,7 +60,8 @@
             const defaultOptions = {
                 'text': null,
                 'title': '',
-                'class': ''
+                'class': '',
+                'listeners': true
             };
             options = utils.merge({}, defaultOptions, options);
 
@@ -81,8 +82,10 @@
             /* Event handlers */
             this._clickCallback = clickCallback.bind(this);
 
-            this.wrapperElement.addEventListener('mousedown', utils.stopPropagationListener, true);
-            this.wrapperElement.addEventListener('click', this._clickCallback, true);
+            if (options.listeners) {
+                this.wrapperElement.addEventListener('mousedown', utils.stopPropagationListener, true);
+                this.wrapperElement.addEventListener('click', this._clickCallback, true);
+            }
         }
 
         /**

diff --git a/src/wirecloud/commons/static/js/StyledElements/Notebook.js b/src/wirecloud/commons/static/js/StyledElements/Notebook.js
@@ -170,7 +170,7 @@
                     this.tabArea.appendChild(this.new_tab_button_tabs);
                     this.new_tab_button_left = new this.Button({iconClass: 'fas fa-plus', 'class': 'se-notebook-new-tab', title: utils.gettext('Add Tab')});
                     this.new_tab_button_left.addEventListener('click', new_tab_main_listener);
-                    this.addButton(this.new_tab_button_left);
+                    this.addToEastSection(this.new_tab_button_left);
                 }
                 StyledElements.Event.prototype.addEventListener.call(this.events.newTab, listener);
             }.bind(this);
@@ -640,24 +640,20 @@
 
         /**
          *
-         * @name StyledElements.Notebook#addButton
+         * @name StyledElements.Notebook#addToEastSection
          *
          * @returns {StyledElements.Notebook}
          *      The instance on which the member is called.
          */
-        addButton(button, position) {
-            if (!(button instanceof StyledElements.Button) && !(button instanceof StyledElements.Select)) {
-                throw new TypeError();
-            }
-
+        addToEastSection(elem, position) {
             position = position || 'right';
 
             switch (position) {
             case 'left':
-                this.tabWrapper.west.prependChild(button, this.moveLeftButton);
+                this.tabWrapper.west.prependChild(elem, this.moveLeftButton);
                 break;
             case 'right':
-                this.tabWrapper.east.appendChild(button);
+                this.tabWrapper.east.appendChild(elem);
                 break;
             }
 
@@ -667,6 +663,25 @@
             return this;
         }
 
+        /**
+         *
+         * @name StyledElements.Notebook#addButton
+         *
+         * @returns {StyledElements.Notebook}
+         *      The instance on which the member is called.
+         *
+         * @deprecated Old method, use addToEastSection instead
+         */
+        addButton(button, position) {
+            if (!(button instanceof StyledElements.Button) && !(button instanceof StyledElements.Select)) {
+                throw new TypeError();
+            }
+
+            this.addToEastSection(button, position);
+
+            return this;
+        }
+
         /**
          * Requests fullscreen mode. You must call this method from a user event
          * handler, otherwise the browser will denie this request.

diff --git a/src/wirecloud/defaulttheme/static/css/workspace/dragboard.scss b/src/wirecloud/defaulttheme/static/css/workspace/dragboard.scss
@@ -115,23 +115,16 @@
 }
 
 .wc-editing-interval {
-    background-color: #000;
-    opacity: 0.8;
-    position: fixed;
-    z-index: 101110;
-    color: #fff;
-    padding: 10px;
-    border-radius: 7px;
-    right: 50px;
-    top: 39px;
+    margin: 3px 5px;
 }
 
 .wc-editing-interval-close {
-    color: #fff;
+    color: #333;
     margin-left: 10px;
 }
 
 .wc-editing-interval-close:hover {
     cursor: pointer;
-    color: #fff;
+    color: #333;
+    text-decoration: none;
 }