From d902b00d0ea764ccf3360522851c68af12b5e8e0 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Tue, 8 Nov 2022 13:57:10 +0100
Subject: [PATCH] Fix reduce motion bottom border issues (#2185)

* Fix reduce motion bottom border issues

* Disable show/hide on hover with reduce motion setting

for purists.
---
 ts/components/Collapsible.svelte | 33 ++++++++++++++++----------------
 ts/editor/NoteCreator.svelte     |  4 ++--
 ts/editor/NoteEditor.svelte      |  6 +++---
 ts/editor/PlainTextBadge.svelte  |  6 ++++--
 ts/editor/RichTextBadge.svelte   |  6 ++++--
 ts/editor/StickyBadge.svelte     | 10 ++++++++--
 6 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/ts/components/Collapsible.svelte b/ts/components/Collapsible.svelte
index 4efb2257d..247a31ed2 100644
--- a/ts/components/Collapsible.svelte
+++ b/ts/components/Collapsible.svelte
@@ -78,34 +78,35 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <slot {collapsed} />
 </div>
 
-{#if measuring}
+{#if animated && measuring}
     <!-- Maintain document flow while collapsible height is measured -->
     <div class="collapsible-placeholder" />
 {/if}
 
 <style lang="scss">
-    .collapsible.animated {
-        &.measuring {
-            display: initial;
-            position: absolute;
-            opacity: 0;
-        }
+    .collapsible {
+        &.animated {
+            &.measuring {
+                display: initial;
+                position: absolute;
+                opacity: 0;
+            }
 
-        &.transitioning {
-            overflow: hidden;
-            height: var(--height);
-            &.expanded {
-                overflow: visible;
+            &.transitioning {
+                overflow: hidden;
+                height: var(--height);
+                &.expanded {
+                    overflow: visible;
+                }
+                &.full-hide {
+                    display: initial;
+                }
             }
         }
-
         &.full-hide {
             &.hidden {
                 display: none;
             }
-            &.transitioning {
-                display: initial;
-            }
         }
     }
 </style>
diff --git a/ts/editor/NoteCreator.svelte b/ts/editor/NoteCreator.svelte
index 064c78180..d560c0320 100644
--- a/ts/editor/NoteCreator.svelte
+++ b/ts/editor/NoteCreator.svelte
@@ -45,7 +45,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <NoteEditor bind:this={noteEditor} {api}>
-    <svelte:fragment slot="field-state" let:index let:visible>
-        <StickyBadge bind:active={stickies[index]} {index} {visible} />
+    <svelte:fragment slot="field-state" let:index let:show>
+        <StickyBadge bind:active={stickies[index]} {index} {show} />
     </svelte:fragment>
 </NoteEditor>
diff --git a/ts/editor/NoteEditor.svelte b/ts/editor/NoteEditor.svelte
index 544c7bd12..d7889775d 100644
--- a/ts/editor/NoteEditor.svelte
+++ b/ts/editor/NoteEditor.svelte
@@ -468,7 +468,7 @@ the AddCards dialog) should be implemented in the user of this component.
                                     {/if}
                                     {#if plainTextDefaults[index]}
                                         <RichTextBadge
-                                            visible={!fieldsCollapsed[index] &&
+                                            show={!fieldsCollapsed[index] &&
                                                 (fields[index] === $hoveredField ||
                                                     fields[index] === $focusedField)}
                                             bind:off={richTextsHidden[index]}
@@ -485,7 +485,7 @@ the AddCards dialog) should be implemented in the user of this component.
                                         />
                                     {:else}
                                         <PlainTextBadge
-                                            visible={!fieldsCollapsed[index] &&
+                                            show={!fieldsCollapsed[index] &&
                                                 (fields[index] === $hoveredField ||
                                                     fields[index] === $focusedField)}
                                             bind:off={plainTextsHidden[index]}
@@ -505,7 +505,7 @@ the AddCards dialog) should be implemented in the user of this component.
                                         name="field-state"
                                         {field}
                                         {index}
-                                        visible={fields[index] === $hoveredField ||
+                                        show={fields[index] === $hoveredField ||
                                             fields[index] === $focusedField}
                                     />
                                 </FieldState>
diff --git a/ts/editor/PlainTextBadge.svelte b/ts/editor/PlainTextBadge.svelte
index a51e057f2..43d602abc 100644
--- a/ts/editor/PlainTextBadge.svelte
+++ b/ts/editor/PlainTextBadge.svelte
@@ -11,11 +11,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { context as editorFieldContext } from "./EditorField.svelte";
     import { plainTextIcon } from "./icons";
 
+    const animated = !document.body.classList.contains("reduced-motion");
+
     const editorField = editorFieldContext.get();
     const keyCombination = "Control+Shift+X";
     const dispatch = createEventDispatcher();
 
-    export let visible = false;
+    export let show = false;
     export let off = false;
 
     function toggle() {
@@ -31,7 +33,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <span
     class="plain-text-badge"
-    class:visible
+    class:visible={show || !animated}
     class:highlighted={!off}
     on:click|stopPropagation={toggle}
 >
diff --git a/ts/editor/RichTextBadge.svelte b/ts/editor/RichTextBadge.svelte
index 180925395..69401aba2 100644
--- a/ts/editor/RichTextBadge.svelte
+++ b/ts/editor/RichTextBadge.svelte
@@ -11,11 +11,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { context as editorFieldContext } from "./EditorField.svelte";
     import { richTextIcon } from "./icons";
 
+    const animated = !document.body.classList.contains("reduced-motion");
+
     const editorField = editorFieldContext.get();
     const keyCombination = "Control+Shift+X";
     const dispatch = createEventDispatcher();
 
-    export let visible = false;
+    export let show = false;
     export let off = false;
 
     function toggle() {
@@ -31,7 +33,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <span
     class="plain-text-badge"
-    class:visible
+    class:visible={show || !animated}
     class:highlighted={!off}
     on:click|stopPropagation={toggle}
 >
diff --git a/ts/editor/StickyBadge.svelte b/ts/editor/StickyBadge.svelte
index a8f038aea..862a21b53 100644
--- a/ts/editor/StickyBadge.svelte
+++ b/ts/editor/StickyBadge.svelte
@@ -12,8 +12,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { context as editorFieldContext } from "./EditorField.svelte";
     import { stickyIcon } from "./icons";
 
+    const animated = !document.body.classList.contains("reduced-motion");
+
     export let active: boolean;
-    export let visible: boolean;
+    export let show: boolean;
 
     const editorField = editorFieldContext.get();
     const keyCombination = "F9";
@@ -33,7 +35,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     onMount(() => editorField.element.then(shortcut));
 </script>
 
-<span class:highlighted={active} class:visible on:click|stopPropagation={toggle}>
+<span
+    class:highlighted={active}
+    class:visible={show || !animated}
+    on:click|stopPropagation={toggle}
+>
     <Badge
         tooltip="{tr.editingToggleSticky()} ({getPlatformString(keyCombination)})"
         widthMultiplier={0.7}>{@html stickyIcon}</Badge