diff --git a/src/platform/web/ui/css/right-panel.css b/src/platform/web/ui/css/right-panel.css index 19b45596..f3f34e38 100644 --- a/src/platform/web/ui/css/right-panel.css +++ b/src/platform/web/ui/css/right-panel.css @@ -1,30 +1,30 @@ -.RoomInfo { +.RoomDetailsView { grid-area: right; flex-direction: column; } -.RoomAvatar { +.RoomDetailsView_avatar { display: flex; } -.RoomName h2 { +.RoomDetailsView_name h2 { text-align: center; } -.SidebarRow { +.RoomDetailsView_row { justify-content: space-between; } -.SidebarLabel, .SidebarRow, .RoomInfo, .RoomEncryption { +.RoomDetailsView_label, .RoomDetailsView_row, .RoomDetailsView, .EncryptionIconView { display: flex; align-items: center; } -.RoomEncryption { +.EncryptionIconView { justify-content: center; } -.buttons { +.RoomDetailsView_buttons { display: flex; justify-content: flex-end; width: 100%; diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index 4a397d13..f41570d4 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -780,44 +780,44 @@ button.link { /* Right Panel */ -.RoomInfo { +.RoomDetailsView { background: rgba(245, 245, 245, 0.90); padding: 10px; } -.RoomAvatar { +.RoomDetailsView_avatar { margin-top: 44px; } -.RoomId { +.RoomDetailsView_id { color: #737D8C; font-size: 12px; } -.SidebarRow_collection{ +.RoomDetailsView_rows{ margin-top: 36px; width: 100%; } -.RoomName h2 { +.RoomDetailsView_name h2 { margin-bottom: 4px; font-size: 1.8rem; } -.SidebarRow { +.RoomDetailsView_row { width: 90%; margin-bottom: 20px; font-weight: 500; font-size: 15px; } -.SidebarLabel::before { +.RoomDetailsView_label::before { padding-right: 16px; height: 20px; width: 20px; } -.SidebarValue { +.RoomDetailsView_value { color: #737D8C; } @@ -831,7 +831,7 @@ button.link { /* Encryption icon next to avatar */ -.RoomEncryption { +.EncryptionIconView { width: 52px; height: 52px; border-radius: 100%; @@ -840,24 +840,24 @@ button.link { margin-left: -16px; } -.encrypted, .unencrypted { +.EncryptionIconView_encrypted, .EncryptionIconView_unencrypted { height: 24px; width: 24px; } -.encrypted { +.EncryptionIconView_encrypted { content: url("./icons/e2ee-normal.svg"); } -.unencrypted { +.EncryptionIconView_unencrypted { content: url("./icons/e2ee-disabled.svg"); } -.RoomInfo .button-utility { +.RoomDetailsView .button-utility { width: 24px; height: 24px; } -.RoomInfo .close { +.RoomDetailsView .close { background-image: url("./icons/clear.svg"); } diff --git a/src/platform/web/ui/session/rightpanel/RoomInfoView.js b/src/platform/web/ui/session/rightpanel/RoomInfoView.js index c70454e7..43a0f994 100644 --- a/src/platform/web/ui/session/rightpanel/RoomInfoView.js +++ b/src/platform/web/ui/session/rightpanel/RoomInfoView.js @@ -6,48 +6,48 @@ export class RoomInfoView extends TemplateView { render(t, vm) { const encryptionString = () => vm.isEncrypted ? vm.i18n`On` : vm.i18n`Off`; - return t.div({ className: "RoomInfo" }, [ + return t.div({ className: "RoomDetailsView" }, [ this._createButton(t, vm), - t.div({ className: "RoomAvatar" }, + t.div({ className: "RoomDetailsView_avatar" }, [ t.view(new AvatarView(vm, 52)), - t.mapView(vm => vm.isEncrypted, isEncrypted => new EncryptionAvatarView(isEncrypted)) + t.mapView(vm => vm.isEncrypted, isEncrypted => new EncryptionIconView(isEncrypted)) ]), - t.div({ className: "RoomName" }, [t.h2(vm => vm.name)]), + t.div({ className: "RoomDetailsView_name" }, [t.h2(vm => vm.name)]), this._createRoomAliasDisplay(vm), - t.div({ className: "SidebarRow_collection" }, + t.div({ className: "RoomDetailsView_rows" }, [ - this._createSideBarRow(t, vm.i18n`People`, vm => vm.memberCount, { MemberCount: true }), - this._createSideBarRow(t, vm.i18n`Encryption`, encryptionString, { EncryptionStatus: true }) + this._createRightPanelRow(t, vm.i18n`People`, vm => vm.memberCount, { MemberCount: true }), + this._createRightPanelRow(t, vm.i18n`Encryption`, encryptionString, { EncryptionStatus: true }) ]) ]); } _createRoomAliasDisplay(vm) { - return vm.canonicalAlias ? tag.div({ className: "RoomId" }, [text(vm.canonicalAlias)]) : + return vm.canonicalAlias ? tag.div({ className: "RoomDetailsView_id" }, [text(vm.canonicalAlias)]) : ""; } - _createSideBarRow(t, label, value, labelClass, valueClass) { - const labelClassString = classNames({ SidebarLabel: true, ...labelClass }); - const valueClassString = classNames({ SidebarValue: true, ...valueClass }); - return t.div({ className: "SidebarRow" }, [ + _createRightPanelRow(t, label, value, labelClass, valueClass) { + const labelClassString = classNames({ RoomDetailsView_label: true, ...labelClass }); + const valueClassString = classNames({ RoomDetailsView_value: true, ...valueClass }); + return t.div({ className: "RoomDetailsView_row" }, [ t.div({ className: labelClassString }, [text(label)]), t.div({ className: valueClassString }, value) ]); } _createButton(t, vm) { - return t.div({ className: "buttons" }, + return t.div({ className: "RoomDetailsView_buttons" }, [ t.button({ className: "close button-utility", onClick: () => vm.closePanel() }) ]); } } -class EncryptionAvatarView extends TemplateView{ +class EncryptionIconView extends TemplateView{ render(t, isEncrypted) { - return t.div({ className: "RoomEncryption" }, - [t.div({ className: isEncrypted ? "encrypted" : "unencrypted" })]); + return t.div({ className: "EncryptionIconView" }, + [t.div({ className: isEncrypted ? "EncryptionIconView_encrypted" : "EncryptionIconView_unencrypted" })]); } }