Skip to content

Commit e3705ca

Browse files
odeimaizodeimaiz
authored
♻️ Frontend: Tabbed Windows and Views (#5665)
1 parent b309461 commit e3705ca

40 files changed

+595
-694
lines changed

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

Lines changed: 9 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -16,63 +16,33 @@
1616
************************************************************************ */
1717

1818
qx.Class.define("osparc.admin.AdminCenter", {
19-
extend: qx.ui.core.Widget,
19+
extend: osparc.ui.window.TabbedView,
2020

2121
construct: function() {
2222
this.base(arguments);
2323

24-
this._setLayout(new qx.ui.layout.VBox());
25-
26-
this.set({
27-
padding: 10
28-
});
29-
30-
const tabViews = new qx.ui.tabview.TabView().set({
31-
barPosition: "left",
32-
contentPadding: 0
33-
});
34-
const miniProfile = osparc.desktop.credits.MyAccount.createMiniProfileView().set({
24+
const miniProfile = osparc.desktop.account.MyAccount.createMiniProfileView().set({
3525
paddingRight: 10
3626
});
37-
tabViews.getChildControl("bar").add(miniProfile);
38-
39-
const pricingPlans = this.__getPricingPlansPage();
40-
tabViews.add(pricingPlans);
27+
this.addWidgetOnTopOfTheTabs(miniProfile);
4128

42-
const maintenance = this.__getMaintenancePage();
43-
tabViews.add(maintenance);
44-
45-
this._add(tabViews, {
46-
flex: 1
47-
});
29+
this.__addPricingPlansPage();
30+
this.__addMaintenancePage();
4831
},
4932

5033
members: {
51-
__widgetToPage: function(title, iconSrc, widget) {
52-
const page = new osparc.desktop.preferences.pages.BasePage(title, iconSrc);
53-
widget.set({
54-
margin: 10
55-
});
56-
page.add(widget, {
57-
flex: 1
58-
});
59-
return page;
60-
},
61-
62-
__getPricingPlansPage: function() {
34+
__addPricingPlansPage: function() {
6335
const title = this.tr("Pricing Plans");
6436
const iconSrc = "@FontAwesome5Solid/dollar-sign/22";
6537
const pricingPlans = new osparc.pricing.PlanManager();
66-
const page = this.__widgetToPage(title, iconSrc, pricingPlans);
67-
return page;
38+
this.addTab(title, iconSrc, pricingPlans);
6839
},
6940

70-
__getMaintenancePage: function() {
41+
__addMaintenancePage: function() {
7142
const title = this.tr("Maintenance");
7243
const iconSrc = "@FontAwesome5Solid/wrench/22";
7344
const maintenance = new osparc.admin.Maintenance();
74-
const page = this.__widgetToPage(title, iconSrc, maintenance);
75-
return page;
45+
this.addTab(title, iconSrc, maintenance);
7646
}
7747
}
7848
});

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

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,27 +16,20 @@
1616
************************************************************************ */
1717

1818
qx.Class.define("osparc.admin.AdminCenterWindow", {
19-
extend: osparc.ui.window.SingletonWindow,
19+
extend: osparc.ui.window.TabbedWindow,
2020

2121
construct: function() {
2222
this.base(arguments, "admin-center", this.tr("Admin Center"));
2323

24-
const viewWidth = 800;
25-
const viewHeight = 600;
26-
24+
const width = 800;
25+
const height = 600;
2726
this.set({
28-
layout: new qx.ui.layout.Grow(),
29-
modal: true,
30-
width: viewWidth,
31-
height: viewHeight,
32-
showMaximize: false,
33-
showMinimize: false,
34-
resizable: true,
35-
appearance: "service-window"
27+
width: width,
28+
height: height,
3629
});
3730

3831
const adminCenter = new osparc.admin.AdminCenter();
39-
this.add(adminCenter);
32+
this._setTabbedView(adminCenter);
4033
},
4134

4235
statics: {

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -694,25 +694,25 @@ qx.Class.define("osparc.dashboard.CardBase", {
694694

695695
__openMoreOptions: function() {
696696
const resourceData = this.getResourceData();
697-
const moreOpts = new osparc.dashboard.ResourceMoreOptions(resourceData);
698-
const win = osparc.dashboard.ResourceMoreOptions.popUpInWindow(moreOpts);
697+
const resourceDetails = new osparc.dashboard.ResourceDetails(resourceData);
698+
const win = osparc.dashboard.ResourceDetails.popUpInWindow(resourceDetails);
699699
[
700700
"updateStudy",
701701
"updateTemplate",
702702
"updateService"
703703
].forEach(ev => {
704-
moreOpts.addListener(ev, e => this.fireDataEvent(ev, e.getData()));
704+
resourceDetails.addListener(ev, e => this.fireDataEvent(ev, e.getData()));
705705
});
706-
moreOpts.addListener("publishTemplate", e => {
706+
resourceDetails.addListener("publishTemplate", e => {
707707
win.close();
708708
this.fireDataEvent("publishTemplate", e.getData());
709709
});
710-
moreOpts.addListener("openStudy", e => {
710+
resourceDetails.addListener("openStudy", e => {
711711
const openCB = () => win.close();
712712
const studyId = e.getData()["uuid"];
713713
this._startStudyById(studyId, openCB, null);
714714
});
715-
return moreOpts;
715+
return resourceDetails;
716716
},
717717

718718
_startStudyById: function(studyId, openCB, cancelCB, isStudyCreation = false) {

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -416,31 +416,31 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
416416
},
417417

418418
_openDetailsView: function(resourceData) {
419-
const moreOpts = new osparc.dashboard.ResourceMoreOptions(resourceData);
420-
const win = osparc.dashboard.ResourceMoreOptions.popUpInWindow(moreOpts);
421-
moreOpts.addListener("updateStudy", e => this._updateStudyData(e.getData()));
422-
moreOpts.addListener("updateTemplate", e => this._updateTemplateData(e.getData()));
423-
moreOpts.addListener("updateService", e => this._updateServiceData(e.getData()));
424-
moreOpts.addListener("publishTemplate", e => {
419+
const resourceDetails = new osparc.dashboard.ResourceDetails(resourceData);
420+
const win = osparc.dashboard.ResourceDetails.popUpInWindow(resourceDetails);
421+
resourceDetails.addListener("updateStudy", e => this._updateStudyData(e.getData()));
422+
resourceDetails.addListener("updateTemplate", e => this._updateTemplateData(e.getData()));
423+
resourceDetails.addListener("updateService", e => this._updateServiceData(e.getData()));
424+
resourceDetails.addListener("publishTemplate", e => {
425425
win.close();
426426
this.fireDataEvent("publishTemplate", e.getData());
427427
});
428-
moreOpts.addListener("openStudy", e => {
428+
resourceDetails.addListener("openStudy", e => {
429429
const openCB = () => win.close();
430430
const studyId = e.getData()["uuid"];
431431
this._startStudyById(studyId, openCB, null);
432432
});
433-
moreOpts.addListener("openTemplate", e => {
433+
resourceDetails.addListener("openTemplate", e => {
434434
win.close();
435435
const templateData = e.getData();
436436
this._createStudyFromTemplate(templateData);
437437
});
438-
moreOpts.addListener("openService", e => {
438+
resourceDetails.addListener("openService", e => {
439439
win.close();
440440
const openServiceData = e.getData();
441441
this._createStudyFromService(openServiceData["key"], openServiceData["version"]);
442442
});
443-
return moreOpts;
443+
return resourceDetails;
444444
},
445445

446446
_getShareMenuButton: function(card) {

services/static-webserver/client/source/class/osparc/dashboard/ResourceMoreOptions.js renamed to services/static-webserver/client/source/class/osparc/dashboard/ResourceDetails.js

Lines changed: 21 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,15 @@
1515
1616
************************************************************************ */
1717

18-
qx.Class.define("osparc.dashboard.ResourceMoreOptions", {
19-
extend: qx.ui.core.Widget,
18+
qx.Class.define("osparc.dashboard.ResourceDetails", {
19+
extend: osparc.ui.window.TabbedView,
2020

2121
construct: function(resourceData) {
2222
this.base(arguments);
2323

2424
this.__resourceData = resourceData;
2525

26-
this._setLayout(new qx.ui.layout.VBox(10));
27-
this.set({
28-
padding: 20,
29-
paddingLeft: 10
30-
});
31-
this.__addTabPagesView();
26+
this.__addPages();
3227
},
3328

3429
events: {
@@ -41,26 +36,25 @@ qx.Class.define("osparc.dashboard.ResourceMoreOptions", {
4136
"publishTemplate": "qx.event.type.Data"
4237
},
4338

39+
4440
statics: {
4541
WIDTH: 830,
4642
HEIGHT: 700,
4743

48-
popUpInWindow: function(moreOpts) {
44+
popUpInWindow: function(resourceDetails) {
4945
// eslint-disable-next-line no-underscore-dangle
50-
const resourceAlias = osparc.utils.Utils.resourceTypeToAlias(moreOpts.__resourceData["resourceType"]);
46+
const resourceAlias = osparc.utils.Utils.resourceTypeToAlias(resourceDetails.__resourceData["resourceType"]);
5147
// eslint-disable-next-line no-underscore-dangle
52-
const title = `${resourceAlias} ${qx.locale.Manager.tr("Details")} - ${moreOpts.__resourceData.name}`
53-
return osparc.ui.window.Window.popUpInWindow(moreOpts, title, this.WIDTH, this.HEIGHT).set({
54-
maxHeight: 1000,
48+
const title = `${resourceAlias} ${qx.locale.Manager.tr("Details")} - ${resourceDetails.__resourceData.name}`;
49+
const win = osparc.ui.window.Window.popUpInWindow(resourceDetails, title, this.WIDTH, this.HEIGHT).set({
5550
layout: new qx.ui.layout.Grow(),
56-
modal: true,
51+
});
52+
win.set(osparc.ui.window.TabbedWindow.DEFAULT_PROPS);
53+
win.set({
5754
width: this.WIDTH,
5855
height: this.HEIGHT,
59-
showMaximize: false,
60-
showMinimize: false,
61-
resizable: true,
62-
appearance: "service-window"
6356
});
57+
return win;
6458
}
6559
},
6660

@@ -75,7 +69,6 @@ qx.Class.define("osparc.dashboard.ResourceMoreOptions", {
7569

7670
members: {
7771
__resourceData: null,
78-
__tabsView: null,
7972
__dataPage: null,
8073
__permissionsPage: null,
8174
__tagsPage: null,
@@ -174,7 +167,7 @@ qx.Class.define("osparc.dashboard.ResourceMoreOptions", {
174167
win.open();
175168
win.addListenerOnce("close", () => {
176169
if (win.getConfirmed()) {
177-
this.__openPage(this.__servicesUpdatePage);
170+
this._openPage(this.__servicesUpdatePage);
178171
} else {
179172
this.__openResource();
180173
}
@@ -195,50 +188,32 @@ qx.Class.define("osparc.dashboard.ResourceMoreOptions", {
195188
}
196189
},
197190

198-
__addTabPagesView: function() {
199-
const tabsView = this.__tabsView = new qx.ui.tabview.TabView().set({
200-
barPosition: "left",
201-
contentPadding: 0
202-
});
203-
this._add(tabsView, {
204-
flex: 1
205-
});
206-
207-
this.__addPages();
208-
},
209-
210-
__openPage: function(page) {
211-
if (page) {
212-
this.__tabsView.setSelection([page]);
213-
}
214-
},
215-
216191
openData: function() {
217-
this.__openPage(this.__dataPage);
192+
this._openPage(this.__dataPage);
218193
},
219194

220195
openAccessRights: function() {
221-
this.__openPage(this.__permissionsPage);
196+
this._openPage(this.__permissionsPage);
222197
},
223198

224199
openTags: function() {
225-
this.__openPage(this.__tagsPage);
200+
this._openPage(this.__tagsPage);
226201
},
227202

228203
openClassifiers: function() {
229-
this.__openPage(this.__classifiersPage);
204+
this._openPage(this.__classifiersPage);
230205
},
231206

232207
openQuality: function() {
233-
this.__openPage(this.__qualityPage);
208+
this._openPage(this.__qualityPage);
234209
},
235210

236211
openBillingSettings: function() {
237-
this.__openPage(this.__billingSettings);
212+
this._openPage(this.__billingSettings);
238213
},
239214

240215
openUpdateServices: function() {
241-
this.__openPage(this.__servicesUpdatePage);
216+
this._openPage(this.__servicesUpdatePage);
242217
},
243218

244219
__createServiceVersionSelector: function() {
@@ -288,7 +263,7 @@ qx.Class.define("osparc.dashboard.ResourceMoreOptions", {
288263
},
289264

290265
__addPages: function() {
291-
const tabsView = this.__tabsView;
266+
const tabsView = this.getChildControl("tabs-view");
292267

293268
// keep selected page
294269
const selection = tabsView.getSelection();

‎services/static-webserver/client/source/class/osparc/dashboard/resources/pages/BasePage.js‎

Lines changed: 2 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@
1616
************************************************************************ */
1717

1818
qx.Class.define("osparc.dashboard.resources.pages.BasePage", {
19-
extend: qx.ui.tabview.Page,
19+
extend: osparc.desktop.preferences.pages.BasePage,
2020

2121
construct: function(title, iconSrc = null, id) {
22-
this.base(arguments, null, iconSrc);
22+
this.base(arguments, title, iconSrc);
2323

2424
this.tabId = id;
2525

@@ -33,14 +33,6 @@ qx.Class.define("osparc.dashboard.resources.pages.BasePage", {
3333
grid.setRowAlign(0, "right", "top"); // footer
3434

3535
this.setLayout(grid);
36-
37-
this.__showLabelOnTab(title);
38-
39-
this.set({
40-
backgroundColor: "window-popup-background",
41-
paddingTop: 0,
42-
paddingLeft: 15
43-
});
4436
},
4537

4638
statics: {
@@ -58,38 +50,6 @@ qx.Class.define("osparc.dashboard.resources.pages.BasePage", {
5850
},
5951

6052
members: {
61-
_createChildControlImpl: function(id) {
62-
let control;
63-
switch (id) {
64-
case "title": {
65-
control = new qx.ui.basic.Label().set({
66-
font: "title-14",
67-
alignX: "left"
68-
});
69-
this.add(control);
70-
break;
71-
}
72-
}
73-
return control || this.base(arguments, id);
74-
},
75-
76-
__showLabelOnTab: function(tabTitle) {
77-
this.getChildControl("title").set({
78-
visibility: "excluded"
79-
});
80-
81-
const tabButton = this.getChildControl("button");
82-
tabButton.set({
83-
label: tabTitle,
84-
font: "text-14"
85-
});
86-
// eslint-disable-next-line no-underscore-dangle
87-
const buttonLayout = tabButton._getLayout();
88-
buttonLayout.setColumnAlign(0, "center", "middle"); // center icon
89-
buttonLayout.setColumnWidth(0, 24); // align texts
90-
buttonLayout.setSpacingX(5);
91-
},
92-
9353
addToHeader: function(widget) {
9454
this.add(widget, {
9555
column: 0,

0 commit comments

Comments
 (0)