Skip to content

Commit 3022792

Browse files
odeimaizodeimaiz
committed
[skip ci] more refactoring
1 parent 4283d33 commit 3022792

File tree

2 files changed

+47
-53
lines changed

2 files changed

+47
-53
lines changed

‎services/static-webserver/client/source/class/osparc/ui/message/Loading.js‎

Lines changed: 36 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -31,19 +31,16 @@
3131
qx.Class.define("osparc.ui.message.Loading", {
3232
extend: qx.ui.core.Widget,
3333

34-
/**
35-
* Constructor for the Loading widget.
36-
*
37-
* @param {Boolean} showMaximizeButton
38-
*/
39-
construct: function(showMaximizeButton = false) {
34+
construct: function() {
4035
this.base(arguments);
41-
this._setLayout(new qx.ui.layout.HBox());
36+
this._setLayout(new qx.ui.layout.VBox());
4237

4338
this.set({
44-
alignX: "center"
39+
alignX: "center",
40+
alignY: "middle",
4541
});
46-
this.__buildLayout(showMaximizeButton);
42+
43+
this.__buildLayout();
4744
},
4845

4946
properties: {
@@ -77,7 +74,7 @@ qx.Class.define("osparc.ui.message.Loading", {
7774
showToolbar: {
7875
check: "Boolean",
7976
init: true,
80-
apply: "__applyShowToolbar"
77+
event: "changeShowToolbar",
8178
},
8279
},
8380

@@ -104,7 +101,6 @@ qx.Class.define("osparc.ui.message.Loading", {
104101
},
105102

106103
members: {
107-
__mainLayout: null,
108104
__thumbnail: null,
109105
__header: null,
110106
__messagesContainer: null,
@@ -116,21 +112,39 @@ qx.Class.define("osparc.ui.message.Loading", {
116112
this.__createMainLayout();
117113
},
118114

115+
__createMaximizeButton: function() {
116+
const maximize = false;
117+
const maxButton = this.__maxButton = osparc.widget.PersistentIframe.createToolbarButton(maximize).set({
118+
label: osparc.widget.PersistentIframe.getZoomLabel(maximize),
119+
icon: osparc.widget.PersistentIframe.getZoomIcon(maximize),
120+
});
121+
osparc.utils.Utils.setIdToWidget(maxButton, osparc.widget.PersistentIframe.getMaximizeWidgetId(maximize));
122+
maxButton.addListener("execute", () => this.maximizeIFrame(!this.hasState("maximized")), this);
123+
124+
const buttonsContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({
125+
alignX: "right",
126+
alignY: "middle"
127+
}));
128+
this.bind("showToolbar", buttonsContainer, "visibility", {
129+
converter: showToolbar => showToolbar ? "visible" : "excluded"
130+
});
131+
buttonsContainer.add(maxButton);
132+
this._add(buttonsContainer);
133+
},
134+
119135
__createMainLayout: function() {
120136
const layout = new qx.ui.layout.Grid(20, 20);
121137
layout.setColumnFlex(0, 1);
122-
const mainLayout = this.__mainLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({
138+
layout.setColumnAlign(0, "center", "middle");
139+
const mainLayout = new qx.ui.container.Composite(layout).set({
140+
maxWidth: 400,
123141
alignX: "center",
124-
alignY: "middle"
125-
})).set({
126-
width: 400,
127-
padding: 0
128142
});
129-
this._add(new qx.ui.core.Widget(), {
143+
this._add(new qx.ui.core.Spacer(), {
130144
flex: 1
131145
});
132146
this._add(mainLayout);
133-
this._add(new qx.ui.core.Widget(), {
147+
this._add(new qx.ui.core.Spacer(), {
134148
flex: 1
135149
});
136150

@@ -151,7 +165,7 @@ qx.Class.define("osparc.ui.message.Loading", {
151165
height: logoHeight
152166
});
153167
}
154-
mainLayout.addAt(thumbnail, {
168+
mainLayout.add(thumbnail, {
155169
column: 0,
156170
row: this.self().GRID_POS.LOGO
157171
});
@@ -171,23 +185,23 @@ qx.Class.define("osparc.ui.message.Loading", {
171185
});
172186
const icon = waitingHeader.getChildControl("icon");
173187
osparc.service.StatusUI.updateCircleAnimation(icon);
174-
mainLayout.addAt(waitingHeader, {
188+
mainLayout.add(waitingHeader, {
175189
column: 0,
176190
row: this.self().GRID_POS.WAITING
177191
});
178192

179193
const messages = this.__messagesContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox(10).set({
180194
alignX: "center"
181195
}));
182-
mainLayout.addAt(messages, {
196+
mainLayout.add(messages, {
183197
column: 0,
184198
row: this.self().GRID_POS.MESSAGES
185199
});
186200

187201
const extraWidgets = this.__extraWidgets = new qx.ui.container.Composite(new qx.ui.layout.VBox(10).set({
188202
alignX: "center"
189203
}));
190-
mainLayout.addAt(extraWidgets, {
204+
mainLayout.add(extraWidgets, {
191205
column: 0,
192206
row: this.self().GRID_POS.EXTRA_WIDGETS
193207
});
@@ -197,26 +211,6 @@ qx.Class.define("osparc.ui.message.Loading", {
197211
this.setToolbarHeight(show ? 25 : 0);
198212
},
199213

200-
__createMaximizeButton: function(showMaximizeButton) {
201-
const maximize = false;
202-
const maxButton = this.__maxButton = osparc.widget.PersistentIframe.createToolbarButton(maximize).set({
203-
label: osparc.widget.PersistentIframe.getZoomLabel(maximize),
204-
icon: osparc.widget.PersistentIframe.getZoomIcon(maximize),
205-
visibility: showMaximizeButton ? "visible" : "excluded"
206-
});
207-
osparc.utils.Utils.setIdToWidget(maxButton, osparc.widget.PersistentIframe.getMaximizeWidgetId(maximize));
208-
maxButton.addListener("execute", () => this.maximizeIFrame(!this.hasState("maximized")), this);
209-
210-
const maximizeLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox()).set({
211-
maxWidth: 100
212-
});
213-
maximizeLayout.add(maxButton);
214-
maximizeLayout.add(new qx.ui.core.Widget(), {
215-
flex: 1
216-
});
217-
this._add(maximizeLayout);
218-
},
219-
220214
__applyLogo: function(newLogo) {
221215
const productLogoPath = osparc.product.Utils.getLogoPath();
222216
if (newLogo !== productLogoPath) {

‎services/static-webserver/client/source/class/osparc/widget/PersistentIframe.js‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ qx.Class.define("osparc.widget.PersistentIframe", {
6868
showToolbar: {
6969
check: "Boolean",
7070
init: true,
71+
event: "changeShowToolbar",
7172
apply: "__applyShowToolbar"
7273
}
7374
},
@@ -84,7 +85,7 @@ qx.Class.define("osparc.widget.PersistentIframe", {
8485
members: {
8586
__iframe: null,
8687
__syncScheduled: null,
87-
__buttonContainer: null,
88+
__buttonsContainer: null,
8889
__diskUsageIndicator: null,
8990
__reloadButton: null,
9091
__zoomButton: null,
@@ -111,19 +112,19 @@ qx.Class.define("osparc.widget.PersistentIframe", {
111112
const host = window.location.host;
112113
iframeEl.setAttribute("allow", `clipboard-read; clipboard-write; from *.services.${host}`);
113114

114-
const buttonContainer = this.__buttonContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({
115+
const buttonsContainer = this.__buttonsContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({
115116
alignX: "right",
116117
alignY: "middle"
117118
}));
118-
this.bind("showToolbar", buttonContainer, "visibility", {
119+
this.bind("showToolbar", buttonsContainer, "visibility", {
119120
converter: showToolbar => showToolbar ? "visible" : "excluded"
120121
});
121122

122123
const diskUsageIndicator = this.__diskUsageIndicator = new osparc.workbench.DiskUsageIndicator();
123124
diskUsageIndicator.getChildControl("disk-indicator").set({
124125
margin: 0
125126
});
126-
buttonContainer.add(diskUsageIndicator);
127+
buttonsContainer.add(diskUsageIndicator);
127128

128129
const reloadButton = this.__reloadButton = this.self().createToolbarButton().set({
129130
label: this.tr("Reload"),
@@ -135,7 +136,7 @@ qx.Class.define("osparc.widget.PersistentIframe", {
135136
this.fireEvent("restart");
136137
}, this);
137138
osparc.utils.Utils.setIdToWidget(reloadButton, "iFrameRestartBtn");
138-
buttonContainer.add(reloadButton);
139+
buttonsContainer.add(reloadButton);
139140

140141
const zoomButton = this.__zoomButton = this.self().createToolbarButton().set({
141142
label: this.self().getZoomLabel(false),
@@ -145,9 +146,9 @@ qx.Class.define("osparc.widget.PersistentIframe", {
145146
zoomButton.addListener("execute", e => {
146147
this.maximizeIFrame(!this.hasState("maximized"));
147148
}, this);
148-
buttonContainer.add(zoomButton);
149+
buttonsContainer.add(zoomButton);
149150

150-
appRoot.add(buttonContainer, {
151+
appRoot.add(buttonsContainer, {
151152
top: this.self().HIDDEN_TOP
152153
});
153154
standin.addListener("appear", e => {
@@ -157,7 +158,7 @@ qx.Class.define("osparc.widget.PersistentIframe", {
157158
iframe.setLayoutProperties({
158159
top: this.self().HIDDEN_TOP
159160
});
160-
buttonContainer.setLayoutProperties({
161+
buttonsContainer.setLayoutProperties({
161162
top: this.self().HIDDEN_TOP
162163
});
163164
});
@@ -230,15 +231,14 @@ qx.Class.define("osparc.widget.PersistentIframe", {
230231
height: divSize.height - this.getToolbarHeight()
231232
});
232233

233-
this.__buttonContainer.setLayoutProperties({
234+
this.__buttonsContainer.setLayoutProperties({
234235
top: (divPos.top - iframeParentPos.top),
235236
right: (iframeParentPos.right - iframeParentPos.left - divPos.right)
236237
});
237238
}, 0);
238239
},
239240

240-
__applyShowToolbar: function(show) {
241-
this.setToolbarHeight(show ? 25 : 0);
241+
__applyShowToolbar: function() {
242242
this.__syncIframePos();
243243
},
244244

0 commit comments

Comments
 (0)