♻️ [Frontend] Maintenance: Refactor decorators (#7266)

odeimaiz · web-flow · commit 29816b145ad9 · 2025-02-24T14:38:44.000+01:00
diff --git a/services/static-webserver/client/source/class/osparc/Application.js b/services/static-webserver/client/source/class/osparc/Application.js
@@ -65,7 +65,6 @@ qx.Class.define("osparc.Application", {
 
       // libs
       osparc.wrapper.IntlTelInput.getInstance().init();
-      osparc.wrapper.Three.getInstance().init();
 
       // trackers
       osparc.announcement.Tracker.getInstance().startTracker();
diff --git a/services/static-webserver/client/source/class/osparc/WatchDog.js b/services/static-webserver/client/source/class/osparc/WatchDog.js
@@ -61,7 +61,7 @@ qx.Class.define("osparc.WatchDog", {
       init: false,
       nullable: false,
       event: "changeOnline",
-      apply: "_applyOnline"
+      apply: "__applyOnline"
     },
 
     heartbeatInterval: {
@@ -75,8 +75,8 @@ qx.Class.define("osparc.WatchDog", {
   members: {
     __clientHeartbeatWWPinger: null,
 
-    _applyOnline: function(value) {
-      let logo = osparc.navigation.LogoOnOff.getInstance();
+    __applyOnline: function(value) {
+      const logo = osparc.navigation.LogoOnOff.getInstance();
       if (logo) {
         logo.setOnline(value);
       }
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/CardBase.js b/services/static-webserver/client/source/class/osparc/dashboard/CardBase.js
@@ -66,6 +66,23 @@ qx.Class.define("osparc.dashboard.CardBase", {
       LOADER: 3
     },
 
+    ICON_SIZE: 32,
+
+    createCardIcon: function() {
+      const iconSize = osparc.dashboard.CardBase.ICON_SIZE;
+      const icon = new osparc.ui.basic.Thumbnail(null, iconSize, iconSize).set({
+        minHeight: iconSize,
+        minWidth: iconSize,
+      });
+      icon.getChildControl("image").set({
+        anonymous: true,
+        decorator: "rounded",
+        minWidth: iconSize,
+        minHeight: iconSize,
+      });
+      return icon
+    },
+
     createTSRLayout: function() {
       const layout = new qx.ui.container.Composite(new qx.ui.layout.HBox(2).set({
         alignY: "middle"
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/Dashboard.js b/services/static-webserver/client/source/class/osparc/dashboard/Dashboard.js
@@ -47,7 +47,8 @@ qx.Class.define("osparc.dashboard.Dashboard", {
       barPosition: "top"
     });
 
-    osparc.wrapper.Plotly.getInstance().init();
+    // osparc.wrapper.Plotly.getInstance().init();
+    // osparc.wrapper.Three.getInstance().init();
     osparc.wrapper.Svg.getInstance().init();
     osparc.wrapper.JsonDiffPatch.getInstance().init();
     osparc.wrapper.JsonTreeViewer.getInstance().init();
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/DragWidget.js b/services/static-webserver/client/source/class/osparc/dashboard/DragWidget.js
@@ -71,7 +71,7 @@ qx.Class.define("osparc.dashboard.DragWidget", {
     __dropAllowed: function(allowed) {
       this.getChildControl("allowed-icon").set({
         source: allowed ? "@FontAwesome5Solid/check/14" : "@FontAwesome5Solid/times/14",
-        textColor: allowed ? "default-button-text" : "danger-red",
+        textColor: allowed ? "white" : "danger-red",
       });
     },
 
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/FolderButtonItem.js b/services/static-webserver/client/source/class/osparc/dashboard/FolderButtonItem.js
@@ -269,9 +269,10 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
       const menuButton = this.getChildControl("menu-button");
       menuButton.setVisibility("visible");
 
-      const menu = new qx.ui.menu.Menu();
-      menu.setPosition("bottom-right");
-      osparc.utils.Utils.prettifyMenu(menu);
+      const menu = new qx.ui.menu.Menu().set({
+        appearance: "menu-wider",
+        position: "bottom-right",
+      });
 
       const studyBrowserContext = osparc.store.Store.getInstance().getStudyBrowserContext();
       if (
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/GridButtonBase.js b/services/static-webserver/client/source/class/osparc/dashboard/GridButtonBase.js
@@ -47,7 +47,6 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
     TITLE_PADDING: 6,
     SPACING_IN: 5,
     SPACING: 15,
-    ICON_SIZE: 32,
     THUMBNAIL_SIZE: 50,
     POS: {
       TITLE: {
@@ -178,17 +177,7 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
           break;
         }
         case "icon": {
-          control = new osparc.ui.basic.Thumbnail(null, this.self().ICON_SIZE, this.self().ICON_SIZE).set({
-            minHeight: this.self().ICON_SIZE,
-            minWidth: this.self().ICON_SIZE,
-          });
-          control.getChildControl("image").set({
-            anonymous: true,
-            alignY: "top",
-            alignX: "left",
-            allowGrowX: true,
-            allowGrowY: true,
-          });
+          control = osparc.dashboard.CardBase.createCardIcon();
           layout = this.getChildControl("header");
           layout.add(control, {
             column: 0,
@@ -275,7 +264,7 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
         case "project-status":
           control = new qx.ui.basic.Image().set({
             alignY: "middle",
-            textColor: "status_icon",
+            textColor: "text",
             height: 13,
             width: 13,
             margin: [0, 1]
@@ -296,8 +285,8 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
         const image = this.getChildControl("icon").getChildControl("image");
         image.set({
           source: value,
-          decorator: "rounded",
         });
+        osparc.utils.Utils.setAltToImage(image, "card-icon");
       }
     },
 
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/GridButtonItem.js b/services/static-webserver/client/source/class/osparc/dashboard/GridButtonItem.js
@@ -93,7 +93,7 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
           break;
         case "menu-button":
           this.getChildControl("title").set({
-            maxWidth: osparc.dashboard.GridButtonBase.ITEM_WIDTH - osparc.dashboard.GridButtonBase.ICON_SIZE - this.self().MENU_BTN_DIMENSIONS - 2,
+            maxWidth: osparc.dashboard.GridButtonBase.ITEM_WIDTH - osparc.dashboard.CardBase.ICON_SIZE - this.self().MENU_BTN_DIMENSIONS - 2,
           });
           control = new qx.ui.form.MenuButton().set({
             appearance: "form-button-outlined",
@@ -273,9 +273,10 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
     _applyMenu: function(menu, old) {
       const menuButton = this.getChildControl("menu-button");
       if (menu) {
-        menuButton.setMenu(menu);
-        menu.setPosition("bottom-left");
-        osparc.utils.Utils.prettifyMenu(menu);
+        menuButton.setMenu(menu).set({
+          appearance: "menu-wider",
+          position: "bottom-left",
+        });
         osparc.utils.Utils.setIdToWidget(menu, "studyItemMenuMenu");
         this.evaluateMenuButtons();
       }
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ListButtonBase.js b/services/static-webserver/client/source/class/osparc/dashboard/ListButtonBase.js
@@ -66,14 +66,7 @@ qx.Class.define("osparc.dashboard.ListButtonBase", {
       let control;
       switch (id) {
         case "icon": {
-          control = new osparc.ui.basic.Thumbnail(null, this.self().ITEM_HEIGHT, this.self().ITEM_HEIGHT).set({
-            minHeight: this.self().ITEM_HEIGHT,
-            minWidth: this.self().ITEM_HEIGHT
-          });
-          control.getChildControl("image").set({
-            anonymous: true,
-            decorator: "rounded",
-          });
+          control = osparc.dashboard.CardBase.createCardIcon();
           this._add(control, {
             row: 0,
             column: osparc.dashboard.ListButtonBase.POS.THUMBNAIL
@@ -124,7 +117,7 @@ qx.Class.define("osparc.dashboard.ListButtonBase", {
         case "project-status":
           control = new qx.ui.basic.Image().set({
             alignY: "middle",
-            textColor: "status_icon",
+            textColor: "text",
             height: 12,
             width: 12
           });
@@ -143,6 +136,7 @@ qx.Class.define("osparc.dashboard.ListButtonBase", {
         image.set({
           source: value
         });
+        osparc.utils.Utils.setAltToImage(image, "card-icon");
       }
     },
 
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ListButtonItem.js b/services/static-webserver/client/source/class/osparc/dashboard/ListButtonItem.js
@@ -294,9 +294,10 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
     _applyMenu: function(menu, old) {
       const menuButton = this.getChildControl("menu-button");
       if (menu) {
-        menuButton.setMenu(menu);
-        menu.setPosition("bottom-left");
-        osparc.utils.Utils.prettifyMenu(menu);
+        menuButton.setMenu(menu).set({
+          appearance: "menu-wider",
+          position: "bottom-left",
+        });
         osparc.utils.Utils.setIdToWidget(menu, "studyItemMenuMenu");
         this.evaluateMenuButtons();
       }
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/NewPlusMenu.js b/services/static-webserver/client/source/class/osparc/dashboard/NewPlusMenu.js
@@ -64,17 +64,16 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
   construct: function() {
     this.base(arguments);
 
-    osparc.utils.Utils.prettifyMenu(this);
-
-    this.getContentElement().setStyles({
-      "border-color": qx.theme.manager.Color.getInstance().resolve("strong-main"),
-    });
-
     this.set({
+      appearance: "menu-wider",
       position: "bottom-left",
       spacingX: 20,
     });
 
+    this.getContentElement().setStyles({
+      "border-color": qx.theme.manager.Color.getInstance().resolve("strong-main"),
+    });
+
     this.__categoryHeaders = [];
 
     this.__addItems();
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonItem.js b/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonItem.js
@@ -188,9 +188,10 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonItem", {
         const menuButton = this.getChildControl("menu-button");
         menuButton.setVisibility("visible");
 
-        const menu = new qx.ui.menu.Menu();
-        menu.setPosition("bottom-right");
-        osparc.utils.Utils.prettifyMenu(menu);
+        const menu = new qx.ui.menu.Menu().set({
+          appearance: "menu-wider",
+          position: "bottom-right",
+        });
 
         const studyBrowserContext = osparc.store.Store.getInstance().getStudyBrowserContext();
         if (
diff --git a/services/static-webserver/client/source/class/osparc/desktop/WorkbenchView.js b/services/static-webserver/client/source/class/osparc/desktop/WorkbenchView.js
@@ -49,7 +49,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
     decorateSlider: function(slider) {
       slider.set({
         width: 2,
-        backgroundColor: "#007fd4", // Visual Studio blue
+        backgroundColor: "visual-blue",
         opacity: 1
       });
     },
diff --git a/services/static-webserver/client/source/class/osparc/desktop/preferences/pages/TagsPage.js b/services/static-webserver/client/source/class/osparc/desktop/preferences/pages/TagsPage.js
@@ -32,7 +32,7 @@ qx.Class.define("osparc.desktop.preferences.pages.TagsPage", {
   members: {
     __tagsContainer: null,
 
-    __renderLayout: function() {
+    __renderLayout: async function() {
       // Tags
       this.__tagsContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
       this.__tagsContainer.set({
@@ -44,6 +44,9 @@ qx.Class.define("osparc.desktop.preferences.pages.TagsPage", {
       });
 
       const tags = osparc.store.Tags.getInstance().getTags();
+      for (const tag of tags) {
+        await osparc.store.Tags.getInstance().fetchAccessRights(tag);
+      }
       const tagItems = tags.map(tag => new osparc.form.tag.TagItem().set({tag}));
       tagItems.forEach(tagItem => {
         this.__tagsContainer.add(tagItem);
diff --git a/services/static-webserver/client/source/class/osparc/info/ServiceLarge.js b/services/static-webserver/client/source/class/osparc/info/ServiceLarge.js
@@ -225,15 +225,10 @@ qx.Class.define("osparc.info.ServiceLarge", {
 
     __createIcon: function() {
       const serviceIcon = this.getService()["icon"] || "osparc/no_photography_black_24dp.svg";
-      const iconSize = osparc.dashboard.GridButtonBase.ICON_SIZE;
-      const icon = new osparc.ui.basic.Thumbnail(serviceIcon, iconSize, iconSize).set({
-        minHeight: iconSize,
-        minWidth: iconSize,
-      });
-      icon.getChildControl("image").set({
-        minWidth: iconSize,
-        minHeight: iconSize,
+      const icon = osparc.dashboard.CardBase.createCardIcon().set({
+        source: serviceIcon,
       });
+      osparc.utils.Utils.setAltToImage(icon.getChildControl("image"), "card-icon");
       return icon;
     },
 
diff --git a/services/static-webserver/client/source/class/osparc/info/ServiceUtils.js b/services/static-webserver/client/source/class/osparc/info/ServiceUtils.js
@@ -181,7 +181,7 @@ qx.Class.define("osparc.info.ServiceUtils", {
       // display markdown link content if that's the case
       if (
         osparc.utils.Utils.isValidHttpUrl(serviceData["description"]) &&
-        serviceData["description"].slice(-3) === ".md"
+        serviceData["description"].endsWith(".md")
       ) {
         // if it's a link, fetch the content
         fetch(serviceData["description"])
diff --git a/services/static-webserver/client/source/class/osparc/navigation/LogoOnOff.js b/services/static-webserver/client/source/class/osparc/navigation/LogoOnOff.js
@@ -46,7 +46,7 @@ qx.Class.define("osparc.navigation.LogoOnOff", {
       check: "Boolean",
       init: false,
       nullable: false,
-      apply: "_applyOnline"
+      apply: "__applyOnline"
     }
   },
 
@@ -64,6 +64,7 @@ qx.Class.define("osparc.navigation.LogoOnOff", {
         }
         case "off-logo": {
           control = new qx.ui.basic.Image("osparc/offline.svg");
+          osparc.utils.Utils.setAltToImage(control, "offline");
           const container = this.getChildControl("off-logo-container");
           container.add(control, {
             flex: 1
@@ -80,7 +81,7 @@ qx.Class.define("osparc.navigation.LogoOnOff", {
       return control || this.base(arguments, id);
     },
 
-    _applyOnline: function(value) {
+    __applyOnline: function(value) {
       this.setSelection([this.getSelectables()[value ? 1 : 0]]);
     }
   }
diff --git a/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js b/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js
@@ -50,6 +50,7 @@ qx.Class.define("osparc.navigation.NavigationBar", {
       paddingLeft: 10,
       paddingRight: 10,
       height: this.self().HEIGHT,
+      backgroundColor: "background-main-1",
     });
 
     osparc.utils.Utils.setIdToWidget(this, "navigationBar");
@@ -91,11 +92,6 @@ qx.Class.define("osparc.navigation.NavigationBar", {
     },
 
     __buildLayout: function() {
-      const colorStr = qx.theme.manager.Color.getInstance().resolve("background-main-1");
-      const color = qx.util.ColorUtil.stringToRgb(colorStr);
-      this.getContentElement().setStyles({
-        "background": `linear-gradient(0deg, rgba(1, 18, 26, 0.1) 0%, ${qx.util.ColorUtil.rgbToRgbString(color)} 4%)`
-      });
       this.getChildControl("left-items");
       this.getChildControl("center-items");
       this.getChildControl("right-items");
@@ -296,7 +292,8 @@ qx.Class.define("osparc.navigation.NavigationBar", {
 
     __createHelpMenuBtn: function() {
       const menu = new qx.ui.menu.Menu().set({
-        position: "top-right"
+        position: "top-right",
+        appearance: "menu-wider",
       });
       const menuButton = new qx.ui.form.MenuButton(null, "@FontAwesome5Regular/question-circle/22", menu).set({
         backgroundColor: "transparent"
@@ -314,8 +311,6 @@ qx.Class.define("osparc.navigation.NavigationBar", {
       osparc.store.Support.addSupportButtonsToMenu(menu, menuButton);
       osparc.store.Support.addReleaseNotesToMenu(menu);
 
-      osparc.utils.Utils.prettifyMenu(menu);
-
       return menuButton;
     },
 
diff --git a/services/static-webserver/client/source/class/osparc/navigation/UserMenu.js b/services/static-webserver/client/source/class/osparc/navigation/UserMenu.js
@@ -22,7 +22,7 @@ qx.Class.define("osparc.navigation.UserMenu", {
     this.base(arguments);
 
     this.set({
-      font: "text-14"
+      appearance: "menu-wider",
     });
   },
 
@@ -180,8 +180,6 @@ qx.Class.define("osparc.navigation.UserMenu", {
       this.addSeparator();
 
       this.getChildControl("log-out");
-
-      osparc.utils.Utils.prettifyMenu(this);
     },
 
     __addAnnouncements: function() {
@@ -244,8 +242,6 @@ qx.Class.define("osparc.navigation.UserMenu", {
       }
       this.addSeparator();
       this.getChildControl("log-out");
-
-      osparc.utils.Utils.prettifyMenu(this);
     }
   }
 });
diff --git a/services/static-webserver/client/source/class/osparc/store/Tags.js b/services/static-webserver/client/source/class/osparc/store/Tags.js
diff --git a/services/static-webserver/client/source/class/osparc/theme/Appearance.js b/services/static-webserver/client/source/class/osparc/theme/Appearance.js
diff --git a/services/static-webserver/client/source/class/osparc/theme/mixin/Color.js b/services/static-webserver/client/source/class/osparc/theme/mixin/Color.js
diff --git a/services/static-webserver/client/source/class/osparc/ui/basic/Logo.js b/services/static-webserver/client/source/class/osparc/ui/basic/Logo.js
diff --git a/services/static-webserver/client/source/class/osparc/utils/Utils.js b/services/static-webserver/client/source/class/osparc/utils/Utils.js
