diff --git a/services/static-webserver/client/source/class/osparc/ui/list/CollaboratorListItem.js b/services/static-webserver/client/source/class/osparc/ui/list/CollaboratorListItem.js index 09ff26332b4..9ef3d0b03e6 100644 --- a/services/static-webserver/client/source/class/osparc/ui/list/CollaboratorListItem.js +++ b/services/static-webserver/client/source/class/osparc/ui/list/CollaboratorListItem.js @@ -18,6 +18,12 @@ qx.Class.define("osparc.ui.list.CollaboratorListItem", { extend: osparc.ui.list.ListItem, + construct: function() { + this.base(arguments); + + this.setCursor("default"); + }, + properties: { collabType: { check: [ @@ -169,7 +175,9 @@ qx.Class.define("osparc.ui.list.CollaboratorListItem", { // highlight me const email = osparc.auth.Data.getInstance().getEmail(); if (value && value.includes(email)) { - this.addState("selected"); + this.setBackgroundColor("background-selected"); + } else { + this.setBackgroundColor("background-main-2"); } }, diff --git a/services/static-webserver/client/source/class/osparc/ui/list/ListItem.js b/services/static-webserver/client/source/class/osparc/ui/list/ListItem.js index 462845a7144..296486eaf78 100644 --- a/services/static-webserver/client/source/class/osparc/ui/list/ListItem.js +++ b/services/static-webserver/client/source/class/osparc/ui/list/ListItem.js @@ -151,7 +151,9 @@ qx.Class.define("osparc.ui.list.ListItem", { break; case "title": control = new qx.ui.basic.Label().set({ - font: "text-14" + font: "text-14", + selectable: true, + rich: true, }); this._add(control, { row: 0, @@ -161,7 +163,8 @@ qx.Class.define("osparc.ui.list.ListItem", { case "subtitle": control = new qx.ui.basic.Label().set({ font: "text-13", - rich: true + selectable: true, + rich: true, }); this._add(control, { row: 1, diff --git a/services/static-webserver/client/source/class/osparc/ui/toolbar/ProgressBar.js b/services/static-webserver/client/source/class/osparc/ui/toolbar/ProgressBar.js deleted file mode 100644 index a558e3343e3..00000000000 --- a/services/static-webserver/client/source/class/osparc/ui/toolbar/ProgressBar.js +++ /dev/null @@ -1,46 +0,0 @@ -/* ************************************************************************ - - osparc - the simcore frontend - - https://osparc.io - - Copyright: - 2019 IT'IS Foundation, https://itis.swiss - - License: - MIT: https://opensource.org/licenses/MIT - - Authors: - * Ignacio Pascual (ignapas) - -************************************************************************ */ - -/** - * ProgressBar with its padding and margins adapted to be show inside a qx.ui.toolbar.ToolBar. - */ -qx.Class.define("osparc.ui.toolbar.ProgressBar", { - extend: qx.ui.indicator.ProgressBar, - - construct: function() { - this.base(arguments); - }, - - properties: { - appearance: { - refine: true, - init: "toolbar-progressbar" - } - }, - - members : { - // overridden - _applyVisibility : function(value, old) { - this.base(arguments, value, old); - // trigger a appearance recalculation of the parent - const parent = this.getLayoutParent(); - if (parent && parent instanceof qx.ui.toolbar.PartContainer) { - qx.ui.core.queue.Appearance.add(parent); - } - } - } -}); diff --git a/services/static-webserver/client/source/class/osparc/ui/window/Progress.js b/services/static-webserver/client/source/class/osparc/ui/window/Progress.js index 45956468ece..c41b4476a0a 100644 --- a/services/static-webserver/client/source/class/osparc/ui/window/Progress.js +++ b/services/static-webserver/client/source/class/osparc/ui/window/Progress.js @@ -40,13 +40,11 @@ qx.Class.define("osparc.ui.window.Progress", { allowGrowY: false, allowGrowX: true, margin: 0, + decorator: "rounded", }); control.getChildControl("progress").set({ backgroundColor: "strong-main" }); - control.getContentElement().setStyles({ - "border-radius": "4px" - }); this.addAt(control, 1); break; } diff --git a/services/static-webserver/client/source/class/osparc/workbench/DiskUsageIndicator.js b/services/static-webserver/client/source/class/osparc/workbench/DiskUsageIndicator.js index 4a6993a9331..ed4729731ed 100644 --- a/services/static-webserver/client/source/class/osparc/workbench/DiskUsageIndicator.js +++ b/services/static-webserver/client/source/class/osparc/workbench/DiskUsageIndicator.js @@ -82,7 +82,7 @@ qx.Class.define("osparc.workbench.DiskUsageIndicator", { const indicator = this.getChildControl("disk-indicator") control = new qx.ui.basic.Label().set({ value: "", - font: "text-13", + font: "text-12", textColor: "contrasted-text-light", alignX: "center", alignY: "middle", diff --git a/services/static-webserver/client/source/class/osparc/workbench/NodeUI.js b/services/static-webserver/client/source/class/osparc/workbench/NodeUI.js index 3f2cf5e10f8..c26bbb09707 100644 --- a/services/static-webserver/client/source/class/osparc/workbench/NodeUI.js +++ b/services/static-webserver/client/source/class/osparc/workbench/NodeUI.js @@ -40,11 +40,12 @@ qx.Class.define("osparc.workbench.NodeUI", { construct: function(node) { this.base(arguments); - const grid = new qx.ui.layout.Grid(4, 1); + const grid = new qx.ui.layout.Grid(2, 1); grid.setColumnFlex(1, 1); this.set({ appearance: "node-ui-cap", + decorator: "rounded", layout: grid, showMinimize: false, showMaximize: false, @@ -55,10 +56,6 @@ qx.Class.define("osparc.workbench.NodeUI", { contentPadding: this.self().CONTENT_PADDING }); - this.getContentElement().setStyles({ - "border-radius": "4px" - }); - const captionBar = this.getChildControl("captionbar"); captionBar.set({ cursor: "move", @@ -222,10 +219,10 @@ qx.Class.define("osparc.workbench.NodeUI", { }); break; case "middle-container": - control = new qx.ui.container.Composite(new qx.ui.layout.HBox(3).set({ + control = new qx.ui.container.Composite(new qx.ui.layout.HBox(2).set({ alignY: "middle" })).set({ - padding: [3, 4] + padding: 4 }); this.add(control, { row: 0, @@ -245,7 +242,7 @@ qx.Class.define("osparc.workbench.NodeUI", { const type = osparc.service.Utils.getType(nodeType); if (type) { control.set({ - icon: type.icon + "14", + icon: type.icon + "13", toolTipText: type.label }); } else if (this.getNode().isUnknown()) { @@ -282,7 +279,8 @@ qx.Class.define("osparc.workbench.NodeUI", { case "progress": control = new qx.ui.indicator.ProgressBar().set({ height: 10, - margin: 4 + margin: 4, + decorator: "rounded", }); this.add(control, { row: 1, @@ -595,14 +593,11 @@ qx.Class.define("osparc.workbench.NodeUI", { const width = 120; this.__setNodeUIWidth(width); - const label = new qx.ui.basic.Label().set({ - font: "text-18" + const valueLabel = new qx.ui.basic.Label().set({ + paddingLeft: 4, + font: "text-14" }); - const middleContainer = this.getChildControl("middle-container"); - middleContainer.add(label); - - this.getNode().bind("outputs", label, "value", { - converter: outputs => { + const outputToValue = outputs => { if ("out_1" in outputs && "value" in outputs["out_1"]) { const val = outputs["out_1"]["value"]; if (Array.isArray(val)) { @@ -611,8 +606,18 @@ qx.Class.define("osparc.workbench.NodeUI", { return String(val); } return ""; - } + } + this.getNode().bind("outputs", valueLabel, "value", { + converter: outputs => outputToValue(outputs) }); + this.getNode().bind("outputs", valueLabel, "toolTipText", { + converter: outputs => outputToValue(outputs) + }); + const middleContainer = this.getChildControl("middle-container"); + middleContainer.add(valueLabel, { + flex: 1 + }); + this.fireEvent("updateNodeDecorator"); }, @@ -642,15 +647,18 @@ qx.Class.define("osparc.workbench.NodeUI", { }, __turnIntoProbeUI: function() { - const width = 150; + const width = 120; this.__setNodeUIWidth(width); const linkLabel = new osparc.ui.basic.LinkLabel().set({ - paddingLeft: 5, - font: "text-12" + paddingLeft: 4, + font: "text-14", + rich: false, // this will make the ellipsis work }); const middleContainer = this.getChildControl("middle-container"); - middleContainer.add(linkLabel); + middleContainer.add(linkLabel, { + flex: 1 + }); this.getNode().getPropsForm().addListener("linkFieldModified", () => this.__setProbeValue(linkLabel), this); this.__setProbeValue(linkLabel);