Skip to content

Commit 3250473

Browse files
odeimaizodeimaiz
authored
✨ [Frontend] Enh: Adapt to paginated navigation and to new model (#7280)
1 parent 6834382 commit 3250473

21 files changed

+506
-704
lines changed

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

+7-9
Original file line numberDiff line numberDiff line change
@@ -530,22 +530,20 @@ qx.Class.define("osparc.dashboard.CardBase", {
530530

531531
__evalSelectedButton: function() {
532532
if (
533+
this.hasChildControl("menu-selection-stack") &&
533534
this.hasChildControl("menu-button") &&
534535
this.hasChildControl("tick-selected") &&
535536
this.hasChildControl("tick-unselected")
536537
) {
537-
const menuButton = this.getChildControl("menu-button");
538-
const tick = this.getChildControl("tick-selected");
539-
const untick = this.getChildControl("tick-unselected");
538+
const menuButtonStack = this.getChildControl("menu-selection-stack");
540539
if (this.isResourceType("study") && this.isMultiSelectionMode()) {
540+
const tick = this.getChildControl("tick-selected");
541+
const untick = this.getChildControl("tick-unselected");
541542
const selected = this.getSelected();
542-
menuButton.setVisibility("excluded");
543-
tick.setVisibility(selected ? "visible" : "excluded");
544-
untick.setVisibility(selected ? "excluded" : "visible");
543+
menuButtonStack.setSelection(selected ? [tick] : [untick]);
545544
} else {
546-
menuButton.setVisibility("visible");
547-
tick.setVisibility("excluded");
548-
untick.setVisibility("excluded");
545+
const menuButton = this.getChildControl("menu-button");
546+
menuButtonStack.setSelection([menuButton]);
549547
}
550548
}
551549
},

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

+8-8
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ qx.Class.define("osparc.dashboard.DataBrowser", {
6060

6161
this.addListener("appear", () => {
6262
const treeFolderView = this.getChildControl("tree-folder-view");
63-
treeFolderView.getChildControl("folder-tree").populateTree();
63+
treeFolderView.getChildControl("folder-tree").populateLocations();
6464
treeFolderView.getChildControl("folder-viewer").setFolder(treeFolderView.getChildControl("folder-tree").getModel());
6565
}, this);
6666
},
@@ -84,7 +84,7 @@ qx.Class.define("osparc.dashboard.DataBrowser", {
8484

8585
const foldersTree = treeFolderView.getChildControl("folder-tree");
8686
foldersTree.resetCache();
87-
foldersTree.populateTree();
87+
foldersTree.populateLocations();
8888

8989
const folderViewer = treeFolderView.getChildControl("folder-viewer");
9090
folderViewer.resetFolder();
@@ -94,26 +94,26 @@ qx.Class.define("osparc.dashboard.DataBrowser", {
9494
// After deleting a file, try to keep the user in the same folder.
9595
// If the folder doesn't longer exist, open the closest available parent
9696

97-
const path = fileMetadata["fileUuid"].split("/");
97+
const pathParts = fileMetadata["fileUuid"].split("/");
9898

9999
const treeFolderView = this.getChildControl("tree-folder-view");
100100
const foldersTree = treeFolderView.getChildControl("folder-tree");
101101
const folderViewer = treeFolderView.getChildControl("folder-viewer");
102102

103103
const openSameFolder = () => {
104104
// drop last, which is the file
105-
path.pop();
106-
treeFolderView.openPath(path);
105+
pathParts.pop();
106+
treeFolderView.openPath(pathParts);
107107
};
108108

109109
folderViewer.resetFolder();
110110
const locationId = fileMetadata["locationId"];
111-
const datasetId = path[0];
111+
const path = pathParts[0];
112112
foldersTree.resetCache();
113-
foldersTree.populateTree()
113+
foldersTree.populateLocations()
114114
.then(datasetPromises => {
115115
Promise.all(datasetPromises)
116-
.then(() => foldersTree.requestDatasetFiles(locationId, datasetId))
116+
.then(() => foldersTree.requestPathItems(locationId, path))
117117
.then(() => openSameFolder());
118118
})
119119
.catch(err => console.error(err));

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

+20-29
Original file line numberDiff line numberDiff line change
@@ -138,13 +138,16 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
138138
}
139139
case "header": {
140140
const hGrid = new qx.ui.layout.Grid().set({
141-
spacing: 0, // the sub-elements will take care of the padding
141+
spacing: 6,
142142
});
143143
hGrid.setColumnFlex(1, 1);
144-
hGrid.setRowAlign(0, "left", "middle");
144+
hGrid.setColumnAlign(0, "right", "middle");
145+
hGrid.setColumnAlign(1, "left", "middle");
146+
hGrid.setColumnAlign(2, "center", "middle");
145147
control = new qx.ui.container.Composite().set({
146148
backgroundColor: "background-card-overlay",
147-
padding: 0,
149+
paddingBottom: 6,
150+
paddingRight: 4,
148151
maxWidth: this.self().ITEM_WIDTH,
149152
maxHeight: this.self().ITEM_HEIGHT
150153
});
@@ -189,37 +192,23 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
189192
control = new qx.ui.basic.Label().set({
190193
textColor: "contrasted-text-light",
191194
font: "text-14",
192-
padding: this.self().TITLE_PADDING,
193-
maxWidth: this.self().ITEM_WIDTH,
194195
});
195196
layout = this.getChildControl("header");
196-
layout.addAt(control, 0, {
197+
layout.add(control, {
197198
column: 1,
198199
row: 0,
199200
});
200201
break;
201-
case "subtitle":
202-
control = new qx.ui.container.Composite(new qx.ui.layout.HBox(6)).set({
203-
anonymous: true,
204-
height: 20,
205-
padding: 6,
206-
paddingLeft: 20, // align with icon
202+
case "subtitle-icon": {
203+
control = new qx.ui.basic.Image().set({
204+
allowGrowX: false,
205+
allowShrinkX: false,
207206
});
208207
layout = this.getChildControl("header");
209-
layout.addAt(control, 0, {
208+
layout.add(control, {
210209
column: 0,
211210
row: 1,
212-
colSpan: 2,
213-
});
214-
break;
215-
case "subtitle-icon": {
216-
control = new qx.ui.basic.Image().set({
217-
alignY: "middle",
218-
allowGrowX: false,
219-
allowShrinkX: false
220211
});
221-
const subtitleLayout = this.getChildControl("subtitle");
222-
subtitleLayout.addAt(control, 0);
223212
break;
224213
}
225214
case "subtitle-text": {
@@ -233,9 +222,10 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
233222
font: "text-12",
234223
allowGrowY: false
235224
});
236-
const subtitleLayout = this.getChildControl("subtitle");
237-
subtitleLayout.addAt(control, 1, {
238-
flex: 1
225+
layout = this.getChildControl("header");
226+
layout.add(control, {
227+
column: 1,
228+
row: 1,
239229
});
240230
break;
241231
}
@@ -269,9 +259,10 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
269259
width: 13,
270260
margin: [0, 1]
271261
});
272-
layout = this.getChildControl("subtitle");
273-
layout.set({
274-
visibility: "visible"
262+
layout = this.getChildControl("header");
263+
layout.add(control, {
264+
column: 2,
265+
row: 1,
275266
});
276267
layout.addAt(control, 2);
277268
break;

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

+23-15
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,18 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
9191
layout = this.getChildControl("main-layout");
9292
layout.add(control, osparc.dashboard.GridButtonBase.POS.TAGS);
9393
break;
94-
case "menu-button":
94+
case "menu-selection-stack":
95+
control = new qx.ui.container.Stack();
96+
control.set({
97+
alignX: "center",
98+
alignY: "middle"
99+
});
100+
this.getChildControl("header").add(control, {
101+
column: 2,
102+
row: 0,
103+
});
104+
break;
105+
case "menu-button": {
95106
this.getChildControl("title").set({
96107
maxWidth: osparc.dashboard.GridButtonBase.ITEM_WIDTH - osparc.dashboard.CardBase.ICON_SIZE - this.self().MENU_BTN_DIMENSIONS - 2,
97108
});
@@ -110,12 +121,11 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
110121
"border-radius": `${this.self().MENU_BTN_DIMENSIONS / 2}px`
111122
});
112123
osparc.utils.Utils.setIdToWidget(control, "studyItemMenuButton");
113-
this._add(control, {
114-
top: 6,
115-
right: 6,
116-
});
124+
const menuSelectionStack = this.getChildControl("menu-selection-stack");
125+
menuSelectionStack.addAt(control, 0);
117126
break;
118-
case "tick-unselected":
127+
}
128+
case "tick-unselected": {
119129
control = new qx.ui.basic.Atom().set({
120130
appearance: "form-button-outlined",
121131
width: this.self().MENU_BTN_DIMENSIONS,
@@ -126,12 +136,11 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
126136
control.getContentElement().setStyles({
127137
"border-radius": `${this.self().MENU_BTN_DIMENSIONS / 2}px`
128138
});
129-
this._add(control, {
130-
top: 8,
131-
right: 8
132-
});
139+
const menuSelectionStack = this.getChildControl("menu-selection-stack");
140+
menuSelectionStack.addAt(control, 1);
133141
break;
134-
case "tick-selected":
142+
}
143+
case "tick-selected": {
135144
control = new qx.ui.basic.Image().set({
136145
appearance: "form-button",
137146
width: this.self().MENU_BTN_DIMENSIONS,
@@ -146,11 +155,10 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
146155
control.getContentElement().setStyles({
147156
"border-radius": `${this.self().MENU_BTN_DIMENSIONS / 2}px`
148157
});
149-
this._add(control, {
150-
top: 8,
151-
right: 8
152-
});
158+
const menuSelectionStack = this.getChildControl("menu-selection-stack");
159+
menuSelectionStack.addAt(control, 2);
153160
break;
161+
}
154162
case "lock-status":
155163
control = new osparc.ui.basic.Thumbnail();
156164
this._add(control, {

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

+20-20
Original file line numberDiff line numberDiff line change
@@ -132,8 +132,25 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
132132
column: osparc.dashboard.ListButtonBase.POS.OPTIONS
133133
});
134134
break;
135-
case "tick-unselected": {
135+
case "menu-button": {
136+
control = new qx.ui.form.MenuButton().set({
137+
appearance: "form-button-outlined",
138+
padding: [0, 8],
139+
maxWidth: this.self().MENU_BTN_DIMENSIONS,
140+
maxHeight: this.self().MENU_BTN_DIMENSIONS,
141+
icon: "@FontAwesome5Solid/ellipsis-v/14",
142+
focusable: false
143+
});
144+
// make it circular
145+
control.getContentElement().setStyles({
146+
"border-radius": `${this.self().MENU_BTN_DIMENSIONS / 2}px`
147+
});
148+
osparc.utils.Utils.setIdToWidget(control, "studyItemMenuButton");
136149
const menuSelectionStack = this.getChildControl("menu-selection-stack");
150+
menuSelectionStack.addAt(control, 0);
151+
break;
152+
}
153+
case "tick-unselected": {
137154
control = new qx.ui.basic.Atom().set({
138155
appearance: "form-button-outlined",
139156
width: this.self().MENU_BTN_DIMENSIONS,
@@ -143,11 +160,11 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
143160
control.getContentElement().setStyles({
144161
"border-radius": `${this.self().MENU_BTN_DIMENSIONS / 2}px`
145162
});
163+
const menuSelectionStack = this.getChildControl("menu-selection-stack");
146164
menuSelectionStack.addAt(control, 1);
147165
break;
148166
}
149167
case "tick-selected": {
150-
const menuSelectionStack = this.getChildControl("menu-selection-stack");
151168
control = new qx.ui.basic.Image("@FontAwesome5Solid/check/12").set({
152169
appearance: "form-button-outlined",
153170
width: this.self().MENU_BTN_DIMENSIONS,
@@ -158,25 +175,8 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
158175
control.getContentElement().setStyles({
159176
"border-radius": `${this.self().MENU_BTN_DIMENSIONS / 2}px`
160177
});
161-
menuSelectionStack.addAt(control, 2);
162-
break;
163-
}
164-
case "menu-button": {
165178
const menuSelectionStack = this.getChildControl("menu-selection-stack");
166-
control = new qx.ui.form.MenuButton().set({
167-
appearance: "form-button-outlined",
168-
padding: [0, 8],
169-
maxWidth: this.self().MENU_BTN_DIMENSIONS,
170-
maxHeight: this.self().MENU_BTN_DIMENSIONS,
171-
icon: "@FontAwesome5Solid/ellipsis-v/14",
172-
focusable: false
173-
});
174-
// make it circular
175-
control.getContentElement().setStyles({
176-
"border-radius": `${this.self().MENU_BTN_DIMENSIONS / 2}px`
177-
});
178-
osparc.utils.Utils.setIdToWidget(control, "studyItemMenuButton");
179-
menuSelectionStack.addAt(control, 0);
179+
menuSelectionStack.addAt(control, 2);
180180
break;
181181
}
182182
}

0 commit comments

Comments
 (0)