Skip to content

Commit ba1c549

Browse files
odeimaizodeimaiz
committed
[skip ci] rearrange header
1 parent 2687ec7 commit ba1c549

File tree

4 files changed

+57
-48
lines changed

4 files changed

+57
-48
lines changed

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

Lines changed: 49 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,10 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
4646
PADDING: 10,
4747
SPACING_IN: 5,
4848
SPACING: 15,
49+
ICON_SIZE: 32,
4950
// TITLE_MAX_HEIGHT: 34, // two lines in Roboto
5051
TITLE_MAX_HEIGHT: 40, // two lines in Manrope
51-
ICON_SIZE: 50,
52+
THUMBNAIL_SIZE: 50,
5253
POS: {
5354
TITLE: {
5455
row: 0,
@@ -138,18 +139,20 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
138139
});
139140
break;
140141
}
141-
case "header":
142-
control = new qx.ui.container.Composite(new qx.ui.layout.VBox(5)).set({
143-
anonymous: true,
144-
allowGrowX: true,
145-
allowShrinkX: false,
146-
alignY: "middle",
147-
padding: this.self().PADDING
142+
case "header": {
143+
const hGrid = new qx.ui.layout.Grid().set({
144+
spacing: 0, // the sub-elements will take care of the padding
148145
});
149-
control.set({
150-
backgroundColor: "background-card-overlay"
146+
hGrid.setColumnFlex(1, 1);
147+
control = new qx.ui.container.Composite().set({
148+
backgroundColor: "background-card-overlay",
149+
padding: 0,
150+
maxWidth: this.self().ITEM_WIDTH,
151+
maxHeight: this.self().ITEM_HEIGHT
151152
});
153+
control.setLayout(hGrid);
152154
break;
155+
}
153156
case "body":
154157
control = new qx.ui.container.Composite(new qx.ui.layout.VBox(5)).set({
155158
decorator: "main",
@@ -175,53 +178,51 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
175178
control.setLayout(fGrid);
176179
break;
177180
}
178-
case "title-row":
179-
control = new qx.ui.container.Composite(new qx.ui.layout.VBox(6)).set({
180-
anonymous: true,
181-
maxWidth: this.self().ITEM_WIDTH - 2*this.self().PADDING
182-
});
183-
layout = this.getChildControl("header");
184-
layout.addAt(control, 1, {
185-
flex: 1
186-
});
187-
break;
188181
case "icon": {
189-
layout = this.getChildControl("body");
190-
const maxWidth = this.self().ITEM_WIDTH;
191-
control = new osparc.ui.basic.Thumbnail(null, maxWidth, 124);
182+
control = new osparc.ui.basic.Thumbnail(null, this.self().ICON_SIZE, this.self().ICON_SIZE).set({
183+
minHeight: this.self().ICON_SIZE,
184+
minWidth: this.self().ICON_SIZE,
185+
});
192186
control.getChildControl("image").set({
193187
anonymous: true,
194-
alignY: "middle",
195-
alignX: "center",
188+
alignY: "top",
189+
alignX: "left",
196190
allowGrowX: true,
197-
allowGrowY: true
191+
allowGrowY: true,
198192
});
199-
layout.getContentElement().setStyles({
200-
"border-width": "0px"
193+
layout = this.getChildControl("header");
194+
layout.add(control, {
195+
column: 0,
196+
row: 0,
201197
});
202-
layout.add(control, {flex: 1});
203198
break;
204199
}
205200
case "title":
206201
control = new qx.ui.basic.Label().set({
207202
textColor: "contrasted-text-light",
208203
font: "text-14",
204+
padding: this.self().PADDING,
209205
maxWidth: this.self().ITEM_WIDTH - 2*this.self().PADDING,
210206
maxHeight: this.self().TITLE_MAX_HEIGHT
211207
});
212-
layout = this.getChildControl("title-row");
208+
layout = this.getChildControl("header");
213209
layout.addAt(control, 0, {
214-
flex: 1
210+
column: 1,
211+
row: 0,
215212
});
216213
break;
217214
case "subtitle":
218215
control = new qx.ui.container.Composite(new qx.ui.layout.HBox(6)).set({
219216
anonymous: true,
220-
height: 20
217+
height: 20,
218+
padding: 6,
219+
paddingLeft: 20, // align with icon
221220
});
222-
layout = this.getChildControl("title-row");
223-
layout.addAt(control, 1, {
224-
flex: 1
221+
layout = this.getChildControl("header");
222+
layout.addAt(control, 0, {
223+
column: 0,
224+
row: 1,
225+
colSpan: 2,
225226
});
226227
break;
227228
case "subtitle-icon": {
@@ -293,23 +294,27 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
293294

294295
// overridden
295296
_applyIcon: function(value, old) {
296-
console.log("show icon", value);
297+
const image = this.getChildControl("icon").getChildControl("image");
298+
image.set({
299+
source: value,
300+
decorator: "rounded",
301+
});
297302
},
298303

299304
// overridden
300305
_applyThumbnail: function(value, old) {
301306
if (value.includes("@FontAwesome5Solid/")) {
302-
value += this.self().ICON_SIZE;
307+
value += this.self().THUMBNAIL_SIZE;
303308
const image = this.getChildControl("thumbnail").getChildControl("image");
304309
image.set({
305-
source: value
310+
source: value,
306311
});
307312

308313
[
309314
"appear",
310315
"loaded"
311316
].forEach(eventName => {
312-
image.addListener(eventName, () => this.__fitIconHeight(), this);
317+
image.addListener(eventName, () => this.__fitThumbnailHeight(), this);
313318
});
314319
} else {
315320
this.getContentElement().setStyles({
@@ -334,8 +339,8 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
334339
return;
335340
},
336341

337-
__fitIconHeight: function() {
338-
const iconLayout = this.getChildControl("icon");
342+
__fitThumbnailHeight: function() {
343+
const thumbnailLayout = this.getChildControl("thumbnail");
339344
let maxHeight = this.getHeight() - this.getPaddingTop() - this.getPaddingBottom() - 5;
340345
const checkThis = [
341346
"title",
@@ -355,9 +360,9 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
355360
});
356361
// maxHeight -= 4; // for Roboto
357362
maxHeight -= 18; // for Manrope
358-
iconLayout.getChildControl("image").setMaxHeight(maxHeight);
359-
iconLayout.setMaxHeight(maxHeight);
360-
iconLayout.recheckSize();
363+
thumbnailLayout.getChildControl("image").setMaxHeight(maxHeight);
364+
thumbnailLayout.setMaxHeight(maxHeight);
365+
thumbnailLayout.recheckSize();
361366
},
362367

363368
replaceIcon: function(newIcon) {

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,8 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
9393
break;
9494
case "menu-button":
9595
this.getChildControl("title").set({
96-
maxWidth: osparc.dashboard.GridButtonBase.ITEM_WIDTH - 2*osparc.dashboard.GridButtonBase.PADDING - this.self().MENU_BTN_DIMENSIONS
96+
maxWidth: osparc.dashboard.GridButtonBase.ITEM_WIDTH - osparc.dashboard.GridButtonBase.ICON_SIZE - this.self().MENU_BTN_DIMENSIONS - 6,
97+
padding: 4,
9798
});
9899
control = new qx.ui.form.MenuButton().set({
99100
appearance: "form-button-outlined",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ qx.Class.define("osparc.dashboard.GridButtonNew", {
6161
descLabel.setValue(description.toString());
6262
}
6363

64-
this.setIcon(osparc.dashboard.CardBase.NEW_ICON);
64+
this.setThumbnail(osparc.dashboard.CardBase.NEW_ICON);
6565

6666
this.getChildControl("footer").exclude();
6767
},

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,6 @@ qx.Class.define("osparc.dashboard.GridButtonPlaceholder", {
7777
break;
7878
}
7979
case "progress-bar": {
80-
layout = this.getChildControl("title-row");
8180
control = new qx.ui.indicator.ProgressBar().set({
8281
maxHeight: 6,
8382
alignX: "center",
@@ -89,7 +88,11 @@ qx.Class.define("osparc.dashboard.GridButtonPlaceholder", {
8988
control.getChildControl("progress").set({
9089
backgroundColor: "strong-main"
9190
});
92-
layout.addAt(control, 1);
91+
layout = this.getChildControl("header");
92+
layout.add(control, {
93+
column: 1,
94+
row: 2,
95+
});
9396
break;
9497
}
9598
}

0 commit comments

Comments
 (0)