mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-24 12:04:57 +01:00
Make formatting consistent with the codebase
Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>
This commit is contained in:
parent
0c5d118bfd
commit
b2f2d51594
@ -1,52 +1,51 @@
|
|||||||
import { TemplateView } from "../../general/TemplateView.js";
|
import {TemplateView} from "../../general/TemplateView.js";
|
||||||
import { text, classNames, tag } from "../../general/html.js";
|
import {text, classNames, tag} from "../../general/html.js";
|
||||||
import { AvatarView } from "../../avatar.js";
|
import {AvatarView} from "../../avatar.js";
|
||||||
|
|
||||||
export class RoomDetailsView extends TemplateView {
|
export class RoomDetailsView 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: "RoomDetailsView" }, [
|
return t.div({className: "RoomDetailsView"}, [
|
||||||
this._createButton(t, vm),
|
this._createButton(t, vm),
|
||||||
t.div({ className: "RoomDetailsView_avatar" },
|
t.div({className: "RoomDetailsView_avatar"},
|
||||||
[
|
[
|
||||||
t.view(new AvatarView(vm, 52)),
|
t.view(new AvatarView(vm, 52)),
|
||||||
t.mapView(vm => vm.isEncrypted, isEncrypted => new EncryptionIconView(isEncrypted))
|
t.mapView(vm => vm.isEncrypted, isEncrypted => new EncryptionIconView(isEncrypted))
|
||||||
]),
|
]),
|
||||||
t.div({ className: "RoomDetailsView_name" }, [t.h2(vm => vm.name)]),
|
t.div({className: "RoomDetailsView_name"}, [t.h2(vm => vm.name)]),
|
||||||
this._createRoomAliasDisplay(vm),
|
this._createRoomAliasDisplay(vm),
|
||||||
t.div({ className: "RoomDetailsView_rows" },
|
t.div({className: "RoomDetailsView_rows"},
|
||||||
[
|
[
|
||||||
this._createRightPanelRow(t, vm.i18n`People`, { MemberCount: true }, vm => vm.memberCount),
|
this._createRightPanelRow(t, vm.i18n`People`, {MemberCount: true}, vm => vm.memberCount),
|
||||||
this._createRightPanelRow(t, vm.i18n`Encryption`, { EncryptionStatus: true }, encryptionString)
|
this._createRightPanelRow(t, vm.i18n`Encryption`, {EncryptionStatus: true}, encryptionString)
|
||||||
])
|
])
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
_createRoomAliasDisplay(vm) {
|
_createRoomAliasDisplay(vm) {
|
||||||
return vm.canonicalAlias ? tag.div({ className: "RoomDetailsView_id" }, [text(vm.canonicalAlias)]) :
|
return vm.canonicalAlias ? tag.div({className: "RoomDetailsView_id"}, [text(vm.canonicalAlias)]) :
|
||||||
"";
|
"";
|
||||||
}
|
}
|
||||||
|
|
||||||
_createRightPanelRow(t, label, labelClass, value) {
|
_createRightPanelRow(t, label, labelClass, value) {
|
||||||
const labelClassString = classNames({ RoomDetailsView_label: true, ...labelClass });
|
const labelClassString = classNames({RoomDetailsView_label: true, ...labelClass});
|
||||||
return t.div({ className: "RoomDetailsView_row" }, [
|
return t.div({className: "RoomDetailsView_row"}, [
|
||||||
t.div({ className: labelClassString }, [text(label)]),
|
t.div({className: labelClassString}, [text(label)]),
|
||||||
t.div({ className: "RoomDetailsView_value" }, value)
|
t.div({className: "RoomDetailsView_value"}, value)
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
_createButton(t, vm) {
|
_createButton(t, vm) {
|
||||||
return t.div({ className: "RoomDetailsView_buttons" },
|
return t.div({className: "RoomDetailsView_buttons"},
|
||||||
[
|
[
|
||||||
t.button({ className: "close button-utility", onClick: () => vm.closePanel() })
|
t.button({className: "close button-utility", onClick: () => vm.closePanel()})
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class EncryptionIconView extends TemplateView {
|
class EncryptionIconView extends TemplateView {
|
||||||
render(t, isEncrypted) {
|
render(t, isEncrypted) {
|
||||||
return t.div({ className: "EncryptionIconView" },
|
return t.div({className: "EncryptionIconView"},
|
||||||
[t.div({ className: isEncrypted ? "EncryptionIconView_encrypted" : "EncryptionIconView_unencrypted" })]);
|
[t.div({className: isEncrypted ? "EncryptionIconView_encrypted" : "EncryptionIconView_unencrypted"})]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user