amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

enhance: Modify MkInstanceTicker (#9236)

Browse Source 
* 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

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

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

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

@ -1,13 +1,14 @@
import { query } from '@/scripts/url';
import { url } from '@/config';
export function getProxiedImageUrl(imageUrl: string): string {
export function getProxiedImageUrl(imageUrl: string, type?: 'preview'): string {
return `${url}/proxy/image.webp?${query({
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;
return getProxiedImageUrl(imageUrl);
return getProxiedImageUrl(imageUrl, type);
}