diff --git a/qt/aqt/data/web/css/vendor/BUILD.bazel b/qt/aqt/data/web/css/vendor/BUILD.bazel index 23b604f63..591f16a5c 100644 --- a/qt/aqt/data/web/css/vendor/BUILD.bazel +++ b/qt/aqt/data/web/css/vendor/BUILD.bazel @@ -1,12 +1,9 @@ -load("//ts:vendor.bzl", "copy_bootstrap_css", "copy_bootstrap_icons") +load("//ts:vendor.bzl", "copy_bootstrap_css") copy_bootstrap_css(name = "bootstrap") -copy_bootstrap_icons(name = "bootstrap-icons") - files = [ "bootstrap", - "bootstrap-icons", ] directories = [] diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py index 69e379455..24d7d6aa6 100644 --- a/qt/aqt/editor.py +++ b/qt/aqt/editor.py @@ -234,7 +234,6 @@ class Editor: _html % (bgcol, topbuts, tr.editing_show_duplicates()), css=[ "css/vendor/bootstrap.min.css", - "css/vendor/bootstrap-icons.css", "css/editor.css", ], js=[ diff --git a/ts/BUILD.bazel b/ts/BUILD.bazel index 598846123..9a3b2b827 100644 --- a/ts/BUILD.bazel +++ b/ts/BUILD.bazel @@ -1,5 +1,6 @@ load("//ts:prettier.bzl", "prettier", "prettier_test") load("//ts:sql_format.bzl", "sql_format_setup") +load("@npm//@bazel/typescript:index.bzl", "ts_library") prettier() @@ -13,6 +14,12 @@ prettier_test( sql_format_setup() +ts_library( + name = "image_module_support", + srcs = ["images.d.ts"], + visibility = ["//visibility:public"], +) + # Exported files ################# diff --git a/ts/editor/BUILD.bazel b/ts/editor/BUILD.bazel index f9a03e975..2db1cccf8 100644 --- a/ts/editor/BUILD.bazel +++ b/ts/editor/BUILD.bazel @@ -2,6 +2,7 @@ load("@npm//@bazel/typescript:index.bzl", "ts_library") load("//ts:prettier.bzl", "prettier_test") load("//ts:eslint.bzl", "eslint_test") load("//ts:esbuild.bzl", "esbuild") +load("//ts:vendor.bzl", "copy_bootstrap_icons") load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") sass_binary( @@ -21,16 +22,23 @@ ts_library( srcs = glob(["*.ts"]), tsconfig = "//ts:tsconfig.json", deps = [ + "//ts:image_module_support", "//ts/html-filter", ], ) +copy_bootstrap_icons( + name = "bootstrap-icons", + icons = ["pin-angle.svg"], +) + esbuild( name = "editor", entry_point = "index_wrapper.ts", visibility = ["//visibility:public"], deps = [ "editor_ts", + "bootstrap-icons", ], ) diff --git a/ts/editor/editor.scss b/ts/editor/editor.scss index 3be5e2b0f..3e16a0392 100644 --- a/ts/editor/editor.scss +++ b/ts/editor/editor.scss @@ -133,15 +133,18 @@ button.highlighted { } } -.icon { - cursor: pointer; - color: var(--text-fg); +.icon > svg { + fill: var(--text-fg); +} - &.is-inactive::before { +.pin-icon { + cursor: pointer; + + &.is-inactive { opacity: 0.1; } - &.icon--hover::before { + &.icon--hover { opacity: 0.5; } } diff --git a/ts/editor/labelContainer.ts b/ts/editor/labelContainer.ts index 27148fbbb..41b205048 100644 --- a/ts/editor/labelContainer.ts +++ b/ts/editor/labelContainer.ts @@ -1,4 +1,5 @@ import { bridgeCommand } from "./lib"; +import pinIcon from "./pin-angle.svg"; function removeHoverIcon(evt: Event): void { const icon = evt.currentTarget as HTMLElement; @@ -23,7 +24,8 @@ export class LabelContainer extends HTMLDivElement { this.appendChild(this.label); this.sticky = document.createElement("span"); - this.sticky.className = "bi me-1 bi-pin-angle icon"; + this.sticky.className = "icon pin-icon me-1"; + this.sticky.innerHTML = pinIcon; this.sticky.hidden = true; this.appendChild(this.sticky); diff --git a/ts/esbuild/upstream.bzl b/ts/esbuild/upstream.bzl index 53afb7e43..74c292089 100644 --- a/ts/esbuild/upstream.bzl +++ b/ts/esbuild/upstream.bzl @@ -66,6 +66,7 @@ def _esbuild_impl(ctx): args.add_joined(["--platform", ctx.attr.platform], join_with = "=") args.add_joined(["--target", ctx.attr.target], join_with = "=") args.add_joined(["--log-level", "info"], join_with = "=") + args.add_joined(["--loader", ".svg=text"], join_with = ":") args.add_joined(["--metafile", metafile.path], join_with = "=") args.add_all(ctx.attr.define, format_each = "--define:%s") args.add_all(ctx.attr.external, format_each = "--external:%s") diff --git a/ts/images.d.ts b/ts/images.d.ts new file mode 100644 index 000000000..dd4ab7e91 --- /dev/null +++ b/ts/images.d.ts @@ -0,0 +1 @@ +declare module "*.svg"; diff --git a/ts/vendor.bzl b/ts/vendor.bzl index c8a0e21a1..f88920c4c 100644 --- a/ts/vendor.bzl +++ b/ts/vendor.bzl @@ -117,15 +117,11 @@ def copy_bootstrap_css(name = "bootstrap-css", visibility = ["//visibility:publi visibility = visibility, ) -def copy_bootstrap_icons(name = "bootstrap-icons", visibility = ["//visibility:public"]): +def copy_bootstrap_icons(name = "bootstrap-icons", icons = [], visibility = ["//visibility:public"]): vendor_js_lib( name = name, pkg = _pkg_from_name(name), - include = [ - "font/bootstrap-icons.css", - "font/fonts/bootstrap-icons.woff", - "font/fonts/bootstrap-icons.woff2", - ], - strip_prefix = "font/", + include = ["icons/{}".format(icon) for icon in icons], + strip_prefix = "icons/", visibility = visibility, )