mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity

Stick to naming convention for css/html classes

Browse source 
Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>
This commit is contained in:
RMidhunSuresh 2021-06-06 23:52:24 +05:30
parent efd37d811f
commit f917730a21
3 changed files with 37 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/platform/web/ui/css/right-panel.css
View file

@ -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%;

28
src/platform/web/ui/css/themes/element/theme.css
View file

@ -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");
}

32
src/platform/web/ui/session/rightpanel/RoomInfoView.js
View file

@ -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" })]);
}
}