wait-what/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Packages Projects Releases Wiki Activity

show software name and version in instance ticker

Browse source
This commit is contained in:
Johann150 2022-08-25 18:49:28 +02:00 committed by Gitea
parent d945a5247d
commit 09ebbe1d49
1 changed files with 21 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
packages/client/src/components/instance-ticker.vue
View file

@ -1,7 +1,8 @@
<template> <template>
<div class="hpaizdrt" :style="bg"> <div class="hpaizdrt" :style="bg" v-tooltip="instance.softwareName + ' ' + instance.softwareVersion">
<img v-if="instance.faviconUrl" class="icon" :src="instance.faviconUrl"/> <img v-if="instance.faviconUrl" class="icon" :src="instance.faviconUrl"/>
<span class="name">{{ instance.name }}</span> <span class="name">{{ instance.name }}</span>
<span v-if="instance.softwareName" class="software">{{ instance.softwareName }}</span>
</div> </div>
</template> </template>
@ -13,6 +14,8 @@ const props = defineProps<{
faviconUrl?: string; faviconUrl?: string;
name: string; name: string;
themeColor?: string; themeColor?: string;
softwareName?: string;
softwareVersion?: string;
}; };
}>(); }>();
@ -21,6 +24,8 @@ const instance = props.instance ?? {
faviconUrl: '/favicon.ico', faviconUrl: '/favicon.ico',
name: instanceName, name: instanceName,
themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement).content, themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement).content,
softwareName: 'misskey',
softwareVersion: '',
}; };
const themeColor = instance.themeColor ?? '#777777'; const themeColor = instance.themeColor ?? '#777777';
@ -33,6 +38,7 @@ const bg = {
<style lang="scss" scoped> <style lang="scss" scoped>
.hpaizdrt { .hpaizdrt {
$height: 1.1rem; $height: 1.1rem;
position: relative;
height: $height; height: $height;
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
@ -59,11 +65,24 @@ const bg = {
} }
> .name { > .name {
margin-left: 4px; margin-left: .3em;
line-height: $height; line-height: $height;
font-size: 0.9em; font-size: 0.9em;
vertical-align: top; vertical-align: top;
font-weight: bold; font-weight: bold;
} }
> .software {
float: right;
margin-right: .3em;
line-height: $height;
font-size: 0.9em;
vertical-align: top;
color: var(--fg);
text-shadow: none;
text-transform: capitalize;
}
} }
</style> </style>