From 0eff0e5cec4825555971841e04c2c9d371448f89 Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Tue, 10 Jun 2025 15:56:47 +0200 Subject: [PATCH 1/6] minor --- .../source/class/osparc/ui/message/Loading.js | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/ui/message/Loading.js b/services/static-webserver/client/source/class/osparc/ui/message/Loading.js index e222ead4cbff..0d4656755c2c 100644 --- a/services/static-webserver/client/source/class/osparc/ui/message/Loading.js +++ b/services/static-webserver/client/source/class/osparc/ui/message/Loading.js @@ -35,7 +35,7 @@ qx.Class.define("osparc.ui.message.Loading", { construct: function() { this.base(arguments); - const layout = new qx.ui.layout.Grid(20, 20); + const layout = new qx.ui.layout.Grid(10, 10); layout.setRowFlex(this.self().GRID_POS.SPACER_TOP, 1); layout.setRowFlex(this.self().GRID_POS.SPACER_BOTTOM, 1); layout.setColumnFlex(0, 1); @@ -119,8 +119,11 @@ qx.Class.define("osparc.ui.message.Loading", { row: this.self().GRID_POS.TOOLBAR }); - this._add(new qx.ui.core.Spacer(), { - column: 1, + const column = 1; + + const topSpacer = new qx.ui.core.Spacer(); + this._add(topSpacer, { + column, row: this.self().GRID_POS.SPACER_TOP }); @@ -142,7 +145,7 @@ qx.Class.define("osparc.ui.message.Loading", { }); } this._add(thumbnail, { - column: 1, + column, row: this.self().GRID_POS.LOGO }); @@ -163,7 +166,7 @@ qx.Class.define("osparc.ui.message.Loading", { alignX: "center", }); this._add(waitingHeader, { - column: 1, + column, row: this.self().GRID_POS.WAITING }); @@ -171,7 +174,7 @@ qx.Class.define("osparc.ui.message.Loading", { alignX: "center" })); this._add(messages, { - column: 1, + column, row: this.self().GRID_POS.MESSAGES }); @@ -179,12 +182,13 @@ qx.Class.define("osparc.ui.message.Loading", { alignX: "center" })); this._add(extraWidgets, { - column: 1, + column, row: this.self().GRID_POS.EXTRA_WIDGETS }); - this._add(new qx.ui.core.Spacer(), { - column: 1, + const bottomSpacer = new qx.ui.core.Spacer(); + this._add(bottomSpacer, { + column, row: this.self().GRID_POS.SPACER_BOTTOM }); }, From 0a5c88d9e3c19393e668488ac78ee3f45121cacf Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Tue, 10 Jun 2025 16:06:42 +0200 Subject: [PATCH 2/6] minor --- .../source/class/osparc/data/model/NodeProgressSequence.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/services/static-webserver/client/source/class/osparc/data/model/NodeProgressSequence.js b/services/static-webserver/client/source/class/osparc/data/model/NodeProgressSequence.js index bb67236294e7..152eb59dc37b 100644 --- a/services/static-webserver/client/source/class/osparc/data/model/NodeProgressSequence.js +++ b/services/static-webserver/client/source/class/osparc/data/model/NodeProgressSequence.js @@ -229,7 +229,9 @@ qx.Class.define("osparc.data.model.NodeProgressSequence", { }, __initLayout: function() { - this.__mainLoadingPage = new qx.ui.container.Composite(new qx.ui.layout.VBox(8)); + this.__mainLoadingPage = new qx.ui.container.Composite(new qx.ui.layout.VBox(8)).set({ + maxWidth: 400, + }); const sequenceLoadingPage = new osparc.widget.ProgressSequence(qx.locale.Manager.tr("LOADING ...")); const nTasks = 7; From 607f21bbe111856ed7c0e744d03fa38573c5441b Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Tue, 10 Jun 2025 16:06:55 +0200 Subject: [PATCH 3/6] re-layout --- .../source/class/osparc/ui/message/Loading.js | 58 +++++-------------- 1 file changed, 13 insertions(+), 45 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/ui/message/Loading.js b/services/static-webserver/client/source/class/osparc/ui/message/Loading.js index 0d4656755c2c..58002ba37095 100644 --- a/services/static-webserver/client/source/class/osparc/ui/message/Loading.js +++ b/services/static-webserver/client/source/class/osparc/ui/message/Loading.js @@ -35,15 +35,7 @@ qx.Class.define("osparc.ui.message.Loading", { construct: function() { this.base(arguments); - const layout = new qx.ui.layout.Grid(10, 10); - layout.setRowFlex(this.self().GRID_POS.SPACER_TOP, 1); - layout.setRowFlex(this.self().GRID_POS.SPACER_BOTTOM, 1); - layout.setColumnFlex(0, 1); - layout.setColumnMaxWidth(1, 400); - layout.setColumnAlign(1, "center", "middle"); - layout.setColumnFlex(2, 1); - layout.setColumnAlign(2, "right", "middle"); - this._setLayout(layout); + this._setLayout(new qx.ui.layout.VBox(10)); this.__buildLayout(); }, @@ -108,23 +100,15 @@ qx.Class.define("osparc.ui.message.Loading", { __maxButton: null, __buildLayout: function() { - this._add(new qx.ui.core.Widget(), { - column: 0, - row: 0 - }); - const maxLayout = this.__createMaximizeToolbar(); - this._add(maxLayout, { - column: 2, - row: this.self().GRID_POS.TOOLBAR + this.bind("showToolbar", maxLayout, "visibility", { + converter: showToolbar => showToolbar ? "visible" : "hidden" }); - - const column = 1; + this._addAt(maxLayout, this.self().GRID_POS.TOOLBAR); const topSpacer = new qx.ui.core.Spacer(); - this._add(topSpacer, { - column, - row: this.self().GRID_POS.SPACER_TOP + this._addAt(topSpacer, this.self().GRID_POS.SPACER_TOP, { + flex: 1, }); const productLogoPath = osparc.product.Utils.getLogoPath(); @@ -144,10 +128,7 @@ qx.Class.define("osparc.ui.message.Loading", { height: logoHeight }); } - this._add(thumbnail, { - column, - row: this.self().GRID_POS.LOGO - }); + this._addAt(thumbnail, this.self().GRID_POS.LOGO); const waitingHeader = this.__header = new qx.ui.basic.Atom().set({ icon: "@FontAwesome5Solid/circle-notch/"+this.self().STATUS_ICON_SIZE, @@ -155,7 +136,7 @@ qx.Class.define("osparc.ui.message.Loading", { alignX: "center", rich: true, gap: 15, - allowGrowX: false + allowGrowX: false, }); const icon = waitingHeader.getChildControl("icon"); osparc.service.StatusUI.updateCircleAnimation(icon); @@ -165,31 +146,21 @@ qx.Class.define("osparc.ui.message.Loading", { wrap: true, alignX: "center", }); - this._add(waitingHeader, { - column, - row: this.self().GRID_POS.WAITING - }); + this._addAt(waitingHeader, this.self().GRID_POS.WAITING); const messages = this.__messagesContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox(10).set({ alignX: "center" })); - this._add(messages, { - column, - row: this.self().GRID_POS.MESSAGES - }); + this._addAt(messages, this.self().GRID_POS.MESSAGES); const extraWidgets = this.__extraWidgets = new qx.ui.container.Composite(new qx.ui.layout.VBox(10).set({ alignX: "center" })); - this._add(extraWidgets, { - column, - row: this.self().GRID_POS.EXTRA_WIDGETS - }); + this._addAt(extraWidgets, this.self().GRID_POS.EXTRA_WIDGETS); const bottomSpacer = new qx.ui.core.Spacer(); - this._add(bottomSpacer, { - column, - row: this.self().GRID_POS.SPACER_BOTTOM + this._addAt(bottomSpacer, this.self().GRID_POS.SPACER_BOTTOM, { + flex: 1, }); }, @@ -223,9 +194,6 @@ qx.Class.define("osparc.ui.message.Loading", { const toolbarLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({ alignX: "right", })); - this.bind("showToolbar", toolbarLayout, "visibility", { - converter: showToolbar => showToolbar ? "visible" : "hidden" - }); toolbarLayout.add(maxButton); return toolbarLayout; }, From dbde00d5309eceeaa5f1a3ad2cb66e76c66db045 Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Tue, 10 Jun 2025 16:14:32 +0200 Subject: [PATCH 4/6] exclude it --- .../client/source/class/osparc/ui/message/Loading.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/static-webserver/client/source/class/osparc/ui/message/Loading.js b/services/static-webserver/client/source/class/osparc/ui/message/Loading.js index 58002ba37095..46b988c34df6 100644 --- a/services/static-webserver/client/source/class/osparc/ui/message/Loading.js +++ b/services/static-webserver/client/source/class/osparc/ui/message/Loading.js @@ -102,7 +102,7 @@ qx.Class.define("osparc.ui.message.Loading", { __buildLayout: function() { const maxLayout = this.__createMaximizeToolbar(); this.bind("showToolbar", maxLayout, "visibility", { - converter: showToolbar => showToolbar ? "visible" : "hidden" + converter: showToolbar => showToolbar ? "visible" : "excluded" }); this._addAt(maxLayout, this.self().GRID_POS.TOOLBAR); From b4f37a9d535e896cde44a0e9c90d68c66ee6b8e5 Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Tue, 10 Jun 2025 16:16:16 +0200 Subject: [PATCH 5/6] minor --- .../client/source/class/osparc/ui/message/Loading.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/ui/message/Loading.js b/services/static-webserver/client/source/class/osparc/ui/message/Loading.js index 46b988c34df6..fb91c45b5667 100644 --- a/services/static-webserver/client/source/class/osparc/ui/message/Loading.js +++ b/services/static-webserver/client/source/class/osparc/ui/message/Loading.js @@ -101,9 +101,6 @@ qx.Class.define("osparc.ui.message.Loading", { __buildLayout: function() { const maxLayout = this.__createMaximizeToolbar(); - this.bind("showToolbar", maxLayout, "visibility", { - converter: showToolbar => showToolbar ? "visible" : "excluded" - }); this._addAt(maxLayout, this.self().GRID_POS.TOOLBAR); const topSpacer = new qx.ui.core.Spacer(); @@ -194,6 +191,9 @@ qx.Class.define("osparc.ui.message.Loading", { const toolbarLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({ alignX: "right", })); + this.bind("showToolbar", toolbarLayout, "visibility", { + converter: showToolbar => showToolbar ? "visible" : "excluded" + }); toolbarLayout.add(maxButton); return toolbarLayout; }, From d9e28f41e4a9574b6fd93161179506bc7776720e Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Tue, 10 Jun 2025 16:32:24 +0200 Subject: [PATCH 6/6] simplify --- .../source/class/osparc/ui/message/Loading.js | 24 ++++++------------- 1 file changed, 7 insertions(+), 17 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/ui/message/Loading.js b/services/static-webserver/client/source/class/osparc/ui/message/Loading.js index fb91c45b5667..163e77b57310 100644 --- a/services/static-webserver/client/source/class/osparc/ui/message/Loading.js +++ b/services/static-webserver/client/source/class/osparc/ui/message/Loading.js @@ -80,16 +80,6 @@ qx.Class.define("osparc.ui.message.Loading", { LOGO_HEIGHT: 100, ICON_HEIGHT: 220, STATUS_ICON_SIZE: 20, - - GRID_POS: { - TOOLBAR: 0, - SPACER_TOP: 1, - LOGO: 2, - WAITING: 3, - MESSAGES: 4, - EXTRA_WIDGETS: 5, - SPACER_BOTTOM: 6, - } }, members: { @@ -101,10 +91,10 @@ qx.Class.define("osparc.ui.message.Loading", { __buildLayout: function() { const maxLayout = this.__createMaximizeToolbar(); - this._addAt(maxLayout, this.self().GRID_POS.TOOLBAR); + this._add(maxLayout); const topSpacer = new qx.ui.core.Spacer(); - this._addAt(topSpacer, this.self().GRID_POS.SPACER_TOP, { + this._add(topSpacer, { flex: 1, }); @@ -125,7 +115,7 @@ qx.Class.define("osparc.ui.message.Loading", { height: logoHeight }); } - this._addAt(thumbnail, this.self().GRID_POS.LOGO); + this._add(thumbnail); const waitingHeader = this.__header = new qx.ui.basic.Atom().set({ icon: "@FontAwesome5Solid/circle-notch/"+this.self().STATUS_ICON_SIZE, @@ -143,20 +133,20 @@ qx.Class.define("osparc.ui.message.Loading", { wrap: true, alignX: "center", }); - this._addAt(waitingHeader, this.self().GRID_POS.WAITING); + this._add(waitingHeader); const messages = this.__messagesContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox(10).set({ alignX: "center" })); - this._addAt(messages, this.self().GRID_POS.MESSAGES); + this._add(messages); const extraWidgets = this.__extraWidgets = new qx.ui.container.Composite(new qx.ui.layout.VBox(10).set({ alignX: "center" })); - this._addAt(extraWidgets, this.self().GRID_POS.EXTRA_WIDGETS); + this._add(extraWidgets); const bottomSpacer = new qx.ui.core.Spacer(); - this._addAt(bottomSpacer, this.self().GRID_POS.SPACER_BOTTOM, { + this._add(bottomSpacer, { flex: 1, }); },