From c7da2a4b5f062be698757eea3c47c5b885cb0452 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 6 Feb 2020 19:11:14 +0900
Subject: [PATCH] Resolve #5857

---
 CHANGELOG.md                                  |  5 +++++
 locales/ja-JP.yml                             |  1 +
 src/client/app.vue                            |  6 +++---
 src/client/components/modal.vue               |  4 ++--
 src/client/components/popup.vue               |  4 ++--
 src/client/components/post-form-dialog.vue    |  4 ++--
 src/client/components/sequential-entrance.vue |  5 ++++-
 src/client/pages/settings/general.vue         | 10 ++++++++++
 src/client/pages/user/index.vue               |  2 +-
 src/client/store.ts                           |  1 +
 10 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 442308471..4bbfd0253 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,11 @@
 ChangeLog
 =========
 
+unreleased
+--------------------
+### ✨Improvements
+* UIのアニメーションを無効にできるように
+
 12.1.0 (2020/02/06)
 --------------------
 ### ✨Improvements
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index b047aac75..b388a3c6c 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -350,6 +350,7 @@ post: "投稿"
 posted: "投稿しました"
 autoReloadWhenDisconnected: "サーバー切断時に自動リロード"
 autoNoteWatch: "ノートの自動ウォッチ"
+reduceUiAnimation: "UIのアニメーションを減らす"
 
 _2fa:
   registerDevice: "デバイスを登録"
diff --git a/src/client/app.vue b/src/client/app.vue
index d515ac02d..ef2ec1e3f 100644
--- a/src/client/app.vue
+++ b/src/client/app.vue
@@ -2,10 +2,10 @@
 <div class="mk-app" v-hotkey.global="keymap">
 	<header class="header">
 		<div class="title" ref="title">
-			<transition name="header" mode="out-in" appear>
+			<transition :name="$store.state.device.animation ? 'header' : ''" mode="out-in" appear>
 				<button class="_button back" v-if="canBack" @click="back()"><fa :icon="faChevronLeft"/></button>
 			</transition>
-			<transition name="header" mode="out-in" appear>
+			<transition :name="$store.state.device.animation ? 'header' : ''" mode="out-in" appear>
 				<div class="body" :key="pageKey">
 					<div class="default">
 						<portal-target name="avatar" slim/>
@@ -76,7 +76,7 @@
 	<div class="contents">
 		<main ref="main">
 			<div class="content">
-				<transition name="page" mode="out-in" @enter="onTransition">
+				<transition :name="$store.state.device.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
 					<keep-alive :include="['index']">
 						<router-view></router-view>
 					</keep-alive>
diff --git a/src/client/components/modal.vue b/src/client/components/modal.vue
index b7e6a336d..a48c7154e 100644
--- a/src/client/components/modal.vue
+++ b/src/client/components/modal.vue
@@ -1,9 +1,9 @@
 <template>
 <div class="mk-modal">
-	<transition name="bg-fade" appear>
+	<transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear>
 		<div class="bg" ref="bg" v-if="show" @click="close()"></div>
 	</transition>
-	<transition name="modal" appear @after-leave="() => { $emit('closed'); destroyDom(); }">
+	<transition :name="$store.state.device.animation ? 'modal' : ''" appear @after-leave="() => { $emit('closed'); destroyDom(); }">
 		<div class="content" ref="content" v-if="show" @click.self="close()"><slot></slot></div>
 	</transition>
 </div>
diff --git a/src/client/components/popup.vue b/src/client/components/popup.vue
index d5b1f9423..850936c54 100644
--- a/src/client/components/popup.vue
+++ b/src/client/components/popup.vue
@@ -1,9 +1,9 @@
 <template>
 <div class="mk-popup">
-	<transition name="bg-fade" appear>
+	<transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear>
 		<div class="bg" ref="bg" @click="close()" v-if="show"></div>
 	</transition>
-	<transition name="popup" appear @after-leave="() => { $emit('closed'); destroyDom(); }">
+	<transition :name="$store.state.device.animation ? 'popup' : ''" appear @after-leave="() => { $emit('closed'); destroyDom(); }">
 		<div class="content" :class="{ fixed }" ref="content" v-if="show" :style="{ width: width ? width + 'px' : 'auto' }"><slot></slot></div>
 	</transition>
 </div>
diff --git a/src/client/components/post-form-dialog.vue b/src/client/components/post-form-dialog.vue
index fe70b8821..6bbd9d793 100644
--- a/src/client/components/post-form-dialog.vue
+++ b/src/client/components/post-form-dialog.vue
@@ -1,10 +1,10 @@
 <template>
 <div class="ulveipglmagnxfgvitaxyszerjwiqmwl">
-	<transition name="form-fade" appear>
+	<transition :name="$store.state.device.animation ? 'form-fade' : ''" appear>
 		<div class="bg" ref="bg" v-if="show" @click="close()"></div>
 	</transition>
 	<div class="main" ref="main" @click.self="close()" @keydown="onKeydown">
-		<transition name="form" appear
+		<transition :name="$store.state.device.animation ? 'form' : ''" appear
 			@after-leave="destroyDom"
 		>
 			<x-post-form ref="form"
diff --git a/src/client/components/sequential-entrance.vue b/src/client/components/sequential-entrance.vue
index bf2c2f38f..a09d67f1c 100644
--- a/src/client/components/sequential-entrance.vue
+++ b/src/client/components/sequential-entrance.vue
@@ -1,5 +1,5 @@
 <template>
-<transition-group
+<transition-group v-if="$store.state.device.animation"
 	name="staggered-fade"
 	tag="div"
 	:css="false"
@@ -11,6 +11,9 @@
 >
 	<slot></slot>
 </transition-group>
+<div v-else>
+	<slot></slot>
+</div>
 </template>
 
 <script lang="ts">
diff --git a/src/client/pages/settings/general.vue b/src/client/pages/settings/general.vue
index 19643581e..b52254397 100644
--- a/src/client/pages/settings/general.vue
+++ b/src/client/pages/settings/general.vue
@@ -22,6 +22,11 @@
 		<mk-button @click="readAllUnreadNotes">{{ $t('mark-as-read-all-unread-notes') }}</mk-button>
 		<mk-button @click="readAllMessagingMessages">{{ $t('mark-as-read-all-talk-messages') }}</mk-button>
 	</div>
+	<div class="_content">
+		<mk-switch v-model="reduceAnimation">
+			{{ $t('reduceUiAnimation') }}
+		</mk-switch>
+	</div>
 </section>
 </template>
 
@@ -60,6 +65,11 @@ export default Vue.extend({
 			get() { return this.$store.state.device.autoReload; },
 			set(value) { this.$store.commit('device/set', { key: 'autoReload', value }); }
 		},
+
+		reduceAnimation: {
+			get() { return !this.$store.state.device.animation; },
+			set(value) { this.$store.commit('device/set', { key: 'animation', value: !value }); }
+		},
 	},
 
 	methods: {
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index d897beef9..b7f849a6f 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -4,7 +4,7 @@
 	<portal to="avatar" v-if="user"><mk-avatar class="avatar" :user="user" :disable-preview="true"/></portal>
 	
 	<div class="remote-caution _panel" v-if="user.host != null"><fa :icon="faExclamationTriangle" style="margin-right: 8px;"/>{{ $t('remoteUserCaution') }}<a :href="user.url" rel="nofollow noopener" target="_blank">{{ $t('showOnRemote') }}</a></div>
-	<transition name="zoom" mode="out-in" appear>
+	<transition :name="$store.state.device.animation ? 'zoom' : ''" mode="out-in" appear>
 		<div class="profile _panel" :key="user.id">
 			<div class="banner-container" :style="style">
 				<div class="banner" ref="banner" :style="style"></div>
diff --git a/src/client/store.ts b/src/client/store.ts
index d656d932b..71e19f4da 100644
--- a/src/client/store.ts
+++ b/src/client/store.ts
@@ -29,6 +29,7 @@ const defaultDeviceSettings = {
 	localOnly: false,
 	themes: [],
 	theme: 'light',
+	animation: true,
 };
 
 export default (os: MiOS) => new Vuex.Store({