🎨 [Frontend] Make the Workspace UI element more distinguishable (ITISFoundation#6576)

Author: odeimaiz

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",

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

@@ -68,14 +68,14 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", {
     ITEM_WIDTH: 190,
     ITEM_HEIGHT: 190,
     PADDING: 10,
-    SPACING_IN: 5,
     SPACING: 15,
     HEADER_MAX_HEIGHT: 40, // two lines in Manrope
     ICON_SIZE: 60,
     POS: {
-      HEADER: 0,
-      BODY: 1,
-      FOOTER: 2
+      FOLDER_LOOK: 0,
+      HEADER: 1,
+      BODY: 2,
+      FOOTER: 3
     },
     HPOS: {
       SHARED: 0,
@@ -107,10 +107,12 @@ 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(new qx.ui.layout.VBox());
+          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 +126,14 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", {
           });
           break;
         }
+        case "folder-look": {
+          control = this.__createFolderLookHeader();
+          break;
+        }
         case "header":
           control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5)).set({
-            backgroundColor: "background-card-overlay",
+            backgroundColor: "background-workspace-card-overlay",
+            opacity: 0.8,
             anonymous: true,
             maxWidth: this.self().ITEM_WIDTH,
             maxHeight: this.self().HEADER_MAX_HEIGHT,
@@ -135,7 +142,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,
@@ -162,6 +169,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");
@@ -190,6 +198,70 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", {
       return control || this.base(arguments, id);
     },
 
+    __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, topHeight);
+      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"
+      });
+      const triangle = new qx.ui.core.Widget().set({
+        width: topHeight,
+        height: topHeight,
+      });
+      triangle.getContentElement().setStyles({
+        "width": "0",
+        "height": "0",
+        "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"
+      });
+      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(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: 2,
+      });
+      return layout;
+    },
+
     // overridden
     _applyIcon: function(value) {
       const image = this.getChildControl("icon").getChildControl("image");

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: 1
+    });
     this.getChildControl("footer").exclude();
   },
 

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": "rgb(35, 93, 122)",
 
     "primary-background-color": "rgba(0, 20, 46, 1)",
     "navigation_bar_background_color": "rgba(1, 18, 26, 0.8)",

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": "rgb(165, 223, 252)",
 
     "primary-background-color": "rgba(255, 255, 255, 1)",
     "navigation_bar_background_color": "rgba(229, 229, 229, 0.8)",