add option to reduce motion

This commit is contained in:
Nolan Lawson 2018-03-22 20:23:00 -07:00
parent 76848d4c35
commit 2785eb28c3
3 changed files with 10 additions and 2 deletions

View file

@ -63,13 +63,13 @@
}
</style>
<script>
import { classname } from '../_utils/classname'
import { store } from '../_store/store'
export default {
oncreate() {
this.observe('animation', animation => {
if (!animation) {
if (!animation || this.store.get('reduceMotion')) {
return
}
let svg = this.refs.svg
@ -77,6 +77,7 @@
animations.forEach(anim => anim.play())
})
},
store: () => store,
computed: {
computedClass: (pressable, pressed, big, className) => {
return classname(

View file

@ -13,6 +13,11 @@
bind:checked="$markMediaAsSensitive" on:change="store.save()">
<label for="choice-mark-media-sensitive">Always mark media as sensitive</label>
</div>
<div class="setting-group">
<input type="checkbox" id="choice-reduce-motion"
bind:checked="$reduceMotion" on:change="store.save()">
<label for="choice-reduce-motion">Reduce motion in UI animations</label>
</div>
</form>
</SettingsLayout>

View file

@ -13,6 +13,7 @@ const KEYS_TO_STORE_IN_LOCAL_STORAGE = new Set([
'loggedInInstancesInOrder',
'autoplayGifs',
'markMediaAsSensitive',
'reduceMotion',
'pinnedPages',
'composeData'
])
@ -34,6 +35,7 @@ export const store = new PinaforeStore({
sensitivesShown: {},
autoplayGifs: false,
markMediaAsSensitive: false,
reduceMotion: false,
pinnedPages: {},
instanceLists: {},
pinnedStatuses: {},