From c47b27428b8a6acd17efcca8561d980542dd5b3f Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@element.io>
Date: Tue, 27 Apr 2021 15:10:12 +0200
Subject: [PATCH] implement invite view + styling

---
 .../web/ui/css/themes/element/theme.css       | 77 +++++++++++++++++++
 .../web/ui/session/room/InviteView.js         | 60 +++++++++++----
 2 files changed, 122 insertions(+), 15 deletions(-)

diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css
index 28cee2f7..53c09dd8 100644
--- a/src/platform/web/ui/css/themes/element/theme.css
+++ b/src/platform/web/ui/css/themes/element/theme.css
@@ -92,12 +92,17 @@ limitations under the License.
     display: block;
 }
 
+.button-action {
+    cursor: pointer;
+}
+
 a.button-action {
     text-decoration: none;
     text-align: center;
     display: block;
 }
 
+
 .button-action.secondary {
     color: #03B381;
 }
@@ -832,3 +837,75 @@ button.link {
     background-color: #03B381;
     color: white;
 }
+
+.InviteView_body {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex: 1;
+    overflow: auto;
+}
+
+.InviteView_invite {
+    display: flex;
+    width: 100%;
+    max-width: 400px;
+    flex-direction: column;
+    padding: 0 24px;
+}
+
+.InviteView_roomProfile {
+    display: grid;
+    gap: 4px;
+    grid-template:
+        "avatar name" auto
+        "avatar description" 1fr /
+        72px 1fr;
+    align-self: center;
+    margin-bottom: 24px;
+}
+
+.InviteView_roomProfile h3 {
+    grid-area: name;
+    margin: 0;
+}
+
+.InviteView_roomDescription {
+    grid-area: description;
+    font-size: 1.2rem;
+    margin: 0;
+    color: #777;
+}
+
+.InviteView_roomAvatar {
+    grid-area: avatar;
+    --avatar-size: 64px;
+}
+
+.InviteView_dmAvatar {
+    align-self: center;
+    --avatar-size: 128px;
+}
+
+.InviteView_inviter {
+    text-align: center;
+    margin: 24px 0px;
+}
+
+.InviteView_inviter .avatar {
+    --avatar-size: 24px;
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 4px;
+}
+
+.InviteView_buttonRow {
+    margin: 10px auto;
+    max-width: 200px;
+    width: 100%;
+}
+
+.InviteView_buttonRow button {
+    display: block;
+    width: 100%;
+}
diff --git a/src/platform/web/ui/session/room/InviteView.js b/src/platform/web/ui/session/room/InviteView.js
index ae241be2..1d1e7db4 100644
--- a/src/platform/web/ui/session/room/InviteView.js
+++ b/src/platform/web/ui/session/room/InviteView.js
@@ -16,27 +16,57 @@ limitations under the License.
 */
 
 import {TemplateView} from "../../general/TemplateView.js";
-// import {TimelineList} from "./TimelineList.js";
-// import {TimelineLoadingView} from "./TimelineLoadingView.js";
-// import {MessageComposer} from "./MessageComposer.js";
 import {renderStaticAvatar} from "../../avatar.js";
 
 export class InviteView extends TemplateView {
     render(t, vm) {
+        let inviteNodes = [];
+        if (vm.isDirectMessage) {
+            inviteNodes.push(renderStaticAvatar(vm, 128, "InviteView_dmAvatar"));
+        }
+        let inviterNodes;
+        if (vm.isDirectMessage) {
+            inviterNodes = [t.strong(vm.name), ` (${vm.inviter?.id}) wants to chat with you.`];
+        } else if (vm.inviter) {
+            inviterNodes = [renderStaticAvatar(vm.inviter, 24), t.strong(vm.inviter.name), ` (${vm.inviter.id}) invited you.`];
+        } else {
+            inviterNodes = `You were invited to join.`;
+        }
+        inviteNodes.push(t.p({className: "InviteView_inviter"}, inviterNodes));
+        if (!vm.isDirectMessage) {
+            inviteNodes.push(t.div({className: "InviteView_roomProfile"}, [
+                renderStaticAvatar(vm, 64, "InviteView_roomAvatar"),
+                t.h3(vm.name),
+                t.p({className: "InviteView_roomDescription"}, vm.roomDescription)
+            ]));
+        }
+
         return t.main({className: "InviteView middle"}, [
-            t.div({className: "TimelinePanel"}, [
-                t.div({className: "RoomHeader middle-header"}, [
-                    t.a({className: "button-utility close-middle", href: vm.closeUrl, title: vm.i18n`Close invite`}),
-                    renderStaticAvatar(vm, 32),
-                    t.div({className: "room-description"}, [
-                        t.h2(vm => vm.name),
-                    ]),
+            t.div({className: "RoomHeader middle-header"}, [
+                t.a({className: "button-utility close-middle", href: vm.closeUrl, title: vm.i18n`Close invite`}),
+                renderStaticAvatar(vm, 32),
+                t.div({className: "room-description"}, [
+                    t.h2(vm => vm.name),
                 ]),
-                t.div({className: "RoomView_error"}, vm => vm.error),
-                t.div([
-                    t.p(`You were invited into this room!`),
-                    t.p(t.button({onClick: () => vm.accept()}, vm.i18n`Accept`)),
-                    t.p(t.button({onClick: () => vm.reject()}, vm.i18n`Reject`)),
+            ]),
+            t.if(vm => vm.error, t => t.div({className: "RoomView_error"}, vm => vm.error)),
+            t.div({className: "InviteView_body"}, [
+                t.div({className: "InviteView_invite"}, [
+                    ...inviteNodes,
+                    t.div({className: "InviteView_buttonRow"},
+                        t.button({
+                            className: "button-action primary",
+                            disabled: vm => vm.busy,
+                            onClick: () => vm.accept()
+                        }, vm.i18n`Accept`)
+                    ),
+                    t.div({className: "InviteView_buttonRow"},
+                        t.button({
+                            className: "button-action primary destructive",
+                            disabled: vm => vm.busy,
+                            onClick: () => vm.reject()
+                        }, vm.i18n`Reject`)
+                    ),
                 ])
             ])
         ]);