✨ Allow a user to select from default project thumbnails (#5334)

Author: jsaq007

services/static-webserver/client/source/class/osparc/dashboard/StudyThumbnailExplorer.js

@@ -79,9 +79,9 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", {
     __getThumbnailSuggestions: function() {
       const thumbnailSuggestions = new osparc.editor.ThumbnailSuggestions().set({
         minHeight: this.self().THUMBNAIL_SLIDER_HEIGHT,
-        maxHeight: this.self().THUMBNAIL_SLIDER_HEIGHT,
+        maxHeight: this.self().THUMBNAIL_SLIDER_HEIGHT + 2,
         backgroundColor: "transparent",
-        padding: [3, 0]
+        padding: 3
       });
       return thumbnailSuggestions;
     },

services/static-webserver/client/source/class/osparc/desktop/preferences/pages/TagsPage.js

@@ -43,7 +43,7 @@ qx.Class.define("osparc.desktop.preferences.pages.TagsPage", {
 
     __createComponents: function() {
       this.__addTagButton = new qx.ui.form.Button().set({
-        appearance: "strong-button",
+        appearance: "form-button-outlined",
         label: this.tr("New Tag"),
         icon: "@FontAwesome5Solid/plus/14"
       });

services/static-webserver/client/source/class/osparc/editor/ThumbnailEditor.js

@@ -78,16 +78,15 @@ qx.Class.define("osparc.editor.ThumbnailEditor", {
       switch (id) {
         case "url-field":
           control = new qx.ui.form.TextField().set({
-            font: "text-14",
-            backgroundColor: "background-main",
+            appearance: "form-input",
             placeholder: this.tr("url")
           });
           this.bind("url", control, "value");
           this._add(control);
           break;
         case "thumbnails-layout": {
           control = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));
-          const label = new qx.ui.basic.Label(this.tr("or pick one from the list of services:"));
+          const label = new qx.ui.basic.Label(this.tr("or pick one from the list below:"));
           control.add(label);
           this._add(control, {
             flex: 1
@@ -96,6 +95,10 @@ qx.Class.define("osparc.editor.ThumbnailEditor", {
         }
         case "scroll-thumbnails": {
           control = new osparc.editor.ThumbnailSuggestions();
+          control.set({
+            padding: 2,
+            backgroundColor: "transparent"
+          })
           const thumbnailsLayout = this.getChildControl("thumbnails-layout");
           thumbnailsLayout.add(control);
           break;
@@ -109,13 +112,19 @@ qx.Class.define("osparc.editor.ThumbnailEditor", {
         case "cancel-btn": {
           const buttons = this.getChildControl("buttons-layout");
           control = new qx.ui.form.Button(this.tr("Cancel"));
+          control.set({
+            appearance: "form-button-text"
+          });
           control.addListener("execute", () => this.fireEvent("cancel"), this);
           buttons.add(control);
           break;
         }
         case "save-btn": {
           const buttons = this.getChildControl("buttons-layout");
           control = new qx.ui.form.Button(this.tr("Save"));
+          control.set({
+            appearance: "form-button"
+          });
           control.addListener("execute", () => {
             const urlField = this.getChildControl("url-field");
             const validUrl = this.self().sanitizeUrl(urlField.getValue());
@@ -136,7 +145,7 @@ qx.Class.define("osparc.editor.ThumbnailEditor", {
       thumbnailSuggestions.setSuggestions(suggestions);
       thumbnailSuggestions.addListener("thumbnailTapped", e => {
         const thumbnailData = e.getData();
-        this.setUrl(thumbnailData["source"]);
+        this.setUrl(thumbnailData.source);
       });
       this.getChildControl("thumbnails-layout").setVisibility(suggestions.length ? "visible" : "excluded");
     }

services/static-webserver/client/source/class/osparc/editor/ThumbnailSuggestions.js

@@ -23,7 +23,8 @@ qx.Class.define("osparc.editor.ThumbnailSuggestions", {
 
     this.set({
       alignX: "center",
-      maxHeight: 170
+      height: 118,
+      maxHeight: 118
     });
     this.setButtonsWidth(30);
 
@@ -49,17 +50,31 @@ qx.Class.define("osparc.editor.ThumbnailSuggestions", {
   },
 
   statics: {
+    defaultTemplates: [
+      "https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/Thumbnail.png",
+      "https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/bright_coulomb.png",
+      "https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/dynamic_hertz.png",
+      "https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/electric_heaviside.png",
+      "https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/energetic_ampere.png",
+      "https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/glowing_tesla.png",
+      "https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/illuminated_volta.png",
+      "https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/luminous_ohm.png",
+      "https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/magnetic_lorentz.png",
+      "https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/radiant_maxwell.png",
+      "https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/vibrant_faraday.png"
+    ],
     extractThumbnailSuggestions: function(study) {
       const suggestions = new Set([]);
       const wb = study.getWorkbench();
       const nodes = wb.getWorkbenchInitData() ? wb.getWorkbenchInitData() : wb.getNodes();
       Object.values(nodes).forEach(node => {
-        const srvMetadata = osparc.service.Utils.getMetaData(node["key"], node["version"]);
+        const srvMetadata = osparc.service.Utils.getMetaData(node.getKey(), node.getVersion());
         if (srvMetadata && srvMetadata["thumbnail"] && !osparc.data.model.Node.isFrontend(node)) {
           suggestions.add(srvMetadata["thumbnail"]);
         }
       });
-      return Array.from(suggestions);
+      const amendedArray = [...suggestions, ...this.defaultTemplates]
+      return Array.from(amendedArray);
     }
   },
 
@@ -122,25 +137,34 @@ qx.Class.define("osparc.editor.ThumbnailSuggestions", {
     },
 
     thumbnailTapped: function(thumbnail) {
-      this.getChildren().forEach(thumbnailImg => osparc.utils.Utils.hideBorder(thumbnailImg));
+      this.getChildren().forEach(thumbnailImg => {
+        osparc.utils.Utils.updateBorderColor(thumbnailImg, qx.theme.manager.Color.getInstance().resolve("box-shadow"));
+        osparc.utils.Utils.addBackground(thumbnailImg, qx.theme.manager.Color.getInstance().resolve("fab-background"));
+      });
       const color = qx.theme.manager.Color.getInstance().resolve("background-selected-dark");
-      osparc.utils.Utils.addBorder(thumbnail, 1, color);
+      const bgColor = qx.theme.manager.Color.getInstance().resolve("background-selected");
+      osparc.utils.Utils.updateBorderColor(thumbnail, color);
+      osparc.utils.Utils.addBackground(thumbnail, bgColor);
       this.fireDataEvent("thumbnailTapped", {
-        type: thumbnail.thumbnailType,
-        source: thumbnail.thumbnailFileUrl
+        type: thumbnail.thumbnailType || "templateThumbnail",
+        source: thumbnail.thumbnailFileUrl || thumbnail.getSource()
       });
     },
 
     setSuggestions: function(suggestions) {
       this.removeAll();
       suggestions.forEach(suggestion => {
         const maxHeight = this.getMaxHeight();
-        const thumbnail = new osparc.ui.basic.Thumbnail(suggestion["thumbnailUrl"], maxHeight, parseInt(maxHeight*2/3));
-        thumbnail.thumbnailType = suggestion["type"];
-        thumbnail.thumbnailFileUrl = suggestion["fileUrl"];
-        thumbnail.setMarginLeft(1); // give some extra space to the selection border
-        thumbnail.addListener("mouseover", () => thumbnail.set({decorator: "selected-light"}), this);
-        thumbnail.addListener("mouseout", () => thumbnail.set({decorator: "fab-button"}), this);
+        const thumbnail = new osparc.ui.basic.Thumbnail(suggestion.thumbnailUrl || suggestion, maxHeight, parseInt(maxHeight*2/3));
+        thumbnail.set({
+          minWidth: 97,
+          margin: 0,
+          decorator: "thumbnail"
+        });
+        thumbnail.thumbnailType = suggestion.type || "templateThumbnail";
+        thumbnail.thumbnailFileUrl = suggestion.fileUrl || suggestion;
+        thumbnail.addListener("mouseover", () => thumbnail.set({decorator: "thumbnail-selected"}), this);
+        thumbnail.addListener("mouseout", () => thumbnail.set({decorator: "thumbnail"}), this);
         thumbnail.addListener("tap", () => {
           this.thumbnailTapped(thumbnail);
         }, this);

services/static-webserver/client/source/class/osparc/form/tag/TagManager.js

@@ -75,7 +75,7 @@ qx.Class.define("osparc.form.tag.TagManager", {
       });
 
       const addTagButton = this.__addTagButton = new qx.ui.form.Button().set({
-        appearance: "strong-button",
+        appearance: "form-button-outlined",
         label: this.tr("New Tag"),
         icon: "@FontAwesome5Solid/plus/14",
         alignX: "center",

services/static-webserver/client/source/class/osparc/theme/Appearance.js

@@ -19,6 +19,7 @@ qx.Theme.define("osparc.theme.Appearance", {
   extend: osparc.theme.common.Appearance,
 
   appearances: {
+    "material-button-invalid": {},
     "pb-list": {
       include: "list",
       alias:   "list",
@@ -616,6 +617,37 @@ qx.Theme.define("osparc.theme.Appearance", {
       }
     },
 
+    "thumbnail": {
+      include: "form-button",
+      style: function(states) {
+        const style = {
+          decorator: "thumbnail",
+          cursor: "pointer",
+          padding: 5,
+          textColor: "fab_text",
+          backgroundColor: "fab-background",
+          center: true
+        };
+        if (states.hovered) {
+          style.decorator = "form-button-hovered";
+        }
+        if (states.focused) {
+          style.decorator = "form-button-focused";
+        }
+        if (states.active) {
+          style.decorator = "form-button-active";
+        }
+        if (states.disabled) {
+          style.cursor = "not-allowed";
+          style.decorator = "form-button-disabled";
+        }
+        if (states.checked || states.selected) {
+          style.decorator = "form-button-checked";
+        }
+        return style;
+      }
+    },
+
     "form-button-text": {
       style: function(states) {
         const style = {

services/static-webserver/client/source/class/osparc/theme/Decoration.js

@@ -20,6 +20,7 @@ qx.Theme.define("osparc.theme.Decoration", {
   extend: osparc.theme.common.Decoration,
 
   decorations: {
+    "material-button-invalid": {},
     "material-button": {
       style: {
         radius: 4,
@@ -555,6 +556,26 @@ qx.Theme.define("osparc.theme.Decoration", {
       }
     },
 
+    "thumbnail": {
+      include: "material-button",
+      style: {
+        style: "solid",
+        width: 1,
+        color: "box-shadow",
+        backgroundColor: "fab-background",
+      }
+    },
+
+    "thumbnail-selected": {
+      include: "thumbnail",
+      style: {
+        style: "solid",
+        width: 1,
+        color: "background-selected-dark",
+        backgroundColor: "background-selected"
+      }
+    },
+
     /*
     ---------------------------------------------------------------------------
       Appmotion

services/static-webserver/client/source/class/osparc/theme/mixin/Color.js

@@ -19,12 +19,12 @@ qx.Theme.define("osparc.theme.mixin.Color", {
     "error_bg": "rgba(255, 108, 108, 0.1)", // #FF6C6C1A
 
     "pb-new": "rgba(10, 182, 255, 0.25)",
-    "pb-study": "rgba(10, 182, 255, 0.5)",
-    "pb-template": "rgba(9, 89, 122, 0.5)",
-    "pb-service": "rgba(248, 219, 31, 0.5)",
-    "pb-computational": "rgba(255, 165, 0, 0.5)",
-    "pb-dynamic": "rgba(248, 219, 31, 0.5)",
-    "pb-locked": "rgba(113, 157, 181, 0.5)",
+    "pb-study": "rgba(10, 182, 255, 0.4)",
+    "pb-template": "rgba(9, 89, 122, 0.4)",
+    "pb-service": "rgba(248, 219, 31, 0.4)",
+    "pb-computational": "rgba(255, 165, 0, 0.4)",
+    "pb-dynamic": "rgba(248, 219, 31, 0.4)",
+    "pb-locked": "rgba(113, 157, 181, 0.4)",
 
     // button
     "default-button-text": "rgba(255, 255, 255, 1)",

services/static-webserver/client/source/class/osparc/utils/Utils.js

@@ -428,6 +428,18 @@ qx.Class.define("osparc.utils.Utils", {
       widget.getContentElement().setStyle("border", width+"px solid " + color);
     },
 
+    updateBorderColor: function(widget, color = "inherit") {
+      widget.getContentElement().setStyle("border-color", color);
+    },
+
+    addBackground: function(widget, color = "transparent") {
+      widget.getContentElement().setStyle("background-color", color);
+    },
+
+    removeBackground: function(widget) {
+      widget.getContentElement().setStyle("background-color", "transparent");
+    },
+
     removeBorder: function(widget) {
       widget.getContentElement().setStyle("border", "0px solid");
     },