Skip to content

Commit 57c8805

Browse files
odeimaizodeimaiz
authored
✨Tutorials Grouping review (ITISFoundation#3636)
1 parent db2ff36 commit 57c8805

File tree

6 files changed

+120
-38
lines changed

6 files changed

+120
-38
lines changed

‎services/static-webserver/client/source/class/osparc/component/widget/SlideBar.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,11 @@
2323
qx.Class.define("osparc.component.widget.SlideBar", {
2424
extend: qx.ui.container.SlideBar,
2525

26-
construct: function() {
26+
construct: function(spacing) {
2727
this.base(arguments);
2828

29-
this.setLayout(new qx.ui.layout.HBox(5));
29+
const layout = new qx.ui.layout.HBox(spacing? spacing : 5);
30+
this.setLayout(layout);
3031

3132
this.__pimpLayout();
3233
},

‎services/static-webserver/client/source/class/osparc/dashboard/GroupedToggleButtonContainer.js‎

Lines changed: 84 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,20 @@ qx.Class.define("osparc.dashboard.GroupedToggleButtonContainer", {
2222
this.base(arguments);
2323

2424
this._setLayout(new qx.ui.layout.VBox());
25+
26+
const showAllButton = this.__showAllButton = new qx.ui.form.Button().set({
27+
margin: 10,
28+
marginBottom: 5
29+
});
30+
const headerBar = this.getChildControl("header-bar");
31+
headerBar.addAt(showAllButton, 1);
32+
33+
this.__contentContainer = this.__createContentContainer();
34+
35+
this.bind("expanded", showAllButton, "label", {
36+
converter: expanded => expanded ? this.tr("Show less") : this.tr("Show all")
37+
});
38+
showAllButton.addListener("execute", () => this.setExpanded(!this.isExpanded()));
2539
},
2640

2741
properties: {
@@ -44,14 +58,29 @@ qx.Class.define("osparc.dashboard.GroupedToggleButtonContainer", {
4458
headerColor: {
4559
check: "String",
4660
apply: "__updateHeaderColor"
61+
},
62+
63+
expanded: {
64+
check: "Boolean",
65+
init: false,
66+
nullable: false,
67+
event: "changeExpanded",
68+
apply: "__applyExpanded"
4769
}
4870
},
4971

5072
members: {
73+
__showAllButton: null,
74+
__contentContainer: null,
75+
5176
_createChildControlImpl: function(id) {
5277
let control;
5378
switch (id) {
54-
case "header":
79+
case "header-bar":
80+
control = new qx.ui.container.Composite(new qx.ui.layout.HBox());
81+
this._addAt(control, 0);
82+
break;
83+
case "header": {
5584
control = new qx.ui.basic.Atom().set({
5685
font: "title-14",
5786
gap: 10,
@@ -64,23 +93,47 @@ qx.Class.define("osparc.dashboard.GroupedToggleButtonContainer", {
6493
"border-top-left-radius": "4px",
6594
"border-top-right-radius": "4px"
6695
});
67-
this._addAt(control, 0);
68-
break;
69-
case "content-container":
70-
control = new osparc.component.widget.SlideBar().set({
71-
padding: 5,
72-
allowGrowX: false,
73-
backgroundColor: "background-main-1"
74-
});
75-
control.setButtonsWidth(30);
76-
this._addAt(control, 1, {
77-
flex: 1
78-
});
96+
const headerBar = this.getChildControl("header-bar");
97+
headerBar.addAt(control, 0);
7998
break;
99+
}
80100
}
81101
return control || this.base(arguments, id);
82102
},
83103

104+
__createContentContainer: function() {
105+
let contentContainer = null;
106+
const expanded = this.isExpanded();
107+
const showAllBtn = this.__showAllButton;
108+
if (expanded) {
109+
contentContainer = new osparc.dashboard.ToggleButtonContainer();
110+
showAllBtn.show();
111+
} else {
112+
const spacing = osparc.dashboard.GridButtonBase.SPACING;
113+
contentContainer = new osparc.component.widget.SlideBar(spacing);
114+
contentContainer.setButtonsWidth(30);
115+
116+
// show showAllBtn only if slidebar is full
117+
const buttonBackward = contentContainer.getChildControl("button-backward");
118+
const buttonForward = contentContainer.getChildControl("button-forward");
119+
buttonBackward.bind("visibility", showAllBtn, "visibility", {
120+
converter: visibility => (visibility === "visible" || buttonForward.isVisible()) ? "visible" : "excluded"
121+
});
122+
buttonForward.bind("visibility", showAllBtn, "visibility", {
123+
converter: visibility => (visibility === "visible" || buttonBackward.isVisible()) ? "visible" : "excluded"
124+
});
125+
}
126+
contentContainer.set({
127+
padding: 5,
128+
allowGrowX: false,
129+
backgroundColor: "background-main-1"
130+
});
131+
this._addAt(contentContainer, 1, {
132+
flex: 1
133+
});
134+
return contentContainer;
135+
},
136+
84137
__updateHeaderLabel: function(label) {
85138
const atom = this.getChildControl("header");
86139
atom.setLabel(label);
@@ -96,11 +149,25 @@ qx.Class.define("osparc.dashboard.GroupedToggleButtonContainer", {
96149
atom.getChildControl("icon").setTextColor(color);
97150
},
98151

152+
__applyExpanded: function() {
153+
const children = this.__contentContainer.getChildren();
154+
this._remove(this.__contentContainer);
155+
156+
this.__contentContainer = this.__createContentContainer();
157+
for (let i=children.length-1; i>=0; i--) {
158+
this.add(children[i], 0);
159+
}
160+
},
161+
162+
getContentContainer: function() {
163+
return this.__contentContainer;
164+
},
165+
99166
// overridden
100167
add: function(child, idx) {
101168
if (child instanceof qx.ui.form.ToggleButton) {
102169
child.addListener("changeVisibility", () => this.__childVisibilityChanged(), this);
103-
const container = this.getChildControl("content-container");
170+
const container = this.getContentContainer();
104171
if (idx === undefined) {
105172
container.add(child);
106173
} else {
@@ -113,15 +180,15 @@ qx.Class.define("osparc.dashboard.GroupedToggleButtonContainer", {
113180
},
114181

115182
getCards: function() {
116-
return this.getChildControl("content-container").getChildren();
183+
return this.__contentContainer.getChildren();
117184
},
118185

119186
removeCard: function(key) {
120-
const cards = this.getChildren();
187+
const cards = this.getCards();
121188
for (let i=0; i<cards.length; i++) {
122189
const card = cards[i];
123190
if (card.getUuid && key === card.getUuid()) {
124-
this.remove(card);
191+
this.getContentContainer().remove(card);
125192
return;
126193
}
127194
}

‎services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
8181
// it will always go to the no-group group
8282
const noGroupContainer = this.__getGroupContainer("no-group");
8383
noGroupContainer.add(card);
84-
this.self().sortList(noGroupContainer.getChildControl("content-container"));
84+
this.self().sortList(noGroupContainer.getContentContainer());
8585
} else {
8686
this.__flatList.add(card);
8787
this.self().sortList(this.__flatList);
@@ -95,7 +95,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
9595
if (card instanceof qx.ui.form.ToggleButton) {
9696
if (this.getGroupBy()) {
9797
const noGroupContainer = this.__getGroupContainer("no-group");
98-
noGroupContainer.remove(card);
98+
noGroupContainer.getContentContainer().remove(card);
9999
} else {
100100
this.__flatList.remove(card);
101101
}
@@ -197,7 +197,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
197197
if (this.__flatList) {
198198
this.__flatList.removeAll();
199199
}
200-
this.__groupedContainers.forEach(groupedContainer => groupedContainer.getChildControl("content-container").removeAll());
200+
this.__groupedContainers.forEach(groupedContainer => groupedContainer.getContentContainer().removeAll());
201201
this.__groupedContainers = [];
202202
this._removeAll();
203203
},
@@ -251,7 +251,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
251251
let noGroupContainer = this.__getGroupContainer("no-group");
252252
const card = this.__createCard(resourceData, tags);
253253
noGroupContainer.add(card);
254-
this.self().sortList(noGroupContainer.getChildControl("content-container"));
254+
this.self().sortList(noGroupContainer.getContentContainer());
255255
cards.push(card);
256256
} else {
257257
tags.forEach(tag => {
@@ -264,7 +264,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
264264
}
265265
const card = this.__createCard(resourceData, tags);
266266
groupContainer.add(card);
267-
this.self().sortList(groupContainer.getChildControl("content-container"));
267+
this.self().sortList(groupContainer.getContentContainer());
268268
cards.push(card);
269269
});
270270
}

‎services/static-webserver/client/source/class/osparc/dashboard/SearchBarFilter.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -185,17 +185,18 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
185185
label: osparc.utils.Utils.capitalize(chipType) + " = '" + chipLabel + "'",
186186
icon: "@MaterialIcons/close/12",
187187
iconPosition: "right",
188-
paddingRight: 4,
189-
paddingLeft: 4,
188+
paddingRight: 6,
189+
paddingLeft: 6,
190190
alignY: "middle",
191191
toolTipText: chipLabel,
192192
maxHeight: 26,
193-
maxWidth: 180
193+
maxWidth: 180,
194+
backgroundColor: "background-main-1"
194195
});
195196
chipButton.type = chipType;
196197
chipButton.id = chipId;
197198
chipButton.getContentElement().setStyles({
198-
"border-radius": "4px"
199+
"border-radius": "6px"
199200
});
200201
chipButton.addListener("execute", () => this.__removeChip(chipType, chipId), this);
201202
return chipButton;

‎services/static-webserver/client/source/class/osparc/navigation/Manuals.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -105,11 +105,9 @@ qx.Class.define("osparc.navigation.Manuals", {
105105

106106
__openSendEmailFeedbackDialog: function(email) {
107107
const productName = osparc.utils.Utils.getProductName();
108-
const giveEmailFeedbackWindow = new osparc.ui.window.Dialog("Feedback", null,
109-
qx.locale.Manager.tr("Send us an email to:")
110-
);
108+
const giveEmailFeedbackWindow = new osparc.ui.window.Dialog("Feedback", null, qx.locale.Manager.tr("Send us an email to:"));
111109
const color = qx.theme.manager.Color.getInstance().resolve("text");
112-
const textLink = `&nbsp<a href=mailto:${email}?subject=${productName} feedback" style='color: ${color}' target='_blank'>${email}</a>&nbsp`;
110+
const textLink = `&nbsp<a href=mailto:${email}?subject=${productName} feedback" style='font-size: 14px; color: ${color}' target='_blank'>${email}</a>&nbsp`;
113111
const mailto = new qx.ui.basic.Label(textLink).set({
114112
selectable: true,
115113
rich : true

‎services/static-webserver/client/source/class/osparc/ui/window/Dialog.js‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,21 @@ qx.Class.define("osparc.ui.window.Dialog", {
1919
*/
2020
construct: function(caption, icon, message) {
2121
this.base(arguments, caption, icon);
22+
this.getChildControl("captionbar").setPadding(10);
2223
this.set({
2324
autoDestroy: true,
2425
layout: new qx.ui.layout.VBox(),
2526
showMinimize: false,
2627
showMaximize: false,
27-
contentPadding: 0,
28+
contentPadding: 20, // same as caption
2829
maxWidth: 350,
2930
resizable: false,
3031
modal: true
3132
});
33+
34+
this.getChildControl("title").set({
35+
font: "title-14"
36+
});
3237
this.__buildLayout();
3338
if (message) {
3439
this.setMessage(message);
@@ -54,13 +59,16 @@ qx.Class.define("osparc.ui.window.Dialog", {
5459
control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({
5560
alignX: "right"
5661
})).set({
62+
padding: 5,
5763
appearance: "margined-layout"
5864
});
5965
this._add(control);
6066
break;
6167
case "cancel-button": {
6268
const btnsLayout = this.getChildControl("buttons-layout");
63-
control = new qx.ui.form.Button(this.tr("Cancel"));
69+
control = new qx.ui.form.Button(this.tr("Cancel")).set({
70+
font: "text-14"
71+
});
6472
btnsLayout.add(control);
6573
break;
6674
}
@@ -70,18 +78,21 @@ qx.Class.define("osparc.ui.window.Dialog", {
7078

7179
__buildLayout: function() {
7280
this.__messageLabel = new qx.ui.basic.Label().set({
73-
rich: true,
74-
padding: 10
81+
font: "text-14",
82+
rich: true
7583
});
7684
this.add(this.__messageLabel, {
7785
flex: 1
7886
});
79-
this.__extraWidgetsLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox()).set({
80-
padding: 10
87+
88+
this.__extraWidgetsLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(15)).set({
89+
paddingTop: 15
8190
});
91+
this.__extraWidgetsLayout.exclude();
8292
this.add(this.__extraWidgetsLayout, {
8393
flex: 1
8494
});
95+
8596
this.getChildControl("buttons-layout");
8697
},
8798

@@ -90,6 +101,7 @@ qx.Class.define("osparc.ui.window.Dialog", {
90101
},
91102

92103
addWidget: function(widget) {
104+
this.__extraWidgetsLayout.show();
93105
this.__extraWidgetsLayout.add(widget);
94106
},
95107

@@ -99,6 +111,9 @@ qx.Class.define("osparc.ui.window.Dialog", {
99111
*/
100112
addButton: function(button) {
101113
const btnToolbar = this.getChildControl("buttons-layout");
114+
button.set({
115+
font: "text-14"
116+
});
102117
btnToolbar.add(button);
103118
},
104119

0 commit comments

Comments
 (0)