Skip to content

Commit 5a7c6e5

Browse files
odeimaizodeimaiz
authored
🎨 Study home page and more improvements (#4539)
1 parent 2d2c040 commit 5a7c6e5

34 files changed

+206
-131
lines changed

‎services/static-webserver/client/source/class/osparc/component/widget/PersistentIframe.js

Lines changed: 33 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,27 @@ qx.Class.define("osparc.component.widget.PersistentIframe", {
2929
},
3030

3131
statics: {
32+
getZoomLabel: function(maximize) {
33+
return maximize ? "Restore" : "Maximize";
34+
},
35+
3236
getZoomIcon: function(maximize) {
3337
const iconURL = maximize ? "window-restore" : "window-maximize";
34-
return osparc.theme.common.Image.URLS[iconURL]+"/20";
38+
return osparc.theme.common.Image.URLS[iconURL] + "/20";
3539
},
3640

3741
getMaximizeWidgetId: function(maximize) {
3842
return maximize ? "restoreBtn" : "maximizeBtn";
3943
},
4044

45+
createToolbarButton: function() {
46+
return new qx.ui.form.Button().set({
47+
zIndex: 20,
48+
backgroundColor: "transparent",
49+
decorator: null
50+
});
51+
},
52+
4153
HIDDEN_TOP: -10000
4254
},
4355

@@ -69,7 +81,7 @@ qx.Class.define("osparc.component.widget.PersistentIframe", {
6981
members: {
7082
__iframe: null,
7183
__syncScheduled: null,
72-
__restartButton: null,
84+
__reloadButton: null,
7385
__zoomButton: null,
7486

7587
// override
@@ -85,27 +97,25 @@ qx.Class.define("osparc.component.widget.PersistentIframe", {
8597
});
8698
const iframeEl = this._getIframeElement();
8799
iframeEl.setAttribute("allow", "clipboard-write");
88-
const restartButton = this.__restartButton = new qx.ui.form.Button(null, "@FontAwesome5Solid/redo-alt/14").set({
89-
zIndex: 20,
100+
const reloadButton = this.__reloadButton = this.self().createToolbarButton().set({
101+
label: this.tr("Reload"),
102+
icon: "@FontAwesome5Solid/redo-alt/14",
90103
paddingLeft: 8,
91104
paddingRight: 4,
92105
paddingTop: 6,
93106
paddingBottom: 6,
94-
backgroundColor: "transparent",
95-
decorator: null
107+
gap: 10
96108
});
97-
restartButton.addListener("execute", e => {
109+
reloadButton.addListener("execute", e => {
98110
this.fireEvent("restart");
99111
}, this);
100-
osparc.utils.Utils.setIdToWidget(restartButton, "iFrameRestartBtn");
101-
appRoot.add(restartButton, {
112+
osparc.utils.Utils.setIdToWidget(reloadButton, "iFrameRestartBtn");
113+
appRoot.add(reloadButton, {
102114
top: this.self().HIDDEN_TOP
103115
});
104-
const zoomButton = this.__zoomButton = new qx.ui.form.Button(null).set({
105-
icon: this.self().getZoomIcon(false),
106-
zIndex: 20,
107-
backgroundColor: "transparent",
108-
decorator: null
116+
const zoomButton = this.__zoomButton = this.self().createToolbarButton().set({
117+
label: this.self().getZoomLabel(false),
118+
icon: this.self().getZoomIcon(false)
109119
});
110120
osparc.utils.Utils.setIdToWidget(zoomButton, this.self().getMaximizeWidgetId(false));
111121
appRoot.add(zoomButton, {
@@ -122,7 +132,7 @@ qx.Class.define("osparc.component.widget.PersistentIframe", {
122132
iframe.setLayoutProperties({
123133
top: this.self().HIDDEN_TOP
124134
});
125-
restartButton.setLayoutProperties({
135+
reloadButton.setLayoutProperties({
126136
top: this.self().HIDDEN_TOP
127137
});
128138
zoomButton.setLayoutProperties({
@@ -159,7 +169,10 @@ qx.Class.define("osparc.component.widget.PersistentIframe", {
159169
this.removeState("maximized");
160170
}
161171
const actionButton = this.__zoomButton;
162-
actionButton.setIcon(this.self().getZoomIcon(maximize));
172+
actionButton.set({
173+
label: this.self().getZoomLabel(maximize),
174+
icon: this.self().getZoomIcon(maximize)
175+
});
163176
osparc.utils.Utils.setIdToWidget(actionButton, this.self().getMaximizeWidgetId(maximize));
164177
qx.event.message.Bus.getInstance().dispatchByName("maximizeIframe", this.hasState("maximized"));
165178
},
@@ -187,16 +200,17 @@ qx.Class.define("osparc.component.widget.PersistentIframe", {
187200
height: divSize.height - this.getToolbarHeight()
188201
});
189202

190-
this.__restartButton.setLayoutProperties({
203+
const rightOffest = this.hasState("maximized") ? 90 : 100;
204+
this.__reloadButton.setLayoutProperties({
191205
top: (divPos.top - iframeParentPos.top),
192-
right: (iframeParentPos.right - iframeParentPos.left - divPos.right) + 35
206+
right: (iframeParentPos.right - iframeParentPos.left - divPos.right) + rightOffest
193207
});
194208
this.__zoomButton.setLayoutProperties({
195209
top: (divPos.top - iframeParentPos.top),
196210
right: (iframeParentPos.right - iframeParentPos.left - divPos.right)
197211
});
198212

199-
this.__restartButton.setVisibility(this.isShowToolbar() ? "visible" : "excluded");
213+
this.__reloadButton.setVisibility(this.isShowToolbar() ? "visible" : "excluded");
200214
this.__zoomButton.setVisibility(this.isShowToolbar() ? "visible" : "excluded");
201215
}, 0);
202216
},

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,9 @@ qx.Class.define("osparc.dashboard.GridButtonNew", {
4848
members: {
4949
_buildLayout: function() {
5050
const title = this.getChildControl("title");
51-
title.setValue(this.tr("Empty Study"));
51+
title.setValue(this.tr("Empty") + " " + osparc.product.Utils.getStudyAlias({
52+
firstUpperCase: true
53+
}));
5254

5355
const desc = this.getChildControl("subtitle-text");
5456
desc.setValue(this.tr("Start with an empty study").toString());

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,9 @@ qx.Class.define("osparc.dashboard.ListButtonNew", {
4545
members: {
4646
_buildLayout: function() {
4747
const title = this.getChildControl("title");
48-
title.setValue(this.tr("Empty Study"));
48+
title.setValue(this.tr("Empty") + " " + osparc.product.Utils.getStudyAlias({
49+
firstUpperCase: true
50+
}));
4951

5052
const desc = this.getChildControl("description");
5153
desc.setValue(this.tr("Start with an empty study").toString());

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

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -440,21 +440,21 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
440440
__addNewStudyButtons: function() {
441441
switch (osparc.product.Utils.getProductName()) {
442442
case "osparc":
443-
this.__addNewStudyButton();
443+
this.__addEmptyStudyPlusButton();
444444
break;
445445
case "tis":
446-
this.__addNewPlanButtons();
446+
this.__addTIPPlusButtons();
447447
break;
448448
case "s4l":
449-
this.__addNewS4LServiceButtons();
449+
this.__addS4LPlusButtons();
450450
break;
451451
case "s4llite":
452-
this.__addNewS4LLiteServiceButtons();
452+
this.__addS4LLitePlusButtons();
453453
break;
454454
}
455455
},
456456

457-
__addNewStudyButton: function() {
457+
__addEmptyStudyPlusButton: function() {
458458
const mode = this._resourcesContainer.getMode();
459459
const newStudyBtn = (mode === "grid") ? new osparc.dashboard.GridButtonNew() : new osparc.dashboard.ListButtonNew();
460460
newStudyBtn.setCardKey("new-study");
@@ -468,7 +468,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
468468
this._resourcesContainer.addNonResourceCard(newStudyBtn);
469469
},
470470

471-
__addNewPlanButtons: function() {
471+
__addTIPPlusButtons: function() {
472472
const mode = this._resourcesContainer.getMode();
473473
osparc.data.Resources.get("templates")
474474
.then(templates => {
@@ -511,8 +511,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
511511
}
512512
},
513513

514-
__addNewS4LServiceButtons: function() {
515-
this.__addNewStudyButton();
514+
__addS4LPlusButtons: function() {
516515
const store = osparc.store.Store.getInstance();
517516
store.getAllServices()
518517
.then(services => {
@@ -524,7 +523,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
524523
});
525524
},
526525

527-
__addNewS4LLiteServiceButtons: function() {
526+
__addS4LLitePlusButtons: function() {
528527
const store = osparc.store.Store.getInstance();
529528
store.getAllServices()
530529
.then(services => {

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

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -25,18 +25,26 @@ qx.Class.define("osparc.info.CommentUI", {
2525
construct: function(comment) {
2626
this.base(arguments);
2727

28-
const layout = new qx.ui.layout.Grid(8, 5);
29-
layout.setColumnWidth(0, 32);
30-
layout.setColumnFlex(1, 1);
28+
this.__comment = comment;
29+
30+
const isMyComment = this.__isMyComment();
31+
const layout = new qx.ui.layout.Grid(12, 5);
32+
layout.setColumnWidth(isMyComment ? 2 : 0, 32); // thumbnail
33+
layout.setColumnFlex(isMyComment ? 0 : 2, 1); // message content
34+
layout.setColumnAlign(isMyComment ? 0 : 2, isMyComment ? "right" : "left", "top"); // message content
3135
this._setLayout(layout);
3236
this.setPadding(5);
3337

34-
this.__comment = comment;
35-
3638
this.__buildLayout();
3739
},
3840

3941
members: {
42+
__comment: null,
43+
44+
__isMyComment: function() {
45+
return this.__comment && osparc.auth.Data.getInstance().getUserId() === this.__comment["user_id"];
46+
},
47+
4048
_createChildControlImpl: function(id) {
4149
let control;
4250
switch (id) {
@@ -56,7 +64,7 @@ qx.Class.define("osparc.info.CommentUI", {
5664
});
5765
this._add(control, {
5866
row: 0,
59-
column: 0,
67+
column: this.__isMyComment() ? 2 : 0,
6068
rowSpan: 2
6169
});
6270
break;
@@ -71,11 +79,11 @@ qx.Class.define("osparc.info.CommentUI", {
7179
break;
7280
case "last-updated":
7381
control = new qx.ui.basic.Label().set({
74-
font: "text-13"
82+
font: "text-12"
7583
});
7684
this._add(control, {
77-
row: 0,
78-
column: 2
85+
row: 1,
86+
column: 1
7987
});
8088
break;
8189
case "comment-content":
@@ -85,9 +93,9 @@ qx.Class.define("osparc.info.CommentUI", {
8593
wrap: true
8694
});
8795
this._add(control, {
88-
row: 1,
89-
column: 1,
90-
colSpan: 2
96+
row: 0,
97+
column: this.__isMyComment() ? 0 : 2,
98+
rowSpan: 2
9199
});
92100
break;
93101
}

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

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,14 +63,13 @@ qx.Class.define("osparc.info.MergedLarge", {
6363

6464
const extraInfo = this.__extraInfo();
6565
const extraInfoLayout = this.__createExtraInfo(extraInfo);
66-
this._add(extraInfoLayout);
6766

6867
const bounds = this.getBounds();
6968
const offset = 30;
7069
const widgetWidth = bounds ? bounds.width - offset : 500 - offset;
7170
let thumbnailWidth = widgetWidth - 2 * osparc.info.CardLarge.PADDING;
7271
const maxThumbnailHeight = extraInfo.length*20;
73-
const hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(3).set({
72+
const hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({
7473
alignX: "center"
7574
}));
7675
hBox.add(extraInfoLayout);
@@ -218,7 +217,7 @@ qx.Class.define("osparc.info.MergedLarge", {
218217
},
219218

220219
__createExtraInfo: function(extraInfo) {
221-
const moreInfo = osparc.info.StudyUtils.createExtraInfoGrid(extraInfo).set({
220+
const moreInfo = osparc.info.StudyUtils.createExtraInfoVBox(extraInfo).set({
222221
width: osparc.info.CardLarge.EXTRA_INFO_WIDTH
223222
});
224223

@@ -286,7 +285,20 @@ qx.Class.define("osparc.info.MergedLarge", {
286285

287286
__createDescription: function() {
288287
const maxHeight = 400;
289-
return osparc.info.StudyUtils.createDescription(this.getStudy(), maxHeight);
288+
const descriptionLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5).set({
289+
alignY: "middle"
290+
}));
291+
292+
const label = new qx.ui.basic.Label(qx.locale.Manager.tr("Description")).set({
293+
font: "text-13"
294+
});
295+
descriptionLayout.add(label);
296+
297+
const description = osparc.info.StudyUtils.createDescriptionMD(this.getStudy(), maxHeight);
298+
description.setValue(this.getStudy().getDescription());
299+
descriptionLayout.add(description);
300+
301+
return descriptionLayout;
290302
},
291303

292304
__createResources: function() {

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,7 @@ qx.Class.define("osparc.info.ServiceLarge", {
202202
label: this.tr("ACCESS RIGHTS"),
203203
view: this.__createAccessRights(),
204204
action: {
205-
button: osparc.utils.Utils.getViewButton(),
205+
button: osparc.utils.Utils.getEditButton(),
206206
callback: this.isOpenOptions() ? this.__openAccessRights : "openAccessRights",
207207
ctx: this
208208
}
@@ -216,7 +216,7 @@ qx.Class.define("osparc.info.ServiceLarge", {
216216
label: this.tr("CLASSIFIERS"),
217217
view: this.__createClassifiers(),
218218
action: {
219-
button: osparc.utils.Utils.getViewButton(),
219+
button: osparc.utils.Utils.getEditButton(),
220220
callback: this.isOpenOptions() ? this.__openClassifiers : "openClassifiers",
221221
ctx: this
222222
}
@@ -232,7 +232,7 @@ qx.Class.define("osparc.info.ServiceLarge", {
232232
label: this.tr("QUAILITY"),
233233
view: this.__createQuality(),
234234
action: {
235-
button: osparc.utils.Utils.getViewButton(),
235+
button: osparc.utils.Utils.getEditButton(),
236236
callback: this.isOpenOptions() ? this.__openQuality : "openQuality",
237237
ctx: this
238238
}
@@ -255,7 +255,7 @@ qx.Class.define("osparc.info.ServiceLarge", {
255255
},
256256

257257
__createExtraInfo: function(extraInfo) {
258-
const moreInfo = osparc.info.ServiceUtils.createExtraInfo(extraInfo).set({
258+
const moreInfo = osparc.info.ServiceUtils.createExtraInfoVBox(extraInfo).set({
259259
width: osparc.info.CardLarge.EXTRA_INFO_WIDTH
260260
});
261261
return moreInfo;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -273,7 +273,7 @@ qx.Class.define("osparc.info.ServiceUtils", {
273273
});
274274
},
275275

276-
createExtraInfo: function(extraInfos) {
276+
createExtraInfoVBox: function(extraInfos) {
277277
const grid = new qx.ui.layout.Grid(8, 5);
278278
grid.setColumnAlign(0, "right", "middle");
279279
grid.setColumnAlign(1, "left", "middle");

0 commit comments

Comments
 (0)