heartles
/
egirlskey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

enhance: Modify MkInstanceTicker (#9236) 

* fix and enhance MkNoteDetailed

* change instanceticker

* 🎨

* fix

* 🎨

* fix

* 🎨

* revert MkNoteDetailed
This commit is contained in:
tamaina 2022-11-27 08:57:11 +09:00 committed by GitHub
parent 285860f958
commit 707398b1d9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/client/src/components/MkInstanceTicker.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="hpaizdrt" :style="bg"> <div :class="$style.root" :style="bg">
<img v-if="instance.faviconUrl" class="icon" :src="instance.faviconUrl"/> <img v-if="faviconUrl" :class="$style.icon" :src="faviconUrl"/>
<span class="name">{{ instance.name }}</span> <div :class="$style.name">{{ instance.name }}</div>
</div> </div>
</template> </template>
@ -21,11 +21,12 @@ const props = defineProps<{
// if no instance data is given, this is for the local instance // if no instance data is given, this is for the local instance
const instance = props.instance ?? { const instance = props.instance ?? {
faviconUrl: getProxiedImageUrlNullable(Instance.iconUrl) ?? getProxiedImageUrlNullable(Instance.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,
}; };
const faviconUrl = $computed(() => props.instance ? getProxiedImageUrlNullable(props.instance.faviconUrl, 'preview') : getProxiedImageUrlNullable(Instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(Instance.faviconUrl, 'preview') ?? '/favicon.ico');
const themeColor = instance.themeColor ?? '#777777'; const themeColor = instance.themeColor ?? '#777777';
const bg = { const bg = {
@ -33,13 +34,15 @@ const bg = {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.hpaizdrt { $height: 2ex;
$height: 1.1rem;
.root {
display: flex;
align-items: center;
height: $height; height: $height;
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
overflow: hidden; overflow: clip;
color: #fff; color: #fff;
text-shadow: /* .866 ≈ sin(60deg) */ text-shadow: /* .866 ≈ sin(60deg) */
1px 0 1px #000, 1px 0 1px #000,
@ -54,17 +57,16 @@ const bg = {
0 -1px 1px #000, 0 -1px 1px #000,
.5px -.866px 1px #000, .5px -.866px 1px #000,
.866px -.5px 1px #000; .866px -.5px 1px #000;
> .icon {
height: 100%;
} }
> .name { .icon {
height: $height;
}
.name {
margin-left: 4px; margin-left: 4px;
line-height: $height; line-height: 1;
font-size: 0.9em; font-size: 0.9em;
vertical-align: top;
font-weight: bold; font-weight: bold;
} }
}
</style> </style>

7
packages/client/src/scripts/media-proxy.ts
View File

@ -1,13 +1,14 @@
import { query } from '@/scripts/url'; import { query } from '@/scripts/url';
import { url } from '@/config'; import { url } from '@/config';
export function getProxiedImageUrl(imageUrl: string): string { export function getProxiedImageUrl(imageUrl: string, type?: 'preview'): string {
return `${url}/proxy/image.webp?${query({ return `${url}/proxy/image.webp?${query({
url: imageUrl, url: imageUrl,
...(type ? { [type]: "1" } : {}),
})}`; })}`;
} }
export function getProxiedImageUrlNullable(imageUrl: string | null | undefined): string | null { export function getProxiedImageUrlNullable(imageUrl: string | null | undefined, type?: 'preview'): string | null {
if (imageUrl == null) return null; if (imageUrl == null) return null;
return getProxiedImageUrl(imageUrl); return getProxiedImageUrl(imageUrl, type);
} }