put client icons as img tag

This commit is contained in:
Bruno Windels 2020-12-04 16:08:42 +01:00
parent f52867f2e8
commit a705621dd5
5 changed files with 15 additions and 13 deletions

View File

@ -21,20 +21,14 @@
margin-top: 0; margin-top: 0;
} }
.ClientView .icon { .ClientView .clientIcon {
border-radius: 8px; border-radius: 8px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
width: 60px; width: 60px;
height: 60px; height: 60px;
} overflow: hidden;
display: block;
.ClientView .icon.element-io {
background-image: url('../images/client-icons/element.svg');
}
.ClientView .icon.weechat {
background-image: url('../images/client-icons/weechat.svg');
} }
.ClientView .actions a.badge { .ClientView .actions a.badge {

View File

@ -34,7 +34,7 @@ export class ClientView extends TemplateView {
t.p(vm.description), t.p(vm.description),
t.p(formatPlatforms(vm.availableOnPlatformNames)), t.p(formatPlatforms(vm.availableOnPlatformNames)),
]), ]),
t.div({className: `icon ${vm.clientId}`}) t.img({className: "clientIcon", src: vm.iconUrl})
]), ]),
t.mapView(vm => vm.stage, stage => { t.mapView(vm => vm.stage, stage => {
switch (stage) { switch (stage) {

View File

@ -90,6 +90,10 @@ export class ClientViewModel extends ViewModel {
return this._client.id; return this._client.id;
} }
get iconUrl() {
return this._client.icon;
}
get stage() { get stage() {
return this._showOpen ? "open" : "install"; return this._showOpen ? "open" : "install";
} }

View File

@ -21,8 +21,7 @@ import {Maturity, Platform, LinkKind,
* Information on how to deep link to a given matrix client. * Information on how to deep link to a given matrix client.
*/ */
export class Element { export class Element {
/* should only contain alphanumerical and -_, no dots (needs to be usable as css class) */ get id() { return "element.io"; }
get id() { return "element-io"; }
get platforms() { get platforms() {
return [ return [
@ -32,6 +31,10 @@ export class Element {
]; ];
} }
get icon() {
return "images/client-icons/element.svg";
}
get appleAssociatedAppId() { return "7J4U792NQT.im.vector.app"; } get appleAssociatedAppId() { return "7J4U792NQT.im.vector.app"; }
get description() { return 'Fully-featured Matrix client, used by millions.'; } get description() { return 'Fully-featured Matrix client, used by millions.'; }

View File

@ -23,6 +23,7 @@ export class Weechat {
/* should only contain alphanumerical and -_, no dots (needs to be usable as css class) */ /* should only contain alphanumerical and -_, no dots (needs to be usable as css class) */
get id() { return "weechat"; } get id() { return "weechat"; }
getName(platform) { return "Weechat"; } getName(platform) { return "Weechat"; }
get icon() { return "images/client-icons/weechat.svg"; }
get author() { return "Poljar"; } get author() { return "Poljar"; }
get homepage() { return "https://github.com/poljar/weechat-matrix"; } get homepage() { return "https://github.com/poljar/weechat-matrix"; }
get platforms() { return [Platform.Windows, Platform.macOS, Platform.Linux]; } get platforms() { return [Platform.Windows, Platform.macOS, Platform.Linux]; }
@ -39,4 +40,4 @@ export class Weechat {
} }
getInstallLinks(platform) {} getInstallLinks(platform) {}
} }