Skip to content

Commit e0a69be

Browse files
odeimaizodeimaiz
authored
✨ [Frontend] More responsive login page (#7073)
1 parent c37d45b commit e0a69be

File tree

8 files changed

+219
-194
lines changed

8 files changed

+219
-194
lines changed

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

Lines changed: 0 additions & 50 deletions
This file was deleted.

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

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,24 @@
1616
************************************************************************ */
1717

1818
qx.Class.define("osparc.auth.LoginPageOsparc", {
19-
extend: osparc.auth.LoginPage,
20-
21-
members: {
22-
// overridden
23-
_buildLayout: function() {
24-
const layout = new qx.ui.layout.HBox();
25-
this._setLayout(layout);
26-
27-
const loginLayout = this._getMainLayout();
28-
this._add(loginLayout, {
29-
flex: 1
30-
});
31-
}
32-
}
19+
extend: qx.ui.core.Widget,
20+
21+
construct: function() {
22+
this.base(arguments);
23+
24+
const layout = new qx.ui.layout.HBox();
25+
this._setLayout(layout);
26+
27+
const loginPage = new osparc.auth.LoginWithDecorators();
28+
loginPage.addListener("done", e => this.fireDataEvent("done", e.getData()));
29+
const container = new qx.ui.container.Scroll();
30+
container.add(loginPage);
31+
this._add(container, {
32+
flex: 1
33+
});
34+
},
35+
36+
events: {
37+
"done": "qx.event.type.Data",
38+
},
3339
});

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

Lines changed: 10 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -21,36 +21,17 @@
2121
*/
2222

2323
qx.Class.define("osparc.auth.LoginPageS4L", {
24-
extend: osparc.auth.LoginPageFlex,
24+
extend: osparc.auth.LoginPageSplit,
2525

26-
members: {
27-
// overridden
28-
_reloadLayout: function() {
29-
const layout = new qx.ui.layout.HBox();
30-
this._setLayout(layout);
31-
32-
this.setBackgroundColor("rgba(0, 20, 46, 1)");
26+
construct: function() {
27+
this.base(arguments);
3328

34-
this._removeAll();
29+
this.setBackgroundColor("rgba(0, 20, 46, 1)");
30+
},
3531

36-
const loginLayout = this._getMainLayout();
37-
if (this.isCompactVersion()) {
38-
this._resetBackgroundImage();
39-
this._add(loginLayout, {
40-
flex: 1
41-
});
42-
} else {
43-
this.__setBackgroundImage();
44-
this._add(new qx.ui.core.Spacer(), {
45-
width: "50%"
46-
});
47-
this._add(loginLayout, {
48-
width: "50%"
49-
});
50-
}
51-
},
52-
53-
__setBackgroundImage: function() {
32+
members: {
33+
// overridden
34+
_getBackgroundImage: function() {
5435
let backgroundImage = "";
5536

5637
const defaultBG = `url(${osparc.product.Utils.getProductBackgroundUrl("Sim4Life-head-default.png")}), url(${osparc.product.Utils.getProductBackgroundUrl("clouds_11.png")})`;
@@ -71,7 +52,7 @@ qx.Class.define("osparc.auth.LoginPageS4L", {
7152
backgroundImage = defaultBG;
7253
break;
7354
}
74-
this._setBackgroundImage(backgroundImage);
75-
}
55+
return backgroundImage;
56+
},
7657
}
7758
});

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

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
/* ************************************************************************
2+
3+
osparc - the simcore frontend
4+
5+
https://osparc.io
6+
7+
Copyright:
8+
2023 IT'IS Foundation, https://itis.swiss
9+
10+
License:
11+
MIT: https://opensource.org/licenses/MIT
12+
13+
Authors:
14+
* Odei Maiz (odeimaiz)
15+
16+
************************************************************************ */
17+
18+
qx.Class.define("osparc.auth.LoginPageSplit", {
19+
extend: qx.ui.core.Widget,
20+
type: "abstract",
21+
22+
construct: function() {
23+
this.base(arguments);
24+
25+
const layout = new qx.ui.layout.HBox();
26+
this._setLayout(layout);
27+
28+
this.__rebuildLayout();
29+
30+
setTimeout(() => this.__resized(), 100);
31+
window.addEventListener("resize", () => this.__resized());
32+
},
33+
34+
properties: {
35+
compactVersion: {
36+
check: "Boolean",
37+
init: false,
38+
nullable: false,
39+
event: "changeCompactVersion",
40+
apply: "__rebuildLayout"
41+
}
42+
},
43+
44+
events: {
45+
"done": "qx.event.type.Data",
46+
},
47+
48+
statics: {
49+
COMPACT_WIDTH_BREAKPOINT: 2*(osparc.auth.core.BaseAuthPage.FORM_WIDTH + 50),
50+
COMPACT_HEIGHT_BREAKPOINT: osparc.WindowSizeTracker.HEIGHT_BREAKPOINT * 1.1,
51+
},
52+
53+
members: {
54+
_getBackgroundImage: function() {
55+
throw new Error("Abstract method called!");
56+
},
57+
58+
__resized: function() {
59+
const width = document.documentElement.clientWidth;
60+
const height = document.documentElement.clientHeight;
61+
this.setCompactVersion(
62+
(width < this.self().COMPACT_WIDTH_BREAKPOINT) ||
63+
(height < this.self().COMPACT_HEIGHT_BREAKPOINT)
64+
);
65+
},
66+
67+
__rebuildLayout: function() {
68+
this._removeAll();
69+
70+
const loginPage = new osparc.auth.LoginWithDecorators();
71+
loginPage.addListener("done", e => this.fireDataEvent("done", e.getData()));
72+
const container = new qx.ui.container.Scroll();
73+
container.add(loginPage);
74+
const hideableItems = loginPage.getChildControl("login-view").getHideableItems();
75+
if (this.isCompactVersion()) {
76+
// no split-image
77+
// just the login widget
78+
this.__resetBackgroundImage();
79+
this._add(container, {
80+
flex: 1
81+
});
82+
hideableItems.forEach(hideableItem => hideableItem.exclude());
83+
} else {
84+
// split-image on the left
85+
// the login widget on the right
86+
this.___setBackgroundImage();
87+
this._add(new qx.ui.core.Spacer(), {
88+
width: "50%"
89+
});
90+
this._add(container, {
91+
width: "50%"
92+
});
93+
hideableItems.forEach(hideableItem => hideableItem.show());
94+
}
95+
},
96+
97+
__setBackgroundImage: function(backgroundImage) {
98+
if (osparc.product.Utils.getProductName().includes("s4l")) {
99+
this.getContentElement().setStyles({
100+
"background-image": backgroundImage,
101+
"background-repeat": "no-repeat",
102+
"background-size": "65% auto, 80% auto", // auto width, 85% height
103+
"background-position": "left bottom, left -440px bottom -230px" // left bottom
104+
});
105+
} else {
106+
this.getContentElement().setStyles({
107+
"background-image": backgroundImage,
108+
"background-repeat": "no-repeat",
109+
"background-size": "50% auto", // 50% of the view width
110+
"background-position": "left 10% center" // left bottom
111+
});
112+
}
113+
},
114+
115+
__resetBackgroundImage: function() {
116+
this.getContentElement().setStyles({
117+
"background-image": ""
118+
});
119+
},
120+
121+
___setBackgroundImage: function() {
122+
const backgroundImage = this._getBackgroundImage();
123+
this.__setBackgroundImage(backgroundImage);
124+
},
125+
}
126+
});

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

Lines changed: 4 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -21,36 +21,13 @@
2121
*/
2222

2323
qx.Class.define("osparc.auth.LoginPageTI", {
24-
extend: osparc.auth.LoginPageFlex,
24+
extend: osparc.auth.LoginPageSplit,
2525

2626
members: {
2727
// overridden
28-
_reloadLayout: function() {
29-
const layout = new qx.ui.layout.HBox();
30-
this._setLayout(layout);
31-
32-
this._removeAll();
33-
34-
const loginLayout = this._getMainLayout();
35-
if (this.isCompactVersion()) {
36-
this._resetBackgroundImage();
37-
this._add(loginLayout, {
38-
flex: 1
39-
});
40-
} else {
41-
this.__setBackgroundImage();
42-
this._add(new qx.ui.core.Spacer(), {
43-
width: "50%"
44-
});
45-
this._add(loginLayout, {
46-
width: "50%"
47-
});
48-
}
49-
},
50-
51-
__setBackgroundImage: function() {
28+
_getBackgroundImage: function() {
5229
const backgroundImage = "url(resource/osparc/tip_splitimage.png)";
53-
this._setBackgroundImage(backgroundImage);
54-
}
30+
return backgroundImage;
31+
},
5532
}
5633
});

0 commit comments

Comments
 (0)