diff --git a/locales/index.d.ts b/locales/index.d.ts index e002540307..b271708adb 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -2922,6 +2922,10 @@ export interface Locale extends ILocale { * ノートのサーバー情報 */ "instanceTicker": string; + /** + * サーバー情報をアイコンのみにする + */ + "instanceIcon": string; /** * {x}を待っています */ diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index f3f7e5c77f..113566e749 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -726,6 +726,7 @@ openInSideView: "サイドビューで開く" defaultNavigationBehaviour: "デフォルトのナビゲーション" editTheseSettingsMayBreakAccount: "これらの設定を編集するとアカウントが破損する可能性があります。" instanceTicker: "ノートのサーバー情報" +instanceIcon: "サーバー情報をアイコンのみにする" waitingFor: "{x}を待っています" random: "ランダム" system: "システム" diff --git a/packages/frontend/src/components/MkInstanceIcon.vue b/packages/frontend/src/components/MkInstanceIcon.vue new file mode 100644 index 0000000000..791f8ffa00 --- /dev/null +++ b/packages/frontend/src/components/MkInstanceIcon.vue @@ -0,0 +1,54 @@ + + + + + + + diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index be1339ecc4..294856afac 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -47,10 +47,10 @@ SPDX-License-Identifier: AGPL-3.0-only
- +
- +

(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 && ( diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue index 35c07bc80c..13c39a5f29 100644 --- a/packages/frontend/src/components/global/MkAvatar.vue +++ b/packages/frontend/src/components/global/MkAvatar.vue @@ -35,6 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only }" alt="" > + @@ -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 & { 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; + } +} diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue index 1bfdfd0e76..84d5784d45 100644 --- a/packages/frontend/src/pages/settings/general.vue +++ b/packages/frontend/src/pages/settings/general.vue @@ -70,7 +70,7 @@ SPDX-License-Identifier: AGPL-3.0-only - + {{ i18n.ts.instanceIcon }} @@ -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, diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts index aab67e0b5c..d35a3ae54d 100644 --- a/packages/frontend/src/store.ts +++ b/packages/frontend/src/store.ts @@ -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,