Skip to content

Commit e5d40e3

Browse files
odeimaizodeimaiz
authored
Study Editor redesign: cosmetics (ITISFoundation#2590)
1 parent 29eeb9e commit e5d40e3

File tree

13 files changed

+437
-115
lines changed

13 files changed

+437
-115
lines changed

‎services/web/client/source/class/osparc/component/form/renderer/PropForm.js‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -100,10 +100,7 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
100100
const linkOptions = this.__createLinkOpts(field);
101101
linkUnlinkStack.add(linkOptions);
102102

103-
const unlinkBtn = new qx.ui.form.Button(null, "@FontAwesome5Solid/unlink/12").set({
104-
toolTipText: this.tr("Unlink")
105-
});
106-
unlinkBtn.addListener("execute", () => this.removePortLink(field.key), this);
103+
const unlinkBtn = this.__createUnlinkButton(field);
107104
linkUnlinkStack.add(unlinkBtn);
108105

109106
this.__linkUnlinkStackMap[field.key] = linkUnlinkStack;
@@ -113,11 +110,19 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
113110

114111
__createLinkOpts: function(field) {
115112
const optionsMenu = new qx.ui.menu.Menu().set({
116-
position: "bottom-left"
113+
offsetLeft: 2,
114+
position: "right-top",
115+
backgroundColor: "background-main-lighter+"
116+
});
117+
optionsMenu.getContentElement().setStyles({
118+
"border-top-right-radius": "6px",
119+
"border-bottom-right-radius": "6px",
120+
"border-bottom-left-radius": "6px"
117121
});
118122
const fieldOptsBtn = new qx.ui.form.MenuButton().set({
119123
menu: optionsMenu,
120124
icon: "@FontAwesome5Solid/link/12",
125+
height: 23,
121126
focusable: false,
122127
allowGrowX: false,
123128
alignX: "center"
@@ -133,6 +138,15 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
133138
return fieldOptsBtn;
134139
},
135140

141+
__createUnlinkButton: function(field) {
142+
const unlinkBtn = new qx.ui.form.Button(null, "@FontAwesome5Solid/unlink/12").set({
143+
toolTipText: this.tr("Unlink"),
144+
height: 23
145+
});
146+
unlinkBtn.addListener("execute", () => this.removePortLink(field.key), this);
147+
return unlinkBtn;
148+
},
149+
136150
__populateFieldOptionsMenu: function(optionsMenu, field) {
137151
optionsMenu.removeAll();
138152

‎services/web/client/source/class/osparc/component/form/renderer/PropFormBase.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -236,10 +236,6 @@ qx.Class.define("osparc.component.form.renderer.PropFormBase", {
236236
return this._getLayoutChild(portId, this.self().gridPos.label);
237237
},
238238

239-
_getInfoFieldChild: function(portId) {
240-
return this._getLayoutChild(portId, this.self().gridPos.info);
241-
},
242-
243239
_getCtrlFieldChild: function(portId) {
244240
return this._getLayoutChild(portId, this.self().gridPos.ctrlField);
245241
}

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

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
/* ************************************************************************
2+
3+
osparc - the simcore frontend
4+
5+
https://osparc.io
6+
7+
Copyright:
8+
2021 IT'IS Foundation, https://itis.swiss
9+
10+
License:
11+
MIT: https://opensource.org/licenses/MIT
12+
13+
Authors:
14+
* Odei Maiz (odeimaiz)
15+
16+
************************************************************************ */
17+
18+
qx.Class.define("osparc.component.widget.CollapsibleViewLight", {
19+
extend: qx.ui.core.Widget,
20+
21+
construct: function(content) {
22+
this.base(arguments);
23+
24+
this._setLayout(new qx.ui.layout.HBox());
25+
26+
if (content) {
27+
this.setContent(content);
28+
}
29+
30+
this.initCollapsed();
31+
},
32+
33+
properties: {
34+
content: {
35+
check: "qx.ui.core.Widget",
36+
nullable: true,
37+
apply: "__applyContent"
38+
},
39+
40+
collapsed: {
41+
init: false,
42+
check: "Boolean",
43+
apply: "__applyCollapsed",
44+
event: "changeCollapsed"
45+
}
46+
},
47+
48+
members: {
49+
_createChildControlImpl: function(id) {
50+
let control;
51+
switch (id) {
52+
case "expand-button":
53+
control = new qx.ui.form.Button(null, "@FontAwesome5Solid/angle-right/14").set({
54+
toolTipText: this.tr("Expand"),
55+
backgroundColor: "transparent",
56+
padding: 4,
57+
allowGrowX: false,
58+
allowGrowY: true,
59+
alignY: "middle"
60+
});
61+
control.addListener("execute", () => this.setCollapsed(false));
62+
break;
63+
case "collapse-button":
64+
control = new qx.ui.form.Button(null, "@FontAwesome5Solid/angle-left/14").set({
65+
toolTipText: this.tr("Collapse"),
66+
backgroundColor: "transparent",
67+
padding: 4,
68+
allowGrowX: false,
69+
allowGrowY: true,
70+
alignY: "middle"
71+
});
72+
control.addListener("execute", () => this.setCollapsed(true));
73+
break;
74+
case "caret-collapsed-layout": {
75+
control = new qx.ui.container.Composite(new qx.ui.layout.VBox()).set({
76+
width: 15
77+
});
78+
const expandBtn = this.getChildControl("expand-button");
79+
control.add(expandBtn, {
80+
flex: 1
81+
});
82+
this.bind("collapsed", control, "visibility", {
83+
converter: collapsed => collapsed ? "visible" : "excluded"
84+
});
85+
this._addAt(control, 1);
86+
break;
87+
}
88+
case "caret-expanded-layout": {
89+
control = new qx.ui.container.Composite(new qx.ui.layout.VBox()).set({
90+
width: 15
91+
});
92+
const collapseBtn = this.getChildControl("collapse-button");
93+
control.add(collapseBtn, {
94+
flex: 1
95+
});
96+
this.bind("collapsed", control, "visibility", {
97+
converter: collapsed => collapsed ? "excluded" : "visible"
98+
});
99+
this._addAt(control, 2);
100+
break;
101+
}
102+
}
103+
return control || this.base(arguments, id);
104+
},
105+
106+
__applyCollapsed: function(collapsed) {
107+
if (this.getContent()) {
108+
this.getContent().setVisibility(collapsed ? "excluded" : "visible");
109+
}
110+
},
111+
112+
__applyContent: function(content, oldContent) {
113+
if (oldContent) {
114+
this._remove(oldContent);
115+
}
116+
117+
this._addAt(content, 0, {
118+
flex: 1
119+
});
120+
this.setCollapsed(false);
121+
}
122+
}
123+
});

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

Lines changed: 44 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ qx.Class.define("osparc.component.widget.NodeTreeItem", {
6262
events: {
6363
"fullscreenNode": "qx.event.type.Data",
6464
"renameNode": "qx.event.type.Data",
65+
"showInfo": "qx.event.type.Data",
6566
"deleteNode": "qx.event.type.Data"
6667
},
6768

@@ -93,7 +94,9 @@ qx.Class.define("osparc.component.widget.NodeTreeItem", {
9394
break;
9495
}
9596
case "options-menu-button": {
96-
const optionsMenu = this.__getOptionsMenu();
97+
const optionsMenu = this.__optionsMenu = new qx.ui.menu.Menu().set({
98+
position: "bottom-right"
99+
});
97100
control = new qx.ui.form.MenuButton().set({
98101
menu: optionsMenu,
99102
icon: "@FontAwesome5Solid/ellipsis-v/9",
@@ -104,17 +107,50 @@ qx.Class.define("osparc.component.widget.NodeTreeItem", {
104107
part.add(control);
105108
break;
106109
}
110+
case "options-rename-button": {
111+
control = new qx.ui.menu.Button().set({
112+
backgroundColor: "transparent",
113+
label: this.tr("Rename"),
114+
icon: "@FontAwesome5Solid/i-cursor/10"
115+
});
116+
control.addListener("execute", () => this.fireDataEvent("renameNode", this.getNodeId()));
117+
const optionsMenu = this.getChildControl("options-menu-button");
118+
optionsMenu.getMenu().add(control);
119+
break;
120+
}
121+
case "options-info-button": {
122+
control = new qx.ui.menu.Button().set({
123+
backgroundColor: "transparent",
124+
label: this.tr("Information"),
125+
icon: "@FontAwesome5Solid/info/10"
126+
});
127+
control.addListener("execute", () => this.fireDataEvent("showInfo", this.getNodeId()));
128+
const optionsMenu = this.getChildControl("options-menu-button");
129+
optionsMenu.getMenu().add(control);
130+
break;
131+
}
132+
case "options-delete-button": {
133+
control = new qx.ui.menu.Button().set({
134+
backgroundColor: "transparent",
135+
label: this.tr("Delete"),
136+
icon: "@FontAwesome5Solid/trash/10"
137+
});
138+
control.addListener("execute", () => this.fireDataEvent("deleteNode", this.getNodeId()));
139+
const optionsMenu = this.getChildControl("options-menu-button");
140+
optionsMenu.getMenu().add(control);
141+
break;
142+
}
107143
case "node-id": {
108144
control = new qx.ui.basic.Label().set({
109-
maxWidth: 250
145+
maxWidth: 70,
146+
alignY: "middle"
110147
});
111148
this.bind("nodeId", control, "value", {
112149
converter: value => value && value.substring(0, 8)
113150
});
114151
const permissions = osparc.data.Permissions.getInstance();
115-
control.setVisibility(permissions.canDo("study.nodestree.uuid.read") ? "visible" : "excluded");
116-
permissions.addListener("changeRole", () => {
117-
control.setVisibility(permissions.canDo("study.nodestree.uuid.read") ? "visible" : "excluded");
152+
permissions.bind("role", control, "visibility", {
153+
converter: () => permissions.canDo("study.nodestree.uuid.read") ? "visible" : "excluded"
118154
});
119155
this.addWidget(control);
120156
}
@@ -149,34 +185,12 @@ qx.Class.define("osparc.component.widget.NodeTreeItem", {
149185
});
150186

151187
this.getChildControl("fullscreen-button");
152-
this.getChildControl("options-menu-button");
188+
this.getChildControl("options-rename-button");
189+
this.getChildControl("options-info-button");
190+
this.getChildControl("options-delete-button");
153191
this.getChildControl("node-id");
154192
},
155193

156-
__getOptionsMenu: function() {
157-
const optionsMenu = this.__optionsMenu = new qx.ui.menu.Menu().set({
158-
position: "bottom-right"
159-
});
160-
161-
const renameButton = new qx.ui.menu.Button().set({
162-
backgroundColor: "transparent",
163-
label: this.tr("Rename"),
164-
icon: "@FontAwesome5Solid/i-cursor/9"
165-
});
166-
renameButton.addListener("execute", () => this.fireDataEvent("renameNode", this.getNodeId()));
167-
optionsMenu.add(renameButton);
168-
169-
const deleteButton = new qx.ui.menu.Button().set({
170-
backgroundColor: "transparent",
171-
label: this.tr("Delete"),
172-
icon: "@FontAwesome5Solid/trash/9"
173-
});
174-
deleteButton.addListener("execute", () => this.fireDataEvent("deleteNode", this.getNodeId()));
175-
optionsMenu.add(deleteButton);
176-
177-
return optionsMenu;
178-
},
179-
180194
__applyNodeId: function(nodeId) {
181195
const study = osparc.store.Store.getInstance().getCurrentStudy();
182196
osparc.utils.Utils.setIdToWidget(this, "nodeTreeItem");

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@ qx.Class.define("osparc.component.widget.NodesTree", {
127127
const nodeTreeItem = new osparc.component.widget.NodeTreeItem();
128128
nodeTreeItem.addListener("fullscreenNode", e => this.__openFullscreen(e.getData()));
129129
nodeTreeItem.addListener("renameNode", e => this.__openItemRenamer(e.getData()));
130+
nodeTreeItem.addListener("showInfo", e => this.__openNodeInfo(e.getData()));
130131
nodeTreeItem.addListener("deleteNode", e => this.__deleteNode(e.getData()));
131132
return nodeTreeItem;
132133
},
@@ -140,7 +141,7 @@ qx.Class.define("osparc.component.widget.NodesTree", {
140141
c.bindProperty("label", "label", null, item, id);
141142
if (item.getModel().getNodeId() === study.getUuid()) {
142143
item.setIcon("@FontAwesome5Solid/home/14");
143-
item.getChildControl("options-menu-button").exclude();
144+
item.getChildControl("options-delete-button").exclude();
144145
}
145146
if (node) {
146147
if (node.isDynamic()) {
@@ -235,6 +236,17 @@ qx.Class.define("osparc.component.widget.NodesTree", {
235236
}
236237
},
237238

239+
__openNodeInfo: function(nodeId) {
240+
if (nodeId) {
241+
const node = this.getStudy().getWorkbench().getNode(nodeId);
242+
const serviceDetails = new osparc.servicecard.Large(node.getMetaData());
243+
const title = this.tr("Service information");
244+
const width = 600;
245+
const height = 700;
246+
osparc.ui.window.Window.popUpInWindow(serviceDetails, title, width, height);
247+
}
248+
},
249+
238250
__deleteNode: function(nodeId) {
239251
if (nodeId === undefined) {
240252
const selectedItem = this.__getSelection();

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,23 @@ qx.Class.define("osparc.component.widget.StudyTitleOnlyTree", {
2222
populateTree: function() {
2323
this.base(arguments);
2424
this.getModel().getChildren().removeAll();
25+
this.setDelegate({
26+
...this.getDelegate(),
27+
createItem: () => {
28+
const nodeTreeItem = new osparc.component.widget.NodeTreeItem();
29+
nodeTreeItem.addListener("renameNode", e => this.__openItemRenamer(e.getData()));
30+
nodeTreeItem.addListener("showInfo", e => this.__openStudyInfo());
31+
return nodeTreeItem;
32+
}
33+
});
34+
},
35+
36+
__openStudyInfo: function() {
37+
const studyDetails = new osparc.studycard.Large(this.getStudy());
38+
const title = this.tr("Study Details");
39+
const width = 500;
40+
const height = 500;
41+
osparc.ui.window.Window.popUpInWindow(studyDetails, title, width, height);
2542
}
2643
}
2744
});

0 commit comments

Comments
 (0)