Skip to content

Commit 0ed6d0a

Browse files
odeimaizodeimaiz
authored
✨ [Frontend] Keep View Mode in localStorage (#6463)
1 parent dbc5870 commit 0ed6d0a

File tree

10 files changed

+105
-123
lines changed

10 files changed

+105
-123
lines changed

‎services/static-webserver/client/source/class/osparc/Application.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -301,7 +301,7 @@ qx.Class.define("osparc.Application", {
301301

302302
__setDefaultIcons: function() {
303303
const {productName} = this.__getProductMetaData()
304-
const resourcePath = `../resource/osparc/${productName}/icons`;
304+
const resourcePath = `../resource/osparc/${productName}/icons/`;
305305
const favIconUrls = [
306306
"favicon-16x16.png",
307307
"favicon-32x32.png",

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -425,7 +425,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
425425
break;
426426
case "service":
427427
uuid = resourceData.key ? resourceData.key : null;
428-
owner = resourceData.owner ? resourceData.owner : "";
428+
owner = resourceData.owner ? resourceData.owner : resourceData.contact;
429429
defaultHits = 0;
430430
break;
431431
}
@@ -730,7 +730,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
730730
}
731731

732732
this._getChildren().forEach(item => {
733-
if (item) {
733+
if (item && "setOpacity" in item) {
734734
item.setOpacity(enabled ? 1.0 : 0.7);
735735
}
736736
});

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
224224
}
225225
},
226226

227-
createOwner: function(label) {
227+
__createOwner: function(label) {
228228
if (label === osparc.auth.Data.getInstance().getEmail()) {
229229
const resourceAlias = osparc.utils.Utils.resourceTypeToAlias(this.getResourceType());
230230
return qx.locale.Manager.tr(`My ${resourceAlias}`);
@@ -235,7 +235,7 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
235235
// overridden
236236
_applyOwner: function(value, old) {
237237
const label = this.getChildControl("subtitle-text");
238-
const user = this.createOwner(value);
238+
const user = this.__createOwner(value);
239239
label.setValue(user);
240240
label.setVisibility(value ? "visible" : "excluded");
241241
},

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

Lines changed: 31 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -28,50 +28,46 @@ qx.Class.define("osparc.dashboard.ListButtonBase", {
2828
construct: function() {
2929
this.base(arguments);
3030
this.set({
31-
width: osparc.dashboard.ListButtonBase.ITEM_WIDTH,
3231
minHeight: osparc.dashboard.ListButtonBase.ITEM_HEIGHT,
3332
allowGrowX: true
3433
});
3534

3635
const layout = new qx.ui.layout.Grid();
3736
layout.setSpacing(10);
38-
layout.setColumnFlex(osparc.dashboard.ListButtonBase.POS.DESCRIPTION, 1);
37+
layout.setColumnFlex(osparc.dashboard.ListButtonBase.POS.SPACER, 1);
3938
this._setLayout(layout);
39+
40+
this.getChildControl("spacer");
4041
},
4142

4243
statics: {
43-
ITEM_WIDTH: 600,
44-
ITEM_HEIGHT: 40,
44+
ITEM_HEIGHT: 35,
4545
SPACING: 5,
4646
POS: {
4747
THUMBNAIL: 0,
4848
LOCK_STATUS: 1,
4949
TITLE: 2,
50-
PROGRESS: 3,
51-
DESCRIPTION: 4,
50+
SPACER: 3,
51+
PROGRESS: 4,
5252
TAGS: 5,
53-
UPDATES: 6,
54-
UI_MODE: 7,
55-
STATUS: 8,
56-
PERMISSION: 9,
53+
ICONS_LAYOUT: 6,
54+
SHARED: 7,
55+
OWNER: 8,
56+
LAST_CHANGE: 9,
5757
TSR: 10,
58-
OWNER: 11,
59-
SHARED: 12,
60-
LAST_CHANGE: 13,
61-
HITS: 14,
62-
OPTIONS: 15
58+
HITS: 11,
59+
OPTIONS: 12
6360
}
6461
},
6562

6663
members: {
6764
_createChildControlImpl: function(id) {
6865
let control;
69-
let titleRow;
7066
switch (id) {
7167
case "icon": {
72-
control = new osparc.ui.basic.Thumbnail(null, 40, this.self().ITEM_HEIGHT-2*5).set({
73-
minHeight: 40,
74-
minWidth: 40
68+
control = new osparc.ui.basic.Thumbnail(null, this.self().ITEM_HEIGHT, this.self().ITEM_HEIGHT-2*5).set({
69+
minHeight: this.self().ITEM_HEIGHT,
70+
minWidth: this.self().ITEM_HEIGHT
7571
});
7672
control.getChildControl("image").set({
7773
anonymous: true,
@@ -83,43 +79,24 @@ qx.Class.define("osparc.dashboard.ListButtonBase", {
8379
});
8480
break;
8581
}
86-
case "title-row":
87-
control = new qx.ui.container.Composite(new qx.ui.layout.HBox(6)).set({
88-
anonymous: true,
89-
allowGrowX: true
90-
});
91-
this._add(control, {
92-
row: 0,
93-
column: osparc.dashboard.ListButtonBase.POS.TITLE
94-
});
95-
break;
9682
case "title":
9783
control = new qx.ui.basic.Label().set({
9884
textColor: "contrasted-text-light",
9985
font: "text-14",
10086
alignY: "middle",
10187
maxWidth: 300,
102-
allowGrowX: true,
10388
rich: true,
10489
});
105-
titleRow = this.getChildControl("title-row");
106-
titleRow.addAt(control, 0, {
107-
flex: 1
90+
this._add(control, {
91+
row: 0,
92+
column: osparc.dashboard.ListButtonBase.POS.TITLE
10893
});
10994
break;
110-
case "description":
111-
control = new qx.ui.basic.Label().set({
112-
textColor: "contrasted-text-dark",
113-
rich: true,
114-
maxHeight: 16,
115-
minWidth: 100,
116-
font: "text-14",
117-
alignY: "middle",
118-
allowGrowX: true
119-
});
95+
case "spacer":
96+
control = new qx.ui.core.Spacer();
12097
this._add(control, {
12198
row: 0,
122-
column: osparc.dashboard.ListButtonBase.POS.DESCRIPTION
99+
column: osparc.dashboard.ListButtonBase.POS.SPACER
123100
});
124101
break;
125102
case "owner":
@@ -134,17 +111,23 @@ qx.Class.define("osparc.dashboard.ListButtonBase", {
134111
column: osparc.dashboard.ListButtonBase.POS.OWNER
135112
});
136113
break;
114+
case "icons-layout":
115+
control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({
116+
alignY: "middle"
117+
}))
118+
this._add(control, {
119+
row: 0,
120+
column: osparc.dashboard.ListButtonBase.POS.ICONS_LAYOUT
121+
});
122+
break;
137123
case "project-status":
138124
control = new qx.ui.basic.Image().set({
139125
alignY: "middle",
140126
textColor: "status_icon",
141127
height: 12,
142128
width: 12
143129
});
144-
this._add(control, {
145-
row: 0,
146-
column: osparc.dashboard.ListButtonBase.POS.STATUS
147-
});
130+
this.getChildControl("icons-layout").add(control);
148131
break;
149132
}
150133
return control || this.base(arguments, id);

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

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -49,15 +49,6 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
4949
column: osparc.dashboard.ListButtonBase.POS.LOCK_STATUS
5050
});
5151
break;
52-
case "permission-icon":
53-
control = new qx.ui.basic.Image(osparc.dashboard.CardBase.PERM_READ).set({
54-
minWidth: 50
55-
});
56-
this._add(control, {
57-
row: 0,
58-
column: osparc.dashboard.ListButtonBase.POS.PERMISSION
59-
});
60-
break;
6152
case "tags":
6253
control = new qx.ui.container.Composite(new qx.ui.layout.HBox(3).set({
6354
alignY: "middle"
@@ -71,7 +62,7 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
7162
break;
7263
case "shared-icon":
7364
control = new qx.ui.basic.Image().set({
74-
minWidth: 50,
65+
minWidth: 30,
7566
alignY: "middle"
7667
});
7768
this._add(control, {
@@ -94,40 +85,31 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
9485
break;
9586
case "tsr-rating":
9687
control = osparc.dashboard.CardBase.createTSRLayout();
88+
this.__makeItemResponsive(control);
9789
this._add(control, {
9890
row: 0,
9991
column: osparc.dashboard.ListButtonBase.POS.TSR
10092
});
10193
break;
94+
case "permission-icon":
95+
control = new qx.ui.basic.Image(osparc.dashboard.CardBase.PERM_READ).set({
96+
alignY: "middle",
97+
});
98+
this.getChildControl("icons-layout").add(control);
99+
break;
102100
case "workbench-mode":
103101
control = new qx.ui.basic.Image().set({
104102
alignY: "middle"
105103
});
106-
this._add(control, {
107-
row: 0,
108-
column: osparc.dashboard.ListButtonBase.POS.UI_MODE
109-
});
104+
this.getChildControl("icons-layout").add(control);
110105
break;
111106
case "empty-workbench":
112107
control = this._getEmptyWorkbenchIcon();
113108
control.set({
114109
alignY: "middle",
115110
alignX: "center"
116111
});
117-
this._add(control, {
118-
row: 0,
119-
column: osparc.dashboard.ListButtonBase.POS.UPDATES
120-
});
121-
break;
122-
case "hits-service":
123-
control = new qx.ui.basic.Label().set({
124-
alignY: "middle",
125-
toolTipText: this.tr("Number of times you instantiated it")
126-
});
127-
this._add(control, {
128-
row: 0,
129-
column: osparc.dashboard.ListButtonBase.POS.HITS
130-
});
112+
this.getChildControl("icons-layout").add(control);
131113
break;
132114
case "update-study":
133115
control = new qx.ui.basic.Image().set({
@@ -136,9 +118,16 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
136118
visibility: "excluded"
137119
});
138120
osparc.utils.Utils.setIdToWidget(control, "updateStudyBtn");
121+
this.getChildControl("icons-layout").add(control);
122+
break;
123+
case "hits-service":
124+
control = new qx.ui.basic.Label().set({
125+
alignY: "middle",
126+
toolTipText: this.tr("Number of times you instantiated it")
127+
});
139128
this._add(control, {
140129
row: 0,
141-
column: osparc.dashboard.ListButtonBase.POS.UPDATES
130+
column: osparc.dashboard.ListButtonBase.POS.HITS
142131
});
143132
break;
144133
case "menu-selection-stack":
@@ -211,7 +200,7 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
211200
}
212201
},
213202

214-
createOwner: function(label) {
203+
__createOwner: function(label) {
215204
if (label === osparc.auth.Data.getInstance().getEmail()) {
216205
const resourceAlias = osparc.utils.Utils.resourceTypeToAlias(this.getResourceType());
217206
return qx.locale.Manager.tr(`My ${resourceAlias}`);
@@ -221,9 +210,9 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
221210

222211
_applyOwner: function(value, old) {
223212
const label = this.getChildControl("owner");
224-
const user = this.createOwner(value);
213+
const user = this.__createOwner(value);
225214
label.setValue(user);
226-
label.setVisibility(value ? "visible" : "excluded");
215+
this.__makeItemResponsive(label);
227216
return;
228217
},
229218

@@ -257,9 +246,22 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
257246
tagUI.addListener("tap", () => this.fireDataEvent("tagClicked", tag));
258247
tagsContainer.add(tagUI);
259248
});
249+
this.__makeItemResponsive(tagsContainer);
260250
}
261251
},
262252

253+
__makeItemResponsive: function(item) {
254+
[
255+
"appear",
256+
"resize",
257+
].forEach(ev => {
258+
this.addListener(ev, () => {
259+
const bounds = this.getBounds() || this.getSizeHint();
260+
item.setVisibility(bounds.width > 700 ? "visible" : "excluded");
261+
});
262+
});
263+
},
264+
263265
// overridden
264266
_applyMultiSelectionMode: function(value) {
265267
if (value) {

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,16 +35,13 @@ qx.Class.define("osparc.dashboard.ListButtonLoadMore", {
3535
members: {
3636
_applyFetching: function(value) {
3737
const title = this.getChildControl("title");
38-
const desc = this.getChildControl("description");
3938
if (value) {
4039
title.setValue(this.tr("Loading..."));
41-
desc.setValue("");
4240
this.setIcon(osparc.dashboard.CardBase.LOADING_ICON);
4341
this.getChildControl("icon").getChildControl("image").getContentElement()
4442
.addClass("rotate");
4543
} else {
4644
title.setValue(this.tr("Load More"));
47-
desc.setValue(this.tr("Click to load more").toString());
4845
this.setIcon("@FontAwesome5Solid/paw/");
4946
this.getChildControl("icon").getChildControl("image").getContentElement()
5047
.removeClass("rotate");

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

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
qx.Class.define("osparc.dashboard.ListButtonNew", {
2525
extend: osparc.dashboard.ListButtonBase,
2626

27-
construct: function(title, description) {
27+
construct: function(title) {
2828
this.base(arguments);
2929

3030
this.setPriority(osparc.dashboard.CardBase.CARD_PRIORITY.NEW);
@@ -41,11 +41,6 @@ qx.Class.define("osparc.dashboard.ListButtonNew", {
4141
});
4242
}
4343

44-
if (description) {
45-
const descLabel = this.getChildControl("description");
46-
descLabel.setValue(description);
47-
}
48-
4944
this.setIcon(osparc.dashboard.CardBase.NEW_ICON);
5045
},
5146

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -251,6 +251,12 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
251251
this.__viewModeLayout = new qx.ui.toolbar.Part();
252252

253253
const resourcesContainer = this._resourcesContainer = new osparc.dashboard.ResourceContainerManager();
254+
if (this._resourceType === "study") {
255+
const viewMode = osparc.utils.Utils.localCache.getLocalStorageItem("studiesViewMode");
256+
if (viewMode) {
257+
this._resourcesContainer.setMode(viewMode);
258+
}
259+
}
254260
resourcesContainer.addListener("updateStudy", e => this._updateStudyData(e.getData()));
255261
resourcesContainer.addListener("updateTemplate", e => this._updateTemplateData(e.getData()));
256262
resourcesContainer.addListener("updateService", e => this._updateServiceData(e.getData()));
@@ -288,6 +294,10 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
288294
_viewByChanged: function(viewMode) {
289295
this._resourcesContainer.setMode(viewMode);
290296
this._reloadCards();
297+
298+
if (this._resourceType === "study") {
299+
osparc.utils.Utils.localCache.setLocalStorageItem("studiesViewMode", viewMode);
300+
}
291301
},
292302

293303
_addGroupByButton: function() {

0 commit comments

Comments
 (0)