Merge pull request #951 from Automattic/close-room-screens

Allow closing room creation and room joining views on small screens

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;

src/domain/session/JoinRoomViewModel.ts

@@ -27,12 +27,16 @@ export class JoinRoomViewModel extends ViewModel<SegmentType, Options> {
     private _session: Session;
     private _joinInProgress: boolean = false;
     private _error: Error | undefined;
+    private _closeUrl: string;
 
     constructor(options: Readonly<Options>) {
         super(options);
         this._session = options.session;
+        this._closeUrl = this.urlRouter.urlUntilSegment("session");
     }
 
+    get closeUrl(): string { return this._closeUrl; }
+
     async join(roomId: string): Promise<void> {
         this._error = undefined;
         this._joinInProgress = true;

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() {

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;
 }
 

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"}, 
+        return t.main({className: "CreateRoomView middle"}, [
-            t.div({className: "CreateRoomView centered-column"}, [
+            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) {

src/platform/web/ui/session/JoinRoomView.ts

@@ -27,9 +27,12 @@ export class JoinRoomView extends TemplateView<JoinRoomViewModel> {
             placeholder: vm.i18n`Enter a room id or alias`,
             disabled: vm => vm.joinInProgress,
         });
-        return t.main({className: "middle"}, 
+        return t.main({className: "JoinRoomView middle"}, [
-            t.div({className: "JoinRoomView centered-column"}, [
+            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<JoinRoomViewModel> {
                     })
                 ])
             ])
-        );
+        ]);
     }
 
     onSubmit(evt, id) {
@@ -60,4 +63,3 @@ export class JoinRoomView extends TemplateView<JoinRoomViewModel> {
         this.value.join(id);
     }
 }
-

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([
+        return t.main({className: "UnknownRoomView middle"}, [
-            t.h2([
+            t.div({className: "UnknownRoomView_header middle-header"}, [
-                vm.i18n`You are currently not in ${vm.roomIdOrAlias}.`,
+                t.a({className: "button-utility close-middle", href: vm.closeUrl, title: vm.i18n`Cancel room join`}),
-                t.br(),
+                t.h2("Join room"),
-                vm.i18n`Want to join it?`
             ]),
-            t.button({
+            t.div({className: "UnknownRoomView_body centered-column"}, [
-                className: "button-action primary",
+                t.div({className: "UnknownRoomView_container"}, [
-                onClick: () => vm.join(),
+                    t.h2([
-                disabled: vm => vm.busy,
+                        vm.i18n`You are currently not in ${vm.roomIdOrAlias}.`,
-            }, vm.i18n`Join room`),
+                        t.br(),
-            t.if(vm => vm.error, t => t.p({className: "error"}, vm.error))
+                        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))
+                ])
+            ])
+        ]);
     }
 }