Dome/matrix.to-dracula-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first round of styling for preview

Browse Source
This commit is contained in:
Bruno Windels
2020-12-03 17:11:46 +01:00
parent 822431ac14
commit db2c2b0b25
10 changed files with 267 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/preview/PreviewView.js
+27 -10
View File
@@ -19,18 +19,35 @@ import {ClientListView} from "../open/ClientListView.js";
import {ClientView} from "../open/ClientView.js";
export class PreviewView extends TemplateView {
render(t, vm) {
return t.mapView(vm => vm.loading, loading => loading ? new LoadingPreviewView(vm) : new LoadedPreviewView(vm));
}
}
class LoadingPreviewView extends TemplateView {
render(t, vm) {
return t.div({className: "PreviewView"}, [
t.div({className: "avatarContainer"}, t.div({className: "avatar loading"}, t.div({className: "spinner"}))),
t.h1(vm => vm.identifier),
t.p({className: "identifier placeholder"}),
t.div({className: {memberCount: true, loading: true, hidden: !vm.hasMemberCount}}, t.p({className: "placeholder"})),
t.p({className: {topic: true, loading: true, hidden: !vm.hasTopic}}, [
t.div({className: "placeholder"}),
t.div({className: "placeholder"}),
t.div({className: "placeholder"}),
]),
]);
}
}
class LoadedPreviewView extends TemplateView {
render(t, vm) {
return t.div({className: "PreviewView"}, [
t.h1({className: {hidden: vm => !vm.loading}}, "Loading preview…"),
t.div({className: {hidden: vm => vm.loading}}, [
t.div({className: "preview"}, [
t.p(t.img({className: "avatar", src: vm => vm.avatarUrl})),
t.h1(vm => vm.name),
t.p({className: "identifier"}, vm => vm.identifier),
t.p({className: {memberCount: true, hidden: vm => !vm.memberCount}}, [vm => vm.memberCount, " members"]),
t.p({className: {topic: true, hidden: vm => !vm.topic}}, [vm => vm.topic]),
]),
])
t.div({className: "avatarContainer"}, t.img({className: "avatar", src: vm => vm.avatarUrl})),
t.h1(vm => vm.name),
t.p({className: {identifier: true, hidden: vm => !vm.identifier}}, vm => vm.identifier),
t.div({className: {memberCount: true, hidden: vm => !vm.memberCount}}, t.p([vm => vm.memberCount, " members"])),
t.p({className: {topic: true, hidden: vm => !vm.topic}}, [vm => vm.topic]),
]);
}
}