From c9bb18b87ec1cbfd7e6da42b554bbf1fbbfc72aa Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 9 Oct 2020 09:56:13 +0200 Subject: [PATCH] make loading screen a bit prettier by wrapping it in a view with common pre-session chrome this renames the existing SessionLoadView to SessionLoadStatusView so we can call the wrapper the former. --- src/ui/web/css/login.css | 8 +++--- src/ui/web/login/LoginView.js | 4 +-- src/ui/web/login/SessionLoadStatusView.js | 30 +++++++++++++++++++++++ src/ui/web/login/SessionLoadView.js | 15 +++++++----- src/ui/web/login/SessionPickerView.js | 4 +-- src/ui/web/view-gallery.html | 11 ++++++++- 6 files changed, 57 insertions(+), 15 deletions(-) create mode 100644 src/ui/web/login/SessionLoadStatusView.js diff --git a/src/ui/web/css/login.css b/src/ui/web/css/login.css index 192ccc13..db67e141 100644 --- a/src/ui/web/css/login.css +++ b/src/ui/web/css/login.css @@ -52,19 +52,19 @@ limitations under the License. padding: 0.4em; } -.SessionLoadView { +.SessionLoadStatusView { display: flex; } -.SessionLoadView > :not(:first-child) { +.SessionLoadStatusView > :not(:first-child) { margin-left: 12px; } -.SessionLoadView p { +.SessionLoadStatusView p { flex: 1; margin: 0; } -.SessionLoadView .spinner { +.SessionLoadStatusView .spinner { --size: 20px; } diff --git a/src/ui/web/login/LoginView.js b/src/ui/web/login/LoginView.js index ef2afbb6..00d52da8 100644 --- a/src/ui/web/login/LoginView.js +++ b/src/ui/web/login/LoginView.js @@ -16,7 +16,7 @@ limitations under the License. import {TemplateView} from "../general/TemplateView.js"; import {hydrogenGithubLink} from "./common.js"; -import {SessionLoadView} from "./SessionLoadView.js"; +import {SessionLoadStatusView} from "./SessionLoadStatusView.js"; export class LoginView extends TemplateView { render(t, vm) { @@ -49,7 +49,7 @@ export class LoginView extends TemplateView { t.div({className: "form-row"}, [t.label({for: "username"}, vm.i18n`Username`), username]), t.div({className: "form-row"}, [t.label({for: "password"}, vm.i18n`Password`), password]), t.div({className: "form-row"}, [t.label({for: "homeserver"}, vm.i18n`Homeserver`), homeserver]), - t.mapView(vm => vm.loadViewModel, loadViewModel => loadViewModel ? new SessionLoadView(loadViewModel) : null), + t.mapView(vm => vm.loadViewModel, loadViewModel => loadViewModel ? new SessionLoadStatusView(loadViewModel) : null), t.div({className: "button-row"}, [ t.button({ className: "styled secondary", diff --git a/src/ui/web/login/SessionLoadStatusView.js b/src/ui/web/login/SessionLoadStatusView.js new file mode 100644 index 00000000..888e46b4 --- /dev/null +++ b/src/ui/web/login/SessionLoadStatusView.js @@ -0,0 +1,30 @@ +/* +Copyright 2020 Bruno Windels + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import {TemplateView} from "../general/TemplateView.js"; +import {spinner} from "../common.js"; + +/** a view used both in the login view and the loading screen +to show the current state of loading the session. +Just a spinner and a label, meant to be used as a paragraph */ +export class SessionLoadStatusView extends TemplateView { + render(t) { + return t.div({className: "SessionLoadStatusView"}, [ + spinner(t, {hiddenWithLayout: vm => !vm.loading}), + t.p(vm => vm.loadLabel) + ]); + } +} diff --git a/src/ui/web/login/SessionLoadView.js b/src/ui/web/login/SessionLoadView.js index 637c204c..30489335 100644 --- a/src/ui/web/login/SessionLoadView.js +++ b/src/ui/web/login/SessionLoadView.js @@ -1,5 +1,5 @@ /* -Copyright 2020 Bruno Windels +Copyright 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -15,13 +15,16 @@ limitations under the License. */ import {TemplateView} from "../general/TemplateView.js"; -import {spinner} from "../common.js"; +import {SessionLoadStatusView} from "./SessionLoadStatusView.js"; export class SessionLoadView extends TemplateView { - render(t) { - return t.div({className: "SessionLoadView"}, [ - spinner(t, {hiddenWithLayout: vm => !vm.loading}), - t.p(vm => vm.loadLabel) + render(t, vm) { + return t.div({className: "PreSessionScreen"}, [ + t.div({className: "logo"}), + t.div({className: "SessionLoadView"}, [ + t.h1(vm.i18n`Loading…`), + t.view(new SessionLoadStatusView(vm)) + ]) ]); } } diff --git a/src/ui/web/login/SessionPickerView.js b/src/ui/web/login/SessionPickerView.js index 8b051dcc..420a151f 100644 --- a/src/ui/web/login/SessionPickerView.js +++ b/src/ui/web/login/SessionPickerView.js @@ -17,7 +17,7 @@ limitations under the License. import {ListView} from "../general/ListView.js"; import {TemplateView} from "../general/TemplateView.js"; import {hydrogenGithubLink} from "./common.js"; -import {SessionLoadView} from "./SessionLoadView.js"; +import {SessionLoadStatusView} from "./SessionLoadStatusView.js"; function selectFileAsText(mimeType) { const input = document.createElement("input"); @@ -117,7 +117,7 @@ export class SessionPickerView extends TemplateView { onClick: () => vm.cancel() }, vm.i18n`Sign In`) ]), - t.if(vm => vm.loadViewModel, vm => new SessionLoadView(vm.loadViewModel)), + t.if(vm => vm.loadViewModel, vm => new SessionLoadStatusView(vm.loadViewModel)), t.p(hydrogenGithubLink(t)) ]) ]); diff --git a/src/ui/web/view-gallery.html b/src/ui/web/view-gallery.html index ecf328db..625a8b39 100644 --- a/src/ui/web/view-gallery.html +++ b/src/ui/web/view-gallery.html @@ -63,6 +63,15 @@ })); document.getElementById("login-loading").appendChild(view.mount()); - +

Session Loading

+
+