From 48b7ae3cd0365a9e318199cb058eaebc94a4e60a Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 21 Jun 2021 19:11:10 +0200
Subject: [PATCH] Revert button with gear icon, that shows revert dropdown item

---
 ts/components/WithDropdownMenu.svelte | 10 +++----
 ts/deckoptions/BUILD.bazel            |  1 +
 ts/deckoptions/Badge.svelte           |  1 -
 ts/deckoptions/RevertButton.svelte    | 39 +++++++++++----------------
 ts/deckoptions/SaveButton.svelte      |  5 +++-
 ts/deckoptions/TooltipLabel.svelte    |  4 ++-
 ts/deckoptions/icons.ts               |  7 +++--
 ts/sass/base.scss                     | 13 +++++++++
 8 files changed, 44 insertions(+), 36 deletions(-)

diff --git a/ts/components/WithDropdownMenu.svelte b/ts/components/WithDropdownMenu.svelte
index 068942b2b..c4b977fdc 100644
--- a/ts/components/WithDropdownMenu.svelte
+++ b/ts/components/WithDropdownMenu.svelte
@@ -23,20 +23,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     /* Normally dropdown and trigger are associated with a
     /* common ancestor with .dropdown class */
-    function createDropdown(event: CustomEvent): void {
-        const button: HTMLButtonElement = event.detail.button;
-
+    function createDropdown(element: HTMLElement): void {
         /* Prevent focus on menu activation */
         const noop = () => {};
-        Object.defineProperty(button, "focus", { value: noop });
+        Object.defineProperty(element, "focus", { value: noop });
 
-        const menu = (button.getRootNode() as Document) /* or shadow root */
+        const menu = (element.getRootNode() as Document) /* or shadow root */
             .getElementById(menuId);
 
         if (!menu) {
             console.log(`Could not find menu "${menuId}" for dropdown menu.`);
         } else {
-            dropdown = new Dropdown(button);
+            dropdown = new Dropdown(element);
 
             /* Set custom menu without using common element with .dropdown */
             (dropdown as any)._menu = menu;
diff --git a/ts/deckoptions/BUILD.bazel b/ts/deckoptions/BUILD.bazel
index cb6d275fb..d88bd91a3 100644
--- a/ts/deckoptions/BUILD.bazel
+++ b/ts/deckoptions/BUILD.bazel
@@ -38,6 +38,7 @@ copy_bootstrap_icons(
     icons = [
         "arrow-counterclockwise.svg",
         "info-circle.svg",
+        "gear.svg",
     ],
 )
 
diff --git a/ts/deckoptions/Badge.svelte b/ts/deckoptions/Badge.svelte
index 720a4d880..2cc765bdd 100644
--- a/ts/deckoptions/Badge.svelte
+++ b/ts/deckoptions/Badge.svelte
@@ -28,6 +28,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     span :global(svg) {
         vertical-align: -0.125rem;
-        opacity: 0.3;
     }
 </style>
diff --git a/ts/deckoptions/RevertButton.svelte b/ts/deckoptions/RevertButton.svelte
index 66b50df6f..aabfe2518 100644
--- a/ts/deckoptions/RevertButton.svelte
+++ b/ts/deckoptions/RevertButton.svelte
@@ -4,11 +4,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import * as tr from "lib/i18n";
-    import { getContext } from "svelte";
-    import WithTooltip from "./WithTooltip.svelte";
+    import WithDropdownMenu from "components/WithDropdownMenu.svelte";
+    import DropdownMenu from "components/DropdownMenu.svelte";
+    import DropdownItem from "components/DropdownItem.svelte";
     import Badge from "./Badge.svelte";
-    import { revertIcon } from "./icons";
-    import { touchDeviceKey } from "components/contextKeys";
+    import { gearIcon, revertIcon } from "./icons";
     import { isEqual as isEqualLodash, cloneDeep } from "lodash-es";
 
     type T = unknown;
@@ -30,28 +30,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     let modified: boolean;
     $: modified = !isEqual(value, defaultValue);
+    $: className = !modified ? "opacity-25" : "";
 
     function revert(): void {
         value = cloneDeep(defaultValue);
     }
-
-    const touchDevice = getContext<boolean>(touchDeviceKey);
 </script>
 
-<span class:invisible={!modified}>
-    {#if touchDevice}
-        <Badge class="px-1" on:click={revert}>{@html revertIcon}</Badge>
-    {:else}
-        <WithTooltip
-            trigger="hover"
-            tooltip={tr.deckConfigRevertButtonTooltip()}
-            let:createTooltip
-        >
-            <Badge
-                class="px-1"
-                on:mount={(event) => createTooltip(event.detail.span)}
-                on:click={revert}>{@html revertIcon}</Badge
-            >
-        </WithTooltip>
-    {/if}
-</span>
+<WithDropdownMenu let:createDropdown let:menuId>
+    <Badge class={className} on:mount={(event) => createDropdown(event.detail.span)}>
+        {@html gearIcon}
+    </Badge>
+
+    <DropdownMenu id={menuId}>
+        <DropdownItem on:click={revert}>
+            {tr.deckConfigRevertButtonTooltip()}<Badge>{@html revertIcon}</Badge>
+        </DropdownItem>
+    </DropdownMenu>
+</WithDropdownMenu>
diff --git a/ts/deckoptions/SaveButton.svelte b/ts/deckoptions/SaveButton.svelte
index 945043dbc..52cda318b 100644
--- a/ts/deckoptions/SaveButton.svelte
+++ b/ts/deckoptions/SaveButton.svelte
@@ -69,7 +69,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     <ButtonGroupItem>
         <WithDropdownMenu let:createDropdown let:activateDropdown let:menuId>
-            <LabelButton on:mount={createDropdown} on:click={activateDropdown} />
+            <LabelButton
+                on:mount={(event) => createDropdown(event.detail.button)}
+                on:click={activateDropdown}
+            />
             <DropdownMenu id={menuId}>
                 <DropdownItem on:click={() => dispatch("add")}
                     >{tr.deckConfigAddGroup()}</DropdownItem
diff --git a/ts/deckoptions/TooltipLabel.svelte b/ts/deckoptions/TooltipLabel.svelte
index f67f14132..719bb6af5 100644
--- a/ts/deckoptions/TooltipLabel.svelte
+++ b/ts/deckoptions/TooltipLabel.svelte
@@ -18,7 +18,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     ><Label for={forId}><slot /></Label><WithTooltip
         tooltip={marked(markdownTooltip)}
         let:createTooltip
-        ><Badge on:mount={(event) => createTooltip(event.detail.span)}
+        ><Badge
+            class="opacity-50"
+            on:mount={(event) => createTooltip(event.detail.span)}
             >{@html infoCircle}</Badge
         ></WithTooltip
     ></span
diff --git a/ts/deckoptions/icons.ts b/ts/deckoptions/icons.ts
index b7c9901a0..f430efca8 100644
--- a/ts/deckoptions/icons.ts
+++ b/ts/deckoptions/icons.ts
@@ -3,7 +3,6 @@
 
 // Import icons from bootstrap
 
-import revertIcon from "./arrow-counterclockwise.svg";
-import infoCircle from "./info-circle.svg";
-
-export { revertIcon, infoCircle };
+export { default as revertIcon } from "./arrow-counterclockwise.svg";
+export { default as infoCircle } from "./info-circle.svg";
+export { default as gearIcon } from "./gear.svg";
diff --git a/ts/sass/base.scss b/ts/sass/base.scss
index f3db5884e..5139aebeb 100644
--- a/ts/sass/base.scss
+++ b/ts/sass/base.scss
@@ -6,6 +6,19 @@ $body-bg: var(--window-bg);
 $link-hover-color: var(--link);
 $link-hover-decoration: none;
 
+$utilities: (
+    "opacity": (
+        property: opacity,
+        values: (
+            0: 0,
+            25: 0.25,
+            50: 0.5,
+            75: 0.75,
+            100: 1,
+        ),
+    ),
+);
+
 @import "ts/sass/bootstrap/bootstrap-reboot";
 @import "ts/sass/bootstrap/bootstrap-utilities";