enable-animations --> reduce-motion

9 files changed, 15 insertions, 15 deletions

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index c2a8110d92..3ced4dafe1 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 1d8c3fff36..ec9aa285d0 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 0debd3f824..2eb80dcd01 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 c46f6cfab1..3911ec5931 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 18d9a21c64..f73f221b7b 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 f2ad93bebf..401df3ae5b 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 95c85beaca..11ac23f4b1 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 c14a683f23..f315c058df 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 a7d9bd4560..7eaef13125 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,