Add animation toggle to preferences (#2041)

* Add animation toggle to preferences

and move settings affecting appearance together.

* Add class to body if animations unchecked

* Fix formatting in preferences.ftl

* Update duration(height) function for Collapsible transition

and add explanation.

* Fix formatting

* Increase duration baseline to 10 and decrease factor to 20

* Restore initial layout and rename option to "Reduce motion"

* Move checkboxes together and fix tab order (dae)

+ Remove separation of UI size

ftl/core/preferences.ftl

@@ -46,3 +46,5 @@ preferences-daily-backups = Daily backups to keep:
 preferences-weekly-backups = Weekly backups to keep:
 preferences-monthly-backups = Monthly backups to keep:
 preferences-minutes-between-backups = Minutes between automatic backups:
+preferences-reduce-motion = Reduce motion
+preferences-reduce-motion-tooltip = Disable various animations and transitions of the user interface

qt/aqt/forms/preferences.ui

@@ -7,7 +7,7 @@
     <x>0</x>
     <y>0</y>
     <width>640</width>
-    <height>530</height>
+    <height>640</height>
    </rect>
   </property>
   <property name="windowTitle">
@@ -42,6 +42,9 @@
        <property name="bottomMargin">
         <number>12</number>
        </property>
+       <item>
+        <widget class="QComboBox" name="theme"/>
+       </item>
        <item>
         <widget class="QComboBox" name="lang">
          <property name="sizePolicy">
@@ -55,9 +58,6 @@
          </property>
         </widget>
        </item>
-       <item>
-        <widget class="QComboBox" name="theme"/>
-       </item>
        <item>
         <widget class="QComboBox" name="video_driver"/>
        </item>
@@ -103,6 +103,16 @@
          </property>
         </widget>
        </item>
+       <item>
+        <widget class="QCheckBox" name="reduce_motion">
+         <property name="toolTip">
+          <string>preferences_reduce_motion_tooltip</string>
+         </property>
+         <property name="text">
+          <string>preferences_reduce_motion</string>
+         </property>
+        </widget>
+       </item>
        <item>
         <widget class="QComboBox" name="useCurrent">
          <item>
@@ -676,8 +686,8 @@
   </layout>
  </widget>
  <tabstops>
-  <tabstop>lang</tabstop>
   <tabstop>theme</tabstop>
+  <tabstop>lang</tabstop>
   <tabstop>video_driver</tabstop>
   <tabstop>showPlayButtons</tabstop>
   <tabstop>interrupt_audio</tabstop>
@@ -685,6 +695,7 @@
   <tabstop>paste_strips_formatting</tabstop>
   <tabstop>ignore_accents_in_search</tabstop>
   <tabstop>legacy_import_export</tabstop>
+  <tabstop>reduce_motion</tabstop>
   <tabstop>useCurrent</tabstop>
   <tabstop>default_search_text</tabstop>
   <tabstop>uiScale</tabstop>
@@ -703,11 +714,11 @@
   <tabstop>fullSync</tabstop>
   <tabstop>syncDeauth</tabstop>
   <tabstop>media_log</tabstop>
-  <tabstop>tabWidget</tabstop>
   <tabstop>minutes_between_backups</tabstop>
   <tabstop>daily_backups</tabstop>
   <tabstop>weekly_backups</tabstop>
   <tabstop>monthly_backups</tabstop>
+  <tabstop>tabWidget</tabstop>
  </tabstops>
  <resources/>
  <connections>

qt/aqt/preferences.py

@@ -207,6 +207,7 @@ class Preferences(QDialog):
 
     def setup_global(self) -> None:
         "Setup options global to all profiles."
+        self.form.reduce_motion.setChecked(self.mw.pm.reduced_motion())
         self.form.uiScale.setValue(int(self.mw.pm.uiScale() * 100))
         themes = [
             tr.preferences_theme_label(theme=theme)
@@ -236,6 +237,8 @@ class Preferences(QDialog):
             self.mw.pm.setUiScale(newScale)
             restart_required = True
 
+        self.mw.pm.set_reduced_motion(self.form.reduce_motion.isChecked())
+
         self.mw.pm.set_legacy_import_export(self.form.legacy_import_export.isChecked())
 
         if restart_required:

qt/aqt/profiles.py

@@ -518,6 +518,12 @@ create table if not exists profiles
     def setUiScale(self, scale: float) -> None:
         self.meta["uiScale"] = scale
 
+    def reduced_motion(self) -> bool:
+        return self.meta.get("reduced_motion", False)
+
+    def set_reduced_motion(self, on: bool) -> None:
+        self.meta["reduced_motion"] = on
+
     def last_addon_update_check(self) -> int:
         return self.meta.get("last_addon_update_check", 0)
 

qt/aqt/theme.py

@@ -122,7 +122,7 @@ class ThemeManager:
         return cache.setdefault(path, icon)
 
     def body_class(self, night_mode: bool | None = None) -> str:
-        "Returns space-separated class list for platform/theme."
+        "Returns space-separated class list for platform/theme/global settings."
         classes = []
         if is_win:
             classes.append("isWin")
@@ -137,6 +137,8 @@ class ThemeManager:
             classes.extend(["nightMode", "night_mode"])
             if self.macos_dark_mode():
                 classes.append("macos-dark-mode")
+        if aqt.mw.pm.reduced_motion():
+            classes.append("reduced-motion")
         return " ".join(classes)
 
     def body_classes_for_card_ord(

sass/base.scss

@@ -74,3 +74,8 @@ samp {
 .night-mode .form-select:disabled {
     background-color: var(--disabled);
 }
+
+.reduced-motion * {
+    transition: none !important;
+    animation: none !important;
+}

ts/components/Collapsible.svelte

@@ -46,7 +46,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         isCollapsed = true;
 
         const height = collapse ? inner.clientHeight : getRequiredHeight(inner);
-        const duration = Math.sqrt(height * 80);
+
+        /* This function practically caps the maximum time at around 200ms,
+           but still allows to differentiate between small and large contents */
+        const duration = 10 + Math.pow(height, 1 / 4) * 20;
 
         setStyle(height, duration);