This commit is contained in:
syuilo 2020-02-06 19:11:14 +09:00
parent 692078f490
commit c7da2a4b5f
10 changed files with 31 additions and 11 deletions

View File

@ -1,6 +1,11 @@
ChangeLog
=========
unreleased
--------------------
### ✨Improvements
* UIのアニメーションを無効にできるように
12.1.0 (2020/02/06)
--------------------
### ✨Improvements

View File

@ -350,6 +350,7 @@ post: "投稿"
posted: "投稿しました"
autoReloadWhenDisconnected: "サーバー切断時に自動リロード"
autoNoteWatch: "ノートの自動ウォッチ"
reduceUiAnimation: "UIのアニメーションを減らす"
_2fa:
registerDevice: "デバイスを登録"

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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"

View File

@ -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">

View File

@ -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: {

View File

@ -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>

View File

@ -29,6 +29,7 @@ const defaultDeviceSettings = {
localOnly: false,
themes: [],
theme: 'light',
animation: true,
};
export default (os: MiOS) => new Vuex.Store({