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;

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

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,16 @@ qx.Class.define("osparc.dashboard.ServiceBrowser", {
3232
this.__sortBy = osparc.service.SortServicesButtons.DefaultSorting;
3333
},
3434

35+
properties: {
36+
multiSelection: {
37+
check: "Boolean",
38+
init: false,
39+
nullable: false,
40+
event: "changeMultiSelection",
41+
apply: "__applyMultiSelection"
42+
}
43+
},
44+
3545
members: {
3646
__servicesAll: null,
3747
__sortBy: null,
@@ -105,6 +115,7 @@ qx.Class.define("osparc.dashboard.ServiceBrowser", {
105115
this._resourcesContainer.setResourcesToList(this._resourcesList);
106116
const cards = this._resourcesContainer.reloadCards("servicesList");
107117
cards.forEach(card => {
118+
card.setMultiSelectionMode(this.getMultiSelection());
108119
card.addListener("execute", () => this.__itemClicked(card), this);
109120
this._populateCardMenu(card);
110121
});
@@ -166,6 +177,7 @@ qx.Class.define("osparc.dashboard.ServiceBrowser", {
166177

167178
__addNewServiceButtons: function() {
168179
const platformName = osparc.store.StaticInfo.getInstance().getPlatformName();
180+
const hasRights = osparc.data.Permissions.getInstance().canDo("studies.template.create.productAll");
169181
if (platformName === "dev") {
170182
const testDataButton = new qx.ui.form.Button(this.tr("Test with data"), "@FontAwesome5Solid/plus-circle/14");
171183
testDataButton.addListener("execute", () => {
@@ -178,21 +190,26 @@ qx.Class.define("osparc.dashboard.ServiceBrowser", {
178190
}
179191

180192
const addServiceButton = new qx.ui.form.Button(this.tr("Submit new service"), "@FontAwesome5Solid/plus-circle/14");
193+
addServiceButton.set({
194+
appearance: "form-button-outlined",
195+
visibility: hasRights ? "visible" : "excluded"
196+
});
181197
addServiceButton.addListener("execute", () => this.__displayServiceSubmissionForm());
182198
this._toolbar.add(addServiceButton);
183199
},
184200

185201
__addSortingButtons: function() {
186202
const containerSortButtons = new osparc.service.SortServicesButtons();
203+
containerSortButtons.set({
204+
appearance: "form-button-outlined"
205+
});
187206
containerSortButtons.addListener("sortBy", e => {
188207
this.__sortBy = e.getData();
189208
this.__setResourcesToList(this._resourcesList);
190209
}, this);
191210
this._toolbar.add(containerSortButtons);
192211
},
193-
// LAYOUT //
194212

195-
// MENU //
196213
_populateCardMenu: function(card) {
197214
const menu = card.getMenu();
198215
const serviceData = card.getResourceData();

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -581,6 +581,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
581581
this._resourcesContainer.addListener("changeSelection", e => {
582582
const selection = e.getData();
583583
studiesDeleteButton.set({
584+
appearance: "danger-button",
584585
visibility: selection.length ? "visible" : "excluded",
585586
label: selection.length > 1 ? this.tr("Delete selected")+" ("+selection.length+")" : this.tr("Delete")
586587
});
@@ -593,6 +594,9 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
593594

594595
__addShowSharedWithButton: function() {
595596
const sharedWithButton = new osparc.dashboard.SharedWithMenuButton("study");
597+
sharedWithButton.set({
598+
appearance: "form-button-outlined"
599+
});
596600
osparc.utils.Utils.setIdToWidget(sharedWithButton, "sharedWithButton");
597601

598602
sharedWithButton.addListener("sharedWith", e => {
@@ -626,6 +630,9 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
626630

627631
__createImportButton: function() {
628632
const importButton = new qx.ui.form.Button(this.tr("Import"));
633+
importButton.set({
634+
appearance: "form-button-outlined"
635+
});
629636
importButton.addListener("execute", () => {
630637
const importStudy = new osparc.study.Import();
631638
const win = osparc.ui.window.Window.popUpInWindow(importStudy, this.tr("Import Study"), 400, 125);
@@ -676,6 +683,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
676683

677684
__createSelectButton: function() {
678685
const selectButton = new qx.ui.form.ToggleButton().set({
686+
appearance: "form-button-outlined",
679687
marginRight: 8
680688
});
681689
selectButton.bind("value", this, "multiSelection");
@@ -949,6 +957,9 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
949957

950958
__getDeleteStudyMenuButton: function(studyData) {
951959
const deleteButton = new qx.ui.menu.Button(this.tr("Delete"));
960+
deleteButton.set({
961+
appearance: "form-button-outlined"
962+
});
952963
osparc.utils.Utils.setIdToWidget(deleteButton, "studyItemMenuDelete");
953964
deleteButton.addListener("execute", () => this.__deleteStudyRequested(studyData), this);
954965
return deleteButton;

0 commit comments

Comments
 (0)