feat(frontend): サーバーの表示をアイコンのみに切り替えられるように
This commit is contained in:
parent
70b2a8f72e
commit
2dcd9118e9
|
@ -2922,6 +2922,10 @@ export interface Locale extends ILocale {
|
|||
* ノートのサーバー情報
|
||||
*/
|
||||
"instanceTicker": string;
|
||||
/**
|
||||
* サーバー情報をアイコンのみにする
|
||||
*/
|
||||
"instanceIcon": string;
|
||||
/**
|
||||
* {x}を待っています
|
||||
*/
|
||||
|
|
|
@ -726,6 +726,7 @@ openInSideView: "サイドビューで開く"
|
|||
defaultNavigationBehaviour: "デフォルトのナビゲーション"
|
||||
editTheseSettingsMayBreakAccount: "これらの設定を編集するとアカウントが破損する可能性があります。"
|
||||
instanceTicker: "ノートのサーバー情報"
|
||||
instanceIcon: "サーバー情報をアイコンのみにする"
|
||||
waitingFor: "{x}を待っています"
|
||||
random: "ランダム"
|
||||
system: "システム"
|
||||
|
|
|
@ -0,0 +1,54 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<img v-if="faviconUrl" :class="$style.instanceIcon" :src="faviconUrl"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import { instance as Instance } from '@/instance.js';
|
||||
import { getProxiedImageUrlNullable } from '@/scripts/media-proxy.js';
|
||||
const props = defineProps<{
|
||||
instance?: {
|
||||
faviconUrl?: string | null
|
||||
}
|
||||
}>();
|
||||
const faviconUrl = computed(() => props.instance ? getProxiedImageUrlNullable(props.instance.faviconUrl, 'preview') : getProxiedImageUrlNullable(Instance.iconUrl, 'preview') ?? '/favicon.ico');
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.instanceIcon {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50%;
|
||||
opacity: 0.7;
|
||||
background: var(--MI_THEME-panel);
|
||||
box-shadow: 0 0 0 2px var(--MI_THEME-panel);
|
||||
}
|
||||
|
||||
@container (max-width: 580px) {
|
||||
.instanceIcon {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
@container (max-width: 450px) {
|
||||
.instanceIcon {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
@container (max-width: 300px) {
|
||||
.instanceIcon {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -47,10 +47,10 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</div>
|
||||
<article v-else :class="$style.article" @contextmenu.stop="onContextmenu">
|
||||
<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
|
||||
<MkAvatar :class="$style.avatar" :user="appearNote.user" :link="!mock" :preview="!mock"/>
|
||||
<MkAvatar :class="$style.avatar" :user="appearNote.user" :link="!mock" :preview="!mock" :showInstance="!!showInstanceIcon && !!showTicker"/>
|
||||
<div :class="$style.main">
|
||||
<MkNoteHeader :note="appearNote" :mini="true"/>
|
||||
<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
|
||||
<MkInstanceTicker v-if="showTicker && !showInstanceIcon" :instance="appearNote.user.instance"/>
|
||||
<div style="container-type: inline-size;">
|
||||
<p v-if="appearNote.cw != null" :class="$style.cw">
|
||||
<Mfm
|
||||
|
@ -274,6 +274,7 @@ const hardMuted = ref(props.withHardMute && checkMute(appearNote.value, $i?.hard
|
|||
const translation = ref<Misskey.entities.NotesTranslateResponse | null>(null);
|
||||
const translating = ref(false);
|
||||
const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.value.user.instance);
|
||||
const showInstanceIcon = ref(defaultStore.state.instanceIcon);
|
||||
const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || (appearNote.value.visibility === 'followers' && appearNote.value.userId === $i?.id));
|
||||
const renoteCollapsed = ref(
|
||||
defaultStore.state.collapseRenotes && isRenote && (
|
||||
|
|
|
@ -35,6 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
}"
|
||||
alt=""
|
||||
>
|
||||
<MkInstanceIcon v-if="showInstance" :class="$style.instanceicon" :instance="user.instance"/>
|
||||
</template>
|
||||
</component>
|
||||
</template>
|
||||
|
@ -49,6 +50,7 @@ import { getStaticImageUrl } from '@/scripts/media-proxy.js';
|
|||
import { acct, userPage } from '@/filters/user.js';
|
||||
import MkUserOnlineIndicator from '@/components/MkUserOnlineIndicator.vue';
|
||||
import { defaultStore } from '@/store.js';
|
||||
import MkInstanceIcon from '@/components/MkInstanceIcon.vue';
|
||||
|
||||
const animation = ref(defaultStore.state.animation);
|
||||
const squareAvatars = ref(defaultStore.state.squareAvatars);
|
||||
|
@ -62,6 +64,7 @@ const props = withDefaults(defineProps<{
|
|||
indicator?: boolean;
|
||||
decorations?: (Omit<Misskey.entities.UserDetailed['avatarDecorations'][number], 'id'> & { blink?: boolean; })[];
|
||||
forceShowDecoration?: boolean;
|
||||
showInstance?: boolean;
|
||||
}>(), {
|
||||
target: null,
|
||||
link: false,
|
||||
|
@ -69,6 +72,7 @@ const props = withDefaults(defineProps<{
|
|||
indicator: false,
|
||||
decorations: undefined,
|
||||
forceShowDecoration: false,
|
||||
showInstance: false,
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
|
@ -343,4 +347,30 @@ watch(() => props.user.avatarBlurhash, () => {
|
|||
filter: brightness(1);
|
||||
}
|
||||
}
|
||||
|
||||
.instanceicon {
|
||||
height: 25px;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
@container (max-width: 580px) {
|
||||
.instanceicon {
|
||||
height: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
@container (max-width: 450px) {
|
||||
.instanceicon {
|
||||
height: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
@container (max-width: 300px) {
|
||||
.instanceicon {
|
||||
height: 17px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -70,7 +70,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<option value="remote">{{ i18n.ts._instanceTicker.remote }}</option>
|
||||
<option value="always">{{ i18n.ts._instanceTicker.always }}</option>
|
||||
</MkSelect>
|
||||
|
||||
<MkSwitch v-if="instanceTicker !== 'none'" v-model="instanceIcon">{{ i18n.ts.instanceIcon }}</MkSwitch>
|
||||
<MkSelect v-model="nsfw">
|
||||
<template #label>{{ i18n.ts.displayOfSensitiveMedia }}</template>
|
||||
<option value="respect">{{ i18n.ts._displayOfSensitiveMedia.respect }}</option>
|
||||
|
@ -304,6 +304,7 @@ const showFixedPostForm = computed(defaultStore.makeGetterSetter('showFixedPostF
|
|||
const showFixedPostFormInChannel = computed(defaultStore.makeGetterSetter('showFixedPostFormInChannel'));
|
||||
const numberOfPageCache = computed(defaultStore.makeGetterSetter('numberOfPageCache'));
|
||||
const instanceTicker = computed(defaultStore.makeGetterSetter('instanceTicker'));
|
||||
const instanceIcon = computed(defaultStore.makeGetterSetter('instanceIcon'));
|
||||
const enableInfiniteScroll = computed(defaultStore.makeGetterSetter('enableInfiniteScroll'));
|
||||
const useReactionPickerForContextMenu = computed(defaultStore.makeGetterSetter('useReactionPickerForContextMenu'));
|
||||
const squareAvatars = computed(defaultStore.makeGetterSetter('squareAvatars'));
|
||||
|
@ -353,6 +354,7 @@ watch([
|
|||
showNoteActionsOnlyHover,
|
||||
showGapBetweenNotesInTimeline,
|
||||
instanceTicker,
|
||||
instanceIcon,
|
||||
overridedDeviceKind,
|
||||
mediaListWithOneImageAppearance,
|
||||
reactionsDisplaySize,
|
||||
|
|
|
@ -296,6 +296,10 @@ export const defaultStore = markRaw(new Storage('base', {
|
|||
where: 'device',
|
||||
default: 'remote' as 'none' | 'remote' | 'always',
|
||||
},
|
||||
instanceIcon: {
|
||||
where: 'device',
|
||||
default: false,
|
||||
},
|
||||
emojiPickerScale: {
|
||||
where: 'device',
|
||||
default: 1,
|
||||
|
|
Loading…
Reference in New Issue