Skip to content

Commit 09dd712

Browse files
jsaq007ignapas
jsaq007
and
ignapas
authored
🎨 UI updates - 🐛 bug fixes (#5111)
Co-authored-by: Ignacio Pascual <[email protected]>
1 parent 1999416 commit 09dd712

25 files changed

+630
-196
lines changed

‎services/static-webserver/client/source/class/osparc/auth/core/BaseAuthPage.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,11 +89,12 @@ qx.Class.define("osparc.auth.core.BaseAuthPage", {
8989
const formItem = formItems[fieldKey];
9090
formItem.set({
9191
width: this.self().FORM_WIDTH,
92-
backgroundColor: "transparent"
92+
appearance: "form-input"
9393
});
9494
if (formItem.classname === "osparc.ui.form.PasswordField") {
9595
formItem.getChildControl("passwordField").set({
96-
backgroundColor: "transparent"
96+
backgroundColor: "transparent",
97+
appearance: "form-password"
9798
});
9899
}
99100
});

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -625,6 +625,8 @@ qx.Class.define("osparc.dashboard.CardBase", {
625625
_applyLocked: function(locked) {
626626
this.__enableCard(!locked);
627627
this.getChildControl("lock-status").set({
628+
appearance: "form-button-outlined/disabled",
629+
textColor: "text-disabled",
628630
opacity: 1.0,
629631
visibility: locked ? "visible" : "excluded"
630632
});

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

Lines changed: 35 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
3636
},
3737

3838
statics: {
39-
MENU_BTN_DIMENSIONS: 32
39+
MENU_BTN_DIMENSIONS: 24
4040
},
4141

4242
members: {
@@ -90,8 +90,12 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
9090
maxWidth: osparc.dashboard.GridButtonBase.ITEM_WIDTH - 2*osparc.dashboard.GridButtonBase.PADDING - this.self().MENU_BTN_DIMENSIONS
9191
});
9292
control = new qx.ui.form.MenuButton().set({
93+
appearance: "form-button-outlined",
9394
width: this.self().MENU_BTN_DIMENSIONS,
9495
height: this.self().MENU_BTN_DIMENSIONS,
96+
padding: [0, 8, 0, 8],
97+
alignX: "center",
98+
alignY: "middle",
9599
icon: "@FontAwesome5Solid/ellipsis-v/14",
96100
focusable: false
97101
});
@@ -101,22 +105,44 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
101105
});
102106
osparc.utils.Utils.setIdToWidget(control, "studyItemMenuButton");
103107
this._add(control, {
104-
top: 5,
105-
right: 5
108+
top: 8,
109+
right: 8
106110
});
107111
break;
108112
case "tick-unselected":
109-
control = new qx.ui.basic.Image("@FontAwesome5Solid/circle/16");
113+
control = new qx.ui.basic.Atom().set({
114+
appearance: "form-button-outlined",
115+
width: this.self().MENU_BTN_DIMENSIONS,
116+
height: this.self().MENU_BTN_DIMENSIONS,
117+
focusable: false
118+
});
119+
// make it circular
120+
control.getContentElement().setStyles({
121+
"border-radius": `${this.self().MENU_BTN_DIMENSIONS / 2}px`
122+
});
110123
this._add(control, {
111-
top: 4,
112-
right: 4
124+
top: 8,
125+
right: 8
113126
});
114127
break;
115128
case "tick-selected":
116-
control = new qx.ui.basic.Image("@FontAwesome5Solid/check-circle/16");
129+
control = new qx.ui.basic.Image().set({
130+
appearance: "form-button",
131+
width: this.self().MENU_BTN_DIMENSIONS,
132+
height: this.self().MENU_BTN_DIMENSIONS,
133+
padding: 5,
134+
alignX: "center",
135+
alignY: "middle",
136+
source: "@FontAwesome5Solid/check/12",
137+
focusable: false
138+
});
139+
// make it circular
140+
control.getContentElement().setStyles({
141+
"border-radius": `${this.self().MENU_BTN_DIMENSIONS / 2}px`
142+
});
117143
this._add(control, {
118-
top: 4,
119-
right: 4
144+
top: 8,
145+
right: 8
120146
});
121147
break;
122148
case "lock-status":

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@ qx.Class.define("osparc.dashboard.GridButtonNew", {
3232

3333
this.setPriority(osparc.dashboard.CardBase.CARD_PRIORITY.NEW);
3434

35+
this.set({
36+
appearance: "pb-new"
37+
});
38+
3539
this._buildLayout();
3640

3741
if (title) {

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,7 @@ qx.Class.define("osparc.dashboard.GroupedToggleButtonContainer", {
8686
gap: 10,
8787
padding: 10,
8888
paddingBottom: 5,
89-
allowGrowX: false,
90-
backgroundColor: "background-main-1"
89+
allowGrowX: false
9190
});
9291
control.getChildControl("icon").set({
9392
scale: true,
@@ -134,8 +133,7 @@ qx.Class.define("osparc.dashboard.GroupedToggleButtonContainer", {
134133
}
135134
contentContainer.set({
136135
padding: 5,
137-
allowGrowX: false,
138-
backgroundColor: "background-main-1"
136+
allowGrowX: false
139137
});
140138
this._addAt(contentContainer, 1, {
141139
flex: 1

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

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
3333
},
3434

3535
statics: {
36-
MENU_BTN_DIMENSIONS: 25
36+
MENU_BTN_DIMENSIONS: 24
3737
},
3838

3939
members: {
@@ -140,39 +140,59 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
140140
});
141141
break;
142142
case "menu-selection-stack":
143-
control = new qx.ui.container.Stack().set({
144-
minWidth: this.self().MENU_BTN_DIMENSIONS,
145-
minHeight: this.self().MENU_BTN_DIMENSIONS,
143+
control = new qx.ui.container.Stack();
144+
control.set({
145+
alignX: "center",
146146
alignY: "middle"
147147
});
148+
osparc.utils.Utils.setIdToWidget(control, "studyItemMenuButton");
148149
this._add(control, {
149150
row: 0,
150151
column: osparc.dashboard.ListButtonBase.POS.OPTIONS
151152
});
152153
break;
153154
case "tick-unselected": {
154155
const menuSelectionStack = this.getChildControl("menu-selection-stack");
155-
control = new qx.ui.basic.Image("@FontAwesome5Solid/circle/16");
156+
control = new qx.ui.basic.Atom().set({
157+
appearance: "form-button-outlined",
158+
width: this.self().MENU_BTN_DIMENSIONS,
159+
height: this.self().MENU_BTN_DIMENSIONS,
160+
focusable: false
161+
});
162+
control.getContentElement().setStyles({
163+
"border-radius": `${this.self().MENU_BTN_DIMENSIONS / 2}px`
164+
});
156165
menuSelectionStack.addAt(control, 1);
157166
break;
158167
}
159168
case "tick-selected": {
160169
const menuSelectionStack = this.getChildControl("menu-selection-stack");
161-
control = new qx.ui.basic.Image("@FontAwesome5Solid/check-circle/16");
170+
control = new qx.ui.basic.Image("@FontAwesome5Solid/check/12").set({
171+
appearance: "form-button-outlined",
172+
width: this.self().MENU_BTN_DIMENSIONS,
173+
height: this.self().MENU_BTN_DIMENSIONS,
174+
padding: [6, 5],
175+
focusable: false
176+
});
177+
control.getContentElement().setStyles({
178+
"border-radius": `${this.self().MENU_BTN_DIMENSIONS / 2}px`
179+
});
162180
menuSelectionStack.addAt(control, 2);
163181
break;
164182
}
165183
case "menu-button": {
166184
const menuSelectionStack = this.getChildControl("menu-selection-stack");
167185
control = new qx.ui.form.MenuButton().set({
168-
width: this.self().MENU_BTN_DIMENSIONS,
169-
height: this.self().MENU_BTN_DIMENSIONS,
186+
appearance: "form-button-outlined",
187+
padding: [0, 8],
188+
maxWidth: this.self().MENU_BTN_DIMENSIONS,
189+
maxHeight: this.self().MENU_BTN_DIMENSIONS,
170190
icon: "@FontAwesome5Solid/ellipsis-v/14",
171191
focusable: false
172192
});
173193
// make it circular
174194
control.getContentElement().setStyles({
175-
"border-radius": parseInt(this.self().MENU_BTN_DIMENSIONS/2) + "px"
195+
"border-radius": `${this.self().MENU_BTN_DIMENSIONS / 2}px`
176196
});
177197
osparc.utils.Utils.setIdToWidget(control, "studyItemMenuButton");
178198
menuSelectionStack.addAt(control, 0);

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@ qx.Class.define("osparc.dashboard.ListButtonNew", {
2929

3030
this.setPriority(osparc.dashboard.CardBase.CARD_PRIORITY.NEW);
3131

32+
this.set({
33+
appearance: "pb-new"
34+
});
35+
3236
this._buildLayout();
3337

3438
if (title) {

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,10 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
192192
font: "text-14"
193193
});
194194
const groupByButton = new qx.ui.form.MenuButton(this.tr("Group"), "@FontAwesome5Solid/chevron-down/10", groupByMenu);
195+
groupByButton.set({
196+
appearance: "form-button-outlined",
197+
marginRight: 14
198+
});
195199
osparc.utils.Utils.setIdToWidget(groupByButton, "groupByButton");
196200

197201
const groupOptions = new qx.ui.form.RadioGroup();

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

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
2323

2424
this._setLayout(new qx.ui.layout.VBox(10));
2525

26+
this.set({
27+
paddingBottom: 60
28+
});
29+
2630
this.__resourcesList = [];
2731

2832
const flatList = this.__flatList = new osparc.dashboard.ToggleButtonContainer();
@@ -189,6 +193,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
189193
const tags = resourceData.tags ? osparc.store.Store.getInstance().getTags().filter(tag => resourceData.tags.includes(tag.id)) : [];
190194
const card = this.getMode() === "grid" ? new osparc.dashboard.GridButtonItem() : new osparc.dashboard.ListButtonItem();
191195
card.set({
196+
appearance: resourceData.type ? `pb-${resourceData.type}` : `pb-${resourceData.resourceType}`,
192197
resourceData: resourceData,
193198
tags
194199
});
@@ -210,20 +215,6 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
210215
"tagClicked",
211216
"emptyStudyClicked"
212217
].forEach(eName => card.addListener(eName, e => this.fireDataEvent(eName, e.getData())));
213-
214-
if (resourceData.resourceType === "study") {
215-
card.setBackgroundColor("info_bg");
216-
} else if (resourceData.resourceType === "service") {
217-
if (resourceData.type === "computational") {
218-
card.setBackgroundColor("info_bg");
219-
} else if (resourceData.type === "dynamic") {
220-
card.setBackgroundColor("success_bg");
221-
} else {
222-
card.setBackgroundColor("success_bg");
223-
}
224-
} else {
225-
card.setBackgroundColor("warning_bg");
226-
}
227218
return card;
228219
},
229220

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -107,9 +107,9 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
107107
break;
108108
case "reset-button":
109109
control = new qx.ui.toolbar.Button(null, "@MaterialIcons/close/12").set({
110-
backgroundColor: "transparent",
110+
appearance: "text-button",
111111
paddingLeft: 0,
112-
paddingRight: 2,
112+
paddingRight: 10,
113113
alignY: "middle",
114114
opacity: 0.7
115115
});
@@ -274,8 +274,7 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
274274
alignY: "middle",
275275
toolTipText: chipLabel,
276276
maxHeight: 26,
277-
maxWidth: 210,
278-
backgroundColor: "background-main-1"
277+
maxWidth: 210
279278
});
280279
chipButton.type = chipType;
281280
chipButton.id = chipId;

0 commit comments

Comments
 (0)