diff --git a/services/static-webserver/client/source/class/osparc/desktop/wallets/WalletsList.js b/services/static-webserver/client/source/class/osparc/desktop/wallets/WalletsList.js index 0dfc8e88def..c8f1198eabd 100644 --- a/services/static-webserver/client/source/class/osparc/desktop/wallets/WalletsList.js +++ b/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; } } }); diff --git a/services/static-webserver/client/source/class/osparc/tours/Manager.js b/services/static-webserver/client/source/class/osparc/tours/Manager.js index 58bff7a6c44..74a01b4ae04 100644 --- a/services/static-webserver/client/source/class/osparc/tours/Manager.js +++ b/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); diff --git a/services/static-webserver/client/source/resource/osparc/tours/tis_tours.json b/services/static-webserver/client/source/resource/osparc/tours/tis_tours.json index eff695cae7f..62aa67cffa0 100644 --- a/services/static-webserver/client/source/resource/osparc/tours/tis_tours.json +++ b/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"