From 880546c895c36ae1df38889d2306776d5a625a31 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 11 Jun 2021 23:15:40 +0200
Subject: [PATCH] Add back info circles, remove underlines

---
 ts/deckoptions/Badge.svelte           | 18 ++++++++++++++
 ts/deckoptions/CheckBoxRow.svelte     | 15 +++--------
 ts/deckoptions/EnumSelectorRow.svelte | 10 ++------
 ts/deckoptions/HelpPopup.svelte       | 36 ---------------------------
 ts/deckoptions/SpinBoxFloatRow.svelte | 10 ++------
 ts/deckoptions/SpinBoxRow.svelte      | 11 ++------
 ts/deckoptions/StepsInputRow.svelte   | 10 ++------
 ts/deckoptions/TooltipLabel.svelte    | 19 ++++++++++++++
 ts/deckoptions/WithTooltip.svelte     | 17 +------------
 9 files changed, 50 insertions(+), 96 deletions(-)
 create mode 100644 ts/deckoptions/Badge.svelte
 delete mode 100644 ts/deckoptions/HelpPopup.svelte
 create mode 100644 ts/deckoptions/TooltipLabel.svelte

diff --git a/ts/deckoptions/Badge.svelte b/ts/deckoptions/Badge.svelte
new file mode 100644
index 000000000..19a805355
--- /dev/null
+++ b/ts/deckoptions/Badge.svelte
@@ -0,0 +1,18 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<span class="badge">
+    <slot />
+</span>
+
+<style>
+    .badge {
+        color: inherit;
+    }
+
+    span :global(svg) {
+        vertical-align: -0.125rem;
+        opacity: 0.3;
+    }
+</style>
diff --git a/ts/deckoptions/CheckBoxRow.svelte b/ts/deckoptions/CheckBoxRow.svelte
index ead5fc1e6..c12f872c8 100644
--- a/ts/deckoptions/CheckBoxRow.svelte
+++ b/ts/deckoptions/CheckBoxRow.svelte
@@ -3,11 +3,10 @@
     License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import marked from "marked";
     import Row from "./Row.svelte";
     import Col from "./Col.svelte";
-    import WithTooltip from "./WithTooltip.svelte";
     import Label from "./Label.svelte";
+    import TooltipLabel from "./TooltipLabel.svelte";
     import CheckBox from "./CheckBox.svelte";
     import RevertButton from "./RevertButton.svelte";
 
@@ -19,15 +18,9 @@
 <Row>
     <Col>
         <CheckBox bind:value
-            >{#if markdownTooltip}<WithTooltip
-                    tooltip={marked(markdownTooltip)}
-                    let:createTooltip
-                >
-                    <Label on:mount={(event) => createTooltip(event.detail.span)}
-                        ><slot /></Label
-                    >
-                </WithTooltip>{:else}<Label><slot /></Label>{/if}
-        </CheckBox>
+            >{#if markdownTooltip}<TooltipLabel {markdownTooltip}><slot /></TooltipLabel
+                >{:else}<Label><slot /></Label>{/if}</CheckBox
+        >
     </Col>
     <Col grow={false}>
         <RevertButton bind:value {defaultValue} />
diff --git a/ts/deckoptions/EnumSelectorRow.svelte b/ts/deckoptions/EnumSelectorRow.svelte
index 4ba4a1fc2..7bcf11760 100644
--- a/ts/deckoptions/EnumSelectorRow.svelte
+++ b/ts/deckoptions/EnumSelectorRow.svelte
@@ -5,11 +5,9 @@
 <script lang="ts">
     import type { Breakpoint } from "./col";
 
-    import marked from "marked";
     import Row from "./Row.svelte";
     import Col from "./Col.svelte";
-    import WithTooltip from "./WithTooltip.svelte";
-    import Label from "./Label.svelte";
+    import TooltipLabel from "./TooltipLabel.svelte";
     import EnumSelector from "./EnumSelector.svelte";
     import RevertButton from "./RevertButton.svelte";
 
@@ -22,11 +20,7 @@
 
 <Row>
     <Col size={7}>
-        <WithTooltip tooltip={marked(markdownTooltip)} let:createTooltip>
-            <Label on:mount={(event) => createTooltip(event.detail.span)}
-                ><slot /></Label
-            >
-        </WithTooltip>
+        <TooltipLabel {markdownTooltip}><slot /></TooltipLabel>
     </Col>
     <Col {breakpoint} size={5}>
         <RevertButton bind:value {defaultValue} />
diff --git a/ts/deckoptions/HelpPopup.svelte b/ts/deckoptions/HelpPopup.svelte
deleted file mode 100644
index ed801f8c1..000000000
--- a/ts/deckoptions/HelpPopup.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--->
-<script lang="ts">
-    import { infoCircle } from "./icons";
-    import { onMount } from "svelte";
-    import Tooltip from "bootstrap/js/dist/tooltip";
-
-    export let html: string;
-
-    let ref: HTMLAnchorElement;
-
-    onMount(() => {
-        new Tooltip(ref, {
-            placement: "bottom",
-            html: true,
-            offset: [0, 20],
-        });
-    });
-</script>
-
-<span bind:this={ref} class="badge" title={html}>
-    {@html infoCircle}
-</span>
-
-<style>
-    .badge {
-        color: inherit;
-    }
-
-    span :global(svg) {
-        vertical-align: -0.125rem;
-        opacity: 0.3;
-    }
-</style>
diff --git a/ts/deckoptions/SpinBoxFloatRow.svelte b/ts/deckoptions/SpinBoxFloatRow.svelte
index 8f07497a0..e94644465 100644
--- a/ts/deckoptions/SpinBoxFloatRow.svelte
+++ b/ts/deckoptions/SpinBoxFloatRow.svelte
@@ -3,11 +3,9 @@
     License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import marked from "marked";
     import Row from "./Row.svelte";
     import Col from "./Col.svelte";
-    import WithTooltip from "./WithTooltip.svelte";
-    import Label from "./Label.svelte";
+    import TooltipLabel from "./TooltipLabel.svelte";
     import SpinBoxFloat from "./SpinBoxFloat.svelte";
     import RevertButton from "./RevertButton.svelte";
 
@@ -20,11 +18,7 @@
 
 <Row>
     <Col size={7}>
-        <WithTooltip tooltip={marked(markdownTooltip)} let:createTooltip>
-            <Label on:mount={(event) => createTooltip(event.detail.span)}
-                ><slot /></Label
-            >
-        </WithTooltip>
+        <TooltipLabel {markdownTooltip}><slot /></TooltipLabel>
     </Col>
     <Col size={5}>
         <RevertButton bind:value {defaultValue} />
diff --git a/ts/deckoptions/SpinBoxRow.svelte b/ts/deckoptions/SpinBoxRow.svelte
index 7ce78c2a6..e9030b927 100644
--- a/ts/deckoptions/SpinBoxRow.svelte
+++ b/ts/deckoptions/SpinBoxRow.svelte
@@ -3,12 +3,9 @@
     License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import marked from "marked";
     import Row from "./Row.svelte";
     import Col from "./Col.svelte";
-    /* import HelpPopup from "./HelpPopup.svelte"; */
-    import WithTooltip from "./WithTooltip.svelte";
-    import Label from "./Label.svelte";
+    import TooltipLabel from "./TooltipLabel.svelte";
     import SpinBox from "./SpinBox.svelte";
     import RevertButton from "./RevertButton.svelte";
 
@@ -21,11 +18,7 @@
 
 <Row>
     <Col size={7}>
-        <WithTooltip tooltip={marked(markdownTooltip)} let:createTooltip>
-            <Label on:mount={(event) => createTooltip(event.detail.span)}
-                ><slot /></Label
-            >
-        </WithTooltip>
+        <TooltipLabel {markdownTooltip}><slot /></TooltipLabel>
     </Col>
     <Col size={5}>
         <RevertButton bind:value {defaultValue} />
diff --git a/ts/deckoptions/StepsInputRow.svelte b/ts/deckoptions/StepsInputRow.svelte
index 96e8e0daf..064c25df1 100644
--- a/ts/deckoptions/StepsInputRow.svelte
+++ b/ts/deckoptions/StepsInputRow.svelte
@@ -3,11 +3,9 @@
     License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import marked from "marked";
     import Row from "./Row.svelte";
     import Col from "./Col.svelte";
-    import WithTooltip from "./WithTooltip.svelte";
-    import Label from "./Label.svelte";
+    import TooltipLabel from "./TooltipLabel.svelte";
     import StepsInput from "./StepsInput.svelte";
     import RevertButton from "./RevertButton.svelte";
 
@@ -18,11 +16,7 @@
 
 <Row>
     <Col size={7}>
-        <WithTooltip tooltip={marked(markdownTooltip)} let:createTooltip>
-            <Label on:mount={(event) => createTooltip(event.detail.span)}
-                ><slot /></Label
-            >
-        </WithTooltip>
+        <TooltipLabel {markdownTooltip}><slot /></TooltipLabel>
     </Col>
     <Col size={5}>
         <RevertButton bind:value {defaultValue} />
diff --git a/ts/deckoptions/TooltipLabel.svelte b/ts/deckoptions/TooltipLabel.svelte
new file mode 100644
index 000000000..6f5d5c2df
--- /dev/null
+++ b/ts/deckoptions/TooltipLabel.svelte
@@ -0,0 +1,19 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="typescript">
+    import marked from "marked";
+    import { infoCircle } from "./icons";
+    import WithTooltip from "./WithTooltip.svelte";
+    import Label from "./Label.svelte";
+    import Badge from "./Badge.svelte";
+
+    export let markdownTooltip: string;
+</script>
+
+<WithTooltip tooltip={marked(markdownTooltip)} let:createTooltip>
+    <Label on:mount={(event) => createTooltip(event.detail.span)}
+        ><slot /><Badge>{@html infoCircle}</Badge>
+    </Label>
+</WithTooltip>
diff --git a/ts/deckoptions/WithTooltip.svelte b/ts/deckoptions/WithTooltip.svelte
index 81a5a4a3d..01b3281f7 100644
--- a/ts/deckoptions/WithTooltip.svelte
+++ b/ts/deckoptions/WithTooltip.svelte
@@ -3,8 +3,6 @@
     License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import { getContext } from "svelte";
-    import { nightModeKey } from "components/contextKeys";
     import Tooltip from "bootstrap/js/dist/tooltip";
 
     export let tooltip: string;
@@ -17,19 +15,6 @@
             offset: [0, 20],
         });
     }
-
-    const nightMode = getContext<boolean>(nightModeKey);
 </script>
 
-<span class:night-mode={nightMode}><slot {createTooltip} /></span>
-
-<style lang="scss">
-    span {
-        text-decoration: underline dashed;
-        text-decoration-color: rgba(0 0 0 / 0.5);
-    }
-
-    .night-mode {
-        text-decoration-color: rgba(255 255 255 / 0.5);
-    }
-</style>
+<slot {createTooltip} />