From bc4650843a4506a3f6bd64262b27ef6f83d82a08 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 16 Sep 2018 03:46:53 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=A2=E3=83=8B=E3=83=A1=E3=83=BC=E3=82=B7?=
 =?UTF-8?q?=E3=83=A7=E3=83=B3=E3=82=92=E7=84=A1=E5=8A=B9=E3=81=AB=E3=81=99?=
 =?UTF-8?q?=E3=82=8B=E3=82=AA=E3=83=97=E3=82=B7=E3=83=A7=E3=83=B3=E3=82=92?=
 =?UTF-8?q?=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                                           | 1 +
 src/client/app/common/views/components/trends.vue           | 6 ++----
 src/client/app/desktop/views/components/notes.vue           | 4 ++--
 src/client/app/desktop/views/components/notifications.vue   | 4 ++--
 src/client/app/desktop/views/components/settings.vue        | 6 ++++++
 .../app/desktop/views/pages/deck/deck.notifications.vue     | 6 ++----
 src/client/app/mobile/views/components/notes.vue            | 4 ++--
 src/client/app/mobile/views/components/notifications.vue    | 6 ++----
 src/client/app/mobile/views/pages/settings.vue              | 6 ++++++
 src/client/app/store.ts                                     | 1 +
 10 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 72dc88b7b..c5ec3fd58 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -119,6 +119,7 @@ common:
   always-show-nsfw: "常に閲覧注意のメディアを表示する"
   always-mark-nsfw: "常にメディアを閲覧注意として投稿"
   show-full-acct: "ユーザー名のホストを省略しない"
+  enable-animations: "アニメーションを使用"
   this-setting-is-this-device-only: "このデバイスのみ"
 
   do-not-use-in-production: 'これは開発ビルドです。本番環境で使用しないでください。'
diff --git a/src/client/app/common/views/components/trends.vue b/src/client/app/common/views/components/trends.vue
index 627edc387..0042dbe85 100644
--- a/src/client/app/common/views/components/trends.vue
+++ b/src/client/app/common/views/components/trends.vue
@@ -3,8 +3,7 @@
 	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
 	<p class="empty" v-else-if="stats.length == 0">%fa:exclamation-circle%%i18n:@empty%</p>
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
-	<!-- <transition-group v-else tag="div" name="chart"> -->
-	<div>
+	<transition-group v-else tag="div" name="chart">
 		<div v-for="stat in stats" :key="stat.tag">
 			<div class="tag">
 				<router-link :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</router-link>
@@ -12,8 +11,7 @@
 			</div>
 			<x-chart class="chart" :src="stat.chart"/>
 		</div>
-	</div>
-	<!-- </transition-group> -->
+	</transition-group>
 </div>
 </template>
 
diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index 26aa0c8de..1d8c3fff3 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -10,7 +10,7 @@
 	</div>
 
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
-	<transition-group name="mk-notes" class="notes transition" tag="div">
+	<component :is="$store.state.device.animations ? '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">
@@ -18,7 +18,7 @@
 				<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
 			</p>
 		</template>
-	</transition-group>
+	</component>
 
 	<footer v-if="more">
 		<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue
index 9d0e73ade..0debd3f82 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">
 		<!-- トランジションを有効にするとなぜかメモリリークする -->
-		<transition-group name="mk-notifications" class="transition" tag="div">
+		<component :is="$store.state.device.animations ? '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"/>
@@ -96,7 +96,7 @@
 					<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span>
 				</p>
 			</template>
-		</transition-group>
+		</component>
 	</div>
 	<button class="more" :class="{ fetching: fetchingMoreNotifications }" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
 		<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>{{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:@more%' }}
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 709715e59..c46f6cfab 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -60,6 +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="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%"/>
@@ -246,6 +247,11 @@ export default Vue.extend({
 		};
 	},
 	computed: {
+		animations: {
+			get() { return this.$store.state.device.animations; },
+			set(value) { this.$store.commit('device/set', { key: 'animations', value }); }
+		},
+
 		apiViaStream: {
 			get() { return this.$store.state.device.apiViaStream; },
 			set(value) { this.$store.commit('device/set', { key: 'apiViaStream', value }); }
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 fcb74b914..18d9a21c6 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notifications.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
@@ -1,8 +1,7 @@
 <template>
 <div class="oxynyeqmfvracxnglgulyqfgqxnxmehl">
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
-	<!--<transition-group name="mk-notifications" class="transition notifications">-->
-	<div class="notifications">
+	<component :is="$store.state.device.animations ? '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'">
@@ -10,8 +9,7 @@
 				<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span>
 			</p>
 		</template>
-	</div>
-	<!--</transition-group>-->
+	</component>
 	<button class="more" :class="{ fetching: fetchingMoreNotifications }" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
 		<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>{{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:@more%' }}
 	</button>
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index 17806f062..f2ad93beb 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -14,7 +14,7 @@
 	</div>
 
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
-	<transition-group name="mk-notes" class="transition" tag="div">
+	<component :is="$store.state.device.animations ? '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">
@@ -22,7 +22,7 @@
 				<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
 			</p>
 		</template>
-	</transition-group>
+	</component>
 
 	<footer v-if="more">
 		<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
diff --git a/src/client/app/mobile/views/components/notifications.vue b/src/client/app/mobile/views/components/notifications.vue
index 9f20c3fb2..95c85beac 100644
--- a/src/client/app/mobile/views/components/notifications.vue
+++ b/src/client/app/mobile/views/components/notifications.vue
@@ -1,8 +1,7 @@
 <template>
 <div class="mk-notifications">
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
-	<!-- <transition-group name="mk-notifications" class="transition notifications"> -->
-	<div class="transition notifications">
+	<component :is="$store.state.device.animations ? '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">
@@ -10,8 +9,7 @@
 				<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span>
 			</p>
 		</template>
-	</div>
-	<!-- </transition-group> -->
+	</component>
 
 	<button class="more" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
 		<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 9b0e521a4..c14a683f2 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -13,6 +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="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>
@@ -168,6 +169,11 @@ 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 }); }
+		},
+
 		alwaysShowNsfw: {
 			get() { return this.$store.state.device.alwaysShowNsfw; },
 			set(value) { this.$store.commit('device/set', { key: 'alwaysShowNsfw', value }); }
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index 997bddc5c..a7d9bd456 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -38,6 +38,7 @@ const defaultSettings = {
 };
 
 const defaultDeviceSettings = {
+	animations: true,
 	apiViaStream: true,
 	autoPopout: false,
 	darkmode: false,