Display a tag-outline icon in the bottom left

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

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>
 

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;

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"],
 )

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>

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>
+    <div>
-    <Tag>en::foobar</Tag>
+        <Badge class="me-1">{@html tagIcon}</Badge>
-    <Tag>zh::あちこ</Tag>
+        <Tag>en::foobar</Tag>
+        <Tag>zh::あちこ</Tag>
+    </div>
 </StickyBottom>
+
+<style lang="scss">
+    div {
+        display: flex;
+        fill: currentColor;
+
+        :global(#mdi-tag-outline) {
+            height: 100%;
+        }
+    }
+</style>

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 =

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