Skip to content

Commit 49219c1

Browse files
odeimaizodeimaiz
committed
refactor and aesthetics
1 parent 4cfe5a4 commit 49219c1

File tree

3 files changed

+50
-53
lines changed

3 files changed

+50
-53
lines changed

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

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -530,22 +530,20 @@ qx.Class.define("osparc.dashboard.CardBase", {
530530

531531
__evalSelectedButton: function() {
532532
if (
533+
this.hasChildControl("menu-selection-stack") &&
533534
this.hasChildControl("menu-button") &&
534535
this.hasChildControl("tick-selected") &&
535536
this.hasChildControl("tick-unselected")
536537
) {
537-
const menuButton = this.getChildControl("menu-button");
538-
const tick = this.getChildControl("tick-selected");
539-
const untick = this.getChildControl("tick-unselected");
538+
const menuButtonStack = this.getChildControl("menu-selection-stack");
540539
if (this.isResourceType("study") && this.isMultiSelectionMode()) {
540+
const tick = this.getChildControl("tick-selected");
541+
const untick = this.getChildControl("tick-unselected");
541542
const selected = this.getSelected();
542-
menuButton.setVisibility("excluded");
543-
tick.setVisibility(selected ? "visible" : "excluded");
544-
untick.setVisibility(selected ? "excluded" : "visible");
543+
menuButtonStack.setSelection(selected ? [tick] : [untick]);
545544
} else {
546-
menuButton.setVisibility("visible");
547-
tick.setVisibility("excluded");
548-
untick.setVisibility("excluded");
545+
const menuButton = this.getChildControl("menu-button");
546+
menuButtonStack.setSelection([menuButton]);
549547
}
550548
}
551549
},

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

Lines changed: 20 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -138,13 +138,16 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
138138
}
139139
case "header": {
140140
const hGrid = new qx.ui.layout.Grid().set({
141-
spacing: 0, // the sub-elements will take care of the padding
141+
spacing: 6,
142142
});
143143
hGrid.setColumnFlex(1, 1);
144-
hGrid.setRowAlign(0, "left", "middle");
144+
hGrid.setColumnAlign(0, "right", "middle");
145+
hGrid.setColumnAlign(1, "left", "middle");
146+
hGrid.setColumnAlign(2, "center", "middle");
145147
control = new qx.ui.container.Composite().set({
146148
backgroundColor: "background-card-overlay",
147-
padding: 0,
149+
paddingBottom: 6,
150+
paddingRight: 4,
148151
maxWidth: this.self().ITEM_WIDTH,
149152
maxHeight: this.self().ITEM_HEIGHT
150153
});
@@ -189,37 +192,23 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
189192
control = new qx.ui.basic.Label().set({
190193
textColor: "contrasted-text-light",
191194
font: "text-14",
192-
padding: this.self().TITLE_PADDING,
193-
maxWidth: this.self().ITEM_WIDTH,
194195
});
195196
layout = this.getChildControl("header");
196-
layout.addAt(control, 0, {
197+
layout.add(control, {
197198
column: 1,
198199
row: 0,
199200
});
200201
break;
201-
case "subtitle":
202-
control = new qx.ui.container.Composite(new qx.ui.layout.HBox(6)).set({
203-
anonymous: true,
204-
height: 20,
205-
padding: 6,
206-
paddingLeft: 20, // align with icon
202+
case "subtitle-icon": {
203+
control = new qx.ui.basic.Image().set({
204+
allowGrowX: false,
205+
allowShrinkX: false,
207206
});
208207
layout = this.getChildControl("header");
209-
layout.addAt(control, 0, {
208+
layout.add(control, {
210209
column: 0,
211210
row: 1,
212-
colSpan: 2,
213-
});
214-
break;
215-
case "subtitle-icon": {
216-
control = new qx.ui.basic.Image().set({
217-
alignY: "middle",
218-
allowGrowX: false,
219-
allowShrinkX: false
220211
});
221-
const subtitleLayout = this.getChildControl("subtitle");
222-
subtitleLayout.addAt(control, 0);
223212
break;
224213
}
225214
case "subtitle-text": {
@@ -233,9 +222,10 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
233222
font: "text-12",
234223
allowGrowY: false
235224
});
236-
const subtitleLayout = this.getChildControl("subtitle");
237-
subtitleLayout.addAt(control, 1, {
238-
flex: 1
225+
layout = this.getChildControl("header");
226+
layout.add(control, {
227+
column: 1,
228+
row: 1,
239229
});
240230
break;
241231
}
@@ -269,9 +259,10 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
269259
width: 13,
270260
margin: [0, 1]
271261
});
272-
layout = this.getChildControl("subtitle");
273-
layout.set({
274-
visibility: "visible"
262+
layout = this.getChildControl("header");
263+
layout.add(control, {
264+
column: 2,
265+
row: 1,
275266
});
276267
layout.addAt(control, 2);
277268
break;

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

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,18 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
9191
layout = this.getChildControl("main-layout");
9292
layout.add(control, osparc.dashboard.GridButtonBase.POS.TAGS);
9393
break;
94-
case "menu-button":
94+
case "menu-selection-stack":
95+
control = new qx.ui.container.Stack();
96+
control.set({
97+
alignX: "center",
98+
alignY: "middle"
99+
});
100+
this.getChildControl("header").add(control, {
101+
column: 2,
102+
row: 0,
103+
});
104+
break;
105+
case "menu-button": {
95106
this.getChildControl("title").set({
96107
maxWidth: osparc.dashboard.GridButtonBase.ITEM_WIDTH - osparc.dashboard.CardBase.ICON_SIZE - this.self().MENU_BTN_DIMENSIONS - 2,
97108
});
@@ -110,12 +121,11 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
110121
"border-radius": `${this.self().MENU_BTN_DIMENSIONS / 2}px`
111122
});
112123
osparc.utils.Utils.setIdToWidget(control, "studyItemMenuButton");
113-
this._add(control, {
114-
top: 6,
115-
right: 6,
116-
});
124+
const menuSelectionStack = this.getChildControl("menu-selection-stack");
125+
menuSelectionStack.addAt(control, 0);
117126
break;
118-
case "tick-unselected":
127+
}
128+
case "tick-unselected": {
119129
control = new qx.ui.basic.Atom().set({
120130
appearance: "form-button-outlined",
121131
width: this.self().MENU_BTN_DIMENSIONS,
@@ -126,12 +136,11 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
126136
control.getContentElement().setStyles({
127137
"border-radius": `${this.self().MENU_BTN_DIMENSIONS / 2}px`
128138
});
129-
this._add(control, {
130-
top: 8,
131-
right: 8
132-
});
139+
const menuSelectionStack = this.getChildControl("menu-selection-stack");
140+
menuSelectionStack.addAt(control, 1);
133141
break;
134-
case "tick-selected":
142+
}
143+
case "tick-selected": {
135144
control = new qx.ui.basic.Image().set({
136145
appearance: "form-button",
137146
width: this.self().MENU_BTN_DIMENSIONS,
@@ -146,11 +155,10 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
146155
control.getContentElement().setStyles({
147156
"border-radius": `${this.self().MENU_BTN_DIMENSIONS / 2}px`
148157
});
149-
this._add(control, {
150-
top: 8,
151-
right: 8
152-
});
158+
const menuSelectionStack = this.getChildControl("menu-selection-stack");
159+
menuSelectionStack.addAt(control, 2);
153160
break;
161+
}
154162
case "lock-status":
155163
control = new osparc.ui.basic.Thumbnail();
156164
this._add(control, {

0 commit comments

Comments
 (0)