stryan/matrix.to
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

more preview polish

Browse Source
This commit is contained in:
Bruno Windels 2020-12-03 17:42:46 +01:00
parent 7f460caf6b
commit bc8540c3f5
3 changed files with 10 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
css/preview.css
View File

@ -50,29 +50,28 @@
margin: 8px 0; margin: 8px 0;
} }
.PreviewView .memberCount p {
}
.PreviewView .memberCount.loading { .PreviewView .memberCount.loading {
margin: 16px 0; margin: 16px 0;
} }
.PreviewView .memberCount p { .PreviewView .memberCount p {
font-size: 12px;
margin: 0;
}
.PreviewView .memberCount p:not(.placeholder) {
padding: 0 4px 0 24px;
border-radius: 8px;
background-image: url(../images/member-icon.svg); background-image: url(../images/member-icon.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 2px center; background-position: 2px center;
padding: 0 4px 0 24px;
background-color: var(--lightgrey); background-color: var(--lightgrey);
border-radius: 8px;
font-size: 12px;
margin: 0;
} }
.PreviewView .memberCount p.placeholder { .PreviewView .memberCount p.placeholder {
height: 1.5em; height: 1.5em;
width: 100px; width: 100px;
background-image: none;
padding: 0;
} }
.PreviewView .topic { .PreviewView .topic {

2
src/preview/PreviewView.js
View File

@ -28,7 +28,7 @@ class LoadingPreviewView extends TemplateView {
render(t, vm) { render(t, vm) {
return t.div({className: "PreviewView"}, [ return t.div({className: "PreviewView"}, [
t.div({className: "avatarContainer"}, t.div({className: "avatar loading"}, t.div({className: "spinner"}))), t.div({className: "avatarContainer"}, t.div({className: "avatar loading"}, t.div({className: "spinner"}))),
t.h1(vm => vm.identifier), t.h1(vm => vm.name),
t.p({className: "identifier placeholder"}), t.p({className: "identifier placeholder"}),
t.div({className: {memberCount: true, loading: true, hidden: !vm.hasMemberCount}}, t.p({className: "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.p({className: {topic: true, loading: true, hidden: !vm.hasTopic}}, [

4
src/preview/PreviewViewModel.js
View File

@ -27,9 +27,9 @@ export class PreviewViewModel extends ViewModel {
this._link = link; this._link = link;
this._consentedServers = consentedServers; this._consentedServers = consentedServers;
this.loading = false; this.loading = false;
this.name = null; this.name = this._link.identifier;
this.avatarUrl = null; this.avatarUrl = null;
this.identifier = this._link.identifier; this.identifier = null;
this.memberCount = null; this.memberCount = null;
this.topic = null; this.topic = null;
this.previewDomain = null; this.previewDomain = null;