From 2209a499a2abb9324771dbfeed40cc59d6d883f2 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 25 Jun 2024 11:08:45 +0200 Subject: [PATCH 01/17] SVGImage with textColor --- .../class/osparc/navigation/NavigationBar.js | 13 +++ .../source/class/osparc/ui/basic/SVGImage.js | 103 ++++++++++++++++++ .../source/resource/osparc/coins-solid.svg | 1 + 3 files changed, 117 insertions(+) create mode 100644 services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js create mode 100644 services/static-webserver/client/source/resource/osparc/coins-solid.svg diff --git a/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js b/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js index f28868f302d..99c1e6c15d4 100644 --- a/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js +++ b/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js @@ -139,6 +139,7 @@ qx.Class.define("osparc.navigation.NavigationBar", { this.getChildControl("help"); if (osparc.desktop.credits.Utils.areWalletsEnabled()) { this.getChildControl("credits-menu-button"); + this.getChildControl("credits-image-button"); } this.getChildControl("log-in-button"); this.getChildControl("user-menu"); @@ -239,6 +240,18 @@ qx.Class.define("osparc.navigation.NavigationBar", { this.getChildControl("right-items").add(control); break; } + case "credits-image-button": { + control = new osparc.ui.basic.SVGImage("osparc/coins-solid.svg").set({ + maxHeight: 24 + }) + control.setSize({ + height: 24, + width: 32 + }); + control.setTextColor(); + this.getChildControl("right-items").add(control); + break; + } case "tasks-button": control = new osparc.task.TasksButton(); this.getChildControl("right-items").add(control); diff --git a/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js b/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js new file mode 100644 index 00000000000..47505345f62 --- /dev/null +++ b/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js @@ -0,0 +1,103 @@ +/* ************************************************************************ + + osparc - the simcore frontend + + https://osparc.io + + Copyright: + 2024 IT'IS Foundation, https://itis.swiss + + License: + MIT: https://opensource.org/licenses/MIT + + Authors: + * Odei Maiz (odeimaiz) + +************************************************************************ */ + +/** + * Widget that displays an svg image and support changing its color. + * It is meant to be used for those images that are not available in the catalog of font icons we include. + */ + + +qx.Class.define("osparc.ui.basic.SVGImage", { + extend: qx.ui.core.Widget, + + /** + * @param source + */ + construct: function(source) { + this.base(arguments); + + this._setLayout(new qx.ui.layout.Canvas()); + + this.set({ + alignX: "center", + alignY: "middle" + }); + + if (source) { + this.setSource(source); + } + }, + + properties: { + source: { + check: "String", + init: null, + nullable: false, + apply: "__applySource" + }, + + textColor: { + check: "String", + init: null, + nullable: false, + event: "changeTextColor", + apply: "__applyTextColor" + }, + }, + + members: { + _createChildControlImpl: function(id) { + let control; + switch (id) { + case "icon": + control = new qx.ui.basic.Image().set({ + scale: true, + alignX: "center", + alignY: "middle" + }); + this._add(control, { + top: 0, + right: 0, + bottom: 0, + left: 0 + }); + break; + } + return control || this.base(arguments, id); + }, + + __applySource: function(src) { + if (src && src.includes(".svg")) { + this.getChildControl("image").setSource(src); + } + }, + + __applyTextColor: function() { + const myStyle = { + "filter": "invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%)" + }; + this.getChildControl("image").getContentElement().setStyles(myStyle); + }, + + setSize: function(size) { + this.getChildControl("image").set({ + height: size.height, + width: size.width + }); + } + } +}); diff --git a/services/static-webserver/client/source/resource/osparc/coins-solid.svg b/services/static-webserver/client/source/resource/osparc/coins-solid.svg new file mode 100644 index 00000000000..b4799adeb41 --- /dev/null +++ b/services/static-webserver/client/source/resource/osparc/coins-solid.svg @@ -0,0 +1 @@ + From 655d5657f9e9e64bbfd7462c1f7fb62e539991d4 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 25 Jun 2024 11:38:44 +0200 Subject: [PATCH 02/17] poc --- .../source/class/osparc/navigation/NavigationBar.js | 2 +- .../client/source/class/osparc/ui/basic/SVGImage.js | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js b/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js index 99c1e6c15d4..b4a8433ae35 100644 --- a/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js +++ b/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js @@ -248,7 +248,7 @@ qx.Class.define("osparc.navigation.NavigationBar", { height: 24, width: 32 }); - control.setTextColor(); + control.setImageColor("blue"); this.getChildControl("right-items").add(control); break; } diff --git a/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js b/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js index 47505345f62..0a49d3dd51d 100644 --- a/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js +++ b/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js @@ -50,12 +50,12 @@ qx.Class.define("osparc.ui.basic.SVGImage", { apply: "__applySource" }, - textColor: { + imageColor: { check: "String", init: null, nullable: false, - event: "changeTextColor", - apply: "__applyTextColor" + event: "changeImageColor", + apply: "__applyImageColor" }, }, @@ -63,7 +63,7 @@ qx.Class.define("osparc.ui.basic.SVGImage", { _createChildControlImpl: function(id) { let control; switch (id) { - case "icon": + case "image": control = new qx.ui.basic.Image().set({ scale: true, alignX: "center", @@ -86,7 +86,7 @@ qx.Class.define("osparc.ui.basic.SVGImage", { } }, - __applyTextColor: function() { + __applyImageColor: function() { const myStyle = { "filter": "invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%)" }; From fc0b10bc247c7bf14d709a0c6f2c4e38be9ac4f9 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 25 Jun 2024 14:08:00 +0200 Subject: [PATCH 03/17] CreditsImage --- .../osparc/desktop/credits/CreditsImage.js | 50 +++++++++++++++++++ .../class/osparc/navigation/NavigationBar.js | 3 +- 2 files changed, 51 insertions(+), 2 deletions(-) create mode 100644 services/static-webserver/client/source/class/osparc/desktop/credits/CreditsImage.js diff --git a/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsImage.js b/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsImage.js new file mode 100644 index 00000000000..08b5e601876 --- /dev/null +++ b/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsImage.js @@ -0,0 +1,50 @@ +/* ************************************************************************ + + osparc - the simcore frontend + + https://osparc.io + + Copyright: + 2024 IT'IS Foundation, https://itis.swiss + + License: + MIT: https://opensource.org/licenses/MIT + + Authors: + * Odei Maiz (odeimaiz) + +************************************************************************ */ + +qx.Class.define("osparc.desktop.credits.CreditsImage", { + extend: osparc.ui.basic.SVGImage, + + construct: function() { + this.base(arguments, "osparc/coins-solid.svg"); + + const store = osparc.store.Store.getInstance(); + store.addListener("changeContextWallet", this.__updateWallet, this); + this.__updateWallet(); + }, + + members: { + __updateWallet: function() { + const store = osparc.store.Store.getInstance(); + const contextWallet = store.getContextWallet(); + if (contextWallet) { + contextWallet.addListener("changeCreditsAvailable", this.__updateColor, this); + this.__updateColor(); + } + }, + + __updateColor: function() { + const store = osparc.store.Store.getInstance(); + const contextWallet = store.getContextWallet(); + if (contextWallet) { + const c = contextWallet.getCreditsAvailable(); + const creditsColor = osparc.desktop.credits.Utils.creditsToColor(c, "strong-main"); + console.log(creditsColor); + this.setImageColor("0, 0, 255"); + } + } + } +}); diff --git a/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js b/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js index b4a8433ae35..7af3f49b693 100644 --- a/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js +++ b/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js @@ -241,14 +241,13 @@ qx.Class.define("osparc.navigation.NavigationBar", { break; } case "credits-image-button": { - control = new osparc.ui.basic.SVGImage("osparc/coins-solid.svg").set({ + control = new osparc.desktop.credits.CreditsImage().set({ maxHeight: 24 }) control.setSize({ height: 24, width: 32 }); - control.setImageColor("blue"); this.getChildControl("right-items").add(control); break; } From 244fc05cf113d20f96d53cd867ff4b8be7e16fc0 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 25 Jun 2024 14:08:07 +0200 Subject: [PATCH 04/17] rgbToCSSFilter --- .../source/class/osparc/ui/basic/SVGImage.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js b/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js index 0a49d3dd51d..c18a3c2fb8f 100644 --- a/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js +++ b/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js @@ -59,6 +59,14 @@ qx.Class.define("osparc.ui.basic.SVGImage", { }, }, + statics: { + rgbToCSSFilter: function(rgb) { + const [r, g, b] = rgb.split(",").map(Number); + // Values below are based on approximations and may not be perfect + return `invert(${100 - r/2.55}%) sepia(${g/2.55}%) saturate(${b/2.55}%) hue-rotate(${r - g}deg)`; + } + }, + members: { _createChildControlImpl: function(id) { let control; @@ -86,9 +94,13 @@ qx.Class.define("osparc.ui.basic.SVGImage", { } }, - __applyImageColor: function() { + /** + * @param rgb string in the following format: "(255,0,0)" + */ + __applyImageColor: function(rgb) { + const filterValue = this.self().rgbToCSSFilter(rgb); const myStyle = { - "filter": "invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%)" + "filter": filterValue }; this.getChildControl("image").getContentElement().setStyles(myStyle); }, From b053f71ea97463d635aebc9dd7f53231e185bd88 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 25 Jun 2024 14:22:38 +0200 Subject: [PATCH 05/17] wire color --- .../source/class/osparc/desktop/credits/CreditsImage.js | 9 +++++---- .../client/source/class/osparc/ui/basic/SVGImage.js | 2 +- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsImage.js b/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsImage.js index 08b5e601876..f4c50dc02a0 100644 --- a/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsImage.js +++ b/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsImage.js @@ -40,10 +40,11 @@ qx.Class.define("osparc.desktop.credits.CreditsImage", { const store = osparc.store.Store.getInstance(); const contextWallet = store.getContextWallet(); if (contextWallet) { - const c = contextWallet.getCreditsAvailable(); - const creditsColor = osparc.desktop.credits.Utils.creditsToColor(c, "strong-main"); - console.log(creditsColor); - this.setImageColor("0, 0, 255"); + const credits = contextWallet.getCreditsAvailable(); + const creditsColor = osparc.desktop.credits.Utils.creditsToColor(credits, "strong-main"); + const hexColor = qx.theme.manager.Color.getInstance().resolve(creditsColor); + const rgbColor = qx.util.ColorUtil.hexStringToRgb(hexColor); + this.setImageColor(`${rgbColor[0]},${rgbColor[1]},${rgbColor[2]}`); } } } diff --git a/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js b/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js index c18a3c2fb8f..42bbb28bd4e 100644 --- a/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js +++ b/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js @@ -95,7 +95,7 @@ qx.Class.define("osparc.ui.basic.SVGImage", { }, /** - * @param rgb string in the following format: "(255,0,0)" + * @param rgb string in the following format: "255,0,0" */ __applyImageColor: function(rgb) { const filterValue = this.self().rgbToCSSFilter(rgb); From d91e7f84cece5e88d34af634be85f4bc029c2633 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 25 Jun 2024 14:43:22 +0200 Subject: [PATCH 06/17] converters --- .../source/class/osparc/ui/basic/SVGImage.js | 35 +++++++++++++++++-- 1 file changed, 33 insertions(+), 2 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js b/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js index 42bbb28bd4e..355581bdb66 100644 --- a/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js +++ b/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js @@ -62,8 +62,39 @@ qx.Class.define("osparc.ui.basic.SVGImage", { statics: { rgbToCSSFilter: function(rgb) { const [r, g, b] = rgb.split(",").map(Number); - // Values below are based on approximations and may not be perfect - return `invert(${100 - r/2.55}%) sepia(${g/2.55}%) saturate(${b/2.55}%) hue-rotate(${r - g}deg)`; + + let [rf, gf, bf] = [r / 255, g / 255, b / 255]; + let [mi, ma] = [Math.min(rf, gf, bf), Math.max(rf, gf, bf)]; + let [h, s, l] = [0, 0, (mi + ma) / 2]; + + if (mi !== ma) { + s = l < 0.5 ? (ma - mi) / (ma + mi) : (ma - mi) / (2 - ma - mi); + switch (ma) { + case rf: + h = (gf - bf) / (ma - mi); + break; + case gf: + h = 2 + (bf - rf) / (ma - mi); + break; + case bf: + h = 4 + (rf - gf) / (ma - mi); + break; + } + } + + h = Math.round(h * 60); + if (h < 0) { + h += 360; + } + s = Math.round(s * 100); + l = Math.round(l * 100); + + const invertValue = l2 => 100 - l2; + const sepiaValue = s2 => s2; + const saturateValue = s3 => s3; + const brightnessValue = l3 => l3; + const contrastValue = l4 => l4 > 50 ? 50 : l4; + return `invert(${invertValue(l)}%) sepia(${sepiaValue(s)}%) saturate(${saturateValue(s)}%) hue-rotate(${h}deg) brightness(${brightnessValue(l)}%) contrast(${contrastValue(l)}%)`; } }, From 34223282b616f8cbf3acf7b62316f673ccf31853 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 25 Jun 2024 15:13:13 +0200 Subject: [PATCH 07/17] keywordToCSSFilter --- .../source/class/osparc/ui/basic/SVGImage.js | 44 ++++++++++++++++--- 1 file changed, 37 insertions(+), 7 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js b/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js index 355581bdb66..79af4136a54 100644 --- a/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js +++ b/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js @@ -60,6 +60,28 @@ qx.Class.define("osparc.ui.basic.SVGImage", { }, statics: { + keywordToCSSFilter: function(keyword) { + // use the following link to extended supported colors + // https://isotropic.co/tool/hex-color-to-css-filter/ + let filter = null; + switch (keyword) { + case "danger-red": // "#FF2D2D" + filter = "filter: invert(13%) sepia(89%) saturate(5752%) hue-rotate(346deg) brightness(85%) contrast(109%);"; + break; + case "warning-yellow": // #F8DB1F + filter = "filter: invert(90%) sepia(99%) saturate(7500%) hue-rotate(331deg) brightness(95%) contrast(108%);"; + break; + case "ready-green": // #58A6FF + filter = "filter: invert(66%) sepia(24%) saturate(5763%) hue-rotate(188deg) brightness(101%) contrast(101%);"; + break; + case "text": // #58A6FF + filter = "filter: invert(66%) sepia(24%) saturate(5763%) hue-rotate(188deg) brightness(101%) contrast(101%);"; + break; + } + return filter; + }, + + // not very accurate rgbToCSSFilter: function(rgb) { const [r, g, b] = rgb.split(",").map(Number); @@ -126,14 +148,22 @@ qx.Class.define("osparc.ui.basic.SVGImage", { }, /** - * @param rgb string in the following format: "255,0,0" + * @param keywordOrRgb predefined keywords string ["danger-red", "danger-red", "ready-green", "text"] */ - __applyImageColor: function(rgb) { - const filterValue = this.self().rgbToCSSFilter(rgb); - const myStyle = { - "filter": filterValue - }; - this.getChildControl("image").getContentElement().setStyles(myStyle); + __applyImageColor: function(keywordOrRgb) { + if (["danger-red", "warning-yellow", "ready-green", "text"].includes(keywordOrRgb)) { + const filterValue = this.self().keywordToCSSFilter(keywordOrRgb); + const myStyle = { + "filter": filterValue + }; + this.getChildControl("image").getContentElement().setStyles(myStyle); + } else { + const filterValue = this.self().rgbToCSSFilter(keywordOrRgb); + const myStyle = { + "filter": filterValue + }; + this.getChildControl("image").getContentElement().setStyles(myStyle); + } }, setSize: function(size) { From b249ed13c8dfb240b64a2f8b5c762b8e80fa1121 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 25 Jun 2024 15:28:32 +0200 Subject: [PATCH 08/17] support keywords and rgb --- .../osparc/desktop/credits/CreditsImage.js | 6 ++-- .../source/class/osparc/ui/basic/SVGImage.js | 35 +++++++++++-------- 2 files changed, 22 insertions(+), 19 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsImage.js b/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsImage.js index f4c50dc02a0..fca14011705 100644 --- a/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsImage.js +++ b/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsImage.js @@ -41,10 +41,8 @@ qx.Class.define("osparc.desktop.credits.CreditsImage", { const contextWallet = store.getContextWallet(); if (contextWallet) { const credits = contextWallet.getCreditsAvailable(); - const creditsColor = osparc.desktop.credits.Utils.creditsToColor(credits, "strong-main"); - const hexColor = qx.theme.manager.Color.getInstance().resolve(creditsColor); - const rgbColor = qx.util.ColorUtil.hexStringToRgb(hexColor); - this.setImageColor(`${rgbColor[0]},${rgbColor[1]},${rgbColor[2]}`); + const creditsColorKeyword = osparc.desktop.credits.Utils.creditsToColor(credits, "strong-main"); + this.setImageColor(creditsColorKeyword); } } } diff --git a/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js b/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js index 79af4136a54..aeb6cf06e07 100644 --- a/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js +++ b/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js @@ -66,16 +66,22 @@ qx.Class.define("osparc.ui.basic.SVGImage", { let filter = null; switch (keyword) { case "danger-red": // "#FF2D2D" - filter = "filter: invert(13%) sepia(89%) saturate(5752%) hue-rotate(346deg) brightness(85%) contrast(109%);"; + filter = "invert(13%) sepia(89%) saturate(5752%) hue-rotate(346deg) brightness(85%) contrast(109%)"; break; case "warning-yellow": // #F8DB1F - filter = "filter: invert(90%) sepia(99%) saturate(7500%) hue-rotate(331deg) brightness(95%) contrast(108%);"; + filter = "invert(90%) sepia(99%) saturate(7500%) hue-rotate(331deg) brightness(95%) contrast(108%)"; break; case "ready-green": // #58A6FF - filter = "filter: invert(66%) sepia(24%) saturate(5763%) hue-rotate(188deg) brightness(101%) contrast(101%);"; + filter = "invert(66%) sepia(24%) saturate(5763%) hue-rotate(188deg) brightness(101%) contrast(101%)"; break; - case "text": // #58A6FF - filter = "filter: invert(66%) sepia(24%) saturate(5763%) hue-rotate(188deg) brightness(101%) contrast(101%);"; + case "text": // light or dark + if (qx.theme.manager.Meta.getInstance().getTheme().basename === "ThemeLight") { + // ThemeLight #282828 + filter = "invert(10%) sepia(4%) saturate(19%) hue-rotate(354deg) brightness(102%) contrast(86%)"; + } else { + // ThemeDark #D8D8D8 + filter = "invert(66%) sepia(24%) saturate(5763%) hue-rotate(188deg) brightness(101%) contrast(101%)"; + } break; } return filter; @@ -151,19 +157,18 @@ qx.Class.define("osparc.ui.basic.SVGImage", { * @param keywordOrRgb predefined keywords string ["danger-red", "danger-red", "ready-green", "text"] */ __applyImageColor: function(keywordOrRgb) { + let filterValue = ""; if (["danger-red", "warning-yellow", "ready-green", "text"].includes(keywordOrRgb)) { - const filterValue = this.self().keywordToCSSFilter(keywordOrRgb); - const myStyle = { - "filter": filterValue - }; - this.getChildControl("image").getContentElement().setStyles(myStyle); + filterValue = this.self().keywordToCSSFilter(keywordOrRgb); } else { - const filterValue = this.self().rgbToCSSFilter(keywordOrRgb); - const myStyle = { - "filter": filterValue - }; - this.getChildControl("image").getContentElement().setStyles(myStyle); + const hexColor = qx.theme.manager.Color.getInstance().resolve(keywordOrRgb); + const rgbColor = qx.util.ColorUtil.hexStringToRgb(hexColor); + filterValue = this.self().rgbToCSSFilter(rgbColor); } + const myStyle = { + "filter": filterValue + }; + this.getChildControl("image").getContentElement().setStyles(myStyle); }, setSize: function(size) { From 06b0e481209888b52f706a8df554e38ca0167f79 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 25 Jun 2024 15:38:37 +0200 Subject: [PATCH 09/17] the button is an image --- .../desktop/credits/CreditsIndicatorButton.js | 25 ++++++------------- .../class/osparc/navigation/NavigationBar.js | 20 +-------------- 2 files changed, 9 insertions(+), 36 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsIndicatorButton.js b/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsIndicatorButton.js index e331547fbca..5353f9353d5 100644 --- a/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsIndicatorButton.js +++ b/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsIndicatorButton.js @@ -16,17 +16,21 @@ ************************************************************************ */ qx.Class.define("osparc.desktop.credits.CreditsIndicatorButton", { - extend: qx.ui.form.Button, + extend: osparc.desktop.credits.CreditsImage, construct: function() { this.base(arguments); this.set({ - backgroundColor: "transparent" + maxHeight: 30, + cursor: "pointer", + padding: [3, 8] }); - const store = osparc.store.Store.getInstance(); - store.bind("contextWallet", this, "wallet"); + this.setSize({ + height: 24, + width: 30 + }); this.__creditsContainer = new osparc.desktop.credits.CreditsNavBarContainer(); this.__creditsContainer.exclude(); @@ -34,24 +38,11 @@ qx.Class.define("osparc.desktop.credits.CreditsIndicatorButton", { this.addListener("tap", this.__buttonTapped, this); }, - properties: { - wallet: { - check: "osparc.data.model.Wallet", - init: null, - nullable: true, - event: "changeWallet", - apply: "__applyWallet" - } - }, members: { __creditsContainer: null, __tappedOut: null, - __applyWallet: function() { - osparc.desktop.credits.Utils.setCreditsIconToButton(this); - }, - __buttonTapped: function() { if (this.__tappedOut) { this.__tappedOut = false; diff --git a/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js b/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js index 46137a090be..89662fee8dd 100644 --- a/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js +++ b/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js @@ -139,7 +139,6 @@ qx.Class.define("osparc.navigation.NavigationBar", { this.getChildControl("help"); if (osparc.desktop.credits.Utils.areWalletsEnabled()) { this.getChildControl("credits-button"); - this.getChildControl("credits-image-button"); } this.getChildControl("log-in-button"); this.getChildControl("user-menu"); @@ -239,25 +238,8 @@ qx.Class.define("osparc.navigation.NavigationBar", { this.getChildControl("right-items").add(control); break; } - case "credits-image-button": { - control = new osparc.desktop.credits.CreditsImage().set({ - maxHeight: 24 - }) - control.setSize({ - height: 24, - width: 32 - }); - this.getChildControl("right-items").add(control); - break; - } case "credits-button": - control = new osparc.desktop.credits.CreditsIndicatorButton().set({ - maxHeight: 32 - }); - control.getChildControl("icon").set({ - maxHeight: 24, - scale: true - }); + control = new osparc.desktop.credits.CreditsIndicatorButton(); osparc.utils.Utils.setIdToWidget(control, "creditsNavigationBtn"); this.getChildControl("right-items").add(control); break; From 68e7001bcc169ea5226f64b7a5a4506debaa0e29 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 25 Jun 2024 15:56:54 +0200 Subject: [PATCH 10/17] support strong-main --- .../source/class/osparc/ui/basic/SVGImage.js | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js b/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js index aeb6cf06e07..49701848f1a 100644 --- a/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js +++ b/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js @@ -83,6 +83,17 @@ qx.Class.define("osparc.ui.basic.SVGImage", { filter = "invert(66%) sepia(24%) saturate(5763%) hue-rotate(188deg) brightness(101%) contrast(101%)"; } break; + case "strong-main": // it depends on the product + if (qx.theme.manager.Meta.getInstance().getTheme().name.includes(".s4l.")) { + // "rgba(0, 144, 208, 1)" + filter = "invert(55%) sepia(73%) saturate(6976%) hue-rotate(177deg) brightness(100%) contrast(102%)"; + } else if (qx.theme.manager.Meta.getInstance().getTheme().name.includes(".tis.")) { + // "rgba(105, 105, 255, 1)" + filter = "invert(51%) sepia(98%) saturate(4017%) hue-rotate(223deg) brightness(99%) contrast(105%)"; + } else { + // "rgba(131, 0, 191, 1)" osparc + filter = "invert(13%) sepia(95%) saturate(6107%) hue-rotate(282deg) brightness(77%) contrast(115%)"; + } } return filter; }, @@ -154,13 +165,11 @@ qx.Class.define("osparc.ui.basic.SVGImage", { }, /** - * @param keywordOrRgb predefined keywords string ["danger-red", "danger-red", "ready-green", "text"] + * @param keywordOrRgb predefined keyword or rgb "0,255,0" */ __applyImageColor: function(keywordOrRgb) { - let filterValue = ""; - if (["danger-red", "warning-yellow", "ready-green", "text"].includes(keywordOrRgb)) { - filterValue = this.self().keywordToCSSFilter(keywordOrRgb); - } else { + let filterValue = this.self().keywordToCSSFilter(keywordOrRgb); + if (filterValue === null) { const hexColor = qx.theme.manager.Color.getInstance().resolve(keywordOrRgb); const rgbColor = qx.util.ColorUtil.hexStringToRgb(hexColor); filterValue = this.self().rgbToCSSFilter(rgbColor); From 576b6ac1caa701aeb4a13b138266b4d627d9ec13 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 25 Jun 2024 16:12:23 +0200 Subject: [PATCH 11/17] minor --- .../client/source/class/osparc/ui/basic/SVGImage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js b/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js index 49701848f1a..432e130d344 100644 --- a/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js +++ b/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js @@ -89,7 +89,7 @@ qx.Class.define("osparc.ui.basic.SVGImage", { filter = "invert(55%) sepia(73%) saturate(6976%) hue-rotate(177deg) brightness(100%) contrast(102%)"; } else if (qx.theme.manager.Meta.getInstance().getTheme().name.includes(".tis.")) { // "rgba(105, 105, 255, 1)" - filter = "invert(51%) sepia(98%) saturate(4017%) hue-rotate(223deg) brightness(99%) contrast(105%)"; + filter = "invert(36%) sepia(74%) saturate(2007%) hue-rotate(225deg) brightness(102%) contrast(104%)"; } else { // "rgba(131, 0, 191, 1)" osparc filter = "invert(13%) sepia(95%) saturate(6107%) hue-rotate(282deg) brightness(77%) contrast(115%)"; From 3af6489a7a2ffca342f7d57051870e7e0178e95f Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 25 Jun 2024 16:49:54 +0200 Subject: [PATCH 12/17] replace the plus button with the creditsImage --- .../source/class/osparc/dashboard/NewStudies.js | 13 ++++++++++++- .../desktop/credits/CreditsIndicatorButton.js | 2 +- .../source/class/osparc/desktop/credits/Utils.js | 11 ----------- .../client/source/class/osparc/ui/basic/SVGImage.js | 11 ++++++----- 4 files changed, 19 insertions(+), 18 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/dashboard/NewStudies.js b/services/static-webserver/client/source/class/osparc/dashboard/NewStudies.js index 9fc4f8441ab..bedba576986 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/NewStudies.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/NewStudies.js @@ -148,7 +148,18 @@ qx.Class.define("osparc.dashboard.NewStudies", { newPlanButton.setCardKey(templateInfo.idToWidget); osparc.utils.Utils.setIdToWidget(newPlanButton, templateInfo.idToWidget); if (templateInfo.billable) { - osparc.desktop.credits.Utils.setCreditsIconToButton(newPlanButton); + // replace the plus button with the creditsImage + const plusIcon = newPlanButton.getChildControl("icon"); + plusIcon.exclude(); + const creditsImage = new osparc.desktop.credits.CreditsImage(); + creditsImage.getChildControl("image").set({ + marginTop: 20, + maxWidth: 60, + maxHeight: 60 + }) + const bodyLayout = newPlanButton.getChildControl("body"); + bodyLayout.add(creditsImage, {flex: 1}); + newPlanButton.addListener("execute", () => { const store = osparc.store.Store.getInstance(); const credits = store.getContextWallet().getCreditsAvailable() diff --git a/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsIndicatorButton.js b/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsIndicatorButton.js index 5353f9353d5..277dc5cf087 100644 --- a/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsIndicatorButton.js +++ b/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsIndicatorButton.js @@ -22,7 +22,7 @@ qx.Class.define("osparc.desktop.credits.CreditsIndicatorButton", { this.base(arguments); this.set({ - maxHeight: 30, + // maxHeight: 30, cursor: "pointer", padding: [3, 8] }); diff --git a/services/static-webserver/client/source/class/osparc/desktop/credits/Utils.js b/services/static-webserver/client/source/class/osparc/desktop/credits/Utils.js index fc9539e6213..e05d53427da 100644 --- a/services/static-webserver/client/source/class/osparc/desktop/credits/Utils.js +++ b/services/static-webserver/client/source/class/osparc/desktop/credits/Utils.js @@ -27,17 +27,6 @@ qx.Class.define("osparc.desktop.credits.Utils", { return Boolean(statics && statics["isPaymentEnabled"]); }, - setCreditsIconToButton: function(button) { - button.setIcon(osparc.desktop.credits.Utils.CREDITS_ICON); - const store = osparc.store.Store.getInstance(); - const contextWallet = store.getContextWallet(); - if (contextWallet) { - contextWallet.bind("creditsAvailable", button, "textColor", { - converter: c => osparc.desktop.credits.Utils.creditsToColor(c, "strong-main") - }); - } - }, - getNoWriteAccessInformationLabel: function() { return new qx.ui.basic.Label().set({ value: qx.locale.Manager.tr("You can't access this information"), diff --git a/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js b/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js index 432e130d344..d7afc421ee6 100644 --- a/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js +++ b/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js @@ -30,9 +30,11 @@ qx.Class.define("osparc.ui.basic.SVGImage", { construct: function(source) { this.base(arguments); - this._setLayout(new qx.ui.layout.Canvas()); + this._setLayout(new qx.ui.layout.VBox()); this.set({ + allowGrowX: true, + allowGrowY: true, alignX: "center", alignY: "middle" }); @@ -144,14 +146,13 @@ qx.Class.define("osparc.ui.basic.SVGImage", { case "image": control = new qx.ui.basic.Image().set({ scale: true, + allowGrowX: true, + allowGrowY: true, alignX: "center", alignY: "middle" }); this._add(control, { - top: 0, - right: 0, - bottom: 0, - left: 0 + flex: 1 }); break; } From b4b227e32e07e876b087eee7705c849fbf811e5d Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 25 Jun 2024 16:53:07 +0200 Subject: [PATCH 13/17] centered --- .../osparc/desktop/credits/CreditsIndicatorButton.js | 8 +++++--- .../client/source/class/osparc/ui/basic/SVGImage.js | 7 ------- 2 files changed, 5 insertions(+), 10 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsIndicatorButton.js b/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsIndicatorButton.js index 277dc5cf087..340c5033b9d 100644 --- a/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsIndicatorButton.js +++ b/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsIndicatorButton.js @@ -22,14 +22,16 @@ qx.Class.define("osparc.desktop.credits.CreditsIndicatorButton", { this.base(arguments); this.set({ - // maxHeight: 30, cursor: "pointer", padding: [3, 8] }); - this.setSize({ + this.getChildControl("image").set({ + marginTop: 10, + width: 30, + maxWidth: 30, height: 24, - width: 30 + maxHeight: 24 }); this.__creditsContainer = new osparc.desktop.credits.CreditsNavBarContainer(); diff --git a/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js b/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js index d7afc421ee6..b0c34688f47 100644 --- a/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js +++ b/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js @@ -179,13 +179,6 @@ qx.Class.define("osparc.ui.basic.SVGImage", { "filter": filterValue }; this.getChildControl("image").getContentElement().setStyles(myStyle); - }, - - setSize: function(size) { - this.getChildControl("image").set({ - height: size.height, - width: size.width - }); } } }); From 5855c5620c68fcc16e3ea297d92728918083f7fc Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 25 Jun 2024 16:56:09 +0200 Subject: [PATCH 14/17] aesthetics --- .../class/osparc/desktop/credits/CreditsIndicatorButton.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsIndicatorButton.js b/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsIndicatorButton.js index 340c5033b9d..a20fe6bf454 100644 --- a/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsIndicatorButton.js +++ b/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsIndicatorButton.js @@ -28,8 +28,8 @@ qx.Class.define("osparc.desktop.credits.CreditsIndicatorButton", { this.getChildControl("image").set({ marginTop: 10, - width: 30, - maxWidth: 30, + width: 24, + maxWidth: 24, height: 24, maxHeight: 24 }); From cf51445a1d87f3d353930209071ab1cd92f8dc1d Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Wed, 26 Jun 2024 11:22:11 +0200 Subject: [PATCH 15/17] addCreatedAt true --- services/static-webserver/client/compile.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/services/static-webserver/client/compile.json b/services/static-webserver/client/compile.json index 45f48fbe1a6..d9121d699d8 100644 --- a/services/static-webserver/client/compile.json +++ b/services/static-webserver/client/compile.json @@ -11,7 +11,8 @@ "include": [ "qx.*" ] - } + }, + "addCreatedAt": true } ], "defaultTarget": "source", From 12ec24af7f4f163beb15abe9c1c73ca07bf7bcac Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Wed, 26 Jun 2024 11:22:56 +0200 Subject: [PATCH 16/17] build target in prod --- services/static-webserver/client/Makefile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/static-webserver/client/Makefile b/services/static-webserver/client/Makefile index 9e01133e058..3f8bc072bde 100644 --- a/services/static-webserver/client/Makefile +++ b/services/static-webserver/client/Makefile @@ -43,7 +43,7 @@ follow-dev-logs: ## follow the logs of the qx compiler .PHONY: compile touch upgrade compile: ## qx compiles host' 'source' -> image's 'build-output' - # qx compile 'source' within $(docker_image) image [itisfoundation/qooxdoo-kit:${QOOXDOO_KIT_TAG}] + # qx compile 'build' within $(docker_image) image [itisfoundation/qooxdoo-kit:${QOOXDOO_KIT_TAG}] @docker buildx build --file $(docker_file) --tag $(docker_image) \ --load \ --build-arg tag=${QOOXDOO_KIT_TAG} \ From 521ebb0b503fda2dd8dc02e9cd2a2236108bcf3d Mon Sep 17 00:00:00 2001 From: Odei Maiz <33152403+odeimaiz@users.noreply.github.com> Date: Wed, 26 Jun 2024 16:06:43 +0200 Subject: [PATCH 17/17] bad merge --- .../client/source/class/osparc/ui/basic/SVGImage.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js b/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js index b97ce96bd61..541b0283029 100644 --- a/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js +++ b/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js @@ -137,6 +137,8 @@ qx.Class.define("osparc.ui.basic.SVGImage", { case "image": control = new qx.ui.basic.Image().set({ scale: true, + allowStretchX: true, + allowStretchY: true, allowGrowX: true, allowGrowY: true, alignX: "center",