feat(settings): new prefers-reduced-motion setting

Zhaocl1997 · Aug 22, 2022 · 9962228 · 9962228
1 parent c0ee1e9
commit 9962228
Show file tree

Hide file tree

Showing 9 changed files with 115 additions and 49 deletions.
diff --git a/src/assets/styles/base/_base.scss b/src/assets/styles/base/_base.scss
@@ -12,34 +12,3 @@ body {
   height: 100%;
   overflow: hidden;
 }
-
-html[color-mode="cafe"] {
-  filter: sepia(0.9) hue-rotate(315deg) brightness(0.9);
-}
-
-html[color-mode="contrast"] {
-  filter: contrast(2);
-}
-
-html[color-mode="grayscale"] {
-  filter: grayscale(100%);
-}
-
-html[color-mode="inverted"] {
-  filter: invert(100%);
-}
-
-html[color-mode="grayscale-inverted"] {
-  filter: grayscale(100%) invert(100%);
-}
-
-html[reduce="true"] {
-  transition-duration: 0.001ms !important;
-  animation: none !important;
-  animation-duration: 0.001ms !important;
-  animation-iteration-count: 1 !important;
-
-  --animate-duration: 0 !important;
-  --animate-deply: 0 !important;
-  --animate-repeat: 0 !important;
-}
diff --git a/src/assets/styles/base/_colorMode.scss b/src/assets/styles/base/_colorMode.scss
@@ -0,0 +1,19 @@
+html[color-mode="cafe"] {
+  filter: sepia(0.9) hue-rotate(315deg) brightness(0.9);
+}
+
+html[color-mode="contrast"] {
+  filter: contrast(2);
+}
+
+html[color-mode="grayscale"] {
+  filter: grayscale(100%);
+}
+
+html[color-mode="inverted"] {
+  filter: invert(100%);
+}
+
+html[color-mode="grayscale-inverted"] {
+  filter: grayscale(100%) invert(100%);
+}
diff --git a/src/assets/styles/base/_reducedMotion.scss b/src/assets/styles/base/_reducedMotion.scss
@@ -0,0 +1,33 @@
+// this is for manual reduce motion
+html[reduce="true"] *,
+::before,
+::after {
+  transition-duration: 0.001ms !important;
+  transition-delay: 0s !important;
+  animation: none !important;
+  animation-duration: 0.001ms !important;
+  animation-delay: -0.001ms !important;
+  animation-iteration-count: 1 !important;
+
+  --animate-duration: 0 !important;
+  --animate-delay: 0 !important;
+  --animate-repeat: 0 !important;
+}
+
+// this is for system reduce motion prefers
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    transition-duration: 0.001ms !important;
+    transition-delay: 0s !important;
+    animation: none !important;
+    animation-duration: 0.001ms !important;
+    animation-delay: -0.001ms !important;
+    animation-iteration-count: 1 !important;
+
+    --animate-duration: 0 !important;
+    --animate-delay: 0 !important;
+    --animate-repeat: 0 !important;
+  }
+}
diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss
@@ -1,9 +1,10 @@
 @charset "UTF-8";
-
-@import './abstracts/utils';
-@import './abstracts/transition';
-@import './base/base';
-@import './base/scrollBar';
-@import './components/select';
-@import './components/loading';
-@import './layout/tabs';
+@import "./abstracts/utils";
+@import "./abstracts/transition";
+@import "./base/base";
+@import "./base/scrollBar";
+@import "./base/colorMode";
+@import "./base/reducedMotion";
+@import "./components/select";
+@import "./components/loading";
+@import "./layout/tabs";
diff --git a/src/components/App/AppSettings/form/app.vue b/src/components/App/AppSettings/form/app.vue
@@ -5,6 +5,18 @@
 <script lang="ts" setup>
   import { appRelatives, modalColor } from '../shared'
 
+  const preferredReducedMotion = usePreferredReducedMotion()
+
+  const appSettings = useAppStoreSetting()
+
+  const getSystemCanAnimtion = computed(
+    () => preferredReducedMotion.value === 'no-preference'
+  )
+
+  const getCanAnimation = computed(
+    () => getSystemCanAnimtion && appSettings.settings.app.reducedMotion
+  )
+
   const [register] = useForm<typeof appRelatives.value>({
     localeUniqueKey: 'app.app',
     showFeedback: false,
@@ -88,14 +100,19 @@
         formProp: {
           path: 'showAnimation',
         },
+        componentProp: {
+          disabled: getCanAnimation,
+        },
       },
       {
         type: 'Base:Select',
         formProp: {
           path: 'animationMode',
         },
         componentProp: {
-          disabled: computed(() => !appRelatives.value.showAnimation),
+          disabled: computed(
+            () => getCanAnimation.value || !appRelatives.value.showAnimation
+          ),
           options: Object.values(AppConstAnimationMode).map((i) => ({
             label: i,
             value: i,
@@ -110,8 +127,10 @@
         componentProp: {
           disabled: computed(
             () =>
+              getCanAnimation.value ||
               appRelatives.value.animationMode ===
-                AppConstAnimationMode.SCOPE || !appRelatives.value.showAnimation
+                AppConstAnimationMode.SCOPE ||
+              !appRelatives.value.showAnimation
           ),
           tooltip: true,
         },
@@ -204,6 +223,10 @@
         formProp: {
           path: 'reducedMotion',
         },
+        componentProp: {
+          // disable this switch when system prefers reduced motion
+          disabled: !getSystemCanAnimtion,
+        },
       },
     ],
   })

diff --git a/src/components/Extra/Scrollbar/index.vue b/src/components/Extra/Scrollbar/index.vue
@@ -31,6 +31,12 @@
     setup(props, { attrs, slots, emit, expose }) {
       const id = ref(genString(8))
 
+      const appSettings = useAppStoreSetting()
+
+      const getBehavior = computed(() =>
+        appSettings.settings.app.reducedMotion ? 'auto' : 'smooth'
+      )
+
       const scrollRef =
         ref<Nullable<ScrollbarInst & { scrollbarInstRef: Recordable }>>(null)
 
@@ -47,14 +53,14 @@
         scrollTo: (opt) => {
           scrollRef.value!.scrollTo({
             ...(opt as Object),
-            behavior: props.behavior,
+            behavior: getBehavior.value,
           })
         },
 
         scrollToStart: () => {
           scrollRef.value!.scrollTo({
             position: 'top',
-            behavior: props.behavior,
+            behavior: getBehavior.value,
           })
         },
 
@@ -64,12 +70,12 @@
               ? {
                   left: scrollRef.value!.scrollbarInstRef.containerRef
                     ?.scrollWidth,
-                  behavior: props.behavior,
+                  behavior: getBehavior.value,
                 }
               : {
                   top: scrollRef.value!.scrollbarInstRef.containerRef
                     ?.scrollHeight,
-                  behavior: props.behavior,
+                  behavior: getBehavior.value,
                 }
           )
         },
@@ -87,11 +93,11 @@
             props.vertical
               ? {
                   left: node['offsetLeft'],
-                  behavior: props.behavior,
+                  behavior: getBehavior.value,
                 }
               : {
                   top: node['offsetTop'],
-                  behavior: props.behavior,
+                  behavior: getBehavior.value,
                 }
           )
         },

diff --git a/src/components/Vendor/echarts/src/index.vue b/src/components/Vendor/echarts/src/index.vue
@@ -20,6 +20,7 @@
 
   const appDark = useAppStoreDark()
   const appLocale = useAppStoreLocale()
+  const appSettings = useAppStoreSetting()
 
   const getSkinName = computed(() => (appDark.isDark ? 'dark' : undefined))
 
@@ -55,8 +56,13 @@
 
     chartInst.value!.setOption(
       appDark.isDark
-        ? Object.assign(props.option, { backgroundColor: 'transparent' })
-        : props.option
+        ? Object.assign(props.option, {
+            backgroundColor: 'transparent',
+            animation: !appSettings.settings.app.reducedMotion,
+          })
+        : Object.assign(props.option, {
+            animation: !appSettings.settings.app.reducedMotion,
+          })
     )
   }
 

diff --git a/src/hooks/core/useAppReducedMotion.ts b/src/hooks/core/useAppReducedMotion.ts
@@ -1,5 +1,6 @@
 export const useAppReducedMotion = () => {
   const appSetting = useAppStoreSetting()
+  const prefersReducedMotion = usePreferredReducedMotion()
 
   watch(
     () => appSetting.settings.app.reducedMotion,
@@ -10,4 +11,9 @@ export const useAppReducedMotion = () => {
       immediate: true,
     }
   )
+
+  watchEffect(() => {
+    appSetting.settings.app.reducedMotion =
+      prefersReducedMotion.value === 'reduce'
+  })
 }
diff --git a/src/views/index/home/components/NumberCard.vue b/src/views/index/home/components/NumberCard.vue
@@ -37,6 +37,7 @@
             :from="0"
             :to="number"
             show-separator
+            :duration="appSettings.settings.app.reducedMotion ? 0 : 3000"
           ></n-number-animation>
 
           <w-transition appear name="slide-up">
@@ -95,6 +96,8 @@
 
   const props = defineProps<InternalProps>()
 
+  const appSettings = useAppStoreSetting()
+
   const trend = ref(0)
   const showTrend = ref(true)
   const isPositive = ref<boolean | undefined>()