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`) + ), ]) ]) ]);