diff --git a/services/static-webserver/client/source/class/osparc/NewUITracker.js b/services/static-webserver/client/source/class/osparc/NewUITracker.js index 842e95fdb1dc..04a19536128d 100644 --- a/services/static-webserver/client/source/class/osparc/NewUITracker.js +++ b/services/static-webserver/client/source/class/osparc/NewUITracker.js @@ -33,9 +33,13 @@ qx.Class.define("osparc.NewUITracker", { let msg = ""; msg += qx.locale.Manager.tr("A new version of the application is now available."); msg += "
"; - msg += qx.locale.Manager.tr("Reload to get the latest features."); + msg += qx.locale.Manager.tr("Click the Reload button to get the latest features."); // permanent message - osparc.FlashMessenger.getInstance().logAs(msg, "INFO", 0); + const flashMessage = osparc.FlashMessenger.getInstance().logAs(msg, "INFO", 0).set({ + maxWidth: 500 + }); + const reloadButton = osparc.utils.Utils.reloadNoCacheButton(); + flashMessage.addWidget(reloadButton); this.stopTracker(); } }; diff --git a/services/static-webserver/client/source/class/osparc/ui/message/FlashMessage.js b/services/static-webserver/client/source/class/osparc/ui/message/FlashMessage.js index a16ec4deb7fa..7169b47b9359 100644 --- a/services/static-webserver/client/source/class/osparc/ui/message/FlashMessage.js +++ b/services/static-webserver/client/source/class/osparc/ui/message/FlashMessage.js @@ -31,7 +31,7 @@ qx.Class.define("osparc.ui.message.FlashMessage", { */ construct: function(message, level, duration) { this.base(arguments); - this._setLayout(new qx.ui.layout.HBox(15)); + this._setLayout(new qx.ui.layout.VBox(15)); this.set({ padding: 18, @@ -112,15 +112,18 @@ qx.Class.define("osparc.ui.message.FlashMessage", { }, members: { - __closeCb: null, _createChildControlImpl: function(id) { let control; switch (id) { + case "message-layout": + control = new qx.ui.container.Composite(new qx.ui.layout.HBox(15)); + this._add(control); + break; case "badge": control = new qx.ui.basic.Image().set({ alignY: "middle" }); - this._add(control); + this.getChildControl("message-layout").add(control); break; case "message": control = new qx.ui.basic.Label().set({ @@ -128,7 +131,7 @@ qx.Class.define("osparc.ui.message.FlashMessage", { selectable: true, rich: true }); - this._add(control, { + this.getChildControl("message-layout").add(control, { flex: 1 }); break; @@ -136,7 +139,7 @@ qx.Class.define("osparc.ui.message.FlashMessage", { control = new osparc.ui.basic.IconButton("@MaterialIcons/close/16", () => this.fireEvent("closeMessage")).set({ alignY: "middle" }); - this._add(control); + this.getChildControl("message-layout").add(control); break; } return control || this.base(arguments, id); @@ -147,6 +150,10 @@ qx.Class.define("osparc.ui.message.FlashMessage", { if (label) { label.setValue(value); } - } + }, + + addWidget: function(widget) { + this._add(widget); + }, } }); diff --git a/services/static-webserver/client/source/class/osparc/utils/Utils.js b/services/static-webserver/client/source/class/osparc/utils/Utils.js index 4474ed9e16c2..23947464d6d1 100644 --- a/services/static-webserver/client/source/class/osparc/utils/Utils.js +++ b/services/static-webserver/client/source/class/osparc/utils/Utils.js @@ -249,6 +249,27 @@ qx.Class.define("osparc.utils.Utils", { // window.location.href = window.location.href.replace(/#.*$/, ""); }, + reloadNoCacheButton: function() { + const reloadButton = new qx.ui.form.Button().set({ + label: qx.locale.Manager.tr("Reload"), + icon: "@FontAwesome5Solid/redo/16", + font: "text-16", + gap: 10, + appearance: "strong-button", + allowGrowX: false, + center: true, + alignX: "center", + }); + reloadButton.addListener("execute", () => { + // this argument, which is passed and consumed by the boot.js init file, + // adds a `nocache=rand()` query argument to the js resource calls. + // This forces a hard reload + const noCacheUrl = window.location.href + "?qooxdoo:add-no-cache=true"; + window.location.href = noCacheUrl; + }); + return reloadButton; + }, + getUniqueStudyName: function(preferredName, list) { let title = preferredName; const existingTitles = list.map(study => study.name);