Theming (#1656)

* Readded osparc specific decorations and appearances
* Brought back the fonts
* Finished theme refactor with the colors
* Updated theme version and relocated common Color theme
* Saving last selected theme in localStorage for future recovery

Author: ignapas

services/web/client/Manifest.json

@@ -40,7 +40,7 @@
     "@qooxdoo/compiler": "^1.0.0-beta",
     "@qooxdoo/framework": "^6.0.0-beta",
     "ITISFoundation/qx-iconfont-fontawesome5": "^0.2.0",
-    "ITISFoundation/qx-osparc-theme": "^0.5.4",
+    "ITISFoundation/qx-osparc-theme": "^0.5.5",
     "qooxdoo/qxl.testtapper": "^0.4.3",
     "qooxdoo/qxl.apiviewer": "^1.0.0-beta",
     "ITISFoundation/qx-iconfont-material": "^0.1.5"

services/web/client/compile.json

@@ -21,20 +21,20 @@
   "applications": [
     {
       "class": "osparc.Application",
-      "theme": "osparc.theme.Theme",
+      "theme": "osparc.theme.ThemeDark",
       "name": "osparc",
       "title": "oSPARC",
       "default": true,
       "include": [
         "iconfont.material.Load",
         "iconfont.fontawesome5.Load",
-        "osparc.theme.OSparcLight"
+        "osparc.theme.ThemeLight"
       ],
       "bootPath": "source/boot"
     },
     {
       "class": "explorer.Application",
-      "theme": "osparc.theme.Theme",
+      "theme": "osparc.theme.ThemeDark",
       "name": "explorer",
       "title": "oSPARC Explorer",
       "include": [
@@ -67,7 +67,7 @@
     {
       "class": "qxl.testtapper.Application",
       "name": "testtapper",
-      "theme": "osparc.theme.Theme",
+      "theme": "osparc.theme.ThemeDark",
       "title": "Qooxdoo TestTAPper",
       "environment": {
         "qx.icontheme": "Tango"

services/web/client/config.json

@@ -31,7 +31,7 @@
   {
     "APPLICATION"  : "osparc",
     "QOOXDOO_PATH" : "../qooxdoo-sdk/",
-    "QXTHEME"      : "qx.theme.Modern",
+    "QXTHEME"      : "osparc.theme.ThemeDark",
     "API_EXCLUDE"  : ["qx.*", "${APPLICATION}.theme.*", "${APPLICATION}.test.*"],
     "LOCALES"      : [ "en" ],
     "ROOT"         : "."

services/web/client/qx-lock.json

@@ -10,11 +10,11 @@
     },
     {
       "library_name": "qx-osparc-theme",
-      "library_version": "0.5.4",
-      "path": "qx_packages/ITISFoundation_qx-osparc-theme_v0_5_4",
+      "library_version": "0.5.5",
+      "path": "qx_packages/ITISFoundation_qx-osparc-theme_v0_5_5",
       "uri": "ITISFoundation/qx-osparc-theme",
       "repo_name": "ITISFoundation/qx-osparc-theme",
-      "repo_tag": "v0.5.4"
+      "repo_tag": "v0.5.5"
     },
     {
       "library_name": "qx-iconfont-material",

services/web/client/source/class/osparc/Application.js

@@ -41,6 +41,15 @@ qx.Class.define("osparc.Application", {
     main: function() {
       // Call super class
       this.base();
+
+      // Load user preferred theme if present
+      if (window.localStorage.getItem("themeName") &&
+        window.localStorage.getItem("themeName") !== qx.theme.manager.Meta.getInstance().getTheme().name) {
+        qx.theme.manager.Meta.getInstance().setTheme(
+          qx.Theme.getByName(window.localStorage.getItem("themeName"))
+        );
+      }
+
       this.__preventAutofillBrowserSyles();
 
       // Enable logging in debug variant

services/web/client/source/class/osparc/component/workbench/WorkbenchUI.js

@@ -838,15 +838,15 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
       if (oldId) {
         if (this.__isSelectedItemAnEdge()) {
           const unselectedEdge = this.__getEdgeUI(oldId);
-          const unselectedColor = osparc.theme.Color.colors["workbench-edge-comp-active"];
+          const unselectedColor = qx.theme.manager.Color.getInstance().getTheme().colors["workbench-edge-comp-active"];
           this.__svgWidgetLinks.updateColor(unselectedEdge.getRepresentation(), unselectedColor);
         }
       }
 
       this.__selectedItemId = newID;
       if (this.__isSelectedItemAnEdge()) {
         const selectedEdge = this.__getEdgeUI(newID);
-        const selectedColor = osparc.theme.Color.colors["workbench-edge-selected"];
+        const selectedColor = qx.theme.manager.Color.getInstance().getTheme().colors["workbench-edge-selected"];
         this.__svgWidgetLinks.updateColor(selectedEdge.getRepresentation(), selectedColor);
       } else if (newID) {
         this.fireDataEvent("changeSelectedNode", newID);

services/web/client/source/class/osparc/desktop/NavigationBar.js

@@ -178,7 +178,9 @@ qx.Class.define("osparc.desktop.NavigationBar", {
           this._add(control);
           break;
         case "theme-switch":
-          control = new osparc.ui.switch.ThemeSwitcher();
+          control = new osparc.ui.switch.ThemeSwitcher().set({
+            checked: qx.theme.manager.Meta.getInstance().getTheme().name === "osparc.theme.ThemeLight"
+          });
           this._add(control);
           break;
         case "user-menu":