From 68092c5f628b920486eec605f62fa62e9a4e5f89 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Sat, 19 Aug 2023 23:01:23 +0530
Subject: [PATCH] Implement invite button in memberlist

---
 src/platform/web/ui/css/layout.css            |  2 ++
 .../web/ui/css/themes/element/theme.css       | 22 ++++++++++++++++++-
 .../ui/session/rightpanel/MemberListView.js   | 15 +++++++++----
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/platform/web/ui/css/layout.css b/src/platform/web/ui/css/layout.css
index f7fbe732..7d785c9f 100644
--- a/src/platform/web/ui/css/layout.css
+++ b/src/platform/web/ui/css/layout.css
@@ -217,6 +217,8 @@ the layout viewport up without resizing it when the keyboard shows */
 
 .LazyListParent {
     flex: 1;
+    flex-basis: 0;
+    margin-top: 15px;
 }
 
 .LoadingView {
diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css
index 1f7f2f13..7e54dc2f 100644
--- a/src/platform/web/ui/css/themes/element/theme.css
+++ b/src/platform/web/ui/css/themes/element/theme.css
@@ -1123,12 +1123,32 @@ button.RoomDetailsView_row::after {
 
 /* Memberlist Panel */
 
-.MemberListView {
+.MemberListView__list {
     padding-left: 16px;
     padding-right: 16px;
     margin: 0;
 }
 
+.MemberListView {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.MemberListView__invite-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.MemberListView__invite-btn {
+    width: 80%;
+    height: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 .MemberTileView {
     margin-bottom: 8px;
     list-style: none;
diff --git a/src/platform/web/ui/session/rightpanel/MemberListView.js b/src/platform/web/ui/session/rightpanel/MemberListView.js
index a4a4e78c..fdb7001d 100644
--- a/src/platform/web/ui/session/rightpanel/MemberListView.js
+++ b/src/platform/web/ui/session/rightpanel/MemberListView.js
@@ -16,13 +16,20 @@ limitations under the License.
 
 import {LazyListView} from "../../general/LazyListView";
 import {MemberTileView} from "./MemberTileView.js";
+import {TemplateView} from "../../general/TemplateView";
 
-export class MemberListView extends LazyListView {
-    constructor(vm) {
-        super({
+export class MemberListView extends TemplateView {
+    render(t, vm) {
+        const list = new LazyListView({
             list: vm.memberTileViewModels,
-            className: "MemberListView",
+            className: "MemberListView__list",
             itemHeight: 40
         }, 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.view(list),
+        ]);
     }
 }