From c6f21c7db50a424b1685e6871671292f9f1e72ea Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 22 Oct 2024 16:36:42 +0200 Subject: [PATCH 01/18] minor --- .../osparc/dashboard/FolderWithSharedIcon.js | 21 ++++++++++--------- 1 file changed, 11 insertions(+), 10 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", From c37c2b4db635db7d4e49315db7451e2e6e03a19c Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 22 Oct 2024 16:37:15 +0200 Subject: [PATCH 02/18] don't change header background --- .../client/source/class/osparc/dashboard/WorkspaceButtonBase.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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..7d98f0d62d0 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js @@ -126,7 +126,6 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", { } case "header": control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5)).set({ - backgroundColor: "background-card-overlay", anonymous: true, maxWidth: this.self().ITEM_WIDTH, maxHeight: this.self().HEADER_MAX_HEIGHT, @@ -162,6 +161,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"); From db35f651e59f96b9d42f6e5111bcf5c8c4d73af1 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 22 Oct 2024 16:51:09 +0200 Subject: [PATCH 03/18] folder icon on header --- .../osparc/dashboard/WorkspaceButtonItem.js | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonItem.js b/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonItem.js index dd7b80e5044..cb5af215a95 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonItem.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonItem.js @@ -102,10 +102,16 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonItem", { let layout; switch (id) { case "shared-icon": - control = new qx.ui.basic.Image().set({ - alignY: "middle", - allowGrowX: false, - allowShrinkX: false + control = new osparc.dashboard.FolderWithSharedIcon().set({ + anonymous: true, + maxHeight: 20, + padding: 0 + }); + // make it smaller + control.getChildControl("folder-icon").setSource("@FontAwesome5Solid/folder/22"); + control.getChildControl("shared-icon").setLayoutProperties({ + bottom: 1, + left: 1 }); layout = this.getChildControl("header"); layout.addAt(control, osparc.dashboard.WorkspaceButtonBase.HPOS.SHARED); @@ -210,12 +216,14 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonItem", { __applyAccessRights: function(value) { if (value && Object.keys(value).length) { - const shareIcon = this.getChildControl("shared-icon"); - shareIcon.addListener("tap", e => { + const icon = this.getChildControl("shared-icon"); + icon.addListener("tap", e => { + // OM check this e.stopPropagation(); this.__openShareWith(); }, this); - shareIcon.addListener("pointerdown", e => e.stopPropagation()); + icon.addListener("pointerdown", e => e.stopPropagation()); + const shareIcon = this.getChildControl("shared-icon").getChildControl("shared-icon"); osparc.dashboard.CardBase.populateShareIcon(shareIcon, value); } }, From f296f69e224e76aa6b309f58aba17f421ea3a36f Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 22 Oct 2024 16:51:19 +0200 Subject: [PATCH 04/18] hardcoded header color --- .../client/source/class/osparc/dashboard/WorkspaceButtonBase.js | 1 + 1 file changed, 1 insertion(+) 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 7d98f0d62d0..f8d5c553610 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js @@ -126,6 +126,7 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", { } case "header": control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5)).set({ + backgroundColor: "rgba(33, 93, 122, 0.8)", anonymous: true, maxWidth: this.self().ITEM_WIDTH, maxHeight: this.self().HEADER_MAX_HEIGHT, From 0208b8d32e0e20c3ef3557c4a5df520ce82e9887 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 22 Oct 2024 17:31:20 +0200 Subject: [PATCH 05/18] bg header color --- .../client/source/class/osparc/dashboard/WorkspaceButtonBase.js | 2 +- .../client/source/class/osparc/theme/ColorDark.js | 1 + .../client/source/class/osparc/theme/ColorLight.js | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) 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 f8d5c553610..cf41e69b829 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js @@ -126,7 +126,7 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", { } case "header": control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5)).set({ - backgroundColor: "rgba(33, 93, 122, 0.8)", + backgroundColor: "background-workspace-card-overlay", anonymous: true, maxWidth: this.self().ITEM_WIDTH, maxHeight: this.self().HEADER_MAX_HEIGHT, 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..1dec78678d7 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": "rgba(33, 93, 122, 0.8)", "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..19d55969a4f 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": "rgba(165, 223, 252, 0.8)", "primary-background-color": "rgba(255, 255, 255, 1)", "navigation_bar_background_color": "rgba(229, 229, 229, 0.8)", From 0ba28b2fc759010c049ea3b432750e1971e9a57a Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 22 Oct 2024 17:42:40 +0200 Subject: [PATCH 06/18] larger folder icon --- .../source/class/osparc/dashboard/WorkspaceButtonBase.js | 2 +- .../source/class/osparc/dashboard/WorkspaceButtonItem.js | 8 +++----- 2 files changed, 4 insertions(+), 6 deletions(-) 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 cf41e69b829..ad5b9b18a86 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js @@ -70,7 +70,7 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", { PADDING: 10, SPACING_IN: 5, SPACING: 15, - HEADER_MAX_HEIGHT: 40, // two lines in Manrope + HEADER_MAX_HEIGHT: 44, ICON_SIZE: 60, POS: { HEADER: 0, diff --git a/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonItem.js b/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonItem.js index cb5af215a95..f71bbf11d76 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonItem.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonItem.js @@ -104,14 +104,12 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonItem", { case "shared-icon": control = new osparc.dashboard.FolderWithSharedIcon().set({ anonymous: true, - maxHeight: 20, + maxHeight: 26, padding: 0 }); - // make it smaller - control.getChildControl("folder-icon").setSource("@FontAwesome5Solid/folder/22"); control.getChildControl("shared-icon").setLayoutProperties({ - bottom: 1, - left: 1 + bottom: 4, + left: 2 }); layout = this.getChildControl("header"); layout.addAt(control, osparc.dashboard.WorkspaceButtonBase.HPOS.SHARED); From 1e10f6655480177d8082513d80f33005cfdd4b87 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 22 Oct 2024 18:05:07 +0200 Subject: [PATCH 07/18] minor --- .../client/source/class/osparc/theme/ColorDark.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 1dec78678d7..ba73fa5f049 100644 --- a/services/static-webserver/client/source/class/osparc/theme/ColorDark.js +++ b/services/static-webserver/client/source/class/osparc/theme/ColorDark.js @@ -32,7 +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": "rgba(33, 93, 122, 0.8)", + "background-workspace-card-overlay": "rgba(35, 93, 122, 0.8)", "primary-background-color": "rgba(0, 20, 46, 1)", "navigation_bar_background_color": "rgba(1, 18, 26, 0.8)", From 5d049497581c142e63f7792c958f20c3d760588d Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 22 Oct 2024 18:10:33 +0200 Subject: [PATCH 08/18] FOLDER_LOOK --- .../osparc/dashboard/WorkspaceButtonBase.js | 28 ++++++++++++++++--- .../source/class/osparc/theme/ColorDark.js | 2 +- .../source/class/osparc/theme/ColorLight.js | 2 +- 3 files changed, 26 insertions(+), 6 deletions(-) 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 ad5b9b18a86..0b07a3e345a 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,15 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", { ITEM_WIDTH: 190, ITEM_HEIGHT: 190, PADDING: 10, - SPACING_IN: 5, + SPACING_IN: 0, SPACING: 15, HEADER_MAX_HEIGHT: 44, ICON_SIZE: 60, POS: { - HEADER: 0, - BODY: 1, - FOOTER: 2 + FOLDER_LOOK: 0, + HEADER: 1, + BODY: 2, + FOOTER: 3 }, HPOS: { SHARED: 0, @@ -108,9 +109,11 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", { switch (id) { case "main-layout": { control = new qx.ui.container.Composite(new qx.ui.layout.VBox(this.self().SPACING_IN)); + 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 +127,26 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", { }); break; } + case "folder-look": { + control = new qx.ui.container.Composite(new qx.ui.layout.HBox()).set({ + backgroundColor: "background-main", + maxHeight: 8, + }); + const spacer = new qx.ui.core.Widget().set({ + backgroundColor: "background-workspace-card-overlay" + }); + spacer.getContentElement().setStyles({ + "border-top-right-radius": "6px", + }); + const spacer2 = new qx.ui.core.Widget(); + control.add(spacer, {flex: 1}); + control.add(spacer2, {flex: 1}); + break; + } case "header": control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5)).set({ backgroundColor: "background-workspace-card-overlay", + opacity: 0.8, anonymous: true, maxWidth: this.self().ITEM_WIDTH, maxHeight: this.self().HEADER_MAX_HEIGHT, 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 ba73fa5f049..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,7 +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": "rgba(35, 93, 122, 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 19d55969a4f..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,7 +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": "rgba(165, 223, 252, 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)", From 2ba8d86ba0f7b1a92f6d9e2b627b1951589bcb0d Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Wed, 23 Oct 2024 09:56:00 +0200 Subject: [PATCH 09/18] back to share icon --- .../osparc/dashboard/WorkspaceButtonItem.js | 20 +++++++------------ 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonItem.js b/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonItem.js index f71bbf11d76..dd7b80e5044 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonItem.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonItem.js @@ -102,14 +102,10 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonItem", { let layout; switch (id) { case "shared-icon": - control = new osparc.dashboard.FolderWithSharedIcon().set({ - anonymous: true, - maxHeight: 26, - padding: 0 - }); - control.getChildControl("shared-icon").setLayoutProperties({ - bottom: 4, - left: 2 + control = new qx.ui.basic.Image().set({ + alignY: "middle", + allowGrowX: false, + allowShrinkX: false }); layout = this.getChildControl("header"); layout.addAt(control, osparc.dashboard.WorkspaceButtonBase.HPOS.SHARED); @@ -214,14 +210,12 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonItem", { __applyAccessRights: function(value) { if (value && Object.keys(value).length) { - const icon = this.getChildControl("shared-icon"); - icon.addListener("tap", e => { - // OM check this + const shareIcon = this.getChildControl("shared-icon"); + shareIcon.addListener("tap", e => { e.stopPropagation(); this.__openShareWith(); }, this); - icon.addListener("pointerdown", e => e.stopPropagation()); - const shareIcon = this.getChildControl("shared-icon").getChildControl("shared-icon"); + shareIcon.addListener("pointerdown", e => e.stopPropagation()); osparc.dashboard.CardBase.populateShareIcon(shareIcon, value); } }, From 209923715b5f373aa5492ba88cc92af016668108 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Wed, 23 Oct 2024 10:00:02 +0200 Subject: [PATCH 10/18] minor --- .../client/source/class/osparc/dashboard/WorkspaceButtonBase.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 0b07a3e345a..22e9c92f6da 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js @@ -155,7 +155,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, From 752902ef6caadf91449bf914cc13335434d7fca2 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Wed, 23 Oct 2024 10:00:50 +0200 Subject: [PATCH 11/18] minor --- .../source/class/osparc/dashboard/WorkspaceButtonBase.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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 22e9c92f6da..5eb0da3635b 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js @@ -68,7 +68,6 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", { ITEM_WIDTH: 190, ITEM_HEIGHT: 190, PADDING: 10, - SPACING_IN: 0, SPACING: 15, HEADER_MAX_HEIGHT: 44, ICON_SIZE: 60, @@ -108,7 +107,7 @@ 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(); const folderLook = this.getChildControl("folder-look"); const header = this.getChildControl("header"); const body = this.getChildControl("body"); From 82f022dad92aced0c9e40a91c4130f338ec3c546 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Wed, 23 Oct 2024 10:03:49 +0200 Subject: [PATCH 12/18] minor --- .../client/source/class/osparc/dashboard/WorkspaceButtonBase.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 5eb0da3635b..73e2afa2bb6 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js @@ -107,7 +107,7 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", { let control; switch (id) { case "main-layout": { - control = new qx.ui.container.Composite(); + 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"); From dc982915357c53fff7d751165c1f19421558a966 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Wed, 23 Oct 2024 10:48:12 +0200 Subject: [PATCH 13/18] 4px --- .../source/class/osparc/dashboard/WorkspaceButtonBase.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) 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 73e2afa2bb6..465cf6a7eb1 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js @@ -135,7 +135,7 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", { backgroundColor: "background-workspace-card-overlay" }); spacer.getContentElement().setStyles({ - "border-top-right-radius": "6px", + "border-top-right-radius": "4px", }); const spacer2 = new qx.ui.core.Widget(); control.add(spacer, {flex: 1}); @@ -152,6 +152,9 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", { padding: this.self().PADDING, alignY: "middle", }); + control.getContentElement().setStyles({ + "border-top-right-radius": "4px", + }); break; case "body": control = new qx.ui.container.Composite(new qx.ui.layout.VBox()).set({ From 78bec1d4ef08bc72c817d095fce91aafc76f2e10 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Wed, 23 Oct 2024 11:09:13 +0200 Subject: [PATCH 14/18] refactor --- .../osparc/dashboard/WorkspaceButtonBase.js | 61 ++++++++++++++----- .../osparc/dashboard/WorkspaceButtonNew.js | 3 + 2 files changed, 48 insertions(+), 16 deletions(-) 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 465cf6a7eb1..7d2328da9f2 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js @@ -127,19 +127,7 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", { break; } case "folder-look": { - control = new qx.ui.container.Composite(new qx.ui.layout.HBox()).set({ - backgroundColor: "background-main", - maxHeight: 8, - }); - const spacer = new qx.ui.core.Widget().set({ - backgroundColor: "background-workspace-card-overlay" - }); - spacer.getContentElement().setStyles({ - "border-top-right-radius": "4px", - }); - const spacer2 = new qx.ui.core.Widget(); - control.add(spacer, {flex: 1}); - control.add(spacer2, {flex: 1}); + control = this.__createFolderLookHeader(); break; } case "header": @@ -152,9 +140,6 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", { padding: this.self().PADDING, alignY: "middle", }); - control.getContentElement().setStyles({ - "border-top-right-radius": "4px", - }); break; case "body": control = new qx.ui.container.Composite(new qx.ui.layout.VBox()).set({ @@ -213,6 +198,50 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", { return control || this.base(arguments, id); }, + __createFolderLookHeader: function() { + const grid = new qx.ui.layout.Grid(0, 0); + grid.setColumnFlex(0, 1); + grid.setColumnFlex(1, 1); + grid.setRowHeight(0, 8); + 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" + }); + spacer00.getContentElement().setStyles({ + "border-top-right-radius": "4px", + }); + 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(spacer01, { + row: 0, + column: 1, + }); + layout.add(spacer10, { + row: 1, + column: 0, + }); + layout.add(spacer11, { + row: 1, + column: 1, + }); + 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..33cc0a3988d 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: 0.8 + }); this.getChildControl("footer").exclude(); }, From 5c0b604f650daa108ae829f206f336354982c5e2 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Wed, 23 Oct 2024 11:09:56 +0200 Subject: [PATCH 15/18] minor --- .../client/source/class/osparc/dashboard/WorkspaceButtonNew.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 33cc0a3988d..fc1526b387d 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonNew.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonNew.js @@ -40,7 +40,7 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonNew", { this.setIcon(osparc.dashboard.CardBase.NEW_ICON); this.getChildControl("header").set({ - opacity: 0.8 + opacity: 1 }); this.getChildControl("footer").exclude(); }, From 01e09d427b8c514057156cbe74697152f7fb9bf4 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Wed, 23 Oct 2024 11:38:27 +0200 Subject: [PATCH 16/18] triangle --- .../osparc/dashboard/WorkspaceButtonBase.js | 22 ++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) 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 7d2328da9f2..b51d6c2f174 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js @@ -201,7 +201,7 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", { __createFolderLookHeader: function() { const grid = new qx.ui.layout.Grid(0, 0); grid.setColumnFlex(0, 1); - grid.setColumnFlex(1, 1); + grid.setColumnFlex(2, 1); grid.setRowHeight(0, 8); grid.setRowHeight(1, 4); const layout = new qx.ui.container.Composite(grid).set({ @@ -210,8 +210,15 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", { const spacer00 = new qx.ui.core.Widget().set({ backgroundColor: "background-workspace-card-overlay" }); - spacer00.getContentElement().setStyles({ - "border-top-right-radius": "4px", + const triangle = new qx.ui.core.Widget().set({ + width: 8, + height: 8, + }); + triangle.getContentElement().setStyles({ + "width": "0", + "height": "0", + "border-bottom": "8px solid rgb(35, 93, 122)", // get color dynamically + "border-right": "8px solid transparent", }); const spacer01 = new qx.ui.core.Widget(); const spacer10 = new qx.ui.core.Widget().set({ @@ -227,17 +234,22 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", { row: 0, column: 0, }); - layout.add(spacer01, { + 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: 1, + column: 2, }); return layout; }, From 8666a5c9a5add8e020450b88cd8812b38e320b99 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Wed, 23 Oct 2024 11:48:23 +0200 Subject: [PATCH 17/18] dynamic --- .../osparc/dashboard/WorkspaceButtonBase.js | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) 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 b51d6c2f174..8ee4bd8a40c 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js @@ -199,10 +199,11 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", { }, __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, 8); + grid.setRowHeight(0, topHeight); grid.setRowHeight(1, 4); const layout = new qx.ui.container.Composite(grid).set({ backgroundColor: "background-main", @@ -211,15 +212,22 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", { backgroundColor: "background-workspace-card-overlay" }); const triangle = new qx.ui.core.Widget().set({ - width: 8, - height: 8, + width: topHeight, + height: topHeight, }); triangle.getContentElement().setStyles({ "width": "0", "height": "0", - "border-bottom": "8px solid rgb(35, 93, 122)", // get color dynamically - "border-right": "8px solid transparent", + "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" From 7a73a4a10bcd431875d87e84b76a7856e571b588 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Wed, 23 Oct 2024 11:53:21 +0200 Subject: [PATCH 18/18] minor --- .../client/source/class/osparc/dashboard/WorkspaceButtonBase.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 8ee4bd8a40c..c0c93cc9508 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js @@ -69,7 +69,7 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", { ITEM_HEIGHT: 190, PADDING: 10, SPACING: 15, - HEADER_MAX_HEIGHT: 44, + HEADER_MAX_HEIGHT: 40, // two lines in Manrope ICON_SIZE: 60, POS: { FOLDER_LOOK: 0,