diff --git a/src/domain/session/room/UnknownRoomViewModel.js b/src/domain/session/room/UnknownRoomViewModel.js index d896d4cf..9f1b5d2b 100644 --- a/src/domain/session/room/UnknownRoomViewModel.js +++ b/src/domain/session/room/UnknownRoomViewModel.js @@ -22,7 +22,7 @@ export class UnknownRoomViewModel extends ViewModel { super(options); const {roomIdOrAlias, session} = options; this._session = session; - this._roomIdOrAlias = roomIdOrAlias; + this.roomIdOrAlias = roomIdOrAlias; this._error = null; this._busy = false; } @@ -31,15 +31,11 @@ export class UnknownRoomViewModel extends ViewModel { return this._error?.message; } - get description() { - return this.i18n`You are currently not in ${this._roomIdOrAlias}. Want to join it?`; - } - async join() { this._busy = true; this.emitChange("busy"); try { - const roomId = await this._session.joinRoom(this._roomIdOrAlias); + const roomId = await this._session.joinRoom(this.roomIdOrAlias); // navigate to roomId if we were at the alias this.navigation.push("room", roomId); } catch (err) { diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index 00fdefd0..706bd90d 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -910,4 +910,22 @@ button.link { .RoomArchivedView h3 { margin: 0; +} + +.UnknownRoomView { + align-items: center; + justify-content: center; + text-align: center; + padding: 16px; + box-sizing: border-box; +} + +.UnknownRoomView h2 { + word-break: break-all; + word-break: break-word; +} + +.UnknownRoomView button { + max-width: 200px; + width: 100%; } \ No newline at end of file diff --git a/src/platform/web/ui/session/room/UnknownRoomView.js b/src/platform/web/ui/session/room/UnknownRoomView.js index 03076885..6e4cb284 100644 --- a/src/platform/web/ui/session/room/UnknownRoomView.js +++ b/src/platform/web/ui/session/room/UnknownRoomView.js @@ -26,13 +26,18 @@ import {AvatarView} from "../../avatar.js"; export class UnknownRoomView extends TemplateView { render(t, vm) { - return t.main({className: "UnknownRoomView middle"}, [ - t.h2(vm.description), - t.div(t.button({ + 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`)) - ]); + }, vm.i18n`Join room`), + t.if(vm => vm.error, t => t.p({className: "error"}, vm.error)) + ])); } }