🎨 [Frontend] Highlight elements in Guided Tour (#5967)

services/static-webserver/client/source/class/osparc/desktop/wallets/WalletsList.js

@@ -23,25 +23,33 @@ qx.Class.define("osparc.desktop.wallets.WalletsList", {
 
     this._setLayout(new qx.ui.layout.VBox(10));
 
-    osparc.utils.Utils.setIdToWidget(this, "walletsList");
+    const listsLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
+    osparc.utils.Utils.setIdToWidget(listsLayout, "walletsList");
+    this._add(listsLayout);
 
-    this.__addHeader(this.tr("Personal"), true);
+    const headerPersonal = this.__createHeader(this.tr("Personal"), true);
+    listsLayout.add(headerPersonal);
     this.__noPersonalWalletsLabel = new qx.ui.basic.Label().set({
       value: this.tr("No personal Credit Account found"),
       font: "text-13",
       marginLeft: 10
     });
-    this._add(this.__noPersonalWalletsLabel);
-    this.__personalWalletsModel = this.__addWalletsList("personalWalletsList");
+    listsLayout.add(this.__noPersonalWalletsLabel);
+    const listPersonal = this.__createWalletsList("personalWalletsList");
+    listsLayout.add(listPersonal);
+    this.__personalWalletsModel = this.__createModelFromList(listPersonal);
 
-    this.__addHeader(this.tr("Shared with me"), false);
+    const headerShared = this.__createHeader(this.tr("Shared with me"), false);
+    listsLayout.add(headerShared);
     this.__noSharedWalletsLabel = new qx.ui.basic.Label().set({
       value: this.tr("No shared Credit Accounts found"),
       font: "text-13",
       marginLeft: 10
     });
-    this._add(this.__noSharedWalletsLabel);
-    this.__sharedWalletsModel = this.__addWalletsList("sharedWalletsList");
+    listsLayout.add(this.__noSharedWalletsLabel);
+    const listShared = this.__createWalletsList("sharedWalletsList");
+    listsLayout.add(listShared);
+    this.__sharedWalletsModel = this.__createModelFromList(listShared);
 
     this.loadWallets();
   },
@@ -80,7 +88,7 @@ qx.Class.define("osparc.desktop.wallets.WalletsList", {
       return filter;
     },
 
-    __addWalletsList: function(widgetId) {
+    __createWalletsList: function(widgetId) {
       const walletsUIList = new qx.ui.form.List().set({
         decorator: "no-border",
         spacing: 3,
@@ -89,6 +97,10 @@ qx.Class.define("osparc.desktop.wallets.WalletsList", {
         focusable: false
       });
       osparc.utils.Utils.setIdToWidget(walletsUIList, widgetId);
+      return walletsUIList;
+    },
+
+    __createModelFromList: function(walletsUIList) {
       const walletsModel = new qx.data.Array();
       const walletsCtrl = new qx.data.controller.List(walletsModel, walletsUIList, "name");
       walletsCtrl.setDelegate({
@@ -120,7 +132,6 @@ qx.Class.define("osparc.desktop.wallets.WalletsList", {
         }
       });
 
-      this._add(walletsUIList);
       return walletsModel;
     },
 
@@ -206,7 +217,7 @@ qx.Class.define("osparc.desktop.wallets.WalletsList", {
       win.close();
     },
 
-    __addHeader: function(label, showCurrently) {
+    __createHeader: function(label, showCurrently) {
       const header = new qx.ui.container.Composite(new qx.ui.layout.HBox());
       const userWallets = new qx.ui.basic.Label().set({
         value: label,
@@ -224,7 +235,7 @@ qx.Class.define("osparc.desktop.wallets.WalletsList", {
         });
         header.add(selectColumn)
       }
-      this._add(header);
+      return header;
     }
   }
 });

services/static-webserver/client/source/class/osparc/tours/Manager.js

@@ -31,6 +31,7 @@ qx.Class.define("osparc.tours.Manager", {
       showMinimize: false
     });
 
+    this.__blankets = [];
     this.__buildLayout();
   },
 
@@ -58,6 +59,7 @@ qx.Class.define("osparc.tours.Manager", {
   members: {
     __currentBubble: null,
     __currentIdx: null,
+    __blankets: null,
 
     _createChildControlImpl: function(id) {
       let control;
@@ -95,6 +97,7 @@ qx.Class.define("osparc.tours.Manager", {
     stop: function() {
       this.setTour(null);
       this.__removeCurrentBubble();
+      this.__removeBlankets();
     },
 
     __removeCurrentBubble: function() {
@@ -105,6 +108,49 @@ qx.Class.define("osparc.tours.Manager", {
       }
     },
 
+    __addBlankets: function(targetWidget) {
+      // the plan is to surround the targetWidget with dark blankets so it gets highlighted
+      const element = targetWidget.getContentElement().getDomElement();
+      const {
+        top,
+        left
+      } = qx.bom.element.Location.get(element);
+      const {
+        width,
+        height
+      } = qx.bom.element.Dimension.getSize(element);
+      const windowW = window.innerWidth;
+      const windowH = window.innerHeight;
+
+      const addBlanket = (w, h, l, t) => {
+        const blanket = new qx.ui.core.Widget().set({
+          width: w,
+          height: h,
+          backgroundColor: "black",
+          opacity: 0.4,
+          zIndex: osparc.utils.Utils.FLOATING_Z_INDEX-1
+        });
+        qx.core.Init.getApplication().getRoot().add(blanket, {
+          left: l,
+          top: t
+        });
+        return blanket;
+      };
+      this.__blankets.push(addBlanket(left, windowH, 0, 0)); // left
+      this.__blankets.push(addBlanket(width, top, left, 0)); // top
+      this.__blankets.push(addBlanket(windowW-left-width, windowH, left+width, 0)); // right
+      this.__blankets.push(addBlanket(width, windowH-top-height, left, top+height)); // bottom
+    },
+
+    __removeBlankets: function() {
+      const nBlankets = this.__blankets.length;
+      for (let i=nBlankets-1; i>=0; i--) {
+        const blanket = this.__blankets[i];
+        qx.core.Init.getApplication().getRoot().remove(blanket);
+        this.__blankets.splice(i, 1);
+      }
+    },
+
     __selectTour: function(tour) {
       this.close();
       if ("steps" in tour) {
@@ -121,6 +167,7 @@ qx.Class.define("osparc.tours.Manager", {
       }
 
       this.__removeCurrentBubble();
+      this.__removeBlankets();
       this.__currentIdx = idx;
       const step = steps[idx];
       if (step.beforeClick && step.beforeClick.selector) {
@@ -167,6 +214,7 @@ qx.Class.define("osparc.tours.Manager", {
           if (step.placement) {
             stepWidget.setOrientation(osparc.ui.basic.FloatingHelper.textToOrientation(step.placement));
           }
+          this.__addBlankets(targetWidget);
         } else {
           // target not found, move to the next step
           this.__toStepCheck(this.__currentIdx+1);

services/static-webserver/client/source/resource/osparc/tours/tis_tours.json

@@ -112,7 +112,7 @@
         "selector": "osparc-test-id=userMenuBillingCenterBtn",
         "action": "execute"
       },
-      "anchorEl": "osparc-test-id=sharedWalletsList",
+      "anchorEl": "osparc-test-id=walletsList",
       "title": "Credits Accounts",
       "text": "This is the list of Credits Accounts you have access to. You have your own Account, but you could also use Credit Accounts that were shared with you.",
       "placement": "bottom"