UI improvements (ITISFoundation#2357)

* higher contrast for colorbars
* Cancel newOrg
* Create warning next to "disable confirmations for disabling study deletion"
* Fixed NodeViewer for guests

Author: odeimaiz

services/web/client/source/class/osparc/desktop/preferences/pages/ConfirmationsPage.js

@@ -103,11 +103,39 @@ qx.Class.define("osparc.desktop.preferences.pages.ConfirmationsPage", {
       const cbConfirmDeleteStudy = new qx.ui.form.CheckBox(this.tr("Delete a Study"));
       preferencesSettings.bind("confirmDeleteStudy", cbConfirmDeleteStudy, "value");
       cbConfirmDeleteStudy.bind("value", preferencesSettings, "confirmDeleteStudy");
+      cbConfirmDeleteStudy.addListener("changeValue", e => {
+        if (!e.getData()) {
+          const msg = this.tr("Warning: deleting a study cannot be undone");
+          const win = new osparc.ui.window.Confirmation(msg);
+          win.getConfirmButton().setLabel(this.tr("OK"));
+          win.center();
+          win.open();
+          win.addListener("close", () => {
+            if (!win.getConfirmed()) {
+              cbConfirmDeleteStudy.setValue(true);
+            }
+          }, this);
+        }
+      }, this);
       box.add(cbConfirmDeleteStudy);
 
       const cbConfirmDeleteNode = new qx.ui.form.CheckBox(this.tr("Delete a Node"));
       preferencesSettings.bind("confirmDeleteNode", cbConfirmDeleteNode, "value");
       cbConfirmDeleteNode.bind("value", preferencesSettings, "confirmDeleteNode");
+      cbConfirmDeleteNode.addListener("changeValue", e => {
+        if (!e.getData()) {
+          const msg = this.tr("Warning: deleting a node cannot be undone");
+          const win = new osparc.ui.window.Confirmation(msg);
+          win.getConfirmButton().setLabel(this.tr("OK"));
+          win.center();
+          win.open();
+          win.addListener("close", () => {
+            if (!win.getConfirmed()) {
+              cbConfirmDeleteNode.setValue(true);
+            }
+          }, this);
+        }
+      }, this);
       box.add(cbConfirmDeleteNode);
 
       const cbConfirmWindowSize = new qx.ui.form.CheckBox(this.tr("Window size check"));

services/web/client/source/class/osparc/desktop/preferences/pages/OrganizationsPage.js

@@ -57,6 +57,7 @@ qx.Class.define("osparc.desktop.preferences.pages.OrganizationsPage", {
         orgEditor.addListener("createOrg", () => {
           this.__createOrganization(win, orgEditor.getChildControl("create"), orgEditor);
         });
+        orgEditor.addListener("cancel", () => win.close());
       }, this);
       return createOrgBtn;
     },
@@ -279,6 +280,7 @@ qx.Class.define("osparc.desktop.preferences.pages.OrganizationsPage", {
       orgEditor.addListener("updateOrg", () => {
         this.__updateOrganization(win, orgEditor.getChildControl("save"), orgEditor);
       });
+      orgEditor.addListener("cancel", () => win.close());
     },
 
     __deleteOrganization: function(orgKey) {

services/web/client/source/class/osparc/desktop/preferences/window/APIKeyBase.js

@@ -26,6 +26,7 @@ qx.Class.define("osparc.desktop.preferences.window.APIKeyBase", {
       modal: true,
       showMaximize: false,
       showMinimize: false,
+      contentPadding: 0,
       width: 350,
       clickAwayClose: true
     });
@@ -38,7 +39,8 @@ qx.Class.define("osparc.desktop.preferences.window.APIKeyBase", {
   members: {
     __addInfoText: function(infoText) {
       const introLabel = new qx.ui.basic.Label(infoText).set({
-        padding: 5,
+        paddingLeft: 5,
+        paddingRight: 5,
         rich: true
       });
       this._add(introLabel);

services/web/client/source/class/osparc/theme/ColorDark.js

@@ -24,7 +24,8 @@ qx.Theme.define("osparc.theme.ColorDark", {
     "loading-page-text": "#FFFFFF",
     "loading-page-spinner": "#DDDDDD",
 
-    "scrollbar-passive": "contrasted-background",
-    "scrollbar-active": "contrasted-background+"
+    "contrasted-background++": "#666",
+    "scrollbar-passive": "contrasted-background+",
+    "scrollbar-active": "contrasted-background++"
   }
 });

services/web/client/source/class/osparc/ui/window/Dialog.js

@@ -45,7 +45,24 @@ qx.Class.define("osparc.ui.window.Dialog", {
 
   members: {
     __messageLabel: null,
-    __btnToolbar: null,
+
+    _createChildControlImpl: function(id) {
+      let control;
+      switch (id) {
+        case "buttons-toolbar":
+          control = new qx.ui.toolbar.ToolBar();
+          control.addSpacer();
+          this.add(control);
+          break;
+        case "cancel-button": {
+          const btnToolbar = this.getChildControl("buttons-toolbar");
+          control = new qx.ui.toolbar.Button(this.tr("Cancel"));
+          btnToolbar.add(control);
+          break;
+        }
+      }
+      return control || this.base(arguments, id);
+    },
 
     __buildLayout: function() {
       this.__messageLabel = new qx.ui.basic.Label().set({
@@ -55,9 +72,7 @@ qx.Class.define("osparc.ui.window.Dialog", {
       this.add(this.__messageLabel, {
         flex: 1
       });
-      this.__btnToolbar = new qx.ui.toolbar.ToolBar();
-      this.__btnToolbar.addSpacer();
-      this.add(this.__btnToolbar);
+      this.getChildControl("buttons-toolbar");
     },
 
     _applyMessage: function(message) {
@@ -69,16 +84,16 @@ qx.Class.define("osparc.ui.window.Dialog", {
      * @param {qx.ui.toolbar.Button} button Button that will be added to the bottom bar of the dialog.
      */
     addButton: function(button) {
-      this.__btnToolbar.add(button);
+      const btnToolbar = this.getChildControl("buttons-toolbar");
+      btnToolbar.add(button);
     },
 
     /**
      * Adds a default cancel button to the dialog.
      */
     addCancelButton: function() {
-      const cancelButton = new qx.ui.toolbar.Button(this.tr("Cancel"));
+      const cancelButton = this.getChildControl("cancel-button");
       cancelButton.addListener("execute", () => this.close(), this);
-      this.addButton(cancelButton);
     }
   }
 });

services/web/client/source/class/osparc/viewer/NodeViewer.js

@@ -86,7 +86,6 @@ qx.Class.define("osparc.viewer.NodeViewer", {
       this.__initLoadingPage();
 
       const iframe = new osparc.component.widget.PersistentIframe().set({
-        showActionButton: false,
         showRestartButton: false
       });
       this.setIFrame(iframe);