Skip to content

Commit

Permalink
♻️ Frontend: Tabbed Windows and Views (#5665)
Browse files Browse the repository at this point in the history
  • Loading branch information
@odeimaiz
odeimaiz authored Apr 15, 2024
1 parent b309461 commit e3705ca
Show file tree
Hide file tree
Showing 40 changed files with 595 additions and 694 deletions.
48 changes: 9 additions & 39 deletions services/static-webserver/client/source/class/osparc/admin/AdminCenter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,63 +16,33 @@
************************************************************************ */

qx.Class.define("osparc.admin.AdminCenter", {
extend: qx.ui.core.Widget,
extend: osparc.ui.window.TabbedView,

construct: function() {
this.base(arguments);

this._setLayout(new qx.ui.layout.VBox());

this.set({
padding: 10
});

const tabViews = new qx.ui.tabview.TabView().set({
barPosition: "left",
contentPadding: 0
});
const miniProfile = osparc.desktop.credits.MyAccount.createMiniProfileView().set({
const miniProfile = osparc.desktop.account.MyAccount.createMiniProfileView().set({
paddingRight: 10
});
tabViews.getChildControl("bar").add(miniProfile);

const pricingPlans = this.__getPricingPlansPage();
tabViews.add(pricingPlans);
this.addWidgetOnTopOfTheTabs(miniProfile);

const maintenance = this.__getMaintenancePage();
tabViews.add(maintenance);

this._add(tabViews, {
flex: 1
});
this.__addPricingPlansPage();
this.__addMaintenancePage();
},

members: {
__widgetToPage: function(title, iconSrc, widget) {
const page = new osparc.desktop.preferences.pages.BasePage(title, iconSrc);
widget.set({
margin: 10
});
page.add(widget, {
flex: 1
});
return page;
},

__getPricingPlansPage: function() {
__addPricingPlansPage: function() {
const title = this.tr("Pricing Plans");
const iconSrc = "@FontAwesome5Solid/dollar-sign/22";
const pricingPlans = new osparc.pricing.PlanManager();
const page = this.__widgetToPage(title, iconSrc, pricingPlans);
return page;
this.addTab(title, iconSrc, pricingPlans);
},

__getMaintenancePage: function() {
__addMaintenancePage: function() {
const title = this.tr("Maintenance");
const iconSrc = "@FontAwesome5Solid/wrench/22";
const maintenance = new osparc.admin.Maintenance();
const page = this.__widgetToPage(title, iconSrc, maintenance);
return page;
this.addTab(title, iconSrc, maintenance);
}
}
});
19 changes: 6 additions & 13 deletions services/static-webserver/client/source/class/osparc/admin/AdminCenterWindow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,27 +16,20 @@
************************************************************************ */

qx.Class.define("osparc.admin.AdminCenterWindow", {
extend: osparc.ui.window.SingletonWindow,
extend: osparc.ui.window.TabbedWindow,

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

const viewWidth = 800;
const viewHeight = 600;

const width = 800;
const height = 600;
this.set({
layout: new qx.ui.layout.Grow(),
modal: true,
width: viewWidth,
height: viewHeight,
showMaximize: false,
showMinimize: false,
resizable: true,
appearance: "service-window"
width: width,
height: height,
});

const adminCenter = new osparc.admin.AdminCenter();
this.add(adminCenter);
this._setTabbedView(adminCenter);
},

statics: {
Expand Down
12 changes: 6 additions & 6 deletions services/static-webserver/client/source/class/osparc/dashboard/CardBase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -694,25 +694,25 @@ qx.Class.define("osparc.dashboard.CardBase", {

__openMoreOptions: function() {
const resourceData = this.getResourceData();
const moreOpts = new osparc.dashboard.ResourceMoreOptions(resourceData);
const win = osparc.dashboard.ResourceMoreOptions.popUpInWindow(moreOpts);
const resourceDetails = new osparc.dashboard.ResourceDetails(resourceData);
const win = osparc.dashboard.ResourceDetails.popUpInWindow(resourceDetails);
[
"updateStudy",
"updateTemplate",
"updateService"
].forEach(ev => {
moreOpts.addListener(ev, e => this.fireDataEvent(ev, e.getData()));
resourceDetails.addListener(ev, e => this.fireDataEvent(ev, e.getData()));
});
moreOpts.addListener("publishTemplate", e => {
resourceDetails.addListener("publishTemplate", e => {
win.close();
this.fireDataEvent("publishTemplate", e.getData());
});
moreOpts.addListener("openStudy", e => {
resourceDetails.addListener("openStudy", e => {
const openCB = () => win.close();
const studyId = e.getData()["uuid"];
this._startStudyById(studyId, openCB, null);
});
return moreOpts;
return resourceDetails;
},

_startStudyById: function(studyId, openCB, cancelCB, isStudyCreation = false) {
Expand Down
20 changes: 10 additions & 10 deletions services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -416,31 +416,31 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
},

_openDetailsView: function(resourceData) {
const moreOpts = new osparc.dashboard.ResourceMoreOptions(resourceData);
const win = osparc.dashboard.ResourceMoreOptions.popUpInWindow(moreOpts);
moreOpts.addListener("updateStudy", e => this._updateStudyData(e.getData()));
moreOpts.addListener("updateTemplate", e => this._updateTemplateData(e.getData()));
moreOpts.addListener("updateService", e => this._updateServiceData(e.getData()));
moreOpts.addListener("publishTemplate", e => {
const resourceDetails = new osparc.dashboard.ResourceDetails(resourceData);
const win = osparc.dashboard.ResourceDetails.popUpInWindow(resourceDetails);
resourceDetails.addListener("updateStudy", e => this._updateStudyData(e.getData()));
resourceDetails.addListener("updateTemplate", e => this._updateTemplateData(e.getData()));
resourceDetails.addListener("updateService", e => this._updateServiceData(e.getData()));
resourceDetails.addListener("publishTemplate", e => {
win.close();
this.fireDataEvent("publishTemplate", e.getData());
});
moreOpts.addListener("openStudy", e => {
resourceDetails.addListener("openStudy", e => {
const openCB = () => win.close();
const studyId = e.getData()["uuid"];
this._startStudyById(studyId, openCB, null);
});
moreOpts.addListener("openTemplate", e => {
resourceDetails.addListener("openTemplate", e => {
win.close();
const templateData = e.getData();
this._createStudyFromTemplate(templateData);
});
moreOpts.addListener("openService", e => {
resourceDetails.addListener("openService", e => {
win.close();
const openServiceData = e.getData();
this._createStudyFromService(openServiceData["key"], openServiceData["version"]);
});
return moreOpts;
return resourceDetails;
},

_getShareMenuButton: function(card) {
Expand Down
67 changes: 21 additions & 46 deletions ...s/osparc/dashboard/ResourceMoreOptions.js → ...class/osparc/dashboard/ResourceDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,20 +15,15 @@
************************************************************************ */

qx.Class.define("osparc.dashboard.ResourceMoreOptions", {
extend: qx.ui.core.Widget,
qx.Class.define("osparc.dashboard.ResourceDetails", {
extend: osparc.ui.window.TabbedView,

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

this.__resourceData = resourceData;

this._setLayout(new qx.ui.layout.VBox(10));
this.set({
padding: 20,
paddingLeft: 10
});
this.__addTabPagesView();
this.__addPages();
},

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


statics: {
WIDTH: 830,
HEIGHT: 700,

popUpInWindow: function(moreOpts) {
popUpInWindow: function(resourceDetails) {
// eslint-disable-next-line no-underscore-dangle
const resourceAlias = osparc.utils.Utils.resourceTypeToAlias(moreOpts.__resourceData["resourceType"]);
const resourceAlias = osparc.utils.Utils.resourceTypeToAlias(resourceDetails.__resourceData["resourceType"]);
// eslint-disable-next-line no-underscore-dangle
const title = `${resourceAlias} ${qx.locale.Manager.tr("Details")} - ${moreOpts.__resourceData.name}`
return osparc.ui.window.Window.popUpInWindow(moreOpts, title, this.WIDTH, this.HEIGHT).set({
maxHeight: 1000,
const title = `${resourceAlias} ${qx.locale.Manager.tr("Details")} - ${resourceDetails.__resourceData.name}`;
const win = osparc.ui.window.Window.popUpInWindow(resourceDetails, title, this.WIDTH, this.HEIGHT).set({
layout: new qx.ui.layout.Grow(),
modal: true,
});
win.set(osparc.ui.window.TabbedWindow.DEFAULT_PROPS);
win.set({
width: this.WIDTH,
height: this.HEIGHT,
showMaximize: false,
showMinimize: false,
resizable: true,
appearance: "service-window"
});
return win;
}
},

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

members: {
__resourceData: null,
__tabsView: null,
__dataPage: null,
__permissionsPage: null,
__tagsPage: null,
Expand Down Expand Up @@ -174,7 +167,7 @@ qx.Class.define("osparc.dashboard.ResourceMoreOptions", {
win.open();
win.addListenerOnce("close", () => {
if (win.getConfirmed()) {
this.__openPage(this.__servicesUpdatePage);
this._openPage(this.__servicesUpdatePage);
} else {
this.__openResource();
}
Expand All @@ -195,50 +188,32 @@ qx.Class.define("osparc.dashboard.ResourceMoreOptions", {
}
},

__addTabPagesView: function() {
const tabsView = this.__tabsView = new qx.ui.tabview.TabView().set({
barPosition: "left",
contentPadding: 0
});
this._add(tabsView, {
flex: 1
});

this.__addPages();
},

__openPage: function(page) {
if (page) {
this.__tabsView.setSelection([page]);
}
},

openData: function() {
this.__openPage(this.__dataPage);
this._openPage(this.__dataPage);
},

openAccessRights: function() {
this.__openPage(this.__permissionsPage);
this._openPage(this.__permissionsPage);
},

openTags: function() {
this.__openPage(this.__tagsPage);
this._openPage(this.__tagsPage);
},

openClassifiers: function() {
this.__openPage(this.__classifiersPage);
this._openPage(this.__classifiersPage);
},

openQuality: function() {
this.__openPage(this.__qualityPage);
this._openPage(this.__qualityPage);
},

openBillingSettings: function() {
this.__openPage(this.__billingSettings);
this._openPage(this.__billingSettings);
},

openUpdateServices: function() {
this.__openPage(this.__servicesUpdatePage);
this._openPage(this.__servicesUpdatePage);
},

__createServiceVersionSelector: function() {
Expand Down Expand Up @@ -288,7 +263,7 @@ qx.Class.define("osparc.dashboard.ResourceMoreOptions", {
},

__addPages: function() {
const tabsView = this.__tabsView;
const tabsView = this.getChildControl("tabs-view");

// keep selected page
const selection = tabsView.getSelection();
Expand Down
44 changes: 2 additions & 42 deletions services/static-webserver/client/source/class/osparc/dashboard/resources/pages/BasePage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,10 @@
************************************************************************ */

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

construct: function(title, iconSrc = null, id) {
this.base(arguments, null, iconSrc);
this.base(arguments, title, iconSrc);

this.tabId = id;

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

this.setLayout(grid);

this.__showLabelOnTab(title);

this.set({
backgroundColor: "window-popup-background",
paddingTop: 0,
paddingLeft: 15
});
},

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

members: {
_createChildControlImpl: function(id) {
let control;
switch (id) {
case "title": {
control = new qx.ui.basic.Label().set({
font: "title-14",
alignX: "left"
});
this.add(control);
break;
}
}
return control || this.base(arguments, id);
},

__showLabelOnTab: function(tabTitle) {
this.getChildControl("title").set({
visibility: "excluded"
});

const tabButton = this.getChildControl("button");
tabButton.set({
label: tabTitle,
font: "text-14"
});
// eslint-disable-next-line no-underscore-dangle
const buttonLayout = tabButton._getLayout();
buttonLayout.setColumnAlign(0, "center", "middle"); // center icon
buttonLayout.setColumnWidth(0, 24); // align texts
buttonLayout.setSpacingX(5);
},

addToHeader: function(widget) {
this.add(widget, {
column: 0,
Expand Down
Loading

0 comments on commit e3705ca

Please sign in to comment.