From e8a6add60b89afb42323b3f0f8f37b9adbc912e6 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 21 Jun 2021 20:48:33 +0200
Subject: [PATCH] Position Revert/Gear button on the left of the label

+ Make the reverse arrow spin
---
 ts/deckoptions/CheckBoxRow.svelte     |  4 +---
 ts/deckoptions/EnumSelectorRow.svelte |  2 +-
 ts/deckoptions/RevertButton.svelte    | 19 ++++++++++++++++++-
 ts/deckoptions/SpinBoxFloatRow.svelte |  2 +-
 ts/deckoptions/SpinBoxRow.svelte      |  2 +-
 ts/deckoptions/StepsInputRow.svelte   |  2 +-
 ts/deckoptions/SwitchRow.svelte       |  2 +-
 7 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/ts/deckoptions/CheckBoxRow.svelte b/ts/deckoptions/CheckBoxRow.svelte
index c12f872c8..fcb1122bc 100644
--- a/ts/deckoptions/CheckBoxRow.svelte
+++ b/ts/deckoptions/CheckBoxRow.svelte
@@ -17,12 +17,10 @@
 
 <Row>
     <Col>
+        <RevertButton bind:value {defaultValue} />
         <CheckBox bind:value
             >{#if markdownTooltip}<TooltipLabel {markdownTooltip}><slot /></TooltipLabel
                 >{:else}<Label><slot /></Label>{/if}</CheckBox
         >
     </Col>
-    <Col grow={false}>
-        <RevertButton bind:value {defaultValue} />
-    </Col>
 </Row>
diff --git a/ts/deckoptions/EnumSelectorRow.svelte b/ts/deckoptions/EnumSelectorRow.svelte
index b93fca1db..6d07f9953 100644
--- a/ts/deckoptions/EnumSelectorRow.svelte
+++ b/ts/deckoptions/EnumSelectorRow.svelte
@@ -20,10 +20,10 @@
 
 <Row>
     <Col size={7}>
+        <RevertButton bind:value {defaultValue} />
         <TooltipLabel {markdownTooltip}><slot /></TooltipLabel>
     </Col>
     <Col {breakpoint} size={5}>
         <EnumSelector bind:value {choices} />
-        <RevertButton bind:value {defaultValue} />
     </Col>
 </Row>
diff --git a/ts/deckoptions/RevertButton.svelte b/ts/deckoptions/RevertButton.svelte
index 919cef714..19b092827 100644
--- a/ts/deckoptions/RevertButton.svelte
+++ b/ts/deckoptions/RevertButton.svelte
@@ -44,7 +44,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let:menuId
 >
     <Badge
-        class={className}
+        class={`p-1 ${className}`}
         on:mount={(event) => createDropdown(event.detail.span)}
         on:click={activateDropdown}
     >
@@ -53,6 +53,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     <DropdownMenu id={menuId}>
         <DropdownItem
+            class="spinner"
             on:click={() => {
                 revert();
                 // Otherwise the menu won't close when the item is clicked
@@ -64,3 +65,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </DropdownItem>
     </DropdownMenu>
 </WithDropdownMenu>
+
+<style lang="scss">
+    :global(.spinner:hover .badge) {
+        animation: spin-animation 1s infinite;
+        animation-timing-function: linear;
+    }
+
+    @keyframes -global-spin-animation {
+        0% {
+            transform: rotate(360deg);
+        }
+        100% {
+            transform: rotate(0deg);
+        }
+    }
+</style>
diff --git a/ts/deckoptions/SpinBoxFloatRow.svelte b/ts/deckoptions/SpinBoxFloatRow.svelte
index b3e5a3888..d3f2cbbaa 100644
--- a/ts/deckoptions/SpinBoxFloatRow.svelte
+++ b/ts/deckoptions/SpinBoxFloatRow.svelte
@@ -18,10 +18,10 @@
 
 <Row>
     <Col size={7}>
+        <RevertButton bind:value {defaultValue} />
         <TooltipLabel {markdownTooltip}><slot /></TooltipLabel>
     </Col>
     <Col size={5}>
         <SpinBoxFloat bind:value {min} {max} />
-        <RevertButton bind:value {defaultValue} />
     </Col>
 </Row>
diff --git a/ts/deckoptions/SpinBoxRow.svelte b/ts/deckoptions/SpinBoxRow.svelte
index 77002edcd..9aafa51e6 100644
--- a/ts/deckoptions/SpinBoxRow.svelte
+++ b/ts/deckoptions/SpinBoxRow.svelte
@@ -18,10 +18,10 @@
 
 <Row>
     <Col size={7}>
+        <RevertButton bind:value {defaultValue} />
         <TooltipLabel {markdownTooltip}><slot /></TooltipLabel>
     </Col>
     <Col size={5}>
         <SpinBox bind:value {min} {max} />
-        <RevertButton bind:value {defaultValue} />
     </Col>
 </Row>
diff --git a/ts/deckoptions/StepsInputRow.svelte b/ts/deckoptions/StepsInputRow.svelte
index 722172bbe..d74af3ff0 100644
--- a/ts/deckoptions/StepsInputRow.svelte
+++ b/ts/deckoptions/StepsInputRow.svelte
@@ -16,10 +16,10 @@
 
 <Row>
     <Col size={7}>
+        <RevertButton bind:value {defaultValue} />
         <TooltipLabel {markdownTooltip}><slot /></TooltipLabel>
     </Col>
     <Col size={5}>
         <StepsInput bind:value />
-        <RevertButton bind:value {defaultValue} />
     </Col>
 </Row>
diff --git a/ts/deckoptions/SwitchRow.svelte b/ts/deckoptions/SwitchRow.svelte
index cfd4a722d..b4454945c 100644
--- a/ts/deckoptions/SwitchRow.svelte
+++ b/ts/deckoptions/SwitchRow.svelte
@@ -19,12 +19,12 @@
 
 <Row>
     <Col>
+        <RevertButton bind:value {defaultValue} />
         {#if markdownTooltip}<TooltipLabel for={id} {markdownTooltip}
                 ><slot /></TooltipLabel
             >{:else}<Label for={id}><slot /></Label>{/if}
     </Col>
     <Col grow={false}>
         <Switch {id} bind:value />
-        <RevertButton bind:value {defaultValue} />
     </Col>
 </Row>