From 2dcd9118e93c218239f06e33de15da577ce14bd0 Mon Sep 17 00:00:00 2001 From: MattyaDaihuku <87429435+MattyaDaihuku@users.noreply.github.com> Date: Wed, 23 Oct 2024 12:52:20 +0000 Subject: [PATCH 1/2] =?UTF-8?q?feat(frontend):=20=E3=82=B5=E3=83=BC?= =?UTF-8?q?=E3=83=90=E3=83=BC=E3=81=AE=E8=A1=A8=E7=A4=BA=E3=82=92=E3=82=A2?= =?UTF-8?q?=E3=82=A4=E3=82=B3=E3=83=B3=E3=81=AE=E3=81=BF=E3=81=AB=E5=88=87?= =?UTF-8?q?=E3=82=8A=E6=9B=BF=E3=81=88=E3=82=89=E3=82=8C=E3=82=8B=E3=82=88?= =?UTF-8?q?=E3=81=86=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- locales/index.d.ts | 4 ++ locales/ja-JP.yml | 1 + .../src/components/MkInstanceIcon.vue | 54 +++++++++++++++++++ packages/frontend/src/components/MkNote.vue | 5 +- .../src/components/global/MkAvatar.vue | 30 +++++++++++ .../frontend/src/pages/settings/general.vue | 4 +- packages/frontend/src/store.ts | 4 ++ 7 files changed, 99 insertions(+), 3 deletions(-) create mode 100644 packages/frontend/src/components/MkInstanceIcon.vue 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, From 8c1dfab1958c1d3e1e951c467240684ce5fc27e0 Mon Sep 17 00:00:00 2001 From: MattyaDaihuku Date: Sun, 3 Nov 2024 06:11:04 +0000 Subject: [PATCH 2/2] =?UTF-8?q?fix(frontend):=20MkSelect=E3=81=ABinstanceI?= =?UTF-8?q?con=E3=81=AE=E8=A8=AD=E5=AE=9A=E3=82=92=E5=90=AB=E3=82=81?= =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- locales/index.d.ts | 12 ++++++++---- locales/ja-JP.yml | 3 ++- packages/frontend/src/components/MkNote.vue | 6 +++--- packages/frontend/src/components/global/MkAvatar.vue | 2 +- packages/frontend/src/pages/settings/general.vue | 6 +++--- packages/frontend/src/store.ts | 6 +----- 6 files changed, 18 insertions(+), 17 deletions(-) diff --git a/locales/index.d.ts b/locales/index.d.ts index 653caef534..cb03dee518 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -2922,10 +2922,6 @@ export interface Locale extends ILocale { * ノートのサーバー情報 */ "instanceTicker": string; - /** - * サーバー情報をアイコンのみにする - */ - "instanceIcon": string; /** * {x}を待っています */ @@ -7450,6 +7446,14 @@ export interface Locale extends ILocale { * 常に表示 */ "always": string; + /** + * リモートユーザーに表示(アイコンのみ) + */ + "remoteIcon": string; + /** + * 常に表示(アイコンのみ) + */ + "alwaysIcon": string; }; "_serverDisconnectedBehavior": { /** diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 4221b9f971..87f1db030d 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -726,7 +726,6 @@ openInSideView: "サイドビューで開く" defaultNavigationBehaviour: "デフォルトのナビゲーション" editTheseSettingsMayBreakAccount: "これらの設定を編集するとアカウントが破損する可能性があります。" instanceTicker: "ノートのサーバー情報" -instanceIcon: "サーバー情報をアイコンのみにする" waitingFor: "{x}を待っています" random: "ランダム" system: "システム" @@ -1945,6 +1944,8 @@ _instanceTicker: none: "表示しない" remote: "リモートユーザーに表示" always: "常に表示" + remoteIcon: "リモートユーザーに表示(アイコンのみ)" + alwaysIcon: "常に表示(アイコンのみ)" _serverDisconnectedBehavior: reload: "自動でリロード" diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index 294856afac..0f6a23cadc 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 showInstanceIcon = (defaultStore.state.instanceTicker === 'alwaysIcon') || (defaultStore.state.instanceTicker === 'remoteIcon' && appearNote.value.user.instance); 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 13c39a5f29..b4aba8fa7f 100644 --- a/packages/frontend/src/components/global/MkAvatar.vue +++ b/packages/frontend/src/components/global/MkAvatar.vue @@ -35,8 +35,8 @@ SPDX-License-Identifier: AGPL-3.0-only }" alt="" > - + diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue index 84d5784d45..617b6968f8 100644 --- a/packages/frontend/src/pages/settings/general.vue +++ b/packages/frontend/src/pages/settings/general.vue @@ -69,8 +69,10 @@ SPDX-License-Identifier: AGPL-3.0-only + + - {{ i18n.ts.instanceIcon }} + @@ -304,7 +306,6 @@ 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')); @@ -354,7 +355,6 @@ watch([ showNoteActionsOnlyHover, showGapBetweenNotesInTimeline, instanceTicker, - instanceIcon, overridedDeviceKind, mediaListWithOneImageAppearance, reactionsDisplaySize, diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts index d35a3ae54d..c90b66a65d 100644 --- a/packages/frontend/src/store.ts +++ b/packages/frontend/src/store.ts @@ -294,11 +294,7 @@ export const defaultStore = markRaw(new Storage('base', { }, instanceTicker: { where: 'device', - default: 'remote' as 'none' | 'remote' | 'always', - }, - instanceIcon: { - where: 'device', - default: false, + default: 'remote' as 'none' | 'remote' | 'always' | 'remoteIcon' | 'alwaysIcon', }, emojiPickerScale: { where: 'device',