Skip to content

Commit 009f1b2

Browse files
odeimaizodeimaiz
authored
🐛 [Frontend bugfix] Move side spacer to Resource Browser (#5919)
1 parent 0839f0b commit 009f1b2

File tree

3 files changed

+64
-64
lines changed

3 files changed

+64
-64
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,15 +53,15 @@ qx.Class.define("osparc.dashboard.DataBrowser", {
5353
icon: "@FontAwesome5Solid/sync-alt/14",
5454
allowGrowX: false
5555
});
56-
this._addToMainLayout(control);
56+
this._addToLayout(control);
5757
break;
5858
case "tree-folder-layout":
5959
control = new qx.ui.splitpane.Pane("horizontal");
6060
control.getChildControl("splitter").set({
6161
width: 2,
6262
backgroundColor: "scrollbar-passive"
6363
});
64-
this._addToMainLayout(control, {
64+
this._addToLayout(control, {
6565
flex: 1
6666
});
6767
break;
@@ -88,7 +88,7 @@ qx.Class.define("osparc.dashboard.DataBrowser", {
8888
break;
8989
case "actions-toolbar":
9090
control = new qx.ui.toolbar.ToolBar();
91-
this._addToMainLayout(control);
91+
this._addToLayout(control);
9292
break;
9393
}
9494

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

Lines changed: 56 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,47 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
3333

3434
this._showLoadingPage(this.tr("Starting") + " " + osparc.store.StaticInfo.getInstance().getDisplayName());
3535

36+
const padding = osparc.dashboard.Dashboard.PADDING;
37+
const leftColumnWidth = this.self().SIDE_SPACER_WIDTH;
38+
const emptyColumnMinWidth = 50;
39+
const spacing = 20;
40+
const mainLayoutsScroll = 8;
41+
42+
const mainLayoutWithSideSpacers = new qx.ui.container.Composite(new qx.ui.layout.HBox(spacing))
43+
this._addToMainLayout(mainLayoutWithSideSpacers);
44+
45+
this.__leftLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(10)).set({
46+
width: leftColumnWidth
47+
});
48+
mainLayoutWithSideSpacers.add(this.__leftLayout);
49+
50+
this.__centerLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
51+
mainLayoutWithSideSpacers.add(this.__centerLayout);
52+
53+
const rightColum = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
54+
mainLayoutWithSideSpacers.add(rightColum, {
55+
flex: 1
56+
});
57+
58+
const itemWidth = osparc.dashboard.GridButtonBase.ITEM_WIDTH + osparc.dashboard.GridButtonBase.SPACING;
59+
this.__centerLayout.setMinWidth(this.self().MIN_GRID_CARDS_PER_ROW * itemWidth + mainLayoutsScroll);
60+
const fitResourceCards = () => {
61+
const w = document.documentElement.clientWidth;
62+
const nStudies = Math.floor((w - 2*padding - 2*spacing - leftColumnWidth - emptyColumnMinWidth) / itemWidth);
63+
const newWidth = nStudies * itemWidth + 8;
64+
if (newWidth > this.__centerLayout.getMinWidth()) {
65+
this.__centerLayout.setWidth(newWidth);
66+
} else {
67+
this.__centerLayout.setWidth(this.__centerLayout.getMinWidth());
68+
}
69+
70+
const compactVersion = w < this.__centerLayout.getMinWidth() + leftColumnWidth + emptyColumnMinWidth;
71+
this.__leftLayout.setVisibility(compactVersion ? "excluded" : "visible");
72+
rightColum.setVisibility(compactVersion ? "excluded" : "visible");
73+
};
74+
fitResourceCards();
75+
window.addEventListener("resize", () => fitResourceCards());
76+
3677
this.addListener("appear", () => this._moreResourcesRequired());
3778
},
3879

@@ -42,6 +83,8 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
4283

4384
statics: {
4485
PAGINATED_STUDIES: 10,
86+
MIN_GRID_CARDS_PER_ROW: 4,
87+
SIDE_SPACER_WIDTH: 180,
4588

4689
checkLoggedIn: function() {
4790
const isLogged = osparc.auth.Manager.getInstance().isLoggedIn();
@@ -165,6 +208,8 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
165208
},
166209

167210
members: {
211+
__leftLayout: null,
212+
__centerLayout: null,
168213
_resourceType: null,
169214
_resourcesList: null,
170215
_topBar: null,
@@ -182,7 +227,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
182227
scroll.getChildControl("pane").addListener("scrollY", () => this._moreResourcesRequired(), this);
183228
control = this._createLayout();
184229
scroll.add(control);
185-
this._addToMainLayout(scroll, {
230+
this._addToLayout(scroll, {
186231
flex: 1
187232
});
188233
break;
@@ -191,6 +236,10 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
191236
return control || this.base(arguments, id);
192237
},
193238

239+
_addToLayout: function(widget, props = {}) {
240+
this.__centerLayout.add(widget, props)
241+
},
242+
194243
initResources: function() {
195244
throw new Error("Abstract method called!");
196245
},
@@ -205,15 +254,15 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
205254

206255
_createResourcesLayout: function() {
207256
const topBar = this.__createTopBar();
208-
this._addToMainLayout(topBar);
257+
this._addToLayout(topBar);
209258

210259
const toolbar = this._toolbar = new qx.ui.toolbar.ToolBar().set({
211260
backgroundColor: "transparent",
212261
spacing: 10,
213262
paddingRight: 8,
214263
alignY: "middle"
215264
});
216-
this._addToMainLayout(toolbar);
265+
this._addToLayout(toolbar);
217266

218267
this.__viewModeLayout = new qx.ui.toolbar.Part();
219268

@@ -224,7 +273,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
224273
resourcesContainer.addListener("publishTemplate", e => this.fireDataEvent("publishTemplate", e.getData()));
225274
resourcesContainer.addListener("tagClicked", e => this._searchBarFilter.addTagActiveFilter(e.getData()));
226275
resourcesContainer.addListener("emptyStudyClicked", e => this._deleteResourceRequested(e.getData()));
227-
this._addToMainLayout(resourcesContainer);
276+
this._addToLayout(resourcesContainer);
228277
},
229278

230279
__createTopBar: function() {
@@ -321,8 +370,8 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
321370
_addResourceFilter: function() {
322371
const resourceFilter = new osparc.dashboard.ResourceFilter(this._resourceType).set({
323372
marginTop: osparc.dashboard.SearchBarFilter.HEIGHT + 10, // aligned with toolbar buttons: search bar + spacing
324-
maxWidth: osparc.ui.basic.LoadingPageHandler.SIDE_SPACER_WIDTH,
325-
width: osparc.ui.basic.LoadingPageHandler.SIDE_SPACER_WIDTH
373+
maxWidth: this.self().SIDE_SPACER_WIDTH,
374+
width: this.self().SIDE_SPACER_WIDTH
326375
});
327376

328377
resourceFilter.addListener("changeSharedWith", e => {
@@ -340,7 +389,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
340389
resourceFilter.filterChanged(filterData);
341390
});
342391

343-
this._addToLeftColumn(resourceFilter);
392+
this.__leftLayout.add(resourceFilter);
344393
},
345394

346395
/**

‎services/static-webserver/client/source/class/osparc/ui/basic/LoadingPageHandler.js‎

Lines changed: 5 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -35,59 +35,14 @@ qx.Class.define("osparc.ui.basic.LoadingPageHandler", {
3535
this._loadingPage = new osparc.ui.message.Loading();
3636
stack.add(this._loadingPage);
3737

38-
const padding = osparc.dashboard.Dashboard.PADDING;
39-
const leftColumnWidth = this.self().SIDE_SPACER_WIDTH;
40-
const emptyColumnMinWidth = 50;
41-
const spacing = 20;
42-
const mainLayoutsScroll = 8;
43-
44-
this.__mainLayoutWithSides = new qx.ui.container.Composite(new qx.ui.layout.HBox(spacing))
45-
stack.add(this.__mainLayoutWithSides);
46-
47-
this.__leftColum = new qx.ui.container.Composite(new qx.ui.layout.VBox(10)).set({
48-
width: leftColumnWidth
49-
});
50-
this.__mainLayoutWithSides.add(this.__leftColum);
51-
52-
this._mainLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
53-
this.__mainLayoutWithSides.add(this._mainLayout);
54-
55-
const rightColum = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
56-
this.__mainLayoutWithSides.add(rightColum, {
57-
flex: 1
58-
});
59-
60-
const itemWidth = osparc.dashboard.GridButtonBase.ITEM_WIDTH + osparc.dashboard.GridButtonBase.SPACING;
61-
this._mainLayout.setMinWidth(this.self().MIN_STUDIES_PER_ROW * itemWidth + mainLayoutsScroll);
62-
const fitResourceCards = () => {
63-
const w = document.documentElement.clientWidth;
64-
const nStudies = Math.floor((w - 2*padding - 2*spacing - leftColumnWidth - emptyColumnMinWidth) / itemWidth);
65-
const newWidth = nStudies * itemWidth + 8;
66-
if (newWidth > this._mainLayout.getMinWidth()) {
67-
this._mainLayout.setWidth(newWidth);
68-
} else {
69-
this._mainLayout.setWidth(this._mainLayout.getMinWidth());
70-
}
71-
72-
const compactVersion = w < this._mainLayout.getMinWidth() + leftColumnWidth + emptyColumnMinWidth;
73-
this.__leftColum.setVisibility(compactVersion ? "excluded" : "visible");
74-
rightColum.setVisibility(compactVersion ? "excluded" : "visible");
75-
};
76-
fitResourceCards();
77-
window.addEventListener("resize", () => fitResourceCards());
78-
},
79-
80-
statics: {
81-
MIN_STUDIES_PER_ROW: 4,
82-
SIDE_SPACER_WIDTH: 180
38+
this.__mainLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox())
39+
stack.add(this.__mainLayout);
8340
},
8441

8542
members: {
8643
__stack: null,
8744
_loadingPage: null,
88-
__mainLayoutWithSides: null,
89-
__leftColum: null,
90-
_mainLayout: null,
45+
__mainLayout: null,
9146

9247
_showLoadingPage: function(label) {
9348
if (label) {
@@ -97,19 +52,15 @@ qx.Class.define("osparc.ui.basic.LoadingPageHandler", {
9752
},
9853

9954
_showMainLayout: function() {
100-
this.__stack.setSelection([this.__mainLayoutWithSides]);
55+
this.__stack.setSelection([this.__mainLayout]);
10156
},
10257

10358
_hideLoadingPage: function() {
10459
this._showMainLayout();
10560
},
10661

107-
_addToLeftColumn: function(widget, props = {}) {
108-
this.__leftColum.add(widget, props);
109-
},
110-
11162
_addToMainLayout: function(widget, props = {}) {
112-
this._mainLayout.add(widget, props);
63+
this.__mainLayout.add(widget, props);
11364
}
11465
}
11566
});

0 commit comments

Comments
 (0)