Skip to content

Commit e32173f

Browse files
odeimaizmrnicegyu11
odeimaiz
authored and
mrnicegyu11
committed
🎨 [Frontend] Feature: Study icon (ITISFoundation#7155)
1 parent 735c5d7 commit e32173f

37 files changed

+377
-241
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ qx.Class.define("osparc.auth.LoginPageS4L", {
3434
_getBackgroundImage: function() {
3535
let backgroundImage = "";
3636

37-
const defaultBG = `url(${osparc.product.Utils.getProductBackgroundUrl("Sim4Life-head-default.png")}), url(${osparc.product.Utils.getProductBackgroundUrl("clouds_11.png")})`;
38-
const liteBG = `url(${osparc.product.Utils.getProductBackgroundUrl("Sim4Life-head-lite.png")}), url(${osparc.product.Utils.getProductBackgroundUrl("clouds_11.png")})`;
39-
const academyBG = `url(${osparc.product.Utils.getProductBackgroundUrl("Sim4Life-head-academy.png")}), url(${osparc.product.Utils.getProductBackgroundUrl("clouds_11.png")})`;
37+
const defaultBG = `url(${osparc.product.Utils.getBackgroundUrl("Sim4Life-head-default.png")}), url(${osparc.product.Utils.getBackgroundUrl("clouds_11.png")})`;
38+
const liteBG = `url(${osparc.product.Utils.getBackgroundUrl("Sim4Life-head-lite.png")}), url(${osparc.product.Utils.getBackgroundUrl("clouds_11.png")})`;
39+
const academyBG = `url(${osparc.product.Utils.getBackgroundUrl("Sim4Life-head-academy.png")}), url(${osparc.product.Utils.getBackgroundUrl("clouds_11.png")})`;
4040

4141
switch (osparc.product.Utils.getProductName()) {
4242
case "s4llite":

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

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,9 @@ qx.Class.define("osparc.dashboard.CardBase", {
5555
MODE_APP: "@FontAwesome5Solid/desktop/13",
5656
NEW_ICON: "@FontAwesome5Solid/plus/",
5757
LOADING_ICON: "@FontAwesome5Solid/circle-notch/",
58-
// Get the default thumbnail for each product else add the image and extension osparc.product.Utils.getProductThumbUrl(Thumbnail-01.png)
59-
PRODUCT_ICON: osparc.product.Utils.getProductThumbUrl(),
58+
PRODUCT_ICON: osparc.product.Utils.getIconUrl(),
59+
// Get the default thumbnail for each product else add the image and extension osparc.product.Utils.getThumbnailUrl(Thumbnail-01.png)
60+
PRODUCT_THUMBNAIL: osparc.product.Utils.getThumbnailUrl(),
6061

6162
CARD_PRIORITY: {
6263
NEW: 0,
@@ -269,6 +270,13 @@ qx.Class.define("osparc.dashboard.CardBase", {
269270
apply: "_applyIcon",
270271
},
271272

273+
thumbnail: {
274+
check: "String",
275+
init: null,
276+
nullable: true,
277+
apply: "_applyThumbnail",
278+
},
279+
272280
resourceData: {
273281
check: "Object",
274282
nullable: false,
@@ -481,7 +489,8 @@ qx.Class.define("osparc.dashboard.CardBase", {
481489
lastChangeDate: resourceData.lastChangeDate ? new Date(resourceData.lastChangeDate) : null,
482490
trashedAt: resourceData.trashedAt ? new Date(resourceData.trashedAt) : null,
483491
trashedBy: resourceData.trashedBy || null,
484-
icon: resourceData.thumbnail || this.self().PRODUCT_ICON,
492+
icon: ["study", "template"].includes(resourceData.resourceType) ? osparc.study.Utils.guessIcon(resourceData) : null,
493+
thumbnail: resourceData.thumbnail || this.self().PRODUCT_THUMBNAIL,
485494
state: resourceData.state ? resourceData.state : {},
486495
classifiers: resourceData.classifiers && resourceData.classifiers ? resourceData.classifiers : [],
487496
quality: resourceData.quality ? resourceData.quality : null,
@@ -531,6 +540,10 @@ qx.Class.define("osparc.dashboard.CardBase", {
531540
throw new Error("Abstract method called!");
532541
},
533542

543+
_applyThumbnail: function(value, old) {
544+
throw new Error("Abstract method called!");
545+
},
546+
534547
_applyTitle: function(value, old) {
535548
throw new Error("Abstract method called!");
536549
},

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

Lines changed: 66 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,10 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
4646
PADDING: 10,
4747
SPACING_IN: 5,
4848
SPACING: 15,
49+
ICON_SIZE: 32,
4950
// TITLE_MAX_HEIGHT: 34, // two lines in Roboto
5051
TITLE_MAX_HEIGHT: 40, // two lines in Manrope
51-
ICON_SIZE: 50,
52+
THUMBNAIL_SIZE: 50,
5253
POS: {
5354
TITLE: {
5455
row: 0,
@@ -138,18 +139,21 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
138139
});
139140
break;
140141
}
141-
case "header":
142-
control = new qx.ui.container.Composite(new qx.ui.layout.VBox(5)).set({
143-
anonymous: true,
144-
allowGrowX: true,
145-
allowShrinkX: false,
146-
alignY: "middle",
147-
padding: this.self().PADDING
142+
case "header": {
143+
const hGrid = new qx.ui.layout.Grid().set({
144+
spacing: 0, // the sub-elements will take care of the padding
148145
});
149-
control.set({
150-
backgroundColor: "background-card-overlay"
146+
hGrid.setColumnFlex(1, 1);
147+
hGrid.setRowAlign(0, "left", "middle");
148+
control = new qx.ui.container.Composite().set({
149+
backgroundColor: "background-card-overlay",
150+
padding: 0,
151+
maxWidth: this.self().ITEM_WIDTH,
152+
maxHeight: this.self().ITEM_HEIGHT
151153
});
154+
control.setLayout(hGrid);
152155
break;
156+
}
153157
case "body":
154158
control = new qx.ui.container.Composite(new qx.ui.layout.VBox(5)).set({
155159
decorator: "main",
@@ -163,48 +167,63 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
163167
});
164168
break;
165169
case "footer": {
166-
const fgrid = new qx.ui.layout.Grid();
167-
fgrid.setSpacing(2);
168-
fgrid.setColumnFlex(0, 1);
170+
const fGrid = new qx.ui.layout.Grid();
171+
fGrid.setSpacing(2);
172+
fGrid.setColumnFlex(0, 1);
169173
control = new qx.ui.container.Composite().set({
170174
backgroundColor: "background-card-overlay",
171175
padding: this.self().PADDING - 2,
172176
maxWidth: this.self().ITEM_WIDTH,
173177
maxHeight: this.self().ITEM_HEIGHT
174178
});
175-
control.setLayout(fgrid);
179+
control.setLayout(fGrid);
176180
break;
177181
}
178-
case "title-row":
179-
control = new qx.ui.container.Composite(new qx.ui.layout.VBox(6)).set({
182+
case "icon": {
183+
control = new osparc.ui.basic.Thumbnail(null, this.self().ICON_SIZE, this.self().ICON_SIZE).set({
184+
minHeight: this.self().ICON_SIZE,
185+
minWidth: this.self().ICON_SIZE,
186+
});
187+
control.getChildControl("image").set({
180188
anonymous: true,
181-
maxWidth: this.self().ITEM_WIDTH - 2*this.self().PADDING
189+
alignY: "top",
190+
alignX: "left",
191+
allowGrowX: true,
192+
allowGrowY: true,
182193
});
183194
layout = this.getChildControl("header");
184-
layout.addAt(control, 1, {
185-
flex: 1
195+
layout.add(control, {
196+
column: 0,
197+
row: 0,
186198
});
187199
break;
200+
}
188201
case "title":
189202
control = new qx.ui.basic.Label().set({
190203
textColor: "contrasted-text-light",
191204
font: "text-14",
205+
padding: this.self().PADDING,
192206
maxWidth: this.self().ITEM_WIDTH - 2*this.self().PADDING,
193-
maxHeight: this.self().TITLE_MAX_HEIGHT
207+
maxHeight: this.self().TITLE_MAX_HEIGHT,
194208
});
195-
layout = this.getChildControl("title-row");
209+
layout = this.getChildControl("header");
196210
layout.addAt(control, 0, {
197-
flex: 1
211+
column: 1,
212+
row: 0,
198213
});
199214
break;
200215
case "subtitle":
201216
control = new qx.ui.container.Composite(new qx.ui.layout.HBox(6)).set({
202217
anonymous: true,
203-
height: 20
218+
height: 20,
219+
padding: 6,
220+
paddingLeft: 20, // align with icon
204221
});
205-
layout = this.getChildControl("title-row");
206-
layout.addAt(control, 1, {
207-
flex: 1
222+
layout = this.getChildControl("header");
223+
layout.addAt(control, 0, {
224+
column: 0,
225+
row: 1,
226+
colSpan: 2,
208227
});
209228
break;
210229
case "subtitle-icon": {
@@ -234,7 +253,7 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
234253
});
235254
break;
236255
}
237-
case "icon": {
256+
case "thumbnail": {
238257
layout = this.getChildControl("body");
239258
const maxWidth = this.self().ITEM_WIDTH;
240259
control = new osparc.ui.basic.Thumbnail(null, maxWidth, 124);
@@ -276,18 +295,29 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
276295

277296
// overridden
278297
_applyIcon: function(value, old) {
279-
if (value.includes("@FontAwesome5Solid/")) {
280-
value += this.self().ICON_SIZE;
298+
if (value) {
281299
const image = this.getChildControl("icon").getChildControl("image");
282300
image.set({
283-
source: value
301+
source: value,
302+
decorator: "rounded",
303+
});
304+
}
305+
},
306+
307+
// overridden
308+
_applyThumbnail: function(value, old) {
309+
if (value.includes("@FontAwesome5Solid/")) {
310+
value += this.self().THUMBNAIL_SIZE;
311+
const image = this.getChildControl("thumbnail").getChildControl("image");
312+
image.set({
313+
source: value,
284314
});
285315

286316
[
287317
"appear",
288318
"loaded"
289319
].forEach(eventName => {
290-
image.addListener(eventName, () => this.__fitIconHeight(), this);
320+
image.addListener(eventName, () => this.__fitThumbnailHeight(), this);
291321
});
292322
} else {
293323
this.getContentElement().setStyles({
@@ -312,8 +342,8 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
312342
return;
313343
},
314344

315-
__fitIconHeight: function() {
316-
const iconLayout = this.getChildControl("icon");
345+
__fitThumbnailHeight: function() {
346+
const thumbnailLayout = this.getChildControl("thumbnail");
317347
let maxHeight = this.getHeight() - this.getPaddingTop() - this.getPaddingBottom() - 5;
318348
const checkThis = [
319349
"title",
@@ -333,9 +363,9 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
333363
});
334364
// maxHeight -= 4; // for Roboto
335365
maxHeight -= 18; // for Manrope
336-
iconLayout.getChildControl("image").setMaxHeight(maxHeight);
337-
iconLayout.setMaxHeight(maxHeight);
338-
iconLayout.recheckSize();
366+
thumbnailLayout.getChildControl("image").setMaxHeight(maxHeight);
367+
thumbnailLayout.setMaxHeight(maxHeight);
368+
thumbnailLayout.recheckSize();
339369
},
340370

341371
replaceIcon: function(newIcon) {

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,8 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
9393
break;
9494
case "menu-button":
9595
this.getChildControl("title").set({
96-
maxWidth: osparc.dashboard.GridButtonBase.ITEM_WIDTH - 2*osparc.dashboard.GridButtonBase.PADDING - this.self().MENU_BTN_DIMENSIONS
96+
maxWidth: osparc.dashboard.GridButtonBase.ITEM_WIDTH - osparc.dashboard.GridButtonBase.ICON_SIZE - this.self().MENU_BTN_DIMENSIONS - 6,
97+
padding: 4,
9798
});
9899
control = new qx.ui.form.MenuButton().set({
99100
appearance: "form-button-outlined",
@@ -111,8 +112,8 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
111112
});
112113
osparc.utils.Utils.setIdToWidget(control, "studyItemMenuButton");
113114
this._add(control, {
114-
top: 8,
115-
right: 8
115+
top: 6,
116+
right: 6,
116117
});
117118
break;
118119
case "tick-unselected":

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ qx.Class.define("osparc.dashboard.GridButtonNew", {
6161
descLabel.setValue(description.toString());
6262
}
6363

64-
this.setIcon(osparc.dashboard.CardBase.NEW_ICON);
64+
this.setThumbnail(osparc.dashboard.CardBase.NEW_ICON);
6565

6666
this.getChildControl("footer").exclude();
6767
},

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,6 @@ qx.Class.define("osparc.dashboard.GridButtonPlaceholder", {
7777
break;
7878
}
7979
case "progress-bar": {
80-
layout = this.getChildControl("title-row");
8180
control = new qx.ui.indicator.ProgressBar().set({
8281
maxHeight: 6,
8382
alignX: "center",
@@ -89,7 +88,11 @@ qx.Class.define("osparc.dashboard.GridButtonPlaceholder", {
8988
control.getChildControl("progress").set({
9089
backgroundColor: "strong-main"
9190
});
92-
layout.addAt(control, 1);
91+
layout = this.getChildControl("header");
92+
layout.add(control, {
93+
column: 1,
94+
row: 2,
95+
});
9396
break;
9497
}
9598
}

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

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ qx.Class.define("osparc.dashboard.ListButtonBase", {
6666
let control;
6767
switch (id) {
6868
case "icon": {
69-
control = new osparc.ui.basic.Thumbnail(null, this.self().ITEM_HEIGHT, this.self().ITEM_HEIGHT-2*5).set({
69+
control = new osparc.ui.basic.Thumbnail(null, this.self().ITEM_HEIGHT, this.self().ITEM_HEIGHT).set({
7070
minHeight: this.self().ITEM_HEIGHT,
7171
minWidth: this.self().ITEM_HEIGHT
7272
});
@@ -135,13 +135,20 @@ qx.Class.define("osparc.dashboard.ListButtonBase", {
135135
},
136136

137137
_applyIcon: function(value, old) {
138-
if (value.includes("@FontAwesome5Solid/")) {
139-
value += "22";
138+
if (value) {
139+
if (value.includes("@FontAwesome5Solid/")) {
140+
value += "22";
141+
}
142+
const image = this.getChildControl("icon").getChildControl("image");
143+
image.set({
144+
source: value
145+
});
140146
}
141-
const image = this.getChildControl("icon").getChildControl("image");
142-
image.set({
143-
source: value
144-
});
147+
},
148+
149+
_applyThumbnail: function(value, old) {
150+
// do not shot thumbnail in list button, icon takes over
151+
return;
145152
},
146153

147154
_applyTitle: function(value, old) {
@@ -150,7 +157,7 @@ qx.Class.define("osparc.dashboard.ListButtonBase", {
150157
},
151158

152159
_applyDescription: function(value, old) {
153-
return
160+
return;
154161
}
155162
},
156163

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,6 @@
1717

1818
/**
1919
* Widget used mainly by StudyBrowser for displaying Studies
20-
*
21-
* It consists of a thumbnail and creator and last change as caption
2220
*/
2321

2422
qx.Class.define("osparc.dashboard.ListButtonItem", {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -431,7 +431,7 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
431431
if (
432432
osparc.utils.Resources.isService(resourceData) ||
433433
!osparc.product.Utils.showStudyPreview() ||
434-
!osparc.data.model.Study.getUiMode(resourceData) === "workbench"
434+
!osparc.study.Utils.getUiMode(resourceData) === "workbench"
435435
) {
436436
// there is no pipelining or don't show it
437437
return null;

0 commit comments

Comments
 (0)