Revert button with gear icon, that shows revert dropdown item

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;

ts/deckoptions/BUILD.bazel

@@ -38,6 +38,7 @@ copy_bootstrap_icons(
     icons = [
         "arrow-counterclockwise.svg",
         "info-circle.svg",
+        "gear.svg",
     ],
 )
 

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>

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>

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

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

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";

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";