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/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/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/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index e932a9e707..208017a41a 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -984,9 +984,16 @@ button.link { margin: 0; } -.UnknownRoomView { +.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; @@ -1274,7 +1281,7 @@ button.RoomDetailsView_row::after { gap: 12px; } -.CreateRoomView, .JoinRoomView, .RoomBeingCreated_error { +.CreateRoomView_body, .JoinRoomView_body, .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..958f517b72 100644 --- a/src/platform/web/ui/session/CreateRoomView.js +++ b/src/platform/web/ui/session/CreateRoomView.js @@ -21,9 +21,12 @@ 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_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.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"}, [ @@ -96,7 +99,7 @@ export class CreateRoomView extends TemplateView { ]), ]) ]) - ); + ]); } onFormChange(evt) { diff --git a/src/platform/web/ui/session/JoinRoomView.ts b/src/platform/web/ui/session/JoinRoomView.ts index 90194317b8..5a9936593b 100644 --- a/src/platform/web/ui/session/JoinRoomView.ts +++ b/src/platform/web/ui/session/JoinRoomView.ts @@ -27,9 +27,12 @@ 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_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.form({className: "JoinRoomView_detailsForm form", onSubmit: evt => this.onSubmit(evt, input.value)}, [ t.div({className: "vertical-layout"}, [ t.div({className: "stretch form-row text"}, [ @@ -52,7 +55,7 @@ export class JoinRoomView extends TemplateView { }) ]) ]) - ); + ]); } onSubmit(evt, id) { @@ -60,4 +63,3 @@ export class JoinRoomView extends TemplateView { this.value.join(id); } } - diff --git a/src/platform/web/ui/session/room/UnknownRoomView.js b/src/platform/web/ui/session/room/UnknownRoomView.js index 80d857d801..4174b4b2e4 100644 --- a/src/platform/web/ui/session/room/UnknownRoomView.js +++ b/src/platform/web/ui/session/room/UnknownRoomView.js @@ -18,18 +18,26 @@ 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?` + 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.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_body centered-column"}, [ + 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)) + ]) + ]) + ]); } }