Include icons directly in ts lib

qt/aqt/data/web/imgs/vendor/BUILD.bazel

@@ -0,0 +1,19 @@
+load("//ts:vendor.bzl", "copy_bootstrap_icons", "copy_fontawesome_icons")
+
+copy_bootstrap_icons(name = "bootstrap-icons")
+
+copy_fontawesome_icons(name = "fontawesome-icons")
+
+files = [
+    "bootstrap-icons",
+    "fontawesome-icons",
+]
+
+directories = []
+
+filegroup(
+    name = "vendor",
+    srcs = ["//qt/aqt/data/web/imgs/vendor:{}".format(file) for file in files] +
+           ["//qt/aqt/data/web/imgs/vendor/{}".format(dir) for dir in directories],
+    visibility = ["//qt:__subpackages__"],
+)

qt/aqt/editor.py

@@ -228,7 +228,7 @@ class Editor:
         bgcol = self.mw.app.palette().window().color().name()  # type: ignore
         # then load page
         self.web.stdHtml(
-            _html % (bgcol, topbuts, tr.editing_show_duplicates()),
+            _html % (bgcol, tr.editing_show_duplicates()),
             css=[
                 "css/editor.css",
                 "css/editor-toolbar.css",

ts/editor-toolbar/BUILD.bazel

@@ -3,6 +3,7 @@ load("//ts/svelte:svelte.bzl", "compile_svelte", "svelte_check")
 load("//ts:prettier.bzl", "prettier_test")
 load("//ts:eslint.bzl", "eslint_test")
 load("//ts:esbuild.bzl", "esbuild")
+load("//ts:vendor.bzl", "copy_bootstrap_icons")
 
 svelte_files = glob(["*.svelte"])
 
@@ -38,6 +39,15 @@ ts_library(
     ],
 )
 
+copy_bootstrap_icons(
+    name = "bootstrap-icons",
+    icons = [
+        "type-bold.svg",
+        "type-italic.svg",
+        "type-underline.svg",
+    ],
+)
+
 esbuild(
     name = "editor-toolbar",
     srcs = [
@@ -46,6 +56,7 @@ esbuild(
     args = [
         "--global-name=anki",
         "--inject:ts/protobuf-shim.js",
+        "--loader:.svg=text",
     ],
     entry_point = "index.ts",
     external = [
@@ -56,9 +67,10 @@ esbuild(
     deps = [
         "//ts/lib",
         "//ts/lib:backend_proto",
-        "//ts/lib:fluent_proto",
         ":index",
         "//ts/sass:core_css",
+        "//ts:image_module_support",
+        "bootstrap-icons",
     ] + svelte_names,
 )
 

ts/editor-toolbar/ButtonBar.svelte

@@ -2,18 +2,6 @@
     ul {
         padding-left: 0;
         margin-bottom: 2px;
-
-        & > :global(*) {
-            margin: 0 4px;
-
-            &:first-child {
-                margin-left: 0;
-            }
-
-            &:last-child {
-                margin-right: 0;
-            }
-        }
     }
 </style>
 

ts/editor-toolbar/EditorToolbar.svelte

@@ -2,11 +2,23 @@
     import ButtonBarOuter from "./ButtonBarOuter.svelte";
     import ButtonBar from "./ButtonBar.svelte";
 
-    import LeftButton from "./LeftButton.svelte";
+    import LabelButton from "./LabelButton.svelte";
-    import RightButton from "./RightButton.svelte";
+    import IconButton from "./IconButton.svelte";
 
-    export let leftButtons = ["Fields...", "Cards..."];
+    import boldIcon from "./type-bold.svg";
-    export let rightButtons = ["bi bi-type-bold", "bi bi-pin-angle"];
+    import italicIcon from "./type-italic.svg";
+    import underlineIcon from "./type-underline.svg";
+
+    export let leftButtons = [
+        { component: LabelButton, label: "Fields..." },
+        { component: LabelButton, label: "Cards..." },
+    ];
+
+    export let rightButtons = [
+        { component: IconButton, icon: boldIcon },
+        { component: IconButton, icon: italicIcon },
+        { component: IconButton, icon: underlineIcon },
+    ];
     export let nightMode: boolean;
 
     console.log(nightMode);
@@ -15,13 +27,13 @@
 <ButtonBarOuter>
     <ButtonBar>
         {#each leftButtons as leftButton}
-            <LeftButton>{leftButton}</LeftButton>
+            <svelte:component this={leftButton.component} {...leftButton} />
         {/each}
     </ButtonBar>
 
     <ButtonBar>
         {#each rightButtons as rightButton}
-            <RightButton className={rightButton} />
+            <svelte:component this={rightButton.component} {...rightButton} />
         {/each}
     </ButtonBar>
 </ButtonBarOuter>

ts/editor-toolbar/IconButton.svelte

@@ -0,0 +1,24 @@
+<script lang="typescript">
+    import ButtonItem from "./ButtonItem.svelte";
+
+    export let className: string;
+    export let icon: string;
+</script>
+
+<style lang="scss">
+    span {
+        display: inline-block;
+        width: 28px;
+        height: 28px;
+        vertical-align: -webkit-baseline-middle;
+
+        & > :global(svg) {
+            width: 100%;
+            height: 100%;
+        }
+    }
+</style>
+
+<ButtonItem>
+    <span class={className}>{@html icon}</span>
+</ButtonItem>

ts/editor-toolbar/LabelButton.svelte

@@ -1,20 +1,23 @@
 <script lang="typescript">
     import ButtonItem from "./ButtonItem.svelte";
+
+    export let label: string;
 </script>
+
 <style lang="scss">
     button {
         padding: 3px 10px;
-        /* fit RightButton */
         vertical-align: -.425em;
-    }
+        margin-right: 3px;
 
-    button:focus {
+        &:focus {
-        0 0 0 0.05rem rgba(255, 255, 255, 0.5);
+            box-shadow: 0 0 0 .05rem rgba(255, 255, 255, 0.5);
+        }
     }
 </style>
 
 <ButtonItem>
     <button type="button" class="btn btn-secondary" on:click>
-        <slot />
+        {label}
     </button>
 </ButtonItem>

ts/editor-toolbar/RightButton.svelte

@@ -1,15 +0,0 @@
-<script lang="typescript">
-    import ButtonItem from "./ButtonItem.svelte";
-
-    export let className: string;
-</script>
-
-<style>
-    span {
-        font-size: x-large;
-    }
-</style>
-
-<ButtonItem>
-    <span class={className}></span>
-</ButtonItem>

ts/licenses.json

@@ -7,6 +7,15 @@
         "path": "node_modules/@fluent/bundle",
         "licenseFile": "node_modules/@fluent/bundle/README.md"
     },
+    "@fortawesome/fontawesome-free@5.15.3": {
+        "licenses": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+        "repository": "https://github.com/FortAwesome/Font-Awesome",
+        "publisher": "Dave Gandy",
+        "email": "dave@fontawesome.com",
+        "url": "http://twitter.com/davegandy",
+        "path": "node_modules/@fortawesome/fontawesome-free",
+        "licenseFile": "node_modules/@fortawesome/fontawesome-free/LICENSE.txt"
+    },
     "@protobufjs/aspromise@1.1.2": {
         "licenses": "BSD-3-Clause",
         "repository": "https://github.com/dcodeIO/protobuf.js",

ts/package.json

@@ -54,6 +54,7 @@
     },
     "dependencies": {
         "@fluent/bundle": "^0.15.1",
+        "@fortawesome/fontawesome-free": "^5.15.3",
         "bootstrap": "^5.0.0-beta2",
         "bootstrap-icons": "^1.4.0",
         "css-browser-selector": "^0.6.5",

ts/vendor.bzl

@@ -4,8 +4,11 @@ Helpers to copy runtime dependencies from node_modules.
 
 load("//ts:copy.bzl", "copy_select_files")
 
+def _npm_base_from_name(name):
+    return "external/npm/node_modules/{}/".format(name)
+
 def _vendor_js_lib_impl(ctx):
-    base = ctx.attr.base or "external/npm/node_modules/{}/".format(ctx.attr.name)
+    base = ctx.attr.base or _npm_base_from_name(ctx.attr.name)
     return copy_select_files(
         ctx = ctx,
         files = ctx.attr.pkg.files,
@@ -27,7 +30,8 @@ vendor_js_lib = rule(
 )
 
 def pkg_from_name(name):
-    return "@npm//{0}:{0}__files".format(name)
+    tail = name.split("/")[-1]
+    return "@npm//{0}:{1}__files".format(name, tail)
 
 #
 # These could be defined directly in BUILD files, but defining them as
@@ -126,3 +130,14 @@ def copy_bootstrap_icons(name = "bootstrap-icons", icons = [], visibility = ["//
         strip_prefix = "icons/",
         visibility = visibility,
     )
+
+    
+def copy_fontawesome_icons(name = "fontawesome-icons", icons = [], visibility = ["//visibility:public"]):
+    vendor_js_lib(
+        name = name,
+        pkg = _pkg_from_name("@fortawesome/fontawesome-free"),
+        base = _npm_base_from_name("@fortawesome/fontawesome-free"),
+        include = ["svgs/{}".format(icon) for icon in icons],
+        strip_prefix = "svgs/solid/",
+        visibility = visibility,
+    )

ts/yarn.lock

@@ -502,6 +502,10 @@
     "@types/node" "*"
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
+"@fortawesome/fontawesome-free@^5.15.3":
+  version "5.15.3"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz#c36ffa64a2a239bf948541a97b6ae8d729e09a9a"
+  integrity sha512-rFnSUN/QOtnOAgqFRooTA3H57JLDm0QEG/jPdk+tLQNL/eWd+Aok8g3qCI+Q1xuDPWpGW/i9JySpJVsq8Q0s9w==
 
 "@jest/types@^27.0.0-next.8":
   version "27.0.0-next.8"