From cfbd0672c5329955f91b392c416c0d9758c73c8e Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Tue, 6 Sep 2022 15:42:41 +0530
Subject: [PATCH] Refactor left panel to use menu

---
 .../session/leftpanel/LeftPanelViewModel.js   |  5 ++--
 .../web/ui/session/leftpanel/LeftPanelView.js | 27 ++++++++++++++++++-
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/domain/session/leftpanel/LeftPanelViewModel.js b/src/domain/session/leftpanel/LeftPanelViewModel.js
index 8c8d71a2..fc783cfa 100644
--- a/src/domain/session/leftpanel/LeftPanelViewModel.js
+++ b/src/domain/session/leftpanel/LeftPanelViewModel.js
@@ -34,7 +34,6 @@ export class LeftPanelViewModel extends ViewModel {
         this._setupNavigation();
         this._closeUrl = this.urlCreator.urlForSegment("session");
         this._settingsUrl = this.urlCreator.urlForSegment("settings");
-        this._createRoomUrl = this.urlCreator.urlForSegment("create-room");
     }
 
     _mapTileViewModels(roomsBeingCreated, invites, rooms) {
@@ -74,7 +73,9 @@ export class LeftPanelViewModel extends ViewModel {
         return this._settingsUrl;
     }
 
-    get createRoomUrl() { return this._createRoomUrl; }
+    showCreateRoomView() {
+        this.navigation.push("create-room");
+    }
 
     _setupNavigation() {
         const roomObservable = this.navigation.observe("room");
diff --git a/src/platform/web/ui/session/leftpanel/LeftPanelView.js b/src/platform/web/ui/session/leftpanel/LeftPanelView.js
index c79192be..ac0fbb81 100644
--- a/src/platform/web/ui/session/leftpanel/LeftPanelView.js
+++ b/src/platform/web/ui/session/leftpanel/LeftPanelView.js
@@ -17,6 +17,8 @@ limitations under the License.
 import {ListView} from "../../general/ListView";
 import {TemplateView} from "../../general/TemplateView";
 import {RoomTileView} from "./RoomTileView.js";
+import {Menu} from "../../general/Menu.js";
+import {Popup} from "../../general/Popup.js";
 
 class FilterField extends TemplateView {
     render(t, options) {
@@ -51,6 +53,11 @@ class FilterField extends TemplateView {
 }
 
 export class LeftPanelView extends TemplateView {
+    constructor(vm) {
+        super(vm);
+        this._createMenuPopup = null;
+    }
+
     render(t, vm) {
         const gridButtonLabel = vm => {
             return vm.gridEnabled ?
@@ -90,7 +97,11 @@ export class LeftPanelView extends TemplateView {
                 "aria-label": gridButtonLabel
             }),
             t.a({className: "button-utility settings", href: vm.settingsUrl, "aria-label": vm.i18n`Settings`, title: vm.i18n`Settings`}),
-            t.a({className: "button-utility create", href: vm.createRoomUrl, "aria-label": vm.i18n`Create room`, title: vm.i18n`Create room`}),
+            t.button({
+                className: "button-utility create",
+                "aria-label": vm.i18n`Create room`,
+                onClick: evt => this._toggleCreateMenu(evt)
+            }),
         ]);
 
         return t.div({className: "LeftPanel"}, [
@@ -98,4 +109,18 @@ export class LeftPanelView extends TemplateView {
             roomList
         ]);
     }
+
+    _toggleCreateMenu(evt) {
+        if (this._createMenuPopup && this._createMenuPopup.isOpen) {
+            this._createMenuPopup.close();
+        } else {
+            const vm = this.value;
+            const options = [];
+            options.push(Menu.option(vm.i18n`Create Room`, () => { vm.showCreateRoomView(); }))
+            options.push(Menu.option(vm.i18n`Join Room`, () => {}))
+            this._createMenuPopup = new Popup(new Menu(options));
+            this._createMenuPopup.trackInTemplateView(this);
+            this._createMenuPopup.showRelativeTo(evt.target, 10);
+        }
+    }
 }