Skip to content

Commit b040abf

Browse files
odeimaizodeimaiz
authored
Frontend UI/UX (#2992)
1 parent a2c1b11 commit b040abf

19 files changed

+207
-152
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -338,7 +338,7 @@ qx.Class.define("osparc.component.form.Auto", {
338338
}
339339
s.set.maximum = s.maximum ? parseInt(s.maximum) : 10000;
340340
s.set.minimum = s.minimum ? parseInt(s.minimum) : -10000;
341-
s.set.value = s.minimum ? parseInt(String(s.defaultValue)) : 0;
341+
s.set.value = s.defaultValue ? parseInt(String(s.defaultValue)) : 0;
342342

343343
this.__formCtrl.addBindingOptions(key,
344344
{ // model2target

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -287,9 +287,12 @@ qx.Class.define("osparc.component.form.renderer.PropFormBase", {
287287
},
288288

289289
__switchPrefix: function(item, oldPrefix, newPrefix) {
290-
const newValue = osparc.utils.Units.convertValue(item.getValue(), oldPrefix, newPrefix);
290+
let newValue = osparc.utils.Units.convertValue(item.getValue(), oldPrefix, newPrefix);
291291
item.unitPrefix = newPrefix;
292-
item.setValue(String(newValue));
292+
if ("type" in item && item.type !== "integer") {
293+
newValue = String(newValue);
294+
}
295+
item.setValue(newValue);
293296
this.self().updateUnitLabelPrefix(item);
294297
},
295298

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

Lines changed: 42 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,13 @@ qx.Class.define("osparc.component.widget.CollapsibleViewLight", {
2828
}
2929

3030
this.initCollapsed();
31+
32+
this.addListener("changeCollapsed", e => {
33+
const collapsed = e.getData();
34+
if (collapsed) {
35+
this.precollapseWidth = this.getBounds().width;
36+
}
37+
}, this);
3138
},
3239

3340
properties: {
@@ -45,35 +52,50 @@ qx.Class.define("osparc.component.widget.CollapsibleViewLight", {
4552
}
4653
},
4754

55+
statics: {
56+
CARET_WIDTH: 15,
57+
58+
styleCollapseExpandButton: function(btn) {
59+
btn.set({
60+
backgroundColor: "transparent",
61+
padding: 4,
62+
allowGrowX: false,
63+
allowGrowY: true,
64+
alignY: "middle"
65+
});
66+
btn.getContentElement().setStyles({
67+
"border-radius": "0px"
68+
});
69+
}
70+
},
71+
4872
members: {
4973
_createChildControlImpl: function(id) {
5074
let control;
5175
switch (id) {
76+
case "scroll-content":
77+
control = new qx.ui.container.Scroll();
78+
this._addAt(control, 0, {
79+
flex: 1
80+
});
81+
break;
5282
case "expand-button":
5383
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"
84+
toolTipText: this.tr("Expand")
6085
});
86+
this.self().styleCollapseExpandButton(control);
6187
control.addListener("execute", () => this.setCollapsed(false));
6288
break;
6389
case "collapse-button":
6490
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"
91+
toolTipText: this.tr("Collapse")
7192
});
93+
this.self().styleCollapseExpandButton(control);
7294
control.addListener("execute", () => this.setCollapsed(true));
7395
break;
7496
case "caret-collapsed-layout": {
7597
control = new qx.ui.container.Composite(new qx.ui.layout.VBox()).set({
76-
width: 15
98+
width: this.self().CARET_WIDTH
7799
});
78100
const expandBtn = this.getChildControl("expand-button");
79101
control.add(expandBtn, {
@@ -87,7 +109,7 @@ qx.Class.define("osparc.component.widget.CollapsibleViewLight", {
87109
}
88110
case "caret-expanded-layout": {
89111
control = new qx.ui.container.Composite(new qx.ui.layout.VBox()).set({
90-
width: 15
112+
width: this.self().CARET_WIDTH
91113
});
92114
const collapseBtn = this.getChildControl("collapse-button");
93115
control.add(collapseBtn, {
@@ -104,19 +126,19 @@ qx.Class.define("osparc.component.widget.CollapsibleViewLight", {
104126
},
105127

106128
__applyCollapsed: function(collapsed) {
107-
if (this.getContent()) {
108-
this.getContent().setVisibility(collapsed ? "excluded" : "visible");
129+
const scrollContent = this.getChildControl("scroll-content");
130+
if (scrollContent) {
131+
scrollContent.setVisibility(collapsed ? "excluded" : "visible");
109132
}
110133
},
111134

112135
__applyContent: function(content, oldContent) {
136+
const scrollContent = this.getChildControl("scroll-content");
113137
if (oldContent) {
114-
this._remove(oldContent);
138+
scrollContent.remove(oldContent);
115139
}
140+
scrollContent.add(content);
116141

117-
this._addAt(content, 0, {
118-
flex: 1
119-
});
120142
this.setCollapsed(false);
121143
}
122144
}

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

Lines changed: 69 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,11 @@ qx.Class.define("osparc.component.widget.logger.LoggerTable", {
5757
]);
5858

5959
this.__rawData = [];
60+
61+
this.__messengerColors = new Set();
62+
63+
const themeManager = qx.theme.manager.Meta.getInstance();
64+
themeManager.addListener("changeTheme", () => this.__themeChanged());
6065
},
6166

6267
properties: {
@@ -76,34 +81,86 @@ qx.Class.define("osparc.component.widget.logger.LoggerTable", {
7681
statics: {
7782
addColorTag: function(msg, color) {
7883
return ("<font color=" + color +">" + msg + "</font>");
84+
},
85+
86+
getNewColor: function() {
87+
const colorManager = qx.theme.manager.Color.getInstance();
88+
const luminanceBG = osparc.utils.Utils.getColorLuminance(colorManager.resolve("table-row-background-selected"));
89+
let luminanceText = null;
90+
let color = null;
91+
do {
92+
color = osparc.utils.Utils.getRandomColor();
93+
luminanceText = osparc.utils.Utils.getColorLuminance(color);
94+
} while (Math.abs(luminanceBG-luminanceText) < 0.4);
95+
return color;
96+
},
97+
98+
getLevelColor: function(logLevel) {
99+
const colorManager = qx.theme.manager.Color.getInstance();
100+
let logColor = null;
101+
const logLevels = osparc.component.widget.logger.LoggerView.LOG_LEVELS;
102+
Object.keys(logLevels).forEach(logLevelKey => {
103+
const logString = logLevelKey;
104+
const logNumber = logLevels[logLevelKey];
105+
if (logNumber === logLevel) {
106+
logColor = colorManager.resolve("logger-"+logString+"-message");
107+
}
108+
});
109+
return logColor ? logColor : colorManager.resolve("logger-info-message");
79110
}
80111
},
81112

82113
members : {
83114
__rawData: null,
84115
__filteredData: null,
116+
__messengerColors: null,
85117

86-
addRows: function(newRows) {
87-
for (let i=0; i<newRows.length; i++) {
88-
const newRow = newRows[i];
89-
newRow["whoRich"] = osparc.component.widget.logger.LoggerTable.addColorTag(newRow.label, newRow.nodeColor);
90-
newRow["msgRich"] = osparc.component.widget.logger.LoggerTable.addColorTag(newRow.msg, newRow.msgColor);
91-
this.__rawData.push(newRow);
118+
getRows: function() {
119+
return this.__rawData;
120+
},
121+
122+
__getNodesColor: function(nodeId) {
123+
for (const item of this.__messengerColors) {
124+
if (item[0] === nodeId) {
125+
return item[1];
126+
}
92127
}
128+
const color = this.self().getNewColor();
129+
this.__messengerColors.add([nodeId, color]);
130+
return color;
93131
},
94132

95-
getRows: function() {
96-
return this.__rawData;
133+
addRows: function(newRows) {
134+
newRows.forEach(newRow => {
135+
newRow["nodeColor"] = this.__getNodesColor(newRow.nodeId);
136+
newRow["msgColor"] = this.self().getLevelColor(newRow.logLevel);
137+
138+
newRow["whoRich"] = this.self().addColorTag(newRow.label, newRow.nodeColor);
139+
newRow["msgRich"] = this.self().addColorTag(newRow.msg, newRow.msgColor);
140+
141+
this.__rawData.push(newRow);
142+
});
97143
},
98144

99145
nodeLabelChanged: function(nodeId, newLabel) {
100-
for (let i=0; i<this.__rawData.length; i++) {
101-
const row = this.__rawData[i];
146+
this.__rawData.forEach(row => {
102147
if (row.nodeId === nodeId) {
103148
row.label = newLabel;
104-
row["whoRich"] = osparc.component.widget.logger.LoggerTable.addColorTag(row.label, row.nodeColor);
149+
row["whoRich"] = this.self().addColorTag(row.label, row.nodeColor);
105150
}
106-
}
151+
});
152+
},
153+
154+
__themeChanged: function() {
155+
this.__messengerColors.clear();
156+
157+
this.__rawData.forEach(row => {
158+
row["nodeColor"] = this.__getNodesColor(row.nodeId);
159+
row["msgColor"] = this.self().getLevelColor(row.logLevel);
160+
161+
row["whoRich"] = this.self().addColorTag(row.label, row.nodeColor);
162+
row["msgRich"] = this.self().addColorTag(row.msg, row.msgColor);
163+
});
107164
},
108165

109166
clearTable: function() {

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

Lines changed: 4 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,6 @@ qx.Class.define("osparc.component.widget.logger.LoggerView", {
5656
this._add(table, {
5757
flex: 1
5858
});
59-
60-
this.__messengerColors = new Set();
6159
},
6260

6361
properties: {
@@ -81,39 +79,13 @@ qx.Class.define("osparc.component.widget.logger.LoggerView", {
8179
info: 0,
8280
warning: 1,
8381
error: 2
84-
},
85-
86-
getLevelColorTag: function(logLevel) {
87-
const colorManager = qx.theme.manager.Color.getInstance();
88-
let logColor = null;
89-
Object.keys(this.LOG_LEVELS).forEach(logLevelKey => {
90-
const logString = logLevelKey;
91-
const logNumber = this.LOG_LEVELS[logLevelKey];
92-
if (logNumber === logLevel) {
93-
logColor = colorManager.resolve("logger-"+logString+"-message");
94-
}
95-
});
96-
return logColor ? logColor : colorManager.resolve("logger-info-message");
97-
},
98-
99-
getNewColor: function() {
100-
const colorManager = qx.theme.manager.Color.getInstance();
101-
const luminanceBG = osparc.utils.Utils.getColorLuminance(colorManager.resolve("table-row-background-selected"));
102-
let luminanceText = null;
103-
let color = null;
104-
do {
105-
color = osparc.utils.Utils.getRandomColor();
106-
luminanceText = osparc.utils.Utils.getColorLuminance(color);
107-
} while (Math.abs(luminanceBG-luminanceText) < 0.4);
108-
return color;
10982
}
11083
},
11184

11285
members: {
11386
__textFilterField: null,
11487
__loggerModel: null,
11588
__logView: null,
116-
__messengerColors: null,
11789

11890
_createChildControlImpl: function(id) {
11991
let control;
@@ -309,20 +281,16 @@ qx.Class.define("osparc.component.widget.logger.LoggerView", {
309281
label = "Workbench";
310282
}
311283

312-
const nodeColor = this.__getNodesColor(nodeId);
313-
const msgColor = osparc.component.widget.logger.LoggerView.getLevelColorTag(logLevel);
314284
const msgLogs = [];
315-
for (let i=0; i<msgs.length; i++) {
285+
msgs.forEach(msg => {
316286
const msgLog = {
317287
nodeId,
318288
label,
319-
msg: msgs[i],
320-
logLevel,
321-
nodeColor,
322-
msgColor
289+
msg,
290+
logLevel
323291
};
324292
msgLogs.push(msgLog);
325-
}
293+
});
326294
this.__loggerModel.addRows(msgLogs);
327295

328296
this.__updateTable();
@@ -334,17 +302,6 @@ qx.Class.define("osparc.component.widget.logger.LoggerView", {
334302
this.__logView.scrollCellVisible(0, nFilteredRows);
335303
},
336304

337-
__getNodesColor: function(nodeId) {
338-
for (const item of this.__messengerColors) {
339-
if (item[0] === nodeId) {
340-
return item[1];
341-
}
342-
}
343-
const color = osparc.component.widget.logger.LoggerView.getNewColor();
344-
this.__messengerColors.add([nodeId, color]);
345-
return color;
346-
},
347-
348305
__applyFilters: function() {
349306
if (this.__loggerModel === null) {
350307
return;

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,11 @@ qx.Class.define("osparc.component.workbench.BaseNodeUI", {
3535
showStatusbar: false,
3636
resizable: false,
3737
allowMaximize: false,
38-
contentPadding: 0
38+
contentPadding: 2
39+
});
40+
41+
this.getContentElement().setStyles({
42+
"border-radius": "4px"
3943
});
4044

4145
this.subscribeToFilterGroup("workbench");
@@ -193,7 +197,7 @@ qx.Class.define("osparc.component.workbench.BaseNodeUI", {
193197
_createPort: function(isInput, placeholder = false) {
194198
let port = null;
195199
const width = this.self().PORT_HEIGHT;
196-
const portMargin = this.self().PORT_HEIGHT - this.self().PORT_WIDTH;
200+
const portMargin = this.self().PORT_HEIGHT - this.self().PORT_WIDTH + 2;
197201
if (placeholder) {
198202
port = new qx.ui.core.Spacer(width, width);
199203
} else {
@@ -256,7 +260,7 @@ qx.Class.define("osparc.component.workbench.BaseNodeUI", {
256260
const bounds = this.getCurrentBounds();
257261
const captionHeight = Math.max(this.getChildControl("captionbar").getSizeHint().height, this.self().captionHeight());
258262
const x = port.isInput ? bounds.left - 6 : bounds.left + bounds.width - 1;
259-
let y = bounds.top + captionHeight + this.self().PORT_HEIGHT/2;
263+
const y = bounds.top + captionHeight + this.self().PORT_HEIGHT/2 + 2;
260264
return [x, y];
261265
},
262266

0 commit comments

Comments
 (0)