From d66e8c7118ca76927282bb4bac14f57268e4d126 Mon Sep 17 00:00:00 2001 From: Paulo Pinto Date: Tue, 13 Dec 2022 17:19:07 +0000 Subject: [PATCH 1/9] Add a top-level class for CreateRoomView And rename inner class to CreateRoomView_body, for consistency with other views. For consistency with other views. --- src/platform/web/ui/css/themes/element/theme.css | 2 +- src/platform/web/ui/session/CreateRoomView.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index e6f5b7a114..ad38729744 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -1180,7 +1180,7 @@ button.RoomDetailsView_row::after { gap: 12px; } -.CreateRoomView, .JoinRoomView, .RoomBeingCreated_error { +.CreateRoomView_body, .JoinRoomView, .RoomBeingCreated_error { max-width: 400px; } diff --git a/src/platform/web/ui/session/CreateRoomView.js b/src/platform/web/ui/session/CreateRoomView.js index 9d6c6bbc2b..37905b2d17 100644 --- a/src/platform/web/ui/session/CreateRoomView.js +++ b/src/platform/web/ui/session/CreateRoomView.js @@ -21,8 +21,8 @@ import {StaticView} from "../general/StaticView"; export class CreateRoomView extends TemplateView { render(t, vm) { - return t.main({className: "middle"}, - t.div({className: "CreateRoomView centered-column"}, [ + return t.main({className: "CreateRoomView middle"}, + t.div({className: "CreateRoomView_body centered-column"}, [ t.h2("Create room"), //t.div({className: "RoomView_error"}, vm => vm.error), t.form({className: "CreateRoomView_detailsForm form", onChange: evt => this.onFormChange(evt), onSubmit: evt => this.onSubmit(evt)}, [ From 750930bd0c3ade36768cd1cfed597324ba0050cf Mon Sep 17 00:00:00 2001 From: Paulo Pinto Date: Tue, 13 Dec 2022 17:29:47 +0000 Subject: [PATCH 2/9] Add 'back' button to CreateRoomView --- src/domain/session/CreateRoomViewModel.js | 2 ++ src/platform/web/ui/session/CreateRoomView.js | 7 +++++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/domain/session/CreateRoomViewModel.js b/src/domain/session/CreateRoomViewModel.js index 12b4fbd50c..ad599c7e56 100644 --- a/src/domain/session/CreateRoomViewModel.js +++ b/src/domain/session/CreateRoomViewModel.js @@ -33,6 +33,7 @@ export class CreateRoomViewModel extends ViewModel { this._avatarScaledBlob = undefined; this._avatarFileName = undefined; this._avatarInfo = undefined; + this._closeUrl = this.urlRouter.urlUntilSegment("session"); } get isPublic() { return this._isPublic; } @@ -45,6 +46,7 @@ export class CreateRoomViewModel extends ViewModel { get hasAvatar() { return !!this._avatarScaledBlob; } get isFederationDisabled() { return this._isFederationDisabled; } get isAdvancedShown() { return this._isAdvancedShown; } + get closeUrl() { return this._closeUrl; } setName(name) { this._name = name; diff --git a/src/platform/web/ui/session/CreateRoomView.js b/src/platform/web/ui/session/CreateRoomView.js index 37905b2d17..51a408078d 100644 --- a/src/platform/web/ui/session/CreateRoomView.js +++ b/src/platform/web/ui/session/CreateRoomView.js @@ -21,7 +21,10 @@ import {StaticView} from "../general/StaticView"; export class CreateRoomView extends TemplateView { render(t, vm) { - return t.main({className: "CreateRoomView middle"}, + return t.main({className: "CreateRoomView middle"}, [ + t.div({className: "CreateRoomView_header middle-header"}, [ + t.a({className: "button-utility close-middle", href: vm.closeUrl, title: vm.i18n`Cancel room creation`}), + ]), t.div({className: "CreateRoomView_body centered-column"}, [ t.h2("Create room"), //t.div({className: "RoomView_error"}, vm => vm.error), @@ -96,7 +99,7 @@ export class CreateRoomView extends TemplateView { ]), ]) ]) - ); + ]); } onFormChange(evt) { From f8d71dea9f48212e6823f0f8a404c16ded6a4eba Mon Sep 17 00:00:00 2001 From: Paulo Pinto Date: Tue, 13 Dec 2022 17:31:39 +0000 Subject: [PATCH 3/9] Move h2 to header --- src/platform/web/ui/session/CreateRoomView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/web/ui/session/CreateRoomView.js b/src/platform/web/ui/session/CreateRoomView.js index 51a408078d..958f517b72 100644 --- a/src/platform/web/ui/session/CreateRoomView.js +++ b/src/platform/web/ui/session/CreateRoomView.js @@ -24,9 +24,9 @@ export class CreateRoomView extends TemplateView { return t.main({className: "CreateRoomView middle"}, [ t.div({className: "CreateRoomView_header middle-header"}, [ t.a({className: "button-utility close-middle", href: vm.closeUrl, title: vm.i18n`Cancel room creation`}), + t.h2("Create room"), ]), t.div({className: "CreateRoomView_body centered-column"}, [ - t.h2("Create room"), //t.div({className: "RoomView_error"}, vm => vm.error), t.form({className: "CreateRoomView_detailsForm form", onChange: evt => this.onFormChange(evt), onSubmit: evt => this.onSubmit(evt)}, [ t.div({className: "vertical-layout"}, [ From 11f04fbc142f2b0f3e3f8ba065c02dc86351486a Mon Sep 17 00:00:00 2001 From: Paulo Pinto Date: Tue, 13 Dec 2022 17:36:28 +0000 Subject: [PATCH 4/9] Add a top-level class to JoinRoomView --- src/platform/web/ui/css/themes/element/theme.css | 2 +- src/platform/web/ui/session/JoinRoomView.ts | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index ad38729744..a5d5f1fb80 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -1180,7 +1180,7 @@ button.RoomDetailsView_row::after { gap: 12px; } -.CreateRoomView_body, .JoinRoomView, .RoomBeingCreated_error { +.CreateRoomView_body, .JoinRoomView_body, .RoomBeingCreated_error { max-width: 400px; } diff --git a/src/platform/web/ui/session/JoinRoomView.ts b/src/platform/web/ui/session/JoinRoomView.ts index 90194317b8..c26cc34e9c 100644 --- a/src/platform/web/ui/session/JoinRoomView.ts +++ b/src/platform/web/ui/session/JoinRoomView.ts @@ -27,8 +27,8 @@ export class JoinRoomView extends TemplateView { placeholder: vm.i18n`Enter a room id or alias`, disabled: vm => vm.joinInProgress, }); - return t.main({className: "middle"}, - t.div({className: "JoinRoomView centered-column"}, [ + return t.main({className: "JoinRoomView middle"}, + t.div({className: "JoinRoomView_body centered-column"}, [ t.h2("Join room"), t.form({className: "JoinRoomView_detailsForm form", onSubmit: evt => this.onSubmit(evt, input.value)}, [ t.div({className: "vertical-layout"}, [ @@ -60,4 +60,3 @@ export class JoinRoomView extends TemplateView { this.value.join(id); } } - From df7774e8f4b1d25143ea286bd685e36a0d8f66b7 Mon Sep 17 00:00:00 2001 From: Paulo Pinto Date: Tue, 13 Dec 2022 17:40:36 +0000 Subject: [PATCH 5/9] Add 'back' button to JoinRoomView --- src/domain/session/JoinRoomViewModel.ts | 4 ++++ src/platform/web/ui/session/JoinRoomView.ts | 7 +++++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/domain/session/JoinRoomViewModel.ts b/src/domain/session/JoinRoomViewModel.ts index 1b7148f9d2..a310c52437 100644 --- a/src/domain/session/JoinRoomViewModel.ts +++ b/src/domain/session/JoinRoomViewModel.ts @@ -27,12 +27,16 @@ export class JoinRoomViewModel extends ViewModel { private _session: Session; private _joinInProgress: boolean = false; private _error: Error | undefined; + private _closeUrl: string; constructor(options: Readonly) { super(options); this._session = options.session; + this._closeUrl = this.urlRouter.urlUntilSegment("session"); } + get closeUrl(): string { return this._closeUrl; } + async join(roomId: string): Promise { this._error = undefined; this._joinInProgress = true; diff --git a/src/platform/web/ui/session/JoinRoomView.ts b/src/platform/web/ui/session/JoinRoomView.ts index c26cc34e9c..381662b4b8 100644 --- a/src/platform/web/ui/session/JoinRoomView.ts +++ b/src/platform/web/ui/session/JoinRoomView.ts @@ -27,7 +27,10 @@ export class JoinRoomView extends TemplateView { placeholder: vm.i18n`Enter a room id or alias`, disabled: vm => vm.joinInProgress, }); - return t.main({className: "JoinRoomView middle"}, + return t.main({className: "JoinRoomView middle"}, [ + t.div({className: "JoinRoomView_header middle-header"}, [ + t.a({className: "button-utility close-middle", href: vm.closeUrl, title: vm.i18n`Cancel room join`}), + ]), t.div({className: "JoinRoomView_body centered-column"}, [ t.h2("Join room"), t.form({className: "JoinRoomView_detailsForm form", onSubmit: evt => this.onSubmit(evt, input.value)}, [ @@ -52,7 +55,7 @@ export class JoinRoomView extends TemplateView { }) ]) ]) - ); + ]); } onSubmit(evt, id) { From 76e6568b877cc748a165c898a95011f619bc1049 Mon Sep 17 00:00:00 2001 From: Paulo Pinto Date: Tue, 13 Dec 2022 17:42:04 +0000 Subject: [PATCH 6/9] Move h2 to header --- src/platform/web/ui/session/JoinRoomView.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/web/ui/session/JoinRoomView.ts b/src/platform/web/ui/session/JoinRoomView.ts index 381662b4b8..5a9936593b 100644 --- a/src/platform/web/ui/session/JoinRoomView.ts +++ b/src/platform/web/ui/session/JoinRoomView.ts @@ -30,9 +30,9 @@ export class JoinRoomView extends TemplateView { return t.main({className: "JoinRoomView middle"}, [ t.div({className: "JoinRoomView_header middle-header"}, [ t.a({className: "button-utility close-middle", href: vm.closeUrl, title: vm.i18n`Cancel room join`}), + t.h2("Join room"), ]), t.div({className: "JoinRoomView_body centered-column"}, [ - t.h2("Join room"), t.form({className: "JoinRoomView_detailsForm form", onSubmit: evt => this.onSubmit(evt, input.value)}, [ t.div({className: "vertical-layout"}, [ t.div({className: "stretch form-row text"}, [ From 7d1d6c73ee8c90913ae19b04bedba71c89f62417 Mon Sep 17 00:00:00 2001 From: Paulo Pinto Date: Mon, 9 Jan 2023 15:33:12 +0000 Subject: [PATCH 7/9] Wrap content of JoinRoomView in a body --- .../web/ui/css/themes/element/theme.css | 2 +- .../web/ui/session/room/UnknownRoomView.js | 28 ++++++++++--------- 2 files changed, 16 insertions(+), 14 deletions(-) diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index a5d5f1fb80..d010220aeb 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -959,7 +959,7 @@ button.link { margin: 0; } -.UnknownRoomView { +.UnknownRoomView_body { align-items: center; justify-content: center; text-align: center; diff --git a/src/platform/web/ui/session/room/UnknownRoomView.js b/src/platform/web/ui/session/room/UnknownRoomView.js index 80d857d801..1f31f41340 100644 --- a/src/platform/web/ui/session/room/UnknownRoomView.js +++ b/src/platform/web/ui/session/room/UnknownRoomView.js @@ -18,18 +18,20 @@ import {TemplateView} from "../../general/TemplateView"; export class UnknownRoomView extends TemplateView { render(t, vm) { - return t.main({className: "UnknownRoomView middle"}, t.div([ - t.h2([ - vm.i18n`You are currently not in ${vm.roomIdOrAlias}.`, - t.br(), - vm.i18n`Want to join it?` - ]), - t.button({ - className: "button-action primary", - onClick: () => vm.join(), - disabled: vm => vm.busy, - }, vm.i18n`Join room`), - t.if(vm => vm.error, t => t.p({className: "error"}, vm.error)) - ])); + return t.main({className: "UnknownRoomView middle"}, [ + t.div({className: "UnknownRoomView_body centered-column"}, [ + t.h2([ + vm.i18n`You are currently not in ${vm.roomIdOrAlias}.`, + t.br(), + vm.i18n`Want to join it?` + ]), + t.button({ + className: "button-action primary", + onClick: () => vm.join(), + disabled: vm => vm.busy, + }, vm.i18n`Join room`), + t.if(vm => vm.error, t => t.p({className: "error"}, vm.error)) + ]) + ]); } } From 023b36575fd69bc606a234e5cd7a25fc0458abde Mon Sep 17 00:00:00 2001 From: Paulo Pinto Date: Mon, 9 Jan 2023 15:36:03 +0000 Subject: [PATCH 8/9] Add header to UnknownRoomView --- src/domain/session/room/UnknownRoomViewModel.js | 5 +++++ src/platform/web/ui/session/room/UnknownRoomView.js | 4 ++++ 2 files changed, 9 insertions(+) diff --git a/src/domain/session/room/UnknownRoomViewModel.js b/src/domain/session/room/UnknownRoomViewModel.js index 8bb5fb0af9..d91387e0a6 100644 --- a/src/domain/session/room/UnknownRoomViewModel.js +++ b/src/domain/session/room/UnknownRoomViewModel.js @@ -24,6 +24,11 @@ export class UnknownRoomViewModel extends ViewModel { this.roomIdOrAlias = roomIdOrAlias; this._error = null; this._busy = false; + this._closeUrl = this.urlRouter.urlUntilSegment("session"); + } + + get closeUrl() { + return this._closeUrl; } get error() { diff --git a/src/platform/web/ui/session/room/UnknownRoomView.js b/src/platform/web/ui/session/room/UnknownRoomView.js index 1f31f41340..715b60c7a7 100644 --- a/src/platform/web/ui/session/room/UnknownRoomView.js +++ b/src/platform/web/ui/session/room/UnknownRoomView.js @@ -19,6 +19,10 @@ import {TemplateView} from "../../general/TemplateView"; export class UnknownRoomView extends TemplateView { render(t, vm) { return t.main({className: "UnknownRoomView middle"}, [ + t.div({className: "UnknownRoomView_header middle-header"}, [ + t.a({className: "button-utility close-middle", href: vm.closeUrl, title: vm.i18n`Cancel room join`}), + t.h2("Join room"), + ]), t.div({className: "UnknownRoomView_body centered-column"}, [ t.h2([ vm.i18n`You are currently not in ${vm.roomIdOrAlias}.`, From dcd514a4845a00c863e68b553815526d6d471a82 Mon Sep 17 00:00:00 2001 From: Paulo Pinto Date: Mon, 9 Jan 2023 15:55:24 +0000 Subject: [PATCH 9/9] Center UnknownRoomView content vertically --- .../web/ui/css/themes/element/theme.css | 9 ++++++- .../web/ui/session/room/UnknownRoomView.js | 24 ++++++++++--------- 2 files changed, 21 insertions(+), 12 deletions(-) diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index d010220aeb..40b280e289 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -959,9 +959,16 @@ button.link { margin: 0; } -.UnknownRoomView_body { +.UnknownRoomView_container { + height: 100%; + display: flex; + flex-direction: column; align-items: center; justify-content: center; +} + +.UnknownRoomView_body { + height: 100%; text-align: center; padding: 16px; box-sizing: border-box; diff --git a/src/platform/web/ui/session/room/UnknownRoomView.js b/src/platform/web/ui/session/room/UnknownRoomView.js index 715b60c7a7..4174b4b2e4 100644 --- a/src/platform/web/ui/session/room/UnknownRoomView.js +++ b/src/platform/web/ui/session/room/UnknownRoomView.js @@ -24,17 +24,19 @@ export class UnknownRoomView extends TemplateView { t.h2("Join room"), ]), t.div({className: "UnknownRoomView_body centered-column"}, [ - t.h2([ - vm.i18n`You are currently not in ${vm.roomIdOrAlias}.`, - t.br(), - vm.i18n`Want to join it?` - ]), - t.button({ - className: "button-action primary", - onClick: () => vm.join(), - disabled: vm => vm.busy, - }, vm.i18n`Join room`), - t.if(vm => vm.error, t => t.p({className: "error"}, vm.error)) + t.div({className: "UnknownRoomView_container"}, [ + t.h2([ + vm.i18n`You are currently not in ${vm.roomIdOrAlias}.`, + t.br(), + vm.i18n`Want to join it?` + ]), + t.button({ + className: "button-action primary", + onClick: () => vm.join(), + disabled: vm => vm.busy, + }, vm.i18n`Join room`), + t.if(vm => vm.error, t => t.p({className: "error"}, vm.error)) + ]) ]) ]); }