Skip to content

Commit 18fa7aa

Browse files
ignapasignapas
authored
Some enhancements and bug fixes (#1608)
* Fixed service submission email subject * Some window styles made uniform. * Changed some layouts. * Added standard osparc window component with clickAway closing support. * Added faded context for modal windows * Worked arround edit study bug
1 parent e42cc0b commit 18fa7aa

File tree

22 files changed

+203
-106
lines changed

22 files changed

+203
-106
lines changed

‎services/web/client/source/class/osparc/About.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
************************************************************************ */
1818

1919
qx.Class.define("osparc.About", {
20-
extend: qx.ui.window.Window,
20+
extend: osparc.ui.window.Window,
2121
type: "singleton",
2222

2323
construct: function() {
@@ -29,7 +29,8 @@ qx.Class.define("osparc.About", {
2929
showMinimize: false,
3030
resizable: false,
3131
centerOnAppear: true,
32-
appearance: "service-window"
32+
clickAwayClose: true,
33+
modal: true
3334
});
3435
const closeBtn = this.getChildControl("close-button");
3536
osparc.utils.Utils.setIdToWidget(closeBtn, "aboutWindowCloseBtn");

‎services/web/client/source/class/osparc/component/export/Permissions.js

+6-4
Original file line numberDiff line numberDiff line change
@@ -68,16 +68,16 @@ qx.Class.define("osparc.component.export.Permissions", {
6868
},
6969

7070
createWindow: function(winText, shareResourceWidget) {
71-
const window = new qx.ui.window.Window(winText).set({
72-
appearance: "service-window",
71+
const window = new osparc.ui.window.Window(winText).set({
7372
layout: new qx.ui.layout.Grow(),
7473
autoDestroy: true,
7574
contentPadding: 10,
7675
width: 400,
7776
height: 300,
7877
showMaximize: false,
7978
showMinimize: false,
80-
modal: true
79+
modal: true,
80+
clickAwayClose: true
8181
});
8282
window.add(shareResourceWidget);
8383
window.center();
@@ -141,7 +141,9 @@ qx.Class.define("osparc.component.export.Permissions", {
141141
const collaboratorsUIList = new qx.ui.form.List().set({
142142
decorator: "no-border",
143143
spacing: 3,
144-
width: 150
144+
width: 150,
145+
padding: 0,
146+
backgroundColor: "material-button-background"
145147
});
146148

147149
const collaboratorsModel = this.__collaboratorsModel = new qx.data.Array();

‎services/web/client/source/class/osparc/component/form/tag/TagManager.js

+2-16
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,8 @@ qx.Class.define("osparc.component.form.tag.TagManager", {
2222
movable: false,
2323
resizable: false,
2424
modal: true,
25-
appearance: "service-window",
2625
width: 262,
27-
contentPadding: 0
26+
clickAwayClose: true
2827
});
2928
this.__attachment = attachment;
3029
this.__resourceName = resourceName;
@@ -69,7 +68,6 @@ qx.Class.define("osparc.component.form.tag.TagManager", {
6968
font: "title-16",
7069
textColor: "service-window-hint",
7170
rich: true,
72-
backgroundColor: "material-button-background",
7371
padding: 10,
7472
textAlign: "center"
7573
}));
@@ -141,19 +139,7 @@ qx.Class.define("osparc.component.form.tag.TagManager", {
141139
__attachEventHandlers: function() {
142140
this.addListener("appear", () => {
143141
this.__updatePosition();
144-
if (this.isModal()) {
145-
// Enable closing when clicking outside the modal
146-
const thisDom = this.getContentElement().getDomElement();
147-
const thisZIndex = parseInt(thisDom.style.zIndex);
148-
const modalFrame = qx.dom.Hierarchy.getSiblings(thisDom).find(el =>
149-
// Hack: Qx inserts the modalFrame as a sibling of the window with a -1 zIndex
150-
parseInt(el.style.zIndex) === thisZIndex - 1
151-
);
152-
if (modalFrame) {
153-
modalFrame.addEventListener("click", () => this.close());
154-
}
155-
}
156-
}, this);
142+
});
157143
this.__selectedTags.addListener("change", evt => {
158144
this.fireDataEvent("changeSelected", {
159145
...evt.getData(),

‎services/web/client/source/class/osparc/component/metadata/ServiceInfoWindow.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
*/
2222

2323
qx.Class.define("osparc.component.metadata.ServiceInfoWindow", {
24-
extend: qx.ui.window.Window,
24+
extend: osparc.ui.window.Window,
2525

2626
/**
2727
* @param metadata {Object} Service metadata
@@ -43,6 +43,7 @@ qx.Class.define("osparc.component.metadata.ServiceInfoWindow", {
4343
});
4444

4545
const serviceInfo = this._serviceInfo = new osparc.component.metadata.ServiceInfo(metadata);
46+
serviceInfo.setBackgroundColor("material-button-background");
4647
const scroll = new qx.ui.container.Scroll();
4748
scroll.add(serviceInfo);
4849
this.add(scroll, {

‎services/web/client/source/class/osparc/component/metadata/StudyDetailsEditor.js

+53-57
Original file line numberDiff line numberDiff line change
@@ -65,14 +65,12 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
6565

6666
statics: {
6767
popUpInWindow: function(title, studyDetailsEditor, width = 400, height = 400) {
68-
const win = new qx.ui.window.Window(title).set({
68+
const win = new osparc.ui.window.Window(title).set({
6969
autoDestroy: true,
70-
layout: new qx.ui.layout.VBox(),
71-
appearance: "service-window",
70+
layout: new qx.ui.layout.Grow(),
7271
showMinimize: false,
7372
showMaximize: false,
7473
resizable: true,
75-
contentPadding: 10,
7674
width: width,
7775
height: height,
7876
modal: true
@@ -99,8 +97,10 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
9997

10098
__createDisplayView: function(study, isTemplate, winWidth) {
10199
const displayView = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
100+
displayView.add(new osparc.component.metadata.StudyDetails(study, winWidth), {
101+
flex: 1
102+
});
102103
displayView.add(this.__createButtons(isTemplate));
103-
displayView.add(new osparc.component.metadata.StudyDetails(study, winWidth));
104104
return displayView;
105105
},
106106

@@ -109,54 +109,48 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
109109
const canCreateTemplate = osparc.data.Permissions.getInstance().canDo("studies.template.create");
110110
const canUpdateTemplate = osparc.data.Permissions.getInstance().canDo("studies.template.update");
111111

112-
const buttonsLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(8).set({
113-
alignY: "middle"
114-
})).set({
115-
marginTop: 10
116-
});
112+
const buttonsToolbar = new qx.ui.toolbar.ToolBar();
117113

118-
const modeButton = new qx.ui.form.Button(this.tr("Edit")).set({
119-
appearance: "md-button",
114+
const modeButton = new qx.ui.toolbar.Button(this.tr("Edit")).set({
115+
appearance: "toolbar-md-button",
120116
visibility: isCurrentUserOwner && (!isTemplate || canUpdateTemplate) ? "visible" : "excluded"
121117
});
122118
osparc.utils.Utils.setIdToWidget(modeButton, "editStudyBtn");
123119
modeButton.addListener("execute", () => this.setMode("edit"), this);
124-
buttonsLayout.add(modeButton);
120+
buttonsToolbar.add(modeButton);
125121

126122
if (!isTemplate) {
127-
const permissionsButton = new qx.ui.form.Button(this.tr("Permissions")).set({
128-
appearance: "md-button"
123+
const permissionsButton = new qx.ui.toolbar.Button(this.tr("Permissions")).set({
124+
appearance: "toolbar-md-button"
129125
});
130126
osparc.utils.Utils.setIdToWidget(permissionsButton, "permissionsBtn");
131127
permissionsButton.addListener("execute", e => {
132128
this.__openPermissions();
133129
}, this);
134-
buttonsLayout.add(permissionsButton);
130+
buttonsToolbar.add(permissionsButton);
135131

136132
if (isCurrentUserOwner && canCreateTemplate) {
137-
const saveAsTemplateButton = new qx.ui.form.Button(this.tr("Save as Template")).set({
138-
appearance: "md-button"
133+
const saveAsTemplateButton = new qx.ui.toolbar.Button(this.tr("Save as Template")).set({
134+
appearance: "toolbar-md-button"
139135
});
140136
osparc.utils.Utils.setIdToWidget(saveAsTemplateButton, "saveAsTemplateBtn");
141137
saveAsTemplateButton.addListener("execute", e => {
142138
this.__openSaveAsTemplate();
143139
}, this);
144-
buttonsLayout.add(saveAsTemplateButton);
140+
buttonsToolbar.add(saveAsTemplateButton);
145141
}
146142
}
147143

148-
buttonsLayout.add(new qx.ui.core.Spacer(), {
149-
flex: 1
150-
});
144+
buttonsToolbar.addSpacer();
151145

152-
const openButton = this.__openButton = new qx.ui.form.Button(this.tr("Open")).set({
153-
appearance: "md-button"
146+
const openButton = this.__openButton = new qx.ui.toolbar.Button(this.tr("Open")).set({
147+
appearance: "toolbar-md-button"
154148
});
155149
osparc.utils.Utils.setIdToWidget(openButton, "openStudyBtn");
156150
openButton.addListener("execute", () => this.fireEvent("openStudy"), this);
157-
buttonsLayout.add(openButton);
151+
buttonsToolbar.add(openButton);
158152

159-
return buttonsLayout;
153+
return buttonsToolbar;
160154
},
161155

162156
__createEditView: function(isTemplate) {
@@ -165,9 +159,7 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
165159
const fieldIsEnabled = isCurrentUserOwner && (!isTemplate || canUpdateTemplate);
166160

167161
const editView = new qx.ui.container.Composite(new qx.ui.layout.VBox(8));
168-
const buttons = new qx.ui.container.Composite(new qx.ui.layout.HBox(8).set({
169-
alignX: "right"
170-
}));
162+
const buttonsToolbar = new qx.ui.toolbar.ToolBar();
171163

172164
this.__fields = {
173165
name: new qx.ui.form.TextField(this.__studyModel.getName()).set({
@@ -176,34 +168,13 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
176168
enabled: fieldIsEnabled
177169
}),
178170
description: new qx.ui.form.TextArea(this.__studyModel.getDescription()).set({
179-
autoSize: true,
180-
minHeight: 100,
181-
maxHeight: 500,
182171
enabled: fieldIsEnabled
183172
}),
184173
thumbnail: new qx.ui.form.TextField(this.__studyModel.getThumbnail()).set({
185174
enabled: fieldIsEnabled
186175
})
187176
};
188177

189-
const saveButton = new qx.ui.form.Button(this.tr("Save"), "@FontAwesome5Solid/save/16").set({
190-
appearance: "lg-button"
191-
});
192-
osparc.utils.Utils.setIdToWidget(saveButton, "studyDetailsEditorSaveBtn");
193-
saveButton.addListener("execute", e => {
194-
const btn = e.getTarget();
195-
btn.setIcon("@FontAwesome5Solid/circle-notch/16");
196-
btn.getChildControl("icon").getContentElement()
197-
.addClass("rotate");
198-
this.__saveStudy(isTemplate, btn);
199-
}, this);
200-
const cancelButton = new qx.ui.form.Button(this.tr("Cancel")).set({
201-
appearance: "lg-button",
202-
enabled: isCurrentUserOwner && (!isTemplate || canUpdateTemplate)
203-
});
204-
osparc.utils.Utils.setIdToWidget(cancelButton, "studyDetailsEditorCancelBtn");
205-
cancelButton.addListener("execute", () => this.setMode("display"), this);
206-
207178
const {
208179
name,
209180
description,
@@ -219,7 +190,9 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
219190
font: "text-14"
220191
}));
221192
osparc.utils.Utils.setIdToWidget(description, "studyDetailsEditorDescFld");
222-
editView.add(description);
193+
editView.add(description, {
194+
flex: 1
195+
});
223196
editView.add(new qx.ui.basic.Label(this.tr("Thumbnail")).set({
224197
font: "text-14"
225198
}));
@@ -230,9 +203,28 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
230203
editView.add(this.__tagsSection());
231204
}
232205

233-
buttons.add(saveButton);
234-
buttons.add(cancelButton);
235-
editView.add(buttons);
206+
const saveButton = new qx.ui.toolbar.Button(this.tr("Save"), "@FontAwesome5Solid/save/16").set({
207+
appearance: "toolbar-lg-button"
208+
});
209+
osparc.utils.Utils.setIdToWidget(saveButton, "studyDetailsEditorSaveBtn");
210+
saveButton.addListener("execute", e => {
211+
const btn = e.getTarget();
212+
btn.setIcon("@FontAwesome5Solid/circle-notch/16");
213+
btn.getChildControl("icon").getContentElement()
214+
.addClass("rotate");
215+
this.__saveStudy(isTemplate, btn);
216+
}, this);
217+
const cancelButton = new qx.ui.toolbar.Button(this.tr("Cancel")).set({
218+
appearance: "toolbar-lg-button",
219+
enabled: isCurrentUserOwner && (!isTemplate || canUpdateTemplate)
220+
});
221+
osparc.utils.Utils.setIdToWidget(cancelButton, "studyDetailsEditorCancelBtn");
222+
cancelButton.addListener("execute", () => this.setMode("display"), this);
223+
224+
buttonsToolbar.addSpacer();
225+
buttonsToolbar.add(saveButton);
226+
buttonsToolbar.add(cancelButton);
227+
editView.add(buttonsToolbar);
236228

237229
return editView;
238230
},
@@ -279,18 +271,22 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
279271
},
280272

281273
__saveStudy: function(isTemplate, btn) {
274+
const data = this.__serializeForm();
275+
// FIXME: Avoid adding invalid properties to standard entities.
276+
delete data.locked;
277+
delete data.resourceType;
282278
const params = {
283279
url: {
284280
projectId: this.__studyModel.getUuid()
285281
},
286-
data: this.__serializeForm()
282+
data
287283
};
288284
osparc.data.Resources.fetch(isTemplate ? "templates" : "studies", "put", params)
289-
.then(data => {
285+
.then(studyData => {
290286
btn.resetIcon();
291287
btn.getChildControl("icon").getContentElement()
292288
.removeClass("rotate");
293-
this.__studyModel.set(data);
289+
this.__studyModel.set(studyData);
294290
this.setMode("display");
295291
this.fireEvent(isTemplate ? "updateTemplate" : "updateStudy");
296292
})

‎services/web/client/source/class/osparc/component/widget/Renamer.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
*/
3636

3737
qx.Class.define("osparc.component.widget.Renamer", {
38-
extend: qx.ui.window.Window,
38+
extend: osparc.ui.window.Window,
3939

4040
construct: function(oldLabel) {
4141
this.base(arguments, "Rename");
@@ -51,7 +51,8 @@ qx.Class.define("osparc.component.widget.Renamer", {
5151
modal: true,
5252
showMaximize: false,
5353
showMinimize: false,
54-
width: labelWidth
54+
width: labelWidth,
55+
clickAwayClose: true
5556
});
5657
this.__populateNodeLabelEditor(oldLabel, labelWidth);
5758
},

‎services/web/client/source/class/osparc/component/workbench/ServiceCatalog.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,12 @@
3434
*/
3535

3636
qx.Class.define("osparc.component.workbench.ServiceCatalog", {
37-
extend: qx.ui.window.Window,
37+
extend: osparc.ui.window.Window,
3838

3939
construct: function() {
4040
this.base();
4141

4242
this.set({
43-
appearance: "service-window",
4443
autoDestroy: true,
4544
caption: this.tr("Service catalog"),
4645
showMinimize: false,

‎services/web/client/source/class/osparc/dashboard/ExploreBrowser.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -601,8 +601,7 @@ qx.Class.define("osparc.dashboard.ExploreBrowser", {
601601
},
602602

603603
__displayServiceSubmissionForm: function(formData) {
604-
const addServiceWindow = new qx.ui.window.Window(this.tr("Submit a new service")).set({
605-
appearance: "service-window",
604+
const addServiceWindow = new osparc.ui.window.Window(this.tr("Submit a new service")).set({
606605
modal: true,
607606
autoDestroy: true,
608607
showMinimize: false,

‎services/web/client/source/class/osparc/dashboard/OrganizationEditor.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,9 @@ qx.Class.define("osparc.dashboard.OrganizationEditor", {
3434

3535
statics: {
3636
popUpInWindow: function(title, organizationEditor, width = 300, height = 200) {
37-
const win = new qx.ui.window.Window(title).set({
37+
const win = new osparc.ui.window.Window(title).set({
3838
autoDestroy: true,
3939
layout: new qx.ui.layout.VBox(),
40-
appearance: "service-window",
4140
showMinimize: false,
4241
showMaximize: false,
4342
resizable: true,

‎services/web/client/source/class/osparc/dashboard/ServiceBrowser.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -274,8 +274,7 @@ qx.Class.define("osparc.dashboard.ServiceBrowser", {
274274
},
275275

276276
__displayServiceSubmissionForm: function(formData) {
277-
const addServiceWindow = new qx.ui.window.Window(this.tr("Submit a new service")).set({
278-
appearance: "service-window",
277+
const addServiceWindow = new osparc.ui.window.Window(this.tr("Submit a new service")).set({
279278
modal: true,
280279
autoDestroy: true,
281280
showMinimize: false,

‎services/web/client/source/class/osparc/data/Resources.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,8 @@ qx.Class.define("osparc.data.Resources", {
108108
},
109109
put: {
110110
method: "PUT",
111-
url: statics.API + "/projects/{projectId}"
111+
url: statics.API + "/projects/{projectId}",
112+
useCache: true
112113
},
113114
delete: {
114115
method: "DELETE",

0 commit comments

Comments
 (0)