diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index c2a8110d9..3ced4dafe 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -119,7 +119,7 @@ common: always-show-nsfw: "常に閲覧注意のメディアを表示する" always-mark-nsfw: "常にメディアを閲覧注意として投稿" show-full-acct: "ユーザー名のホストを省略しない" - enable-animations: "アニメーションを使用" + reduce-motion: "UIの動きを減らす" this-setting-is-this-device-only: "このデバイスのみ" do-not-use-in-production: 'これは開発ビルドです。本番環境で使用しないでください。' diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue index 1d8c3fff3..ec9aa285d 100644 --- a/src/client/app/desktop/views/components/notes.vue +++ b/src/client/app/desktop/views/components/notes.vue @@ -10,7 +10,7 @@ </div> <!-- トランジションを有効にするとなぜかメモリリークする --> - <component :is="$store.state.device.animations ? 'transition-group' : 'div'" name="mk-notes" class="notes transition" tag="div"> + <component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="notes transition" tag="div"> <template v-for="(note, i) in _notes"> <x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/> <p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date"> diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue index 0debd3f82..2eb80dcd0 100644 --- a/src/client/app/desktop/views/components/notifications.vue +++ b/src/client/app/desktop/views/components/notifications.vue @@ -2,7 +2,7 @@ <div class="mk-notifications"> <div class="notifications" v-if="notifications.length != 0"> <!-- トランジションを有効にするとなぜかメモリリークする --> - <component :is="$store.state.device.animations ? 'transition-group' : 'div'" name="mk-notifications" class="transition" tag="div"> + <component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notifications" class="transition" tag="div"> <template v-for="(notification, i) in _notifications"> <div class="notification" :class="notification.type" :key="notification.id"> <mk-time :time="notification.createdAt"/> diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue index c46f6cfab..3911ec593 100644 --- a/src/client/app/desktop/views/components/settings.vue +++ b/src/client/app/desktop/views/components/settings.vue @@ -60,7 +60,7 @@ <button class="ui" @click="deleteWallpaper">%i18n:@delete-wallpaper%</button> <mk-switch v-model="darkmode" text="%i18n:@dark-mode%"/> <mk-switch v-model="circleIcons" text="%i18n:@circle-icons%"/> - <mk-switch v-model="animations" text="%i18n:common.enable-animations%"/> + <mk-switch v-model="reduceMotion" text="%i18n:common.reduce-motion%"/> <mk-switch v-model="contrastedAcct" text="%i18n:@contrasted-acct%"/> <mk-switch v-model="showFullAcct" text="%i18n:common.show-full-acct%"/> <mk-switch v-model="gradientWindowHeader" text="%i18n:@gradient-window-header%"/> @@ -247,9 +247,9 @@ export default Vue.extend({ }; }, computed: { - animations: { - get() { return this.$store.state.device.animations; }, - set(value) { this.$store.commit('device/set', { key: 'animations', value }); } + reduceMotion: { + get() { return this.$store.state.device.reduceMotion; }, + set(value) { this.$store.commit('device/set', { key: 'reduceMotion', value }); } }, apiViaStream: { diff --git a/src/client/app/desktop/views/pages/deck/deck.notifications.vue b/src/client/app/desktop/views/pages/deck/deck.notifications.vue index 18d9a21c6..f73f221b7 100644 --- a/src/client/app/desktop/views/pages/deck/deck.notifications.vue +++ b/src/client/app/desktop/views/pages/deck/deck.notifications.vue @@ -1,7 +1,7 @@ <template> <div class="oxynyeqmfvracxnglgulyqfgqxnxmehl"> <!-- トランジションを有効にするとなぜかメモリリークする --> - <component :is="$store.state.device.animations ? 'transition-group' : 'div'" name="mk-notifications" class="transition notifications"> + <component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notifications" class="transition notifications"> <template v-for="(notification, i) in _notifications"> <x-notification class="notification" :notification="notification" :key="notification.id"/> <p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date" :key="notification.id + '-time'"> diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue index f2ad93beb..401df3ae5 100644 --- a/src/client/app/mobile/views/components/notes.vue +++ b/src/client/app/mobile/views/components/notes.vue @@ -14,7 +14,7 @@ </div> <!-- トランジションを有効にするとなぜかメモリリークする --> - <component :is="$store.state.device.animations ? 'transition-group' : 'div'" name="mk-notes" class="transition" tag="div"> + <component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="transition" tag="div"> <template v-for="(note, i) in _notes"> <mk-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/> <p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date"> diff --git a/src/client/app/mobile/views/components/notifications.vue b/src/client/app/mobile/views/components/notifications.vue index 95c85beac..11ac23f4b 100644 --- a/src/client/app/mobile/views/components/notifications.vue +++ b/src/client/app/mobile/views/components/notifications.vue @@ -1,7 +1,7 @@ <template> <div class="mk-notifications"> <!-- トランジションを有効にするとなぜかメモリリークする --> - <component :is="$store.state.device.animations ? 'transition-group' : 'div'" name="mk-notifications" class="transition notifications"> + <component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notifications" class="transition notifications"> <template v-for="(notification, i) in _notifications"> <mk-notification :notification="notification" :key="notification.id"/> <p class="date" :key="notification.id + '_date'" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date"> diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue index c14a683f2..f315c058d 100644 --- a/src/client/app/mobile/views/pages/settings.vue +++ b/src/client/app/mobile/views/pages/settings.vue @@ -13,7 +13,7 @@ <section> <ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch> <ui-switch v-model="circleIcons">%i18n:@circle-icons%</ui-switch> - <ui-switch v-model="animations">%i18n:common.enable-animations% (%i18n:common.this-setting-is-this-device-only%)</ui-switch> + <ui-switch v-model="reduceMotion">%i18n:common.reduce-motion% (%i18n:common.this-setting-is-this-device-only%)</ui-switch> <ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch> <ui-switch v-model="showFullAcct">%i18n:common.show-full-acct%</ui-switch> <ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch> @@ -169,9 +169,9 @@ export default Vue.extend({ set(value) { this.$store.commit('device/set', { key: 'darkmode', value }); } }, - animations: { - get() { return this.$store.state.device.animations; }, - set(value) { this.$store.commit('device/set', { key: 'animations', value }); } + reduceMotion: { + get() { return this.$store.state.device.reduceMotion; }, + set(value) { this.$store.commit('device/set', { key: 'reduceMotion', value }); } }, alwaysShowNsfw: { diff --git a/src/client/app/store.ts b/src/client/app/store.ts index a7d9bd456..7eaef1312 100644 --- a/src/client/app/store.ts +++ b/src/client/app/store.ts @@ -38,7 +38,7 @@ const defaultSettings = { }; const defaultDeviceSettings = { - animations: true, + reduceMotion: false, apiViaStream: true, autoPopout: false, darkmode: false,