forked from FoundKeyGang/FoundKey
show software name and version in instance ticker
This commit is contained in:
parent
d945a5247d
commit
09ebbe1d49
1 changed files with 21 additions and 2 deletions
|
@ -1,7 +1,8 @@
|
|||
<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"/>
|
||||
<span class="name">{{ instance.name }}</span>
|
||||
<span v-if="instance.softwareName" class="software">{{ instance.softwareName }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -13,6 +14,8 @@ const props = defineProps<{
|
|||
faviconUrl?: string;
|
||||
name: string;
|
||||
themeColor?: string;
|
||||
softwareName?: string;
|
||||
softwareVersion?: string;
|
||||
};
|
||||
}>();
|
||||
|
||||
|
@ -21,6 +24,8 @@ const instance = props.instance ?? {
|
|||
faviconUrl: '/favicon.ico',
|
||||
name: instanceName,
|
||||
themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement).content,
|
||||
softwareName: 'misskey',
|
||||
softwareVersion: '',
|
||||
};
|
||||
|
||||
const themeColor = instance.themeColor ?? '#777777';
|
||||
|
@ -33,6 +38,7 @@ const bg = {
|
|||
<style lang="scss" scoped>
|
||||
.hpaizdrt {
|
||||
$height: 1.1rem;
|
||||
position: relative;
|
||||
|
||||
height: $height;
|
||||
border-radius: 4px 0 0 4px;
|
||||
|
@ -59,11 +65,24 @@ const bg = {
|
|||
}
|
||||
|
||||
> .name {
|
||||
margin-left: 4px;
|
||||
margin-left: .3em;
|
||||
line-height: $height;
|
||||
font-size: 0.9em;
|
||||
vertical-align: top;
|
||||
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>
|
||||
|
|
Loading…
Reference in a new issue