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({