diff --git a/services/static-webserver/client/source/class/osparc/Application.js b/services/static-webserver/client/source/class/osparc/Application.js index f77c17245739..5a2e11883d3e 100644 --- a/services/static-webserver/client/source/class/osparc/Application.js +++ b/services/static-webserver/client/source/class/osparc/Application.js @@ -301,7 +301,7 @@ qx.Class.define("osparc.Application", { __setDefaultIcons: function() { const {productName} = this.__getProductMetaData() - const resourcePath = `../resource/osparc/${productName}/icons`; + const resourcePath = `../resource/osparc/${productName}/icons/`; const favIconUrls = [ "favicon-16x16.png", "favicon-32x32.png", diff --git a/services/static-webserver/client/source/class/osparc/dashboard/CardBase.js b/services/static-webserver/client/source/class/osparc/dashboard/CardBase.js index d7c6f44d0d94..3a065867cd62 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/CardBase.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/CardBase.js @@ -425,7 +425,7 @@ qx.Class.define("osparc.dashboard.CardBase", { break; case "service": uuid = resourceData.key ? resourceData.key : null; - owner = resourceData.owner ? resourceData.owner : ""; + owner = resourceData.owner ? resourceData.owner : resourceData.contact; defaultHits = 0; break; } @@ -730,7 +730,7 @@ qx.Class.define("osparc.dashboard.CardBase", { } this._getChildren().forEach(item => { - if (item) { + if (item && "setOpacity" in item) { item.setOpacity(enabled ? 1.0 : 0.7); } }); diff --git a/services/static-webserver/client/source/class/osparc/dashboard/GridButtonItem.js b/services/static-webserver/client/source/class/osparc/dashboard/GridButtonItem.js index 93ee1ecd5675..148a6b114bb5 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/GridButtonItem.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/GridButtonItem.js @@ -224,7 +224,7 @@ qx.Class.define("osparc.dashboard.GridButtonItem", { } }, - createOwner: function(label) { + __createOwner: function(label) { if (label === osparc.auth.Data.getInstance().getEmail()) { const resourceAlias = osparc.utils.Utils.resourceTypeToAlias(this.getResourceType()); return qx.locale.Manager.tr(`My ${resourceAlias}`); @@ -235,7 +235,7 @@ qx.Class.define("osparc.dashboard.GridButtonItem", { // overridden _applyOwner: function(value, old) { const label = this.getChildControl("subtitle-text"); - const user = this.createOwner(value); + const user = this.__createOwner(value); label.setValue(user); label.setVisibility(value ? "visible" : "excluded"); }, diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ListButtonBase.js b/services/static-webserver/client/source/class/osparc/dashboard/ListButtonBase.js index 67a7d75c5916..099a9d0488cc 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/ListButtonBase.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/ListButtonBase.js @@ -28,50 +28,46 @@ qx.Class.define("osparc.dashboard.ListButtonBase", { construct: function() { this.base(arguments); this.set({ - width: osparc.dashboard.ListButtonBase.ITEM_WIDTH, minHeight: osparc.dashboard.ListButtonBase.ITEM_HEIGHT, allowGrowX: true }); const layout = new qx.ui.layout.Grid(); layout.setSpacing(10); - layout.setColumnFlex(osparc.dashboard.ListButtonBase.POS.DESCRIPTION, 1); + layout.setColumnFlex(osparc.dashboard.ListButtonBase.POS.SPACER, 1); this._setLayout(layout); + + this.getChildControl("spacer"); }, statics: { - ITEM_WIDTH: 600, - ITEM_HEIGHT: 40, + ITEM_HEIGHT: 35, SPACING: 5, POS: { THUMBNAIL: 0, LOCK_STATUS: 1, TITLE: 2, - PROGRESS: 3, - DESCRIPTION: 4, + SPACER: 3, + PROGRESS: 4, TAGS: 5, - UPDATES: 6, - UI_MODE: 7, - STATUS: 8, - PERMISSION: 9, + ICONS_LAYOUT: 6, + SHARED: 7, + OWNER: 8, + LAST_CHANGE: 9, TSR: 10, - OWNER: 11, - SHARED: 12, - LAST_CHANGE: 13, - HITS: 14, - OPTIONS: 15 + HITS: 11, + OPTIONS: 12 } }, members: { _createChildControlImpl: function(id) { let control; - let titleRow; switch (id) { case "icon": { - control = new osparc.ui.basic.Thumbnail(null, 40, this.self().ITEM_HEIGHT-2*5).set({ - minHeight: 40, - minWidth: 40 + control = new osparc.ui.basic.Thumbnail(null, this.self().ITEM_HEIGHT, this.self().ITEM_HEIGHT-2*5).set({ + minHeight: this.self().ITEM_HEIGHT, + minWidth: this.self().ITEM_HEIGHT }); control.getChildControl("image").set({ anonymous: true, @@ -83,43 +79,24 @@ qx.Class.define("osparc.dashboard.ListButtonBase", { }); break; } - case "title-row": - control = new qx.ui.container.Composite(new qx.ui.layout.HBox(6)).set({ - anonymous: true, - allowGrowX: true - }); - this._add(control, { - row: 0, - column: osparc.dashboard.ListButtonBase.POS.TITLE - }); - break; case "title": control = new qx.ui.basic.Label().set({ textColor: "contrasted-text-light", font: "text-14", alignY: "middle", maxWidth: 300, - allowGrowX: true, rich: true, }); - titleRow = this.getChildControl("title-row"); - titleRow.addAt(control, 0, { - flex: 1 + this._add(control, { + row: 0, + column: osparc.dashboard.ListButtonBase.POS.TITLE }); break; - case "description": - control = new qx.ui.basic.Label().set({ - textColor: "contrasted-text-dark", - rich: true, - maxHeight: 16, - minWidth: 100, - font: "text-14", - alignY: "middle", - allowGrowX: true - }); + case "spacer": + control = new qx.ui.core.Spacer(); this._add(control, { row: 0, - column: osparc.dashboard.ListButtonBase.POS.DESCRIPTION + column: osparc.dashboard.ListButtonBase.POS.SPACER }); break; case "owner": @@ -134,6 +111,15 @@ qx.Class.define("osparc.dashboard.ListButtonBase", { column: osparc.dashboard.ListButtonBase.POS.OWNER }); break; + case "icons-layout": + control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({ + alignY: "middle" + })) + this._add(control, { + row: 0, + column: osparc.dashboard.ListButtonBase.POS.ICONS_LAYOUT + }); + break; case "project-status": control = new qx.ui.basic.Image().set({ alignY: "middle", @@ -141,10 +127,7 @@ qx.Class.define("osparc.dashboard.ListButtonBase", { height: 12, width: 12 }); - this._add(control, { - row: 0, - column: osparc.dashboard.ListButtonBase.POS.STATUS - }); + this.getChildControl("icons-layout").add(control); break; } return control || this.base(arguments, id); diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ListButtonItem.js b/services/static-webserver/client/source/class/osparc/dashboard/ListButtonItem.js index 666e6427b092..e89e03a09437 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/ListButtonItem.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/ListButtonItem.js @@ -49,15 +49,6 @@ qx.Class.define("osparc.dashboard.ListButtonItem", { column: osparc.dashboard.ListButtonBase.POS.LOCK_STATUS }); break; - case "permission-icon": - control = new qx.ui.basic.Image(osparc.dashboard.CardBase.PERM_READ).set({ - minWidth: 50 - }); - this._add(control, { - row: 0, - column: osparc.dashboard.ListButtonBase.POS.PERMISSION - }); - break; case "tags": control = new qx.ui.container.Composite(new qx.ui.layout.HBox(3).set({ alignY: "middle" @@ -71,7 +62,7 @@ qx.Class.define("osparc.dashboard.ListButtonItem", { break; case "shared-icon": control = new qx.ui.basic.Image().set({ - minWidth: 50, + minWidth: 30, alignY: "middle" }); this._add(control, { @@ -94,19 +85,23 @@ qx.Class.define("osparc.dashboard.ListButtonItem", { break; case "tsr-rating": control = osparc.dashboard.CardBase.createTSRLayout(); + this.__makeItemResponsive(control); this._add(control, { row: 0, column: osparc.dashboard.ListButtonBase.POS.TSR }); break; + case "permission-icon": + control = new qx.ui.basic.Image(osparc.dashboard.CardBase.PERM_READ).set({ + alignY: "middle", + }); + this.getChildControl("icons-layout").add(control); + break; case "workbench-mode": control = new qx.ui.basic.Image().set({ alignY: "middle" }); - this._add(control, { - row: 0, - column: osparc.dashboard.ListButtonBase.POS.UI_MODE - }); + this.getChildControl("icons-layout").add(control); break; case "empty-workbench": control = this._getEmptyWorkbenchIcon(); @@ -114,20 +109,7 @@ qx.Class.define("osparc.dashboard.ListButtonItem", { alignY: "middle", alignX: "center" }); - this._add(control, { - row: 0, - column: osparc.dashboard.ListButtonBase.POS.UPDATES - }); - break; - case "hits-service": - control = new qx.ui.basic.Label().set({ - alignY: "middle", - toolTipText: this.tr("Number of times you instantiated it") - }); - this._add(control, { - row: 0, - column: osparc.dashboard.ListButtonBase.POS.HITS - }); + this.getChildControl("icons-layout").add(control); break; case "update-study": control = new qx.ui.basic.Image().set({ @@ -136,9 +118,16 @@ qx.Class.define("osparc.dashboard.ListButtonItem", { visibility: "excluded" }); osparc.utils.Utils.setIdToWidget(control, "updateStudyBtn"); + this.getChildControl("icons-layout").add(control); + break; + case "hits-service": + control = new qx.ui.basic.Label().set({ + alignY: "middle", + toolTipText: this.tr("Number of times you instantiated it") + }); this._add(control, { row: 0, - column: osparc.dashboard.ListButtonBase.POS.UPDATES + column: osparc.dashboard.ListButtonBase.POS.HITS }); break; case "menu-selection-stack": @@ -211,7 +200,7 @@ qx.Class.define("osparc.dashboard.ListButtonItem", { } }, - createOwner: function(label) { + __createOwner: function(label) { if (label === osparc.auth.Data.getInstance().getEmail()) { const resourceAlias = osparc.utils.Utils.resourceTypeToAlias(this.getResourceType()); return qx.locale.Manager.tr(`My ${resourceAlias}`); @@ -221,9 +210,9 @@ qx.Class.define("osparc.dashboard.ListButtonItem", { _applyOwner: function(value, old) { const label = this.getChildControl("owner"); - const user = this.createOwner(value); + const user = this.__createOwner(value); label.setValue(user); - label.setVisibility(value ? "visible" : "excluded"); + this.__makeItemResponsive(label); return; }, @@ -257,9 +246,22 @@ qx.Class.define("osparc.dashboard.ListButtonItem", { tagUI.addListener("tap", () => this.fireDataEvent("tagClicked", tag)); tagsContainer.add(tagUI); }); + this.__makeItemResponsive(tagsContainer); } }, + __makeItemResponsive: function(item) { + [ + "appear", + "resize", + ].forEach(ev => { + this.addListener(ev, () => { + const bounds = this.getBounds() || this.getSizeHint(); + item.setVisibility(bounds.width > 700 ? "visible" : "excluded"); + }); + }); + }, + // overridden _applyMultiSelectionMode: function(value) { if (value) { diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ListButtonLoadMore.js b/services/static-webserver/client/source/class/osparc/dashboard/ListButtonLoadMore.js index aa0c8f76e2d0..b1df53a2aa53 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/ListButtonLoadMore.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/ListButtonLoadMore.js @@ -35,16 +35,13 @@ qx.Class.define("osparc.dashboard.ListButtonLoadMore", { members: { _applyFetching: function(value) { const title = this.getChildControl("title"); - const desc = this.getChildControl("description"); if (value) { title.setValue(this.tr("Loading...")); - desc.setValue(""); this.setIcon(osparc.dashboard.CardBase.LOADING_ICON); this.getChildControl("icon").getChildControl("image").getContentElement() .addClass("rotate"); } else { title.setValue(this.tr("Load More")); - desc.setValue(this.tr("Click to load more").toString()); this.setIcon("@FontAwesome5Solid/paw/"); this.getChildControl("icon").getChildControl("image").getContentElement() .removeClass("rotate"); diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ListButtonNew.js b/services/static-webserver/client/source/class/osparc/dashboard/ListButtonNew.js index 6cdc40fff6a5..b979981a5a29 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/ListButtonNew.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/ListButtonNew.js @@ -24,7 +24,7 @@ qx.Class.define("osparc.dashboard.ListButtonNew", { extend: osparc.dashboard.ListButtonBase, - construct: function(title, description) { + construct: function(title) { this.base(arguments); this.setPriority(osparc.dashboard.CardBase.CARD_PRIORITY.NEW); @@ -41,11 +41,6 @@ qx.Class.define("osparc.dashboard.ListButtonNew", { }); } - if (description) { - const descLabel = this.getChildControl("description"); - descLabel.setValue(description); - } - this.setIcon(osparc.dashboard.CardBase.NEW_ICON); }, diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js index f88008d773f9..4535895047a7 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js @@ -251,6 +251,12 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", { this.__viewModeLayout = new qx.ui.toolbar.Part(); const resourcesContainer = this._resourcesContainer = new osparc.dashboard.ResourceContainerManager(); + if (this._resourceType === "study") { + const viewMode = osparc.utils.Utils.localCache.getLocalStorageItem("studiesViewMode"); + if (viewMode) { + this._resourcesContainer.setMode(viewMode); + } + } resourcesContainer.addListener("updateStudy", e => this._updateStudyData(e.getData())); resourcesContainer.addListener("updateTemplate", e => this._updateTemplateData(e.getData())); resourcesContainer.addListener("updateService", e => this._updateServiceData(e.getData())); @@ -288,6 +294,10 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", { _viewByChanged: function(viewMode) { this._resourcesContainer.setMode(viewMode); this._reloadCards(); + + if (this._resourceType === "study") { + osparc.utils.Utils.localCache.setLocalStorageItem("studiesViewMode", viewMode); + } }, _addGroupByButton: function() { diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js index 994bb1fae43d..dcc83b6ff912 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js @@ -130,10 +130,10 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", { if (this.getGroupBy()) { // it will always go to the no-group group const noGroupContainer = this.__getGroupContainer("no-group"); - noGroupContainer.add(card); + this.__addCardToContainer(card, noGroupContainer); this.self().sortListByPriority(noGroupContainer.getContentContainer()); } else { - this.__nonGroupedContainer.add(card); + this.__addCardToContainer(card, this.__nonGroupedContainer); this.self().sortListByPriority(this.__nonGroupedContainer); } } else { @@ -230,10 +230,6 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", { resourceData: resourceData, tags }); - if (this.getMode() === "list") { - const width = this.getBounds().width - 15; - card.setWidth(width); - } const menu = new qx.ui.menu.Menu().set({ position: "bottom-right" }); @@ -251,6 +247,22 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", { return card; }, + __addCardToContainer: function(card, container) { + container.add(card); + + if (this.getMode() === "list") { + [ + "appear", + "resize", + ].forEach(ev => { + container.addListener(ev, () => { + const bounds = container.getBounds() || container.getSizeHint(); + card.setWidth(bounds.width); + }); + }); + } + }, + setResourcesToList: function(resourcesList) { this.__resourcesList = resourcesList; }, @@ -405,7 +417,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", { if (tags.length === 0) { let noGroupContainer = this.__getGroupContainer("no-group"); const card = this.__createCard(resourceData); - noGroupContainer.add(card); + this.__addCardToContainer(card, noGroupContainer); this.self().sortListByPriority(noGroupContainer.getContentContainer()); cards.push(card); } else { @@ -419,7 +431,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", { this.__moveNoGroupToLast(); } const card = this.__createCard(resourceData); - groupContainer.add(card); + this.__addCardToContainer(card, groupContainer); this.self().sortListByPriority(groupContainer.getContentContainer()); cards.push(card); }); @@ -431,7 +443,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", { if (orgIds.length === 0) { let noGroupContainer = this.__getGroupContainer("no-group"); const card = this.__createCard(resourceData); - noGroupContainer.add(card); + this.__addCardToContainer(card, noGroupContainer); this.self().sortListByPriority(noGroupContainer.getContentContainer()); cards.push(card); } else { @@ -464,7 +476,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", { }); } const card = this.__createCard(resourceData); - groupContainer.add(card); + this.__addCardToContainer(card, groupContainer); this.self().sortListByPriority(groupContainer.getContentContainer()); cards.push(card); }); @@ -479,9 +491,9 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", { this.__groupByShareWith(cardsCreated, resourceData); } else { const card = this.__createCard(resourceData); - cardsCreated.push(card); - this.__nonGroupedContainer.add(card); + this.__addCardToContainer(card, this.__nonGroupedContainer); this.self().sortListByPriority(this.__nonGroupedContainer); + cardsCreated.push(card); } return cardsCreated; } diff --git a/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js b/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js index 22dc8ffa8421..a17e959086c3 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js @@ -777,10 +777,6 @@ qx.Class.define("osparc.dashboard.StudyBrowser", { newStudyBtn.subscribeToFilterGroup("searchBarFilter"); osparc.utils.Utils.setIdToWidget(newStudyBtn, "newStudyBtn"); newStudyBtn.addListener("execute", () => this.__newStudyBtnClicked(newStudyBtn)); - if (this._resourcesContainer.getMode() === "list") { - const width = this._resourcesContainer.getBounds().width - 15; - newStudyBtn.setWidth(width); - } this._resourcesContainer.addNonResourceCard(newStudyBtn); }, @@ -798,10 +794,6 @@ qx.Class.define("osparc.dashboard.StudyBrowser", { newStudyBtn.setCardKey("new-study"); newStudyBtn.subscribeToFilterGroup("searchBarFilter"); osparc.utils.Utils.setIdToWidget(newStudyBtn, "newStudyBtn"); - if (this._resourcesContainer.getMode() === "list") { - const width = this._resourcesContainer.getBounds().width - 15; - newStudyBtn.setWidth(width); - } this._resourcesContainer.addNonResourceCard(newStudyBtn); newStudyBtn.addListener("execute", () => { newStudyBtn.setValue(false); @@ -846,10 +838,6 @@ qx.Class.define("osparc.dashboard.StudyBrowser", { newStudyFromServiceButton.setCardKey("new-"+key); osparc.utils.Utils.setIdToWidget(newStudyFromServiceButton, newButtonInfo.idToWidget); newStudyFromServiceButton.addListener("execute", () => this.__newStudyFromServiceBtnClicked(newStudyFromServiceButton, latestMetadata["key"], latestMetadata["version"], newButtonInfo.newStudyLabel)); - if (this._resourcesContainer.getMode() === "list") { - const width = this._resourcesContainer.getBounds().width - 15; - newStudyFromServiceButton.setWidth(width); - } this._resourcesContainer.addNonResourceCard(newStudyFromServiceButton); }) } @@ -1466,11 +1454,6 @@ qx.Class.define("osparc.dashboard.StudyBrowser", { null, true ); - - if (this._resourcesContainer.getMode() === "list") { - const width = this._resourcesContainer.getBounds().width - 15; - duplicatingStudyCard.setWidth(width); - } return duplicatingStudyCard; },