From 67e0b67d17ff492999795925d18e13d687e26b0a Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Sat, 5 Jun 2021 14:33:35 +0200
Subject: [PATCH] Implement WithTooltip

---
 ts/deckoptions/CheckBoxRow.svelte     | 19 +++++++++------
 ts/deckoptions/EnumSelectorRow.svelte |  9 +++++--
 ts/deckoptions/Label.svelte           | 17 +++++++++++++
 ts/deckoptions/SpinBoxFloatRow.svelte |  9 +++++--
 ts/deckoptions/SpinBoxRow.svelte      | 10 ++++++--
 ts/deckoptions/StepsInputRow.svelte   |  9 +++++--
 ts/deckoptions/WithTooltip.svelte     | 35 +++++++++++++++++++++++++++
 7 files changed, 92 insertions(+), 16 deletions(-)
 create mode 100644 ts/deckoptions/Label.svelte
 create mode 100644 ts/deckoptions/WithTooltip.svelte

diff --git a/ts/deckoptions/CheckBoxRow.svelte b/ts/deckoptions/CheckBoxRow.svelte
index 20478023f..ead5fc1e6 100644
--- a/ts/deckoptions/CheckBoxRow.svelte
+++ b/ts/deckoptions/CheckBoxRow.svelte
@@ -6,7 +6,8 @@
     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 CheckBox from "./CheckBox.svelte";
     import RevertButton from "./RevertButton.svelte";
 
@@ -18,13 +19,15 @@
 <Row>
     <Col>
         <CheckBox bind:value
-            ><span
-                ><slot />
-                {#if markdownTooltip}<HelpPopup
-                        html={marked(markdownTooltip)}
-                    />{/if}</span
-            ></CheckBox
-        >
+            >{#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>
     </Col>
     <Col grow={false}>
         <RevertButton bind:value {defaultValue} />
diff --git a/ts/deckoptions/EnumSelectorRow.svelte b/ts/deckoptions/EnumSelectorRow.svelte
index fdf717aa8..5ce402751 100644
--- a/ts/deckoptions/EnumSelectorRow.svelte
+++ b/ts/deckoptions/EnumSelectorRow.svelte
@@ -8,7 +8,8 @@
     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 EnumSelector from "./EnumSelector.svelte";
     import RevertButton from "./RevertButton.svelte";
 
@@ -21,7 +22,11 @@
 
 <Row>
     <Col size={7}>
-        <span><slot /><HelpPopup html={marked(markdownTooltip)} /></span>
+        <WithTooltip tooltip={marked(markdownTooltip)} let:createTooltip>
+            <Label on:mount={(event) => createTooltip(event.detail.span)}
+                ><slot /></Label
+            >
+        </WithTooltip>
     </Col>
     <Col {breakpoint} size={5}>
         <EnumSelector bind:value {choices} />
diff --git a/ts/deckoptions/Label.svelte b/ts/deckoptions/Label.svelte
new file mode 100644
index 000000000..8fe22ce6e
--- /dev/null
+++ b/ts/deckoptions/Label.svelte
@@ -0,0 +1,17 @@
+<!--
+    Copyright: Ankitects Pty Ltd and contributors
+    License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import { onMount, createEventDispatcher } from "svelte";
+
+    const dispatch = createEventDispatcher();
+
+    let spanRef: HTMLSpanElement;
+
+    onMount(() => {
+        dispatch("mount", { span: spanRef });
+    });
+</script>
+
+<span bind:this={spanRef}><slot /></span>
diff --git a/ts/deckoptions/SpinBoxFloatRow.svelte b/ts/deckoptions/SpinBoxFloatRow.svelte
index 38d0400d0..a760e018c 100644
--- a/ts/deckoptions/SpinBoxFloatRow.svelte
+++ b/ts/deckoptions/SpinBoxFloatRow.svelte
@@ -6,7 +6,8 @@
     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 SpinBoxFloat from "./SpinBoxFloat.svelte";
     import RevertButton from "./RevertButton.svelte";
 
@@ -19,7 +20,11 @@
 
 <Row>
     <Col size={7}>
-        <span><slot /><HelpPopup html={marked(markdownTooltip)} /></span>
+        <WithTooltip tooltip={marked(markdownTooltip)} let:createTooltip>
+            <Label on:mount={(event) => createTooltip(event.detail.span)}
+                ><slot /></Label
+            >
+        </WithTooltip>
     </Col>
     <Col size={5}>
         <SpinBoxFloat bind:value {min} {max} />
diff --git a/ts/deckoptions/SpinBoxRow.svelte b/ts/deckoptions/SpinBoxRow.svelte
index b4a6286c7..605aa7a2f 100644
--- a/ts/deckoptions/SpinBoxRow.svelte
+++ b/ts/deckoptions/SpinBoxRow.svelte
@@ -6,7 +6,9 @@
     import marked from "marked";
     import Row from "./Row.svelte";
     import Col from "./Col.svelte";
-    import HelpPopup from "./HelpPopup.svelte";
+    /* import HelpPopup from "./HelpPopup.svelte"; */
+    import WithTooltip from "./WithTooltip.svelte";
+    import Label from "./Label.svelte";
     import SpinBox from "./SpinBox.svelte";
     import RevertButton from "./RevertButton.svelte";
 
@@ -19,7 +21,11 @@
 
 <Row>
     <Col size={7}>
-        <span><slot /><HelpPopup html={marked(markdownTooltip)} /></span>
+        <WithTooltip tooltip={marked(markdownTooltip)} let:createTooltip>
+            <Label on:mount={(event) => createTooltip(event.detail.span)}
+                ><slot /></Label
+            >
+        </WithTooltip>
     </Col>
     <Col size={5}>
         <SpinBox bind:value {min} {max} />
diff --git a/ts/deckoptions/StepsInputRow.svelte b/ts/deckoptions/StepsInputRow.svelte
index c5df6e8cc..108a4486e 100644
--- a/ts/deckoptions/StepsInputRow.svelte
+++ b/ts/deckoptions/StepsInputRow.svelte
@@ -6,7 +6,8 @@
     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 StepsInput from "./StepsInput.svelte";
     import RevertButton from "./RevertButton.svelte";
 
@@ -17,7 +18,11 @@
 
 <Row>
     <Col size={7}>
-        <span><slot /><HelpPopup html={marked(markdownTooltip)} /></span>
+        <WithTooltip tooltip={marked(markdownTooltip)} let:createTooltip>
+            <Label on:mount={(event) => createTooltip(event.detail.span)}
+                ><slot /></Label
+            >
+        </WithTooltip>
     </Col>
     <Col size={5}>
         <StepsInput bind:value />
diff --git a/ts/deckoptions/WithTooltip.svelte b/ts/deckoptions/WithTooltip.svelte
new file mode 100644
index 000000000..81a5a4a3d
--- /dev/null
+++ b/ts/deckoptions/WithTooltip.svelte
@@ -0,0 +1,35 @@
+<!--
+    Copyright: Ankitects Pty Ltd and contributors
+    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;
+
+    function createTooltip(element: HTMLElement): void {
+        element.title = tooltip;
+        new Tooltip(element, {
+            placement: "bottom",
+            html: true,
+            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>