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

Update on changes to vm

Browse source 
Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>
This commit is contained in:
RMidhunSuresh 2021-06-06 23:18:16 +05:30
parent 008f3601ca
commit efd37d811f
2 changed files with 20 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/domain/session/rightpanel/RoomInfoViewModel.js
View file

@ -5,6 +5,7 @@ export class RoomInfoViewModel extends ViewModel {
constructor(options) { constructor(options) {
super(options); super(options);
this._room = options.room; this._room = options.room;
this._room.on("change", () => this.emitChange());
} }
get roomId() { get roomId() {

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

@ -5,18 +5,20 @@ import { AvatarView } from "../../avatar.js";
export class RoomInfoView extends TemplateView { export class RoomInfoView extends TemplateView {
render(t, vm) { render(t, vm) {
const encryptionString = vm.isEncrypted ? vm.i18n`On` : vm.i18n`Off`; const encryptionString = () => vm.isEncrypted ? vm.i18n`On` : vm.i18n`Off`;
return t.div({ className: "RoomInfo" }, [ return t.div({ className: "RoomInfo" }, [
this._createButton(t, vm), this._createButton(t, vm),
t.div({ className: "RoomAvatar" }, t.div({ className: "RoomAvatar" },
[t.view(new AvatarView(vm, 52)), this._createEncryptionIcon(vm.isEncrypted)]), [
t.div({ className: "RoomName" }, [t.h2(vm.name)]), t.view(new AvatarView(vm, 52)),
t.mapView(vm => vm.isEncrypted, isEncrypted => new EncryptionAvatarView(isEncrypted))
]),
t.div({ className: "RoomName" }, [t.h2(vm => vm.name)]),
this._createRoomAliasDisplay(vm), this._createRoomAliasDisplay(vm),
t.div({ className: "SidebarRow_collection" }, t.div({ className: "SidebarRow_collection" },
[ [
this._createSideBarRow(vm.i18n`People`, vm.memberCount, { MemberCount: true }), this._createSideBarRow(t, vm.i18n`People`, vm => vm.memberCount, { MemberCount: true }),
this._createSideBarRow(vm.i18n`Encryption`, encryptionString, { EncryptionStatus: true }) this._createSideBarRow(t, vm.i18n`Encryption`, encryptionString, { EncryptionStatus: true })
]) ])
]); ]);
} }
@ -26,20 +28,15 @@ export class RoomInfoView extends TemplateView {
""; "";
} }
_createSideBarRow(label, value, labelClass, valueClass) { _createSideBarRow(t, label, value, labelClass, valueClass) {
const labelClassString = classNames({ SidebarLabel: true, ...labelClass }); const labelClassString = classNames({ SidebarLabel: true, ...labelClass });
const valueClassString = classNames({ SidebarValue: true, ...valueClass }); const valueClassString = classNames({ SidebarValue: true, ...valueClass });
return tag.div({ className: "SidebarRow" }, [ return t.div({ className: "SidebarRow" }, [
tag.div({ className: labelClassString }, [text(label)]), t.div({ className: labelClassString }, [text(label)]),
tag.div({ className: valueClassString }, [text(value)]) t.div({ className: valueClassString }, value)
]); ]);
} }
_createEncryptionIcon(isEncrypted) {
return tag.div({ className: "RoomEncryption" },
[tag.div({ className: isEncrypted ? "encrypted" : "unencrypted" })])
}
_createButton(t, vm) { _createButton(t, vm) {
return t.div({ className: "buttons" }, return t.div({ className: "buttons" },
[ [
@ -47,3 +44,10 @@ export class RoomInfoView extends TemplateView {
]); ]);
} }
} }
class EncryptionAvatarView extends TemplateView{
render(t, isEncrypted) {
return t.div({ className: "RoomEncryption" },
[t.div({ className: isEncrypted ? "encrypted" : "unencrypted" })]);
}
}