Skip to content

Commit f01b218

Browse files
odeimaizmrnicegyu11
odeimaiz
authored and
mrnicegyu11
committed
🎨 [Frontend] Unify border-radius (ITISFoundation#6451)
1 parent b6ca20a commit f01b218

File tree

15 files changed

+62
-224
lines changed

15 files changed

+62
-224
lines changed

‎services/static-webserver/client/source/class/osparc/announcement/AnnouncementUIFactory.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,8 @@ qx.Class.define("osparc.announcement.AnnouncementUIFactory", {
3636
alignX: "center",
3737
padding: 12,
3838
allowGrowX: true,
39-
maxWidth: 300
40-
});
41-
loginAnnouncement.getContentElement().setStyles({
42-
"border-radius": "8px"
39+
maxWidth: osparc.auth.core.BaseAuthPage.FORM_WIDTH,
40+
decorator: "rounded",
4341
});
4442

4543
if (title) {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ qx.Class.define("osparc.dashboard.ListButtonBase", {
7575
});
7676
control.getChildControl("image").set({
7777
anonymous: true,
78-
decorator: "rounded"
78+
decorator: "rounded",
7979
});
8080
this._add(control, {
8181
row: 0,

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,8 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
2828
this.set({
2929
backgroundColor: "input_background",
3030
paddingLeft: 6,
31-
height: this.self().HEIGHT
32-
});
33-
this.getContentElement().setStyles({
34-
"border-radius": "5px"
31+
height: this.self().HEIGHT,
32+
decorator: "rounded",
3533
});
3634

3735
this.__buildLayout();

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -91,10 +91,8 @@ qx.Class.define("osparc.dashboard.WorkspaceHeader", {
9191
alignY: "middle",
9292
alignX: "center",
9393
allowGrowX: true,
94-
allowGrowY: true
95-
});
96-
control.getContentElement().setStyles({
97-
"border-radius": "4px"
94+
allowGrowY: true,
95+
decorator: "rounded",
9896
});
9997
this._add(control);
10098
break;

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,7 @@ qx.Class.define("osparc.dashboard.WorkspacesAndFoldersTreeItem", {
2323

2424
this.set({
2525
indent: 12, // defaults to 19,
26-
});
27-
28-
this.getContentElement().setStyles({
29-
"border-radius": "8px"
26+
decorator: "rounded",
3027
});
3128

3229
this.set({

‎services/static-webserver/client/source/class/osparc/desktop/credits/CreditsServiceListItem.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,8 @@ qx.Class.define("osparc.desktop.credits.CreditsServiceListItem", {
8585
minHeight: 32,
8686
minWidth: 32
8787
});
88-
control.getChildControl("image").getContentElement().setStyles({
89-
"border-radius": "4px"
88+
control.getChildControl("image").set({
89+
decorator: "rounded",
9090
});
9191
this._add(control, this.self().GRID.ICON);
9292
break;

‎services/static-webserver/client/source/class/osparc/info/CommentAdd.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,15 +65,13 @@ qx.Class.define("osparc.info.CommentAdd", {
6565
allowShrinkX: true,
6666
allowShrinkY: true,
6767
maxWidth: 32,
68-
maxHeight: 32
68+
maxHeight: 32,
69+
decorator: "rounded",
6970
});
7071
const userEmail = osparc.auth.Data.getInstance().getEmail();
7172
control.set({
7273
source: osparc.utils.Avatar.getUrl(userEmail, 32)
7374
});
74-
control.getContentElement().setStyles({
75-
"border-radius": "8px"
76-
});
7775
const layout = this.getChildControl("add-comment-layout");
7876
layout.add(control, {
7977
row: 0,

‎services/static-webserver/client/source/class/osparc/info/CommentUI.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,8 @@ qx.Class.define("osparc.info.CommentUI", {
6060
control = new qx.ui.basic.Image().set({
6161
scale: true,
6262
maxWidth: 32,
63-
maxHeight: 32
64-
});
65-
control.getContentElement().setStyles({
66-
"border-radius": "8px"
63+
maxHeight: 32,
64+
decorator: "rounded",
6765
});
6866
this.getChildControl("meta-data-grid").add(control, {
6967
row: 0,

‎services/static-webserver/client/source/class/osparc/notification/NotificationsContainer.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@ qx.Class.define("osparc.notification.NotificationsContainer", {
2727
zIndex: osparc.utils.Utils.FLOATING_Z_INDEX,
2828
maxWidth: osparc.notification.NotificationUI.MAX_WIDTH,
2929
maxHeight: 250,
30-
backgroundColor: "background-main-3"
30+
backgroundColor: "background-main-3",
31+
decorator: "rounded",
3132
});
3233
osparc.utils.Utils.setIdToWidget(this, "notificationsContainer");
3334

‎services/static-webserver/client/source/class/osparc/study/PricingUnit.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,8 @@ qx.Class.define("osparc.study.PricingUnit", {
2323

2424
this.set({
2525
padding: 10,
26-
center: true
27-
});
28-
this.getContentElement().setStyles({
29-
"border-radius": "4px"
26+
center: true,
27+
decorator: "rounded",
3028
});
3129

3230
this.setUnitData(new osparc.pricing.UnitData(pricingUnit));

‎services/static-webserver/client/source/class/osparc/theme/Decoration.js

Lines changed: 42 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,27 @@ qx.Theme.define("osparc.theme.Decoration", {
2020
extend: osparc.theme.common.Decoration,
2121

2222
decorations: {
23+
"rounded": {
24+
style: {
25+
radius: 4
26+
}
27+
},
28+
29+
"border-simple": {
30+
include: "border",
31+
style: {
32+
radius: 4
33+
}
34+
},
35+
36+
"no-border": {
37+
style: {
38+
radius: 4,
39+
width: 1,
40+
color: "transparent"
41+
}
42+
},
43+
2344
"material-button-invalid": {},
2445
"material-button": {
2546
style: {
@@ -35,18 +56,12 @@ qx.Theme.define("osparc.theme.Decoration", {
3556
"indicator-border": {
3657
include: "material-button",
3758
style: {
38-
radius: 2,
59+
radius: 4,
3960
width: 1,
4061
color: "text"
4162
}
4263
},
4364

44-
"rounded": {
45-
style: {
46-
radius: 4
47-
}
48-
},
49-
5065
"form-input": {
5166
style: {
5267
radius: [4, 4, 0, 0],
@@ -128,7 +143,7 @@ qx.Theme.define("osparc.theme.Decoration", {
128143
shadowBlurRadius: 0,
129144
shadowLength: 0,
130145
width: 0,
131-
radius: 3,
146+
radius: 4,
132147
transitionProperty: "opacity",
133148
transitionDuration: "0.05s",
134149
transitionTimingFunction: "ease-in"
@@ -154,7 +169,7 @@ qx.Theme.define("osparc.theme.Decoration", {
154169
"service-window": {
155170
include: "window",
156171
style: {
157-
radius: 3,
172+
radius: 4,
158173
width: 1
159174
}
160175
},
@@ -182,7 +197,7 @@ qx.Theme.define("osparc.theme.Decoration", {
182197

183198
"flash": {
184199
style: {
185-
radius: 3,
200+
radius: 4,
186201
transitionProperty: "top",
187202
transitionDuration: "0.2s",
188203
transitionTimingFunction: "ease-in"
@@ -191,6 +206,7 @@ qx.Theme.define("osparc.theme.Decoration", {
191206

192207
"flash-message": {
193208
style: {
209+
radius: 4,
194210
width: 1,
195211
style: "solid"
196212
}
@@ -226,7 +242,7 @@ qx.Theme.define("osparc.theme.Decoration", {
226242

227243
"flash-badge": {
228244
style: {
229-
radius: 5
245+
radius: 4
230246
}
231247
},
232248

@@ -238,21 +254,6 @@ qx.Theme.define("osparc.theme.Decoration", {
238254
}
239255
},
240256

241-
"border-simple": {
242-
include: "border",
243-
style: {
244-
radius: 4
245-
}
246-
},
247-
248-
"no-border": {
249-
style: {
250-
radius: 4,
251-
width: 1,
252-
color: "transparent"
253-
}
254-
},
255-
256257
"no-border-2": {
257258
style: {
258259
width: 0
@@ -297,27 +298,27 @@ qx.Theme.define("osparc.theme.Decoration", {
297298
"border-editable": {
298299
style: {
299300
width: 1,
300-
radius: 3,
301+
radius: 4,
301302
color: "text-disabled"
302303
}
303304
},
304305

305306
"hint": {
306307
style: {
307-
radius: 3
308+
radius: 4
308309
}
309310
},
310311

311312
"chip": {
312313
style: {
313-
radius: 9
314+
radius: 4
314315
}
315316
},
316317

317318
"chip-button": {
318319
style: {
319320
width: 1,
320-
radius: 6,
321+
radius: 4,
321322
color: "text",
322323
backgroundColor: "transparent"
323324
}
@@ -326,7 +327,7 @@ qx.Theme.define("osparc.theme.Decoration", {
326327
"filter-toggle-button": {
327328
style: {
328329
width: 1,
329-
radius: 8,
330+
radius: 4,
330331
color: "transparent"
331332
}
332333
},
@@ -340,7 +341,7 @@ qx.Theme.define("osparc.theme.Decoration", {
340341

341342
"pb-listitem": {
342343
style: {
343-
radius: 5
344+
radius: 4
344345
}
345346
},
346347

@@ -358,12 +359,12 @@ qx.Theme.define("osparc.theme.Decoration", {
358359

359360
"tag": {
360361
style: {
361-
radius: 2
362+
radius: 4
362363
}
363364
},
364365
"tagitem": {
365366
style: {
366-
radius: 2
367+
radius: 4
367368
}
368369
},
369370
"tagitem-colorbutton": {
@@ -400,15 +401,15 @@ qx.Theme.define("osparc.theme.Decoration", {
400401
style: "solid",
401402
width: [0, 0, 2, 0],
402403
color: "transparent",
403-
radius: [3, 3, 0, 0]
404+
radius: [4, 4, 0, 0]
404405
}
405406
},
406407
"tab-button-selected": {
407408
style: {
408409
style: "solid",
409410
width: [0, 0, 2, 0],
410411
color: "default-button-focus",
411-
radius: [3, 3, 0, 0]
412+
radius: [4, 4, 0, 0]
412413
}
413414
},
414415

@@ -419,7 +420,7 @@ qx.Theme.define("osparc.theme.Decoration", {
419420
style: "solid",
420421
width: 1,
421422
color: "default-button",
422-
radius: 5,
423+
radius: 4,
423424
backgroundColor: "default-button"
424425
}
425426
},
@@ -428,7 +429,7 @@ qx.Theme.define("osparc.theme.Decoration", {
428429
style: {
429430
style: "solid",
430431
width: 1,
431-
radius: 5,
432+
radius: 4,
432433
color: "fab-background",
433434
backgroundColor: "fab-background",
434435
shadowSpreadRadius: 0,
@@ -512,7 +513,7 @@ qx.Theme.define("osparc.theme.Decoration", {
512513
include: "form-button-outlined",
513514
style: {
514515
width: [1, 1, 1, 1],
515-
radius: [0, 5, 5, 0]
516+
radius: [0, 4, 4, 0]
516517
}
517518
},
518519
"form-button-outlined-hovered-right": {
@@ -535,7 +536,7 @@ qx.Theme.define("osparc.theme.Decoration", {
535536
include: "form-button-outlined",
536537
style: {
537538
width: [1, 0, 1, 1],
538-
radius: [5, 0, 0, 5]
539+
radius: [4, 0, 0, 4]
539540
}
540541
},
541542
"form-button-outlined-hovered-left": {
@@ -652,7 +653,7 @@ qx.Theme.define("osparc.theme.Decoration", {
652653
*/
653654
"appmotion-buy-credits-input": {
654655
style: {
655-
radius: 8
656+
radius: 4
656657
}
657658
}
658659
}

‎services/static-webserver/client/source/class/osparc/tours/Step.js

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,6 @@ qx.Class.define("osparc.tours.Step", {
2525

2626
const hintContainer = this.getChildControl("hint-container");
2727
hintContainer.setPadding(15);
28-
hintContainer.getContentElement().setStyles({
29-
"border-radius": "8px"
30-
});
3128

3229
this.getChildControl("title");
3330
this.getChildControl("message");

0 commit comments

Comments
 (0)