Merge pull request #21 from Automattic/unknown_room_3dot_options

Make options popup show settings navigation link under unknownroomview
Automattic · Aug 22, 2023 · a345a7e · a345a7e
2 parents a28349b + 0395bad
commit a345a7e
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css
@@ -1004,7 +1004,7 @@ button.link {
     word-break: break-word;
 }
 
-.UnknownRoomView button {
+.UnknownRoomView button.button-action {
     max-width: 200px;
     width: 100%;
 }

diff --git a/src/platform/web/ui/session/room/UnknownRoomView.js b/src/platform/web/ui/session/room/UnknownRoomView.js
@@ -16,13 +16,22 @@ limitations under the License.
 
 import {TemplateView} from "../../general/TemplateView";
 import {spinner} from "../../common.js";
+import {Menu} from "../../general/Menu.js";
+import {Popup} from "../../general/Popup.js";
 
 export class UnknownRoomView extends TemplateView {
     render(t, vm) {
-        return t.main({className: "UnknownRoomView middle"}, [
-            t.div({className: "UnknownRoomView_header middle-header"}, [
+        return t.main({className: "RoomView UnknownRoomView middle"}, [
+            t.div({className: "UnknownRoomView_header RoomHeader middle-header"}, [
                 t.a({className: "button-utility close-middle", href: vm.closeUrl, title: vm.i18n`Cancel room join`}),
-                t.h2(vm.i18n`Join room`),
+                t.div({className: "room-description"},[
+                    t.h2(vm.i18n`Join room`),
+                ]),
+                t.button({
+                    className: "button-utility room-options",
+                    "aria-label":vm.i18n`Room options`,
+                    onClick: evt => this._toggleOptionsMenu(evt,vm)
+                })
             ]),
             t.div({className: "UnknownRoomView_body centered-column"}, [
                 t.div({className: "UnknownRoomView_container"}, [
@@ -46,4 +55,17 @@ export class UnknownRoomView extends TemplateView {
             ])
         ]);
     }
+
+    _toggleOptionsMenu(evt,vm) {
+        if (super._optionsPopup && super._optionsPopup.isOpen) {
+            super._optionsPopup.close();
+        } else {
+            const optionsPopup = new Popup(new Menu([
+                Menu.option(vm.i18n`Settings`, () => vm.navigation.push("settings"))
+            ]));
+            optionsPopup.trackInTemplateView(this);
+            optionsPopup.showRelativeTo(evt.target, 10);
+            super._optionsPopup = optionsPopup;
+        }
+    }
 }