sij/env.esq
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

don't show border radios on default avatar icon

Browse source
This commit is contained in:
Bruno Windels 2020-12-07 17:47:08 +01:00
parent 34410059b1
commit 9712ecf974
3 changed files with 20 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
css/preview.css
View file

@ -21,6 +21,15 @@
height: 64px; height: 64px;
} }
.PreviewView .defaultAvatar {
width: 64px;
height: 64px;
background-image: url('../images/chat-icon.svg');
background-repeat: no-repeat;
background-position: center;
background-size: 85%;
}
.PreviewView .spinner { .PreviewView .spinner {
width: 32px; width: 32px;
height: 32px; height: 32px;

9
src/preview/PreviewView.js
View file

@ -44,8 +44,15 @@ class LoadingPreviewView extends TemplateView {
class LoadedPreviewView extends TemplateView { class LoadedPreviewView extends TemplateView {
render(t, vm) { render(t, vm) {
const avatar = t.mapView(vm => vm.avatarUrl, avatarUrl => {
if (avatarUrl) {
return new TemplateView(avatarUrl, (t, src) => t.img({className: "avatar", src}));
} else {
return new TemplateView(null, t => t.div({className: "defaultAvatar"}));
}
});
return t.div([ return t.div([
t.div({className: "avatarContainer"}, t.img({className: "avatar", src: vm => vm.avatarUrl})), t.div({className: "avatarContainer"}, avatar),
t.h1(vm => vm.name), t.h1(vm => vm.name),
t.p({className: {identifier: true, hidden: vm => !vm.identifier}}, vm => vm.identifier), 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.div({className: {memberCount: true, hidden: vm => !vm.memberCount}}, t.p([vm => vm.memberCount, " members"])),

8
src/preview/PreviewViewModel.js
View file

@ -20,8 +20,6 @@ import {resolveServer} from "./HomeServer.js";
import {ClientListViewModel} from "../open/ClientListViewModel.js"; import {ClientListViewModel} from "../open/ClientListViewModel.js";
import {ClientViewModel} from "../open/ClientViewModel.js"; import {ClientViewModel} from "../open/ClientViewModel.js";
const DEFAULT_AVATAR = "images/chat-icon.svg";
export class PreviewViewModel extends ViewModel { export class PreviewViewModel extends ViewModel {
constructor(options) { constructor(options) {
super(options); super(options);
@ -84,7 +82,7 @@ export class PreviewViewModel extends ViewModel {
this.name = profile.displayname || userId; this.name = profile.displayname || userId;
this.avatarUrl = profile.avatar_url ? this.avatarUrl = profile.avatar_url ?
homeserver.mxcUrlThumbnail(profile.avatar_url, 64, 64, "crop") : homeserver.mxcUrlThumbnail(profile.avatar_url, 64, 64, "crop") :
DEFAULT_AVATAR; null;
this.identifier = userId; this.identifier = userId;
} }
@ -101,7 +99,7 @@ export class PreviewViewModel extends ViewModel {
this.name = publicRoom?.name || publicRoom?.canonical_alias || link.identifier; this.name = publicRoom?.name || publicRoom?.canonical_alias || link.identifier;
this.avatarUrl = publicRoom?.avatar_url ? this.avatarUrl = publicRoom?.avatar_url ?
homeserver.mxcUrlThumbnail(publicRoom.avatar_url, 64, 64, "crop") : homeserver.mxcUrlThumbnail(publicRoom.avatar_url, 64, 64, "crop") :
DEFAULT_AVATAR; null;
this.memberCount = publicRoom?.num_joined_members; this.memberCount = publicRoom?.num_joined_members;
this.topic = publicRoom?.topic; this.topic = publicRoom?.topic;
this.identifier = publicRoom?.canonical_alias || link.identifier; this.identifier = publicRoom?.canonical_alias || link.identifier;
@ -113,6 +111,6 @@ export class PreviewViewModel extends ViewModel {
_setNoPreview(link) { _setNoPreview(link) {
this.name = link.identifier; this.name = link.identifier;
this.identifier = null; this.identifier = null;
this.avatarUrl = DEFAULT_AVATAR; this.avatarUrl = null;
} }
} }