Skip to content

Commit 1e4c4a0

Browse files
odeimaizodeimaiz
committed
refactor
1 parent b0b9b36 commit 1e4c4a0

File tree

2 files changed

+46
-77
lines changed

2 files changed

+46
-77
lines changed

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

Lines changed: 35 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -51,27 +51,34 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
5151
TITLE: {
5252
row: 0,
5353
column: 0,
54-
colSpan: 4
5554
},
56-
THUMBNAIL: {
57-
row: 2,
55+
BODY: {
56+
row: 1,
5857
column: 0,
59-
colSpan: 4
60-
},
61-
AVATAR_GROUP: {
62-
row: 3,
63-
column: 0
64-
},
65-
TAGS: {
66-
row: 4,
67-
column: 0
6858
},
6959
FOOTER: {
70-
row: 5,
60+
row: 2,
7161
column: 0,
72-
colSpan: 4
7362
}
7463
},
64+
HPOS: {
65+
ICON: {
66+
column: 0,
67+
row: 0,
68+
},
69+
TITLE: {
70+
column: 1,
71+
row: 0,
72+
},
73+
SUBTITLE_ICON: {
74+
column: 0,
75+
row: 1,
76+
},
77+
SUBTITLE_TEXT: {
78+
column: 1,
79+
row: 1,
80+
},
81+
},
7582
FPOS: {
7683
MODIFIED: {
7784
row: 0,
@@ -97,7 +104,7 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
97104
row: 1,
98105
column: 2,
99106
}
100-
}
107+
},
101108
},
102109

103110
events: {
@@ -114,19 +121,21 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
114121
case "main-layout": {
115122
const grid = new qx.ui.layout.Grid();
116123
grid.setSpacing(this.self().SPACING_IN);
117-
grid.setRowFlex(2, 1);
124+
grid.setRowFlex(this.self().POS.BODY.row, 1);
118125
grid.setColumnFlex(0, 1);
119126

120127
control = new qx.ui.container.Composite().set({
128+
minWidth: this.self().ITEM_WIDTH,
129+
minHeight: this.self().ITEM_HEIGHT,
121130
maxWidth: this.self().ITEM_WIDTH,
122-
maxHeight: this.self().ITEM_HEIGHT
131+
maxHeight: this.self().ITEM_HEIGHT,
123132
});
124133
control.setLayout(grid);
125134
const header = this.getChildControl("header");
126135
const body = this.getChildControl("body");
127136
const footer = this.getChildControl("footer");
128137
control.add(header, this.self().POS.TITLE);
129-
control.add(body, this.self().POS.THUMBNAIL);
138+
control.add(body, this.self().POS.BODY);
130139
control.add(footer, this.self().POS.FOOTER);
131140
this._add(control, {
132141
top: 0,
@@ -140,8 +149,8 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
140149
const hGrid = new qx.ui.layout.Grid().set({
141150
spacing: 6,
142151
});
143-
hGrid.setRowFlex(0, 1);
144-
hGrid.setColumnFlex(1, 1);
152+
hGrid.setRowFlex(this.self().HPOS.TITLE.row, 1);
153+
hGrid.setColumnFlex(this.self().HPOS.TITLE.column, 1);
145154
hGrid.setColumnAlign(0, "right", "middle");
146155
hGrid.setColumnAlign(1, "left", "middle");
147156
hGrid.setColumnAlign(2, "center", "middle");
@@ -157,21 +166,12 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
157166
break;
158167
}
159168
case "body":
160-
control = new qx.ui.container.Composite(new qx.ui.layout.VBox(5)).set({
161-
decorator: "main",
162-
allowGrowY: true,
163-
allowGrowX: true,
164-
allowShrinkX: true,
165-
padding: this.self().PADDING
166-
});
167-
control.getContentElement().setStyles({
168-
"border-width": 0
169-
});
169+
control = new qx.ui.container.Composite(new qx.ui.layout.VBox(6));
170170
break;
171171
case "footer": {
172172
const fGrid = new qx.ui.layout.Grid();
173173
fGrid.setSpacing(2);
174-
fGrid.setColumnFlex(0, 1);
174+
fGrid.setColumnFlex(this.self().FPOS.MODIFIED.row, 1);
175175
control = new qx.ui.container.Composite().set({
176176
backgroundColor: "background-card-overlay",
177177
padding: this.self().PADDING - 2,
@@ -184,10 +184,7 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
184184
case "icon": {
185185
control = osparc.dashboard.CardBase.createCardIcon();
186186
layout = this.getChildControl("header");
187-
layout.add(control, {
188-
column: 0,
189-
row: 0,
190-
});
187+
layout.add(control, this.self().HPOS.ICON);
191188
break;
192189
}
193190
case "title":
@@ -196,21 +193,15 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
196193
font: "text-14",
197194
});
198195
layout = this.getChildControl("header");
199-
layout.add(control, {
200-
column: 1,
201-
row: 0,
202-
});
196+
layout.add(control, this.self().HPOS.TITLE);
203197
break;
204198
case "subtitle-icon": {
205199
control = new qx.ui.basic.Image().set({
206200
allowGrowX: false,
207201
allowShrinkX: false,
208202
});
209203
layout = this.getChildControl("header");
210-
layout.add(control, {
211-
column: 0,
212-
row: 1,
213-
});
204+
layout.add(control, this.self().HPOS.SUBTITLE_ICON);
214205
break;
215206
}
216207
case "subtitle-text": {
@@ -225,10 +216,7 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
225216
allowGrowY: false
226217
});
227218
layout = this.getChildControl("header");
228-
layout.add(control, {
229-
column: 1,
230-
row: 1,
231-
});
219+
layout.add(control, this.self().HPOS.SUBTITLE_TEXT);
232220
break;
233221
}
234222
case "thumbnail": {
@@ -322,32 +310,6 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
322310
return;
323311
},
324312

325-
__fitThumbnailHeight: function() {
326-
const thumbnailLayout = this.getChildControl("thumbnail");
327-
let maxHeight = this.getHeight() - this.getPaddingTop() - this.getPaddingBottom() - 5;
328-
const checkThis = [
329-
"title",
330-
"body",
331-
"footer",
332-
"tags"
333-
];
334-
const layout = this.getChildControl("main-layout");
335-
// eslint-disable-next-line no-underscore-dangle
336-
layout._getChildren().forEach(child => {
337-
if (checkThis.includes(child.getSubcontrolId()) && child.getBounds()) {
338-
maxHeight -= (child.getBounds().height + this.self().SPACING_IN);
339-
if (child.getSubcontrolId() === "tags") {
340-
maxHeight -= 8;
341-
}
342-
}
343-
});
344-
// maxHeight -= 4; // for Roboto
345-
maxHeight -= 18; // for Manrope
346-
thumbnailLayout.getChildControl("image").setMaxHeight(maxHeight);
347-
thumbnailLayout.setMaxHeight(maxHeight);
348-
thumbnailLayout.recheckSize();
349-
},
350-
351313
/**
352314
* Event handler for the pointer over event.
353315
*/

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,12 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
3434
},
3535

3636
statics: {
37-
MENU_BTN_DIMENSIONS: 24
37+
MENU_BTN_DIMENSIONS: 24,
38+
39+
BODY_POS: {
40+
AVATAR_GROUP: 0,
41+
TAGS: 1,
42+
},
3843
},
3944

4045
members: {
@@ -86,16 +91,18 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
8691
control = new osparc.ui.basic.AvatarGroup(24, "left", maxWidth).set({
8792
paddingLeft: osparc.dashboard.GridButtonBase.PADDING,
8893
});
89-
this.getChildControl("main-layout").add(control, osparc.dashboard.GridButtonBase.POS.AVATAR_GROUP);
94+
this.getChildControl("body").addAt(control, this.self().BODY_POS.AVATAR_GROUP, {
95+
flex: 1,
96+
});
9097
break;
9198
}
9299
case "tags":
93-
control = new qx.ui.container.Composite(new qx.ui.layout.Flow(5, 3)).set({
100+
control = new qx.ui.container.Composite(new qx.ui.layout.Flow(4, 4)).set({
94101
anonymous: true,
95102
paddingLeft: osparc.dashboard.GridButtonBase.PADDING,
96103
paddingRight: osparc.dashboard.GridButtonBase.PADDING,
97104
});
98-
this.getChildControl("main-layout").add(control, osparc.dashboard.GridButtonBase.POS.TAGS);
105+
this.getChildControl("body").addAt(control, this.self().BODY_POS.TAGS);
99106
break;
100107
case "menu-selection-stack":
101108
control = new qx.ui.container.Stack();

0 commit comments

Comments
 (0)