From 1026d26793fda54d129efd9d5df031c2c870c6e3 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 23 Jun 2021 23:07:50 +0200
Subject: [PATCH] Display a tag-outline icon in the bottom left

---
 qt/aqt/editor.py                  |  1 +
 ts/components/StickyBar.svelte    |  2 +-
 ts/components/StickyBottom.svelte |  2 +-
 ts/editor/BUILD.bazel             |  3 +++
 ts/editor/Tag.svelte              |  7 ++++++-
 ts/editor/TagEditor.svelte        | 21 ++++++++++++++++++---
 ts/editor/icons.ts                |  1 +
 ts/editor/tagEditor.ts            |  2 +-
 8 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py
index d4019ab77..901cd9736 100644
--- a/qt/aqt/editor.py
+++ b/qt/aqt/editor.py
@@ -84,6 +84,7 @@ _html = """
     <a href="#" onclick="pycmd('dupes');return false;">%s</a>
 </div>
 <div id="cloze-hint"></div>
+<div id="tag-editor-anchor" class="d-none"></div>
 """
 
 
diff --git a/ts/components/StickyBar.svelte b/ts/components/StickyBar.svelte
index 86eda6f6a..fbd684d1a 100644
--- a/ts/components/StickyBar.svelte
+++ b/ts/components/StickyBar.svelte
@@ -8,7 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export { className as class };
 </script>
 
-<nav {id} class={`container-fluid pb-1 pt-1 ${className}`}>
+<nav {id} class={`container-fluid py-1 ${className}`}>
     <slot />
 </nav>
 
diff --git a/ts/components/StickyBottom.svelte b/ts/components/StickyBottom.svelte
index 9546b83b9..24cba05ed 100644
--- a/ts/components/StickyBottom.svelte
+++ b/ts/components/StickyBottom.svelte
@@ -14,7 +14,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <style lang="scss">
     footer {
-        position: absolute;
+        position: sticky;
         bottom: 0;
         left: 0;
         right: 0;
diff --git a/ts/editor/BUILD.bazel b/ts/editor/BUILD.bazel
index 206c7bdd9..cd5951967 100644
--- a/ts/editor/BUILD.bazel
+++ b/ts/editor/BUILD.bazel
@@ -129,6 +129,9 @@ copy_mdi_icons(
 
         "image-size-select-large.svg",
         "image-size-select-actual.svg",
+
+        # tag editor
+        "tag-outline.svg",
     ],
     visibility = ["//visibility:public"],
 )
diff --git a/ts/editor/Tag.svelte b/ts/editor/Tag.svelte
index 63f373259..e9d4ac49e 100644
--- a/ts/editor/Tag.svelte
+++ b/ts/editor/Tag.svelte
@@ -18,7 +18,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 {:else}
     <span class="tag text-nowrap bg-secondary rounded p-1 me-2" on:click={activate}>
         <slot />
-        <Badge>{@html deleteIcon}</Badge>
+        <Badge class="delete-icon">{@html deleteIcon}</Badge>
     </span>
 {/if}
 
@@ -27,5 +27,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         /* important for tags with non-latin characters */
         line-height: 2ch;
         vertical-align: -webkit-baseline-middle;
+
+        :global(.delete-icon):hover {
+            $white-translucent: rgba(255, 255, 255, 0.5);
+            background-color: $white-translucent;
+        }
     }
 </style>
diff --git a/ts/editor/TagEditor.svelte b/ts/editor/TagEditor.svelte
index f44b65f61..c5f7be7e1 100644
--- a/ts/editor/TagEditor.svelte
+++ b/ts/editor/TagEditor.svelte
@@ -4,11 +4,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import StickyBottom from "components/StickyBottom.svelte";
+    import Badge from "components/Badge.svelte";
     import Tag from "./Tag.svelte";
+    import { tagIcon } from "./icons";
 </script>
 
 <StickyBottom>
-    <span>Tags:</span>
-    <Tag>en::foobar</Tag>
-    <Tag>zh::あちこ</Tag>
+    <div>
+        <Badge class="me-1">{@html tagIcon}</Badge>
+        <Tag>en::foobar</Tag>
+        <Tag>zh::あちこ</Tag>
+    </div>
 </StickyBottom>
+
+<style lang="scss">
+    div {
+        display: flex;
+        fill: currentColor;
+
+        :global(#mdi-tag-outline) {
+            height: 100%;
+        }
+    }
+</style>
diff --git a/ts/editor/icons.ts b/ts/editor/icons.ts
index bce7f0f67..9b20d5f77 100644
--- a/ts/editor/icons.ts
+++ b/ts/editor/icons.ts
@@ -31,6 +31,7 @@ export { default as ellipseIcon } from "./contain.svg";
 export { default as functionIcon } from "./function-variant.svg";
 export { default as xmlIcon } from "./xml.svg";
 
+export { default as tagIcon } from "./tag-outline.svg";
 export { default as deleteIcon } from "./x.svg";
 
 export const arrowIcon =
diff --git a/ts/editor/tagEditor.ts b/ts/editor/tagEditor.ts
index c55ab6217..84c1e0db7 100644
--- a/ts/editor/tagEditor.ts
+++ b/ts/editor/tagEditor.ts
@@ -23,7 +23,7 @@ export function initTagEditor(i18n: Promise<void>): Promise<TagEditor> {
     document.addEventListener("DOMContentLoaded", () =>
         i18n.then(() => {
             const target = document.body;
-            const anchor = document.getElementById("fields")!;
+            const anchor = document.getElementById("tag-editor-anchor")!;
 
             const context = new Map();
             context.set(disabledKey, disabled);