Open panel when button is clicked

src/domain/session/rightpanel/RightPanelViewModel.js

@@ -18,6 +18,7 @@ import {ViewModel} from "../../ViewModel";
 import {RoomDetailsViewModel} from "./RoomDetailsViewModel.js";
 import {MemberListViewModel} from "./MemberListViewModel.js";
 import {MemberDetailsViewModel} from "./MemberDetailsViewModel.js";
+import {InvitePanelViewModel} from "./InvitePanelViewModel";
 import {DeviceVerificationViewModel} from "../verification/DeviceVerificationViewModel";
 
 export class RightPanelViewModel extends ViewModel {
@@ -61,6 +62,7 @@ export class RightPanelViewModel extends ViewModel {
 
     _setupNavigation() {
         this._hookUpdaterToSegment("details", RoomDetailsViewModel, () => { return {room: this._room}; });
+        this._hookUpdaterToSegment("invite", InvitePanelViewModel, () => { return {room: this._room}; });
         this._hookUpdaterToSegment("members", MemberListViewModel, () => this._getMemberListArguments());
         this._hookUpdaterToSegment("member", MemberDetailsViewModel, () => this._getMemberDetailsArguments(),
             () => {

src/platform/web/ui/session/rightpanel/MemberListView.js

@@ -27,7 +27,13 @@ export class MemberListView extends TemplateView {
         }, tileViewModel => new MemberTileView(tileViewModel));
         return t.div({ className: "MemberListView" }, [
             t.div({ className: "MemberListView__invite-container" }, [
-                t.button({ className: "MemberListView__invite-btn button-action primary" }, vm.i18n`Invite to this room`),
+                t.button(
+                    {
+                        className: "MemberListView__invite-btn button-action primary",
+                        onClick: () => vm.openInvitePanel(),
+                    },
+                    vm.i18n`Invite to this room`
+                ),
             ]),
             t.view(list),
         ]);

src/platform/web/ui/session/rightpanel/RightPanelView.js

@@ -20,6 +20,7 @@ import {MemberListView} from "./MemberListView.js";
 import {LoadingView} from "../../general/LoadingView.js";
 import {MemberDetailsView} from "./MemberDetailsView.js";
 import {DeviceVerificationView} from "../verification/DeviceVerificationView";
+import {InvitePanelView} from "./InvitePanelView";
 
 export class RightPanelView extends TemplateView {
     render(t) {
@@ -40,6 +41,8 @@ export class RightPanelView extends TemplateView {
                 return new MemberListView(vm);
             case "member-details":
                 return new MemberDetailsView(vm);
+            case "invite":
+                return new InvitePanelView(vm);
             case "verification":
                 return new DeviceVerificationView(vm);
             default: