From 2785eb28c33f6cdedd493ad330af272ec82bc10d Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Thu, 22 Mar 2018 20:23:00 -0700
Subject: [PATCH] add option to reduce motion

---
 routes/_components/IconButton.html  | 5 +++--
 routes/_pages/settings/general.html | 5 +++++
 routes/_store/store.js              | 2 ++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/routes/_components/IconButton.html b/routes/_components/IconButton.html
index 8975241..cfc0ff6 100644
--- a/routes/_components/IconButton.html
+++ b/routes/_components/IconButton.html
@@ -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(
diff --git a/routes/_pages/settings/general.html b/routes/_pages/settings/general.html
index ba8d8ad..5689215 100644
--- a/routes/_pages/settings/general.html
+++ b/routes/_pages/settings/general.html
@@ -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>
diff --git a/routes/_store/store.js b/routes/_store/store.js
index a72a9f0..8f20c66 100644
--- a/routes/_store/store.js
+++ b/routes/_store/store.js
@@ -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: {},