From adac8d0cef94e8719b1cab1ccb969d3eace51652 Mon Sep 17 00:00:00 2001 From: Odei Maiz <33152403+odeimaiz@users.noreply.github.com> Date: Wed, 23 Oct 2024 13:13:21 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20[Frontend]=20Make=20the=20Worksp?= =?UTF-8?q?ace=20UI=20element=20more=20distinguishable=20(#6576)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../osparc/dashboard/FolderWithSharedIcon.js | 21 ++--- .../osparc/dashboard/WorkspaceButtonBase.js | 86 +++++++++++++++++-- .../osparc/dashboard/WorkspaceButtonNew.js | 3 + .../source/class/osparc/theme/ColorDark.js | 1 + .../source/class/osparc/theme/ColorLight.js | 1 + 5 files changed, 95 insertions(+), 17 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/dashboard/FolderWithSharedIcon.js b/services/static-webserver/client/source/class/osparc/dashboard/FolderWithSharedIcon.js index af6573fb16f..5e5b3dda20d 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/FolderWithSharedIcon.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/FolderWithSharedIcon.js @@ -23,27 +23,28 @@ qx.Class.define("osparc.dashboard.FolderWithSharedIcon", { this._setLayout(new qx.ui.layout.Canvas()); - this._createChildControlImpl("folder-icon"); - this._createChildControlImpl("shared-icon"); + this.getChildControl("folder-icon"); + this.getChildControl("shared-icon"); }, members: { _createChildControlImpl: function(id) { let control; switch (id) { - case "folder-icon": { - control = new qx.ui.basic.Image().set({ - source: "@FontAwesome5Solid/folder/26" - }); - const iconContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({ + case "icon-container": + control = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({ alignY: "middle" })); - iconContainer.add(control); - this._add(iconContainer, { + this._add(control, { height: "100%" }); break; - } + case "folder-icon": + control = new qx.ui.basic.Image().set({ + source: "@FontAwesome5Solid/folder/26" + }); + this.getChildControl("icon-container").add(control); + break; case "shared-icon": control = new qx.ui.basic.Image().set({ textColor: "strong-main", diff --git a/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js b/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js index 22f238b0fd1..c0c93cc9508 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js @@ -68,14 +68,14 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", { ITEM_WIDTH: 190, ITEM_HEIGHT: 190, PADDING: 10, - SPACING_IN: 5, SPACING: 15, HEADER_MAX_HEIGHT: 40, // two lines in Manrope ICON_SIZE: 60, POS: { - HEADER: 0, - BODY: 1, - FOOTER: 2 + FOLDER_LOOK: 0, + HEADER: 1, + BODY: 2, + FOOTER: 3 }, HPOS: { SHARED: 0, @@ -107,10 +107,12 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", { let control; switch (id) { case "main-layout": { - control = new qx.ui.container.Composite(new qx.ui.layout.VBox(this.self().SPACING_IN)); + control = new qx.ui.container.Composite(new qx.ui.layout.VBox()); + const folderLook = this.getChildControl("folder-look"); const header = this.getChildControl("header"); const body = this.getChildControl("body"); const footer = this.getChildControl("footer"); + control.addAt(folderLook, this.self().POS.FOLDER_LOOK); control.addAt(header, this.self().POS.HEADER); control.addAt(body, this.self().POS.BODY, { flex: 1 @@ -124,9 +126,14 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", { }); break; } + case "folder-look": { + control = this.__createFolderLookHeader(); + break; + } case "header": control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5)).set({ - backgroundColor: "background-card-overlay", + backgroundColor: "background-workspace-card-overlay", + opacity: 0.8, anonymous: true, maxWidth: this.self().ITEM_WIDTH, maxHeight: this.self().HEADER_MAX_HEIGHT, @@ -135,7 +142,7 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", { }); break; case "body": - control = new qx.ui.container.Composite(new qx.ui.layout.VBox(5)).set({ + control = new qx.ui.container.Composite(new qx.ui.layout.VBox()).set({ decorator: "main", allowGrowY: true, allowGrowX: true, @@ -162,6 +169,7 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", { textColor: "contrasted-text-light", font: "text-14", allowGrowX: true, + alignY: "middle", maxHeight: this.self().HEADER_MAX_HEIGHT }); layout = this.getChildControl("header"); @@ -190,6 +198,70 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", { return control || this.base(arguments, id); }, + __createFolderLookHeader: function() { + const topHeight = 8; + const grid = new qx.ui.layout.Grid(0, 0); + grid.setColumnFlex(0, 1); + grid.setColumnFlex(2, 1); + grid.setRowHeight(0, topHeight); + grid.setRowHeight(1, 4); + const layout = new qx.ui.container.Composite(grid).set({ + backgroundColor: "background-main", + }); + const spacer00 = new qx.ui.core.Widget().set({ + backgroundColor: "background-workspace-card-overlay" + }); + const triangle = new qx.ui.core.Widget().set({ + width: topHeight, + height: topHeight, + }); + triangle.getContentElement().setStyles({ + "width": "0", + "height": "0", + "border-right": topHeight + "px solid transparent", + }); + const colorTriangle = () => { + const color = qx.theme.manager.Color.getInstance().resolve("background-workspace-card-overlay"); + triangle.getContentElement().setStyles({ + "border-bottom": topHeight + "px solid " + color, + }); + }; + colorTriangle(); + qx.theme.manager.Color.getInstance().addListener("changeTheme", colorTriangle); + const spacer01 = new qx.ui.core.Widget(); + const spacer10 = new qx.ui.core.Widget().set({ + backgroundColor: "background-workspace-card-overlay" + }); + const spacer11 = new qx.ui.core.Widget().set({ + backgroundColor: "background-workspace-card-overlay" + }); + spacer11.getContentElement().setStyles({ + "border-top-right-radius": "4px", + }); + layout.add(spacer00, { + row: 0, + column: 0, + }); + layout.add(triangle, { + row: 0, + column: 1, + }); + layout.add(spacer01, { + row: 0, + column: 2, + }); + layout.add(spacer10, { + row: 1, + column: 0, + colSpan: 2, + }); + layout.add(spacer11, { + row: 1, + column: 2, + }); + return layout; + }, + // overridden _applyIcon: function(value) { const image = this.getChildControl("icon").getChildControl("image"); diff --git a/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonNew.js b/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonNew.js index 4bdaf22a465..fc1526b387d 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonNew.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonNew.js @@ -39,6 +39,9 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonNew", { this.setIcon(osparc.dashboard.CardBase.NEW_ICON); + this.getChildControl("header").set({ + opacity: 1 + }); this.getChildControl("footer").exclude(); }, diff --git a/services/static-webserver/client/source/class/osparc/theme/ColorDark.js b/services/static-webserver/client/source/class/osparc/theme/ColorDark.js index 0e179de8059..0d4085c3153 100644 --- a/services/static-webserver/client/source/class/osparc/theme/ColorDark.js +++ b/services/static-webserver/client/source/class/osparc/theme/ColorDark.js @@ -32,6 +32,7 @@ qx.Theme.define("osparc.theme.ColorDark", { "background-main-5": "c06", "background-card-overlay": "rgba(25, 33, 37, 0.8)", + "background-workspace-card-overlay": "rgb(35, 93, 122)", "primary-background-color": "rgba(0, 20, 46, 1)", "navigation_bar_background_color": "rgba(1, 18, 26, 0.8)", diff --git a/services/static-webserver/client/source/class/osparc/theme/ColorLight.js b/services/static-webserver/client/source/class/osparc/theme/ColorLight.js index 4af8f46d180..6feedc258b6 100644 --- a/services/static-webserver/client/source/class/osparc/theme/ColorLight.js +++ b/services/static-webserver/client/source/class/osparc/theme/ColorLight.js @@ -32,6 +32,7 @@ qx.Theme.define("osparc.theme.ColorLight", { "background-main-5": "c06", "background-card-overlay": "rgba(229, 229, 229, 0.8)", + "background-workspace-card-overlay": "rgb(165, 223, 252)", "primary-background-color": "rgba(255, 255, 255, 1)", "navigation_bar_background_color": "rgba(229, 229, 229, 0.8)",