diff --git a/services/static-webserver/client/source/class/osparc/info/MergedLarge.js b/services/static-webserver/client/source/class/osparc/info/MergedLarge.js
index 34c73e244a1d..e2c4bf6e9e0b 100644
--- a/services/static-webserver/client/source/class/osparc/info/MergedLarge.js
+++ b/services/static-webserver/client/source/class/osparc/info/MergedLarge.js
@@ -296,7 +296,6 @@ qx.Class.define("osparc.info.MergedLarge", {
},
__createDescription: function() {
- const maxHeight = 400;
const descriptionLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5).set({
alignY: "middle"
}));
@@ -306,7 +305,8 @@ qx.Class.define("osparc.info.MergedLarge", {
});
descriptionLayout.add(label);
- const descriptionContainer = osparc.info.StudyUtils.createDescriptionMD(this.getStudy(), maxHeight);
+ const maxHeight = 400;
+ const descriptionContainer = osparc.info.StudyUtils.createDescription(this.getStudy(), maxHeight);
descriptionLayout.add(descriptionContainer);
return descriptionLayout;
diff --git a/services/static-webserver/client/source/class/osparc/info/ServiceLarge.js b/services/static-webserver/client/source/class/osparc/info/ServiceLarge.js
index e8caad8ead1d..b79d34c491ff 100644
--- a/services/static-webserver/client/source/class/osparc/info/ServiceLarge.js
+++ b/services/static-webserver/client/source/class/osparc/info/ServiceLarge.js
@@ -96,17 +96,13 @@ qx.Class.define("osparc.info.ServiceLarge", {
_rebuildLayout: function() {
this._removeAll();
- const vBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(15));
+ const vBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
const deprecated = this.__createDeprecated();
if (deprecated) {
vBox.add(deprecated);
}
- const description = this.__createDescription();
- const editInTitle = this.__createViewWithEdit(description.getChildren()[0], this.__openDescriptionEditor);
- description.addAt(editInTitle, 0);
-
const copyMetadataButton = new qx.ui.form.Button(this.tr("Copy Raw metadata"), "@FontAwesome5Solid/copy/12").set({
allowGrowX: false
});
@@ -114,10 +110,9 @@ qx.Class.define("osparc.info.ServiceLarge", {
if (
this.getService()["descriptionUi"] &&
- !osparc.service.Utils.canIWrite(this.getService()["accessRights"]) &&
- description.getChildren().length > 1
+ !osparc.service.Utils.canIWrite(this.getService()["accessRights"])
) {
- // Show also the copy Id buttons too
+ // In case of service instance, show also the copy Id buttons too
const buttonsLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
if (this.getNodeId()) {
const studyAlias = osparc.product.Utils.getStudyAlias({firstUpperCase: true});
@@ -135,14 +130,12 @@ qx.Class.define("osparc.info.ServiceLarge", {
buttonsLayout.add(copyNodeIdButton);
vBox.add(buttonsLayout);
}
- // Also copyMetadataButton if tester
- if (osparc.data.Permissions.getInstance().isTester()) {
- buttonsLayout.add(copyMetadataButton);
- vBox.add(buttonsLayout);
- }
+
// Show description only
- vBox.add(description.getChildren()[1]);
+ const description = this.__createDescription();
+ vBox.add(description);
} else {
+ // Icon and title
const hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
const icon = this.__createIcon();
const iconLayout = this.__createViewWithEdit(icon, this.__openIconEditor);
@@ -152,47 +145,28 @@ qx.Class.define("osparc.info.ServiceLarge", {
hBox.add(titleLayout);
vBox.add(hBox);
- const extraInfo = this.__extraInfo();
- const extraInfoLayout = this.__createExtraInfo(extraInfo);
- const bounds = this.getBounds();
- const offset = 30;
- const maxThumbnailHeight = extraInfo.length*20;
- let widgetWidth = bounds ? bounds.width - offset : 500 - offset;
- let thumbnailWidth = widgetWidth - 2 * osparc.info.CardLarge.PADDING - osparc.info.CardLarge.EXTRA_INFO_WIDTH;
- thumbnailWidth = Math.min(thumbnailWidth - 20, osparc.info.CardLarge.THUMBNAIL_MAX_WIDTH);
- const thumbnail = this.__createThumbnail(thumbnailWidth, maxThumbnailHeight);
- const thumbnailLayout = this.__createViewWithEdit(thumbnail, this.__openThumbnailEditor);
- thumbnailLayout.getLayout().set({
- alignX: "center"
- });
- const infoAndThumbnail = new qx.ui.container.Composite(new qx.ui.layout.HBox(3).set({
- alignX: "center"
- }));
- infoAndThumbnail.add(extraInfoLayout);
- infoAndThumbnail.add(thumbnailLayout, {
- flex: 1
- });
- vBox.add(infoAndThumbnail);
-
- if (osparc.service.Utils.canIWrite(this.getService()["accessRights"])) {
- const descriptionUi = this.__createDescriptionUi();
- if (descriptionUi) {
- vBox.add(descriptionUi);
- }
- }
- vBox.add(description);
+ // Rest of information
+ const infoElements = this.__infoElements();
+ const isStudy = false;
+ const infoLayout = osparc.info.Utils.infoElementsToLayout(infoElements, isStudy);
+ vBox.add(infoLayout);
+ // Resources info if not billable
if (!osparc.desktop.credits.Utils.areWalletsEnabled()) {
const resources = this.__createResources();
if (resources) {
vBox.add(resources);
}
}
- vBox.add(copyMetadataButton);
}
+ // Copy metadata button
+ vBox.add(copyMetadataButton);
+
+ // All in a scroll container
const scrollContainer = new qx.ui.container.Scroll();
scrollContainer.add(vBox);
+
this._add(scrollContainer, {
flex: 1
});
@@ -246,77 +220,99 @@ qx.Class.define("osparc.info.ServiceLarge", {
return title;
},
- __extraInfo: function() {
- const extraInfo = [];
+ __infoElements: function() {
+ const canIWrite = osparc.service.Utils.canIWrite(this.getService()["accessRights"]);
+
+ const infoLayout = {
+ "THUMBNAIL": {
+ view: this.__createThumbnail(),
+ action: {
+ button: osparc.utils.Utils.getEditButton(canIWrite),
+ callback: canIWrite ? this.__openThumbnailEditor : null,
+ ctx: this,
+ },
+ },
+ "KEY": {
+ label: this.tr("Key"),
+ view: this.__createKey(),
+ action: {
+ button: osparc.utils.Utils.getCopyButton(),
+ callback: this.__copyKeyToClipboard,
+ ctx: this,
+ },
+ },
+ "VERSION": {
+ label: this.tr("Version"),
+ view: this.__createDisplayVersion(),
+ action: {
+ button: canIWrite ? osparc.utils.Utils.getEditButton() : null,
+ callback: this.__openVersionDisplayEditor,
+ ctx: this,
+ },
+ },
+ "DATE": {
+ label: this.tr("Released Date"),
+ view: this.__createReleasedDate(),
+ action: null,
+ },
+ "CONTACT": {
+ label: this.tr("Contact"),
+ view: this.__createContact(),
+ action: null,
+ },
+ "AUTHORS": {
+ label: this.tr("Authors"),
+ view: this.__createAuthors(),
+ action: null,
+ },
+ "ACCESS_RIGHTS": {
+ label: this.tr("Access"),
+ view: this.__createAccessRights(),
+ action: {
+ button: canIWrite ? osparc.utils.Utils.getEditButton() : null,
+ callback: this.isOpenOptions() ? this.__openAccessRights : "openAccessRights",
+ ctx: this,
+ },
+ },
+ "DESCRIPTION": {
+ view: this.__createDescription(),
+ action: {
+ button: osparc.utils.Utils.getEditButton(canIWrite),
+ callback: canIWrite ? this.__openDescriptionEditor : null,
+ ctx: this,
+ },
+ },
+ };
if (this.getNodeId()) {
- extraInfo.push({
- label: this.tr("SERVICE ID"),
+ infoLayout["SERVICE_ID"] = {
+ label: this.tr("Service ID"),
view: this.__createNodeId(),
action: {
button: osparc.utils.Utils.getCopyButton(),
callback: this.__copyNodeIdToClipboard,
ctx: this
- }
- });
+ },
+ };
}
- extraInfo.push({
- label: this.tr("Key"),
- view: this.__createKey(),
- action: {
- button: osparc.utils.Utils.getCopyButton(),
- callback: this.__copyKeyToClipboard,
- ctx: this
- }
- });
-
- if (osparc.data.Permissions.getInstance().isTester() || osparc.service.Utils.canIWrite(this.getService()["accessRights"])) {
- extraInfo.push({
+ if (osparc.data.Permissions.getInstance().isTester() || canIWrite) {
+ infoLayout["INTEGRATION_VERSION"] = {
label: this.tr("Integration Version"),
view: this.__createIntegrationVersion(),
- action: null
- });
+ action: null,
+ };
}
- extraInfo.push({
- label: this.tr("Version"),
- view: this.__createDisplayVersion(),
- action: {
- button: osparc.service.Utils.canIWrite(this.getService()["accessRights"]) ? osparc.utils.Utils.getEditButton() : null,
- callback: this.__openVersionDisplayEditor,
- ctx: this
- }
- }, {
- label: this.tr("Released Date"),
- view: this.__createReleasedDate(),
- action: null
- }, {
- label: this.tr("Contact"),
- view: this.__createContact(),
- action: null
- }, {
- label: this.tr("Authors"),
- view: this.__createAuthors(),
- action: null
- }, {
- label: this.tr("Access"),
- view: this.__createAccessRights(),
- action: {
- button: osparc.service.Utils.canIWrite(this.getService()["accessRights"]) ? osparc.utils.Utils.getEditButton() : null,
- callback: this.isOpenOptions() ? this.__openAccessRights : "openAccessRights",
- ctx: this
- }
- });
-
- return extraInfo;
- },
+ if (canIWrite) {
+ infoLayout["DESCRIPTION_ONLY"] = {
+ label: this.tr("Description only"),
+ view: this.__createDescriptionUi(),
+ action: null,
+ };
+ }
- __createExtraInfo: function(extraInfo) {
- const moreInfo = osparc.info.Utils.extraInfosToGrid(extraInfo).set({
- width: osparc.info.CardLarge.EXTRA_INFO_WIDTH
- });
- return moreInfo;
+ return infoLayout;
},
__createNodeId: function() {
@@ -351,15 +347,9 @@ qx.Class.define("osparc.info.ServiceLarge", {
return osparc.info.ServiceUtils.createAccessRights(this.getService());
},
- __createClassifiers: function() {
- return osparc.info.ServiceUtils.createClassifiers(this.getService());
- },
-
- __createQuality: function() {
- return osparc.info.ServiceUtils.createQuality(this.getService());
- },
-
- __createThumbnail: function(maxWidth, maxHeight = 160) {
+ __createThumbnail: function() {
+ let maxWidth = 190;
+ let maxHeight = 220;
// make sure maxs are not larger than the mins
const minWidth = Math.max(120, maxWidth);
const minHeight = Math.max(139, maxHeight);
@@ -387,9 +377,7 @@ qx.Class.define("osparc.info.ServiceLarge", {
__createDescriptionUi: function() {
const cbAutoPorts = new qx.ui.form.CheckBox().set({
- label: this.tr("Show Description only"),
toolTipText: this.tr("From all the metadata shown in this view,\nonly the Description will be shown to Users."),
- iconPosition: "right",
});
cbAutoPorts.setValue(Boolean(this.getService()["descriptionUi"]));
cbAutoPorts.addListener("changeValue", e => {
@@ -476,33 +464,6 @@ qx.Class.define("osparc.info.ServiceLarge", {
}, this);
},
- __openClassifiers: function() {
- const title = this.tr("Classifiers");
- let classifiers = null;
- if (osparc.service.Utils.canIWrite(this.getService()["accessRights"])) {
- classifiers = new osparc.metadata.ClassifiersEditor(this.getService());
- const win = osparc.ui.window.Window.popUpInWindow(classifiers, title, 400, 400);
- classifiers.addListener("updateClassifiers", e => {
- win.close();
- const updatedServiceData = e.getData();
- this.setService(updatedServiceData);
- this.fireDataEvent("updateService", updatedServiceData);
- }, this);
- } else {
- classifiers = new osparc.metadata.ClassifiersViewer(this.getService());
- osparc.ui.window.Window.popUpInWindow(classifiers, title, 400, 400);
- }
- },
-
- __openQuality: function() {
- const qualityEditor = osparc.info.ServiceUtils.openQuality(this.getService());
- qualityEditor.addListener("updateQuality", e => {
- const updatedServiceData = e.getData();
- this.setService(updatedServiceData);
- this.fireDataEvent("updateService", updatedServiceData);
- });
- },
-
__openThumbnailEditor: function() {
const title = this.tr("Edit Thumbnail");
const thumbnailEditor = new osparc.editor.ThumbnailEditor(this.getService()["thumbnail"]);
diff --git a/services/static-webserver/client/source/class/osparc/info/ServiceUtils.js b/services/static-webserver/client/source/class/osparc/info/ServiceUtils.js
index 55727bba3c74..8f3685a6c4c9 100644
--- a/services/static-webserver/client/source/class/osparc/info/ServiceUtils.js
+++ b/services/static-webserver/client/source/class/osparc/info/ServiceUtils.js
@@ -20,6 +20,13 @@ qx.Class.define("osparc.info.ServiceUtils", {
type: "static",
statics: {
+ RESOURCES_INFO: {
+ "limit": {
+ label: qx.locale.Manager.tr("Limit"),
+ tooltip: qx.locale.Manager.tr("Runtime check:
The service can consume a maximum of 'limit' resources - if it attempts to use more resources than this limit, it will be stopped")
+ }
+ },
+
/**
* @param label {String} label
*/
@@ -168,13 +175,8 @@ qx.Class.define("osparc.info.ServiceUtils", {
/**
* @param serviceData {Object} Serialized Service Object
- * @param maxHeight {Number} description's maxHeight
*/
createDescription: function(serviceData) {
- const descriptionLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox().set({
- alignY: "middle"
- }));
-
const description = new osparc.ui.markdown.Markdown();
// display markdown link content if that's the case
if (
@@ -197,16 +199,10 @@ qx.Class.define("osparc.info.ServiceUtils", {
} else {
description.setValue(this.tr("No description"));
}
- descriptionLayout.add(description);
-
- return descriptionLayout;
- },
+ const scrollContainer = new qx.ui.container.Scroll();
+ scrollContainer.add(description);
- RESOURCES_INFO: {
- "limit": {
- label: qx.locale.Manager.tr("Limit"),
- tooltip: qx.locale.Manager.tr("Runtime check:
The service can consume a maximum of 'limit' resources - if it attempts to use more resources than this limit, it will be stopped")
- }
+ return scrollContainer;
},
createResourcesInfo: function() {
diff --git a/services/static-webserver/client/source/class/osparc/info/StudyLarge.js b/services/static-webserver/client/source/class/osparc/info/StudyLarge.js
index 575bc7975d95..fad851d77447 100644
--- a/services/static-webserver/client/source/class/osparc/info/StudyLarge.js
+++ b/services/static-webserver/client/source/class/osparc/info/StudyLarge.js
@@ -103,9 +103,11 @@ qx.Class.define("osparc.info.StudyLarge", {
}
const infoElements = this.__infoElements();
- const infoLayout = osparc.info.StudyUtils.infoElementsToLayout(infoElements);
+ const isStudy = true;
+ const infoLayout = osparc.info.Utils.infoElementsToLayout(infoElements, isStudy);
vBox.add(infoLayout);
+ // Copy Id button
let text = osparc.product.Utils.getStudyAlias({firstUpperCase: true}) + " Id";
if (this.getStudy().getTemplateType()) {
text = osparc.product.Utils.getTemplateAlias({firstUpperCase: true}) + " Id";
@@ -119,6 +121,7 @@ qx.Class.define("osparc.info.StudyLarge", {
copyIdButton.addListener("execute", () => osparc.utils.Utils.copyTextToClipboard(this.getStudy().getUuid()));
vBox.add(copyIdButton);
+ // All in a scroll container
const scrollContainer = new qx.ui.container.Scroll();
scrollContainer.add(vBox);
@@ -128,28 +131,30 @@ qx.Class.define("osparc.info.StudyLarge", {
},
__infoElements: function() {
+ const canIWrite = this.__canIWrite();
+
const infoLayout = {
"TITLE": {
view: osparc.info.StudyUtils.createTitle(this.getStudy()),
action: {
- button: osparc.utils.Utils.getEditButton(this.__canIWrite()),
- callback: this.__canIWrite() ? this.__openTitleEditor : null,
+ button: osparc.utils.Utils.getEditButton(canIWrite),
+ callback: canIWrite ? this.__openTitleEditor : null,
ctx: this
}
},
"THUMBNAIL": {
view: this.__createThumbnail(),
action: {
- button: osparc.utils.Utils.getEditButton(this.__canIWrite()),
- callback: this.__canIWrite() ? this.__openThumbnailEditor : null,
+ button: osparc.utils.Utils.getEditButton(canIWrite),
+ callback: canIWrite ? this.__openThumbnailEditor : null,
ctx: this
}
},
"DESCRIPTION": {
- view: osparc.info.StudyUtils.createDescriptionMD(this.getStudy()),
+ view: osparc.info.StudyUtils.createDescription(this.getStudy()),
action: {
- button: osparc.utils.Utils.getEditButton(this.__canIWrite()),
- callback: this.__canIWrite() ? this.__openDescriptionEditor : null,
+ button: osparc.utils.Utils.getEditButton(canIWrite),
+ callback: canIWrite ? this.__openDescriptionEditor : null,
ctx: this
}
},
@@ -162,7 +167,7 @@ qx.Class.define("osparc.info.StudyLarge", {
label: this.tr("Access"),
view: osparc.info.StudyUtils.createAccessRights(this.getStudy()),
action: {
- button: osparc.utils.Utils.getLinkButton(this.__canIWrite()),
+ button: osparc.utils.Utils.getLinkButton(canIWrite),
callback: this.isOpenOptions() ? this.__openAccessRights : "openAccessRights",
ctx: this
}
@@ -181,7 +186,7 @@ qx.Class.define("osparc.info.StudyLarge", {
label: this.tr("Tags"),
view: osparc.info.StudyUtils.createTags(this.getStudy()),
action: {
- button: osparc.utils.Utils.getLinkButton(this.__canIWrite()),
+ button: osparc.utils.Utils.getLinkButton(canIWrite),
callback: this.isOpenOptions() ? this.__openTagsEditor : "openTags",
ctx: this
}
@@ -208,7 +213,7 @@ qx.Class.define("osparc.info.StudyLarge", {
infoLayout["CLASSIFIERS"] = {
label: this.tr("Classifiers:"),
view: osparc.info.StudyUtils.createClassifiers(this.getStudy()),
- action: (this.getStudy().getClassifiers().length || this.__canIWrite()) ? {
+ action: (this.getStudy().getClassifiers().length || canIWrite) ? {
button: osparc.utils.Utils.getLinkButton(),
callback: this.isOpenOptions() ? this.__openClassifiers : "openClassifiers",
ctx: this
@@ -234,7 +239,9 @@ qx.Class.define("osparc.info.StudyLarge", {
return osparc.info.StudyUtils.createUuid(this.getStudy());
},
- __createThumbnail: function(maxWidth = 190, maxHeight = 220) {
+ __createThumbnail: function() {
+ const maxWidth = 190;
+ const maxHeight = 220;
const thumb = osparc.info.StudyUtils.createThumbnail(this.getStudy(), maxWidth, maxHeight);
thumb.set({
maxWidth: 120,
diff --git a/services/static-webserver/client/source/class/osparc/info/StudyMedium.js b/services/static-webserver/client/source/class/osparc/info/StudyMedium.js
index 5ed4aa3e58f1..ef6aa7691005 100644
--- a/services/static-webserver/client/source/class/osparc/info/StudyMedium.js
+++ b/services/static-webserver/client/source/class/osparc/info/StudyMedium.js
@@ -73,15 +73,8 @@ qx.Class.define("osparc.info.StudyMedium", {
const extraInfoLayout = this.__createExtraInfo(extraInfo);
this._add(extraInfoLayout);
- const descriptionLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(8)).set({
- marginTop: -10 // bring it closer to the extra info
- });
- const title = new qx.ui.basic.Label(this.tr("DESCRIPTION")).set({
- paddingLeft: 14 // align it with the other titles
- });
- descriptionLayout.add(title);
- descriptionLayout.add(osparc.info.StudyUtils.createDescriptionMD(this.getStudy()));
- this._add(descriptionLayout);
+ const description = osparc.info.StudyUtils.createDescription(this.getStudy());
+ this._add(description);
},
__createMenuButton: function() {
diff --git a/services/static-webserver/client/source/class/osparc/info/StudyUtils.js b/services/static-webserver/client/source/class/osparc/info/StudyUtils.js
index 212436d4c233..3ea10b1efe9e 100644
--- a/services/static-webserver/client/source/class/osparc/info/StudyUtils.js
+++ b/services/static-webserver/client/source/class/osparc/info/StudyUtils.js
@@ -179,7 +179,7 @@ qx.Class.define("osparc.info.StudyUtils", {
* @param study {osparc.data.model.Study} Study Model
* @param maxHeight {Number} description's maxHeight
*/
- createDescriptionMD: function(study, maxHeight) {
+ createDescription: function(study, maxHeight) {
const description = new osparc.ui.markdown.Markdown();
study.bind("description", description, "value", {
converter: desc => desc ? desc : "No description"
@@ -242,148 +242,6 @@ qx.Class.define("osparc.info.StudyUtils", {
return tagsContainer;
},
- infoElementsToLayout: function(extraInfos) {
- const container = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
-
- const decorateAction = action => {
- action.button.set({
- alignY: "middle",
- });
- action.button.addListener("execute", () => {
- const cb = action.callback;
- if (typeof cb === "string") {
- action.ctx.fireEvent(cb);
- } else {
- cb.call(action.ctx);
- }
- }, this);
- };
-
- if ("TITLE" in extraInfos) {
- const extraInfo = extraInfos["TITLE"];
- const titleLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
-
- if (extraInfo.action && extraInfo.action.button) {
- decorateAction(extraInfo.action);
- titleLayout.add(extraInfo.action.button);
- }
-
- if (extraInfo.view) {
- titleLayout.add(extraInfo.view, {
- flex: 1,
- });
- }
-
- container.add(titleLayout);
- }
-
-
- const centerLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
-
- if ("THUMBNAIL" in extraInfos) {
- const extraInfo = extraInfos["THUMBNAIL"];
- const thumbnailLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(8));
-
- if (extraInfo.action && extraInfo.action.button) {
- decorateAction(extraInfo.action);
- thumbnailLayout.add(extraInfo.action.button);
- }
-
- if (extraInfo.view) {
- thumbnailLayout.add(extraInfo.view, {
- flex: 1,
- });
- }
-
- centerLayout.add(thumbnailLayout);
- }
-
- const positions = {
- AUTHOR: {
- row: 0,
- },
- ACCESS_RIGHTS: {
- row: 1,
- },
- CREATED: {
- row: 2,
- },
- MODIFIED: {
- row: 3,
- },
- TAGS: {
- row: 4,
- },
- LOCATION: {
- row: 5,
- },
- };
-
- const grid = new qx.ui.layout.Grid(6, 6);
- grid.setColumnAlign(0, "right", "middle"); // titles
- const gridLayout = new qx.ui.container.Composite(grid);
-
- Object.keys(positions).forEach(key => {
- if (key in extraInfos) {
- const extraInfo = extraInfos[key];
- const gridInfo = positions[key];
-
- let col = 0;
- if (extraInfo.label) {
- const title = new qx.ui.basic.Label(extraInfo.label).set({
- alignX: "right",
- });
- gridLayout.add(title, {
- row: gridInfo.row,
- column: col + 0,
- });
- }
- col++;
-
- if (extraInfo.action && extraInfo.action.button) {
- decorateAction(extraInfo.action);
- gridLayout.add(extraInfo.action.button, {
- row: gridInfo.row,
- column: col + 1,
- });
- }
- col++;
-
- if (extraInfo.view) {
- gridLayout.add(extraInfo.view, {
- row: gridInfo.row,
- column: col + 2,
- });
- }
- col++;
- }
- });
- centerLayout.add(gridLayout, {
- flex: 1,
- });
- container.add(centerLayout);
-
- if ("DESCRIPTION" in extraInfos) {
- const extraInfo = extraInfos["DESCRIPTION"];
- const descriptionLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
-
- if (extraInfo.action && extraInfo.action.button) {
- decorateAction(extraInfo.action);
- descriptionLayout.add(extraInfo.action.button);
- }
-
- if (extraInfo.view) {
- descriptionLayout.add(extraInfo.view, {
- flex: 1,
- });
- }
-
- container.add(descriptionLayout);
- }
-
- return container;
- },
-
/**
* @param studyData {Object} Serialized Study Object
*/
diff --git a/services/static-webserver/client/source/class/osparc/info/Utils.js b/services/static-webserver/client/source/class/osparc/info/Utils.js
index 82696e7d9bff..44670e55e576 100644
--- a/services/static-webserver/client/source/class/osparc/info/Utils.js
+++ b/services/static-webserver/client/source/class/osparc/info/Utils.js
@@ -42,6 +42,147 @@ qx.Class.define("osparc.info.Utils", {
return image;
},
+ infoElementsToLayout: function(infoElements, isStudy = true) {
+ const container = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
+
+ const decorateAction = action => {
+ action.button.set({
+ alignY: "middle",
+ });
+ action.button.addListener("execute", () => {
+ const cb = action.callback;
+ if (typeof cb === "string") {
+ action.ctx.fireEvent(cb);
+ } else {
+ cb.call(action.ctx);
+ }
+ }, this);
+ };
+
+ if ("TITLE" in infoElements) {
+ const extraInfo = infoElements["TITLE"];
+ const titleLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
+
+ if (extraInfo.action && extraInfo.action.button) {
+ decorateAction(extraInfo.action);
+ titleLayout.add(extraInfo.action.button);
+ }
+
+ if (extraInfo.view) {
+ titleLayout.add(extraInfo.view, {
+ flex: 1,
+ });
+ }
+
+ container.add(titleLayout);
+ }
+
+
+ const centerLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
+
+ if ("THUMBNAIL" in infoElements) {
+ const extraInfo = infoElements["THUMBNAIL"];
+ const thumbnailLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(8));
+
+ if (extraInfo.action && extraInfo.action.button) {
+ decorateAction(extraInfo.action);
+ thumbnailLayout.add(extraInfo.action.button);
+ }
+
+ if (extraInfo.view) {
+ thumbnailLayout.add(extraInfo.view, {
+ flex: 1,
+ });
+ }
+
+ centerLayout.add(thumbnailLayout);
+ }
+
+ const gridKeys = isStudy ? [
+ "AUTHOR",
+ "ACCESS_RIGHTS",
+ "CREATED",
+ "MODIFIED",
+ "TAGS",
+ "LOCATION",
+ ] : [
+ "SERVICE_ID",
+ "KEY",
+ "INTEGRATION_VERSION",
+ "VERSION",
+ "DATE",
+ "CONTACT",
+ "AUTHORS",
+ "ACCESS_RIGHTS",
+ "DESCRIPTION_ONLY",
+ ];
+
+ const grid = new qx.ui.layout.Grid(6, 6);
+ grid.setColumnAlign(0, "right", "middle"); // titles
+ const gridLayout = new qx.ui.container.Composite(grid);
+
+ let row = 0;
+ gridKeys.forEach(key => {
+ if (key in infoElements) {
+ const infoElement = infoElements[key];
+
+ let col = 0;
+ if (infoElement.label) {
+ const title = new qx.ui.basic.Label(infoElement.label).set({
+ alignX: "right",
+ });
+ gridLayout.add(title, {
+ row,
+ column: col + 0,
+ });
+ }
+ col++;
+
+ if (infoElement.action && infoElement.action.button) {
+ decorateAction(infoElement.action);
+ gridLayout.add(infoElement.action.button, {
+ row,
+ column: col + 1,
+ });
+ }
+ col++;
+
+ if (infoElement.view) {
+ gridLayout.add(infoElement.view, {
+ row,
+ column: col + 2,
+ });
+ }
+ col++;
+ row++;
+ }
+ });
+ centerLayout.add(gridLayout, {
+ flex: 1,
+ });
+ container.add(centerLayout);
+
+ if ("DESCRIPTION" in infoElements) {
+ const infoElement = infoElements["DESCRIPTION"];
+ const descriptionLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
+
+ if (infoElement.action && infoElement.action.button) {
+ decorateAction(infoElement.action);
+ descriptionLayout.add(infoElement.action.button);
+ }
+
+ if (infoElement.view) {
+ descriptionLayout.add(infoElement.view, {
+ flex: 1,
+ });
+ }
+
+ container.add(descriptionLayout);
+ }
+
+ return container;
+ },
+
extraInfosToGrid: function(extraInfos) {
const grid = new qx.ui.layout.Grid(8, 5);
grid.setColumnAlign(0, "right", "middle");
diff --git a/services/static-webserver/client/source/class/osparc/metadata/ServicesInStudyUpdate.js b/services/static-webserver/client/source/class/osparc/metadata/ServicesInStudyUpdate.js
index 2fba38e39604..2b195208729f 100644
--- a/services/static-webserver/client/source/class/osparc/metadata/ServicesInStudyUpdate.js
+++ b/services/static-webserver/client/source/class/osparc/metadata/ServicesInStudyUpdate.js
@@ -27,21 +27,23 @@ qx.Class.define("osparc.metadata.ServicesInStudyUpdate", {
UPDATE_BUTTON: Object.keys(osparc.metadata.ServicesInStudy.GRID_POS).length+2
},
- colorVersionLabel: function(versionLabel, metadata) {
+ paintChip: function(versionChip, metadata) {
const isDeprecated = osparc.service.Utils.isDeprecated(metadata);
const isRetired = osparc.service.Utils.isRetired(metadata);
if (isDeprecated) {
- versionLabel.set({
- textColor: "text-on-warning", // because the background is always yellow
- backgroundColor: osparc.service.StatusUI.getColor("deprecated"),
+ versionChip.set({
+ statusColor: osparc.ui.basic.Chip.STATUS.WARNING,
toolTipText: qx.locale.Manager.tr("This service is deprecated. Please update.")
});
} else if (isRetired) {
- versionLabel.set({
- textColor: "text-on-warning", // because the background is always red
- backgroundColor: osparc.service.StatusUI.getColor("retired"),
+ versionChip.set({
+ statusColor: osparc.ui.basic.Chip.STATUS.ERROR,
toolTipText: qx.locale.Manager.tr("This service has been retired. Please update.")
});
+ } else {
+ versionChip.set({
+ statusColor: osparc.ui.basic.Chip.STATUS.SUCCESS,
+ });
}
}
},
@@ -157,16 +159,18 @@ qx.Class.define("osparc.metadata.ServicesInStudyUpdate", {
i++;
const node = workbench[nodeId];
const metadata = osparc.store.Services.getMetadata(node["key"], node["version"]);
- const currentVersionLabel = new qx.ui.basic.Label(osparc.service.Utils.extractVersionDisplay(metadata)).set({
+ const currentVersionChip = new osparc.ui.basic.Chip(osparc.service.Utils.extractVersionDisplay(metadata));
+ currentVersionChip.getChildControl("label").set({
font: "text-14"
});
- this.self().colorVersionLabel(currentVersionLabel, metadata);
- this._servicesGrid.add(currentVersionLabel, {
+ this.self().paintChip(currentVersionChip, metadata);
+ this._servicesGrid.add(currentVersionChip, {
row: i,
column: this.self().GRID_POS.CURRENT_VERSION
});
- const compatibleVersionLabel = new qx.ui.basic.Label().set({
+ const compatibleVersionChip = new osparc.ui.basic.Chip();
+ compatibleVersionChip.getChildControl("label").set({
font: "text-14"
});
const latestCompatible = osparc.store.Services.getLatestCompatible(node["key"], node["version"]);
@@ -178,16 +182,18 @@ qx.Class.define("osparc.metadata.ServicesInStudyUpdate", {
if (node["key"] !== latestMetadata["key"]) {
label = latestMetadata["name"] + ":" + label;
}
- compatibleVersionLabel.setValue(label);
+ compatibleVersionChip.setLabel(label);
+ this.self().paintChip(compatibleVersionChip, latestMetadata);
})
.catch(err => console.error(err));
} else if (metadata) {
// up to date
- compatibleVersionLabel.setValue(metadata["version"]);
+ compatibleVersionChip.setLabel(metadata["version"]);
+ this.self().paintChip(compatibleVersionChip, metadata);
} else {
- compatibleVersionLabel.setValue(this.tr("Unknown"));
+ compatibleVersionChip.setLabel(this.tr("Unknown"));
}
- this._servicesGrid.add(compatibleVersionLabel, {
+ this._servicesGrid.add(compatibleVersionChip, {
row: i,
column: this.self().GRID_POS.COMPATIBLE_VERSION
});
diff --git a/services/static-webserver/client/source/class/osparc/po/UsersPending.js b/services/static-webserver/client/source/class/osparc/po/UsersPending.js
index 55a9d7d40ef3..b2e4e1e2973a 100644
--- a/services/static-webserver/client/source/class/osparc/po/UsersPending.js
+++ b/services/static-webserver/client/source/class/osparc/po/UsersPending.js
@@ -143,6 +143,13 @@ qx.Class.define("osparc.po.UsersPending", {
row: 0,
column: 2,
});
+
+ pendingUsersLayout.add(new qx.ui.basic.Label(this.tr("Status")).set({
+ font: "text-14"
+ }), {
+ row: 0,
+ column: 3,
+ });
},
__addRows: function(pendingUsers) {
@@ -165,32 +172,30 @@ qx.Class.define("osparc.po.UsersPending", {
row,
column: 2,
});
- const statusImage = new qx.ui.basic.Image();
- pendingUsersLayout.add(statusImage, {
- row,
- column: 3,
+ const statusChip = new osparc.ui.basic.Chip().set({
+ label: pendingUser.accountRequestStatus.toLowerCase(),
});
- pendingUsersLayout.add(new qx.ui.basic.Label(pendingUser.accountRequestStatus.toLowerCase()), {
+ statusChip.getChildControl("label").set({
+ font: "text-12",
+ });
+ pendingUsersLayout.add(statusChip, {
row,
- column: 4,
+ column: 3,
});
const infoButton = this.self().createInfoButton(pendingUser);
pendingUsersLayout.add(infoButton, {
row,
- column: 5,
+ column: 4,
});
const buttonsLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));
pendingUsersLayout.add(buttonsLayout, {
row,
- column: 6,
+ column: 5,
});
switch (pendingUser.accountRequestStatus) {
case "PENDING": {
- statusImage.set({
- source: "@FontAwesome5Solid/hourglass-end/14",
- textColor: "warning-yellow",
- });
+ statusChip.setStatusColor(osparc.ui.basic.Chip.STATUS.WARNING);
const approveButton = this.__createApproveButton(pendingUser.email);
buttonsLayout.add(approveButton);
const rejectButton = this.__createRejectButton(pendingUser.email);
@@ -198,20 +203,14 @@ qx.Class.define("osparc.po.UsersPending", {
break;
}
case "REJECTED": {
- statusImage.set({
- source: "@FontAwesome5Solid/times/14",
- textColor: "danger-red",
- });
+ statusChip.setStatusColor(osparc.ui.basic.Chip.STATUS.ERROR);
const approveButton = this.__createApproveButton(pendingUser.email);
approveButton.setEnabled(false); // avoid changing decision for now
buttonsLayout.add(approveButton);
break;
}
case "APPROVED": {
- statusImage.set({
- source: "@FontAwesome5Solid/check/14",
- textColor: "product-color",
- });
+ statusChip.setStatusColor(osparc.ui.basic.Chip.STATUS.SUCCESS);
const resendEmailButton = this.self().createResendEmailButton(pendingUser.email);
resendEmailButton.setEnabled(false);
buttonsLayout.add(resendEmailButton);
diff --git a/services/static-webserver/client/source/class/osparc/service/StatusUI.js b/services/static-webserver/client/source/class/osparc/service/StatusUI.js
index 2203da004c44..092522376017 100644
--- a/services/static-webserver/client/source/class/osparc/service/StatusUI.js
+++ b/services/static-webserver/client/source/class/osparc/service/StatusUI.js
@@ -237,9 +237,7 @@ qx.Class.define("osparc.service.StatusUI", {
const chip = new osparc.ui.basic.Chip().set({
label: osparc.service.Utils.DEPRECATED_SERVICE_TEXT,
icon: osparc.service.StatusUI.getIconSource("deprecated"),
- textColor: "text-on-warning",
- backgroundColor: osparc.service.StatusUI.getColor("deprecated"),
- allowGrowX: false
+ statusColor: "warning",
});
return chip;
},
@@ -248,9 +246,7 @@ qx.Class.define("osparc.service.StatusUI", {
const chip = new osparc.ui.basic.Chip().set({
label: osparc.service.Utils.RETIRED_SERVICE_TEXT,
icon: osparc.service.StatusUI.getIconSource("retired"),
- textColor: "text-on-warning",
- backgroundColor: osparc.service.StatusUI.getColor("retired"),
- allowGrowX: false
+ statusColor: "error",
});
return chip;
}
diff --git a/services/static-webserver/client/source/class/osparc/share/NewCollaboratorsManager.js b/services/static-webserver/client/source/class/osparc/share/NewCollaboratorsManager.js
index 057cdfc1222e..988e2f3388c0 100644
--- a/services/static-webserver/client/source/class/osparc/share/NewCollaboratorsManager.js
+++ b/services/static-webserver/client/source/class/osparc/share/NewCollaboratorsManager.js
@@ -19,7 +19,7 @@ qx.Class.define("osparc.share.NewCollaboratorsManager", {
showMaximize: false,
autoDestroy: true,
modal: true,
- width: 350,
+ width: 400,
maxHeight: 500,
clickAwayClose: true
});
diff --git a/services/static-webserver/client/source/class/osparc/ui/basic/Chip.js b/services/static-webserver/client/source/class/osparc/ui/basic/Chip.js
index eaa08c3812cb..a15571a02b03 100644
--- a/services/static-webserver/client/source/class/osparc/ui/basic/Chip.js
+++ b/services/static-webserver/client/source/class/osparc/ui/basic/Chip.js
@@ -10,12 +10,57 @@ qx.Class.define("osparc.ui.basic.Chip", {
construct: function(label, icon) {
this.base(arguments, label, icon);
+
+ this.set({
+ allowGrowX: false,
+ });
},
properties: {
appearance: {
init: "chip",
refine: true
- }
- }
+ },
+
+ statusColor: {
+ check: ["success", "warning", "error"],
+ init: null,
+ apply: "__applyStatusColor",
+ },
+ },
+
+ statics: {
+ STATUS: {
+ SUCCESS: "success",
+ WARNING: "warning",
+ ERROR: "error",
+ },
+ },
+
+ members: {
+ __applyStatusColor: function(status) {
+ if (status) {
+ switch (status.toLowerCase()) {
+ case this.self().STATUS.SUCCESS:
+ this.set({
+ textColor: "white",
+ backgroundColor: "product-color",
+ });
+ break;
+ case this.self().STATUS.WARNING:
+ this.set({
+ textColor: "black",
+ backgroundColor: "warning-yellow",
+ });
+ break;
+ case this.self().STATUS.ERROR:
+ this.set({
+ textColor: "black",
+ backgroundColor: "failed-red",
+ });
+ break;
+ }
+ }
+ },
+ },
});