diff --git a/locales/index.d.ts b/locales/index.d.ts index 562ed2fc7b..003c453a46 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -1151,6 +1151,7 @@ export interface Locale { "detach": string; "angle": string; "flip": string; + "showAvatarDecorations": string; "_announcement": { "forExistingUsers": string; "forExistingUsersDescription": string; diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 0a12487c5e..33a39ad08b 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1148,6 +1148,7 @@ attach: "付ける" detach: "外す" angle: "角度" flip: "反転" +showAvatarDecorations: "アイコンのデコレーションを表示" _announcement: forExistingUsers: "既存ユーザーのみ" diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue index e22ed29b7e..1bb6d03224 100644 --- a/packages/frontend/src/components/global/MkAvatar.vue +++ b/packages/frontend/src/components/global/MkAvatar.vue @@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only </div> </div> <img - v-if="decoration || user.avatarDecorations.length > 0" + v-if="showDecoration && (decoration || user.avatarDecorations.length > 0)" :class="[$style.decoration]" :src="decoration?.url ?? user.avatarDecorations[0].url" :style="{ @@ -63,18 +63,22 @@ const props = withDefaults(defineProps<{ flipH?: boolean; flipV?: boolean; }; + forceShowDecoration?: boolean; }>(), { target: null, link: false, preview: false, indicator: false, decoration: undefined, + forceShowDecoration: false, }); const emit = defineEmits<{ (ev: 'click', v: MouseEvent): void; }>(); +const showDecoration = props.forceShowDecoration || defaultStore.state.showAvatarDecorations; + const bound = $computed(() => props.link ? { to: userPage(props.user), target: props.target } : {}); diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue index f186cf2ae3..46b56bc860 100644 --- a/packages/frontend/src/pages/settings/general.vue +++ b/packages/frontend/src/pages/settings/general.vue @@ -119,6 +119,7 @@ SPDX-License-Identifier: AGPL-3.0-only <MkSwitch v-model="disableShowingAnimatedImages">{{ i18n.ts.disableShowingAnimatedImages }}</MkSwitch> <MkSwitch v-model="highlightSensitiveMedia">{{ i18n.ts.highlightSensitiveMedia }}</MkSwitch> <MkSwitch v-model="squareAvatars">{{ i18n.ts.squareAvatars }}</MkSwitch> + <MkSwitch v-model="showAvatarDecorations">{{ i18n.ts.showAvatarDecorations }}</MkSwitch> <MkSwitch v-model="useSystemFont">{{ i18n.ts.useSystemFont }}</MkSwitch> <MkSwitch v-model="disableDrawer">{{ i18n.ts.disableDrawer }}</MkSwitch> <MkSwitch v-model="forceShowAds">{{ i18n.ts.forceShowAds }}</MkSwitch> @@ -203,7 +204,7 @@ import { unisonReload } from '@/scripts/unison-reload.js'; import { i18n } from '@/i18n.js'; import { definePageMetadata } from '@/scripts/page-metadata.js'; import { miLocalStorage } from '@/local-storage.js'; -import { globalEvents } from '@/events'; +import { globalEvents } from '@/events.js'; import { claimAchievement } from '@/scripts/achievements.js'; const lang = ref(miLocalStorage.getItem('lang')); @@ -248,6 +249,7 @@ const instanceTicker = computed(defaultStore.makeGetterSetter('instanceTicker')) const enableInfiniteScroll = computed(defaultStore.makeGetterSetter('enableInfiniteScroll')); const useReactionPickerForContextMenu = computed(defaultStore.makeGetterSetter('useReactionPickerForContextMenu')); const squareAvatars = computed(defaultStore.makeGetterSetter('squareAvatars')); +const showAvatarDecorations = computed(defaultStore.makeGetterSetter('showAvatarDecorations')); const mediaListWithOneImageAppearance = computed(defaultStore.makeGetterSetter('mediaListWithOneImageAppearance')); const notificationPosition = computed(defaultStore.makeGetterSetter('notificationPosition')); const notificationStackAxis = computed(defaultStore.makeGetterSetter('notificationStackAxis')); diff --git a/packages/frontend/src/pages/settings/profile.avatar-decoration-dialog.vue b/packages/frontend/src/pages/settings/profile.avatar-decoration-dialog.vue index c4bdf4a49b..4d571bc9ba 100644 --- a/packages/frontend/src/pages/settings/profile.avatar-decoration-dialog.vue +++ b/packages/frontend/src/pages/settings/profile.avatar-decoration-dialog.vue @@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only <MkSpacer :marginMin="20" :marginMax="28"> <div style="text-align: center;"> <div :class="$style.name">{{ decoration.name }}</div> - <MkAvatar style="width: 64px; height: 64px; margin-bottom: 20px;" :user="$i" :decoration="{ url: decoration.url, angle, flipH }"/> + <MkAvatar style="width: 64px; height: 64px; margin-bottom: 20px;" :user="$i" :decoration="{ url: decoration.url, angle, flipH }" forceShowDecoration/> </div> <div class="_gaps_s"> <MkRange v-model="angle" continuousUpdate :min="-0.5" :max="0.5" :step="0.025" :textConverter="(v) => `${Math.floor(v * 360)}°`"> diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue index 8d9c3cf730..90c10d3e74 100644 --- a/packages/frontend/src/pages/settings/profile.vue +++ b/packages/frontend/src/pages/settings/profile.vue @@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only <div class="_gaps_m"> <div :class="$style.avatarAndBanner" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }"> <div :class="$style.avatarContainer"> - <MkAvatar :class="$style.avatar" :user="$i" @click="changeAvatar"/> + <MkAvatar :class="$style.avatar" :user="$i" forceShowDecoration @click="changeAvatar"/> <MkButton primary rounded @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton> </div> <MkButton primary rounded :class="$style.bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton> @@ -95,7 +95,7 @@ SPDX-License-Identifier: AGPL-3.0-only @click="openDecoration(avatarDecoration)" > <div :class="$style.avatarDecorationName"><MkCondensedLine :minScale="2 / 3">{{ avatarDecoration.name }}</MkCondensedLine></div> - <MkAvatar style="width: 64px; height: 64px;" :user="$i" :decoration="{ url: avatarDecoration.url }"/> + <MkAvatar style="width: 64px; height: 64px;" :user="$i" :decoration="{ url: avatarDecoration.url }" forceShowDecoration/> </div> </div> </MkFolder> diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts index 92d01e4caf..6196e684e1 100644 --- a/packages/frontend/src/store.ts +++ b/packages/frontend/src/store.ts @@ -293,6 +293,10 @@ export const defaultStore = markRaw(new Storage('base', { where: 'device', default: false, }, + showAvatarDecorations: { + where: 'device', + default: true, + }, postFormWithHashtags: { where: 'device', default: false,