From bbea9ac9d71b0b3c83f092a052353f893a4d0576 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Fri, 26 Mar 2021 03:27:59 +0100 Subject: [PATCH 1/5] Remove bootstrap-icons from css folder --- qt/aqt/data/web/css/vendor/BUILD.bazel | 5 +---- qt/aqt/editor.py | 1 - ts/vendor.bzl | 13 ------------- 3 files changed, 1 insertion(+), 18 deletions(-) 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/vendor.bzl b/ts/vendor.bzl index c8a0e21a1..0688cdec4 100644 --- a/ts/vendor.bzl +++ b/ts/vendor.bzl @@ -116,16 +116,3 @@ def copy_bootstrap_css(name = "bootstrap-css", visibility = ["//visibility:publi strip_prefix = "dist/css/", visibility = visibility, ) - -def copy_bootstrap_icons(name = "bootstrap-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/", - visibility = visibility, - ) From 3a44ffe2bb0c0a52fabb08482d1fc64d3a69fee6 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Fri, 26 Mar 2021 04:18:16 +0100 Subject: [PATCH 2/5] Unsuccessfully try to add text loader for .svg files --- ts/editor/BUILD.bazel | 12 ++++++++++++ ts/editor/labelContainer.ts | 1 + ts/esbuild/upstream.bzl | 1 + ts/vendor.bzl | 16 ++++++++-------- 4 files changed, 22 insertions(+), 8 deletions(-) diff --git a/ts/editor/BUILD.bazel b/ts/editor/BUILD.bazel index f9a03e975..5b21fc4d8 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", "vendor_js_lib", "pkg_from_name") load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") sass_binary( @@ -25,12 +26,23 @@ ts_library( ], ) +vendor_js_lib( + name = "bootstrap-icons", + pkg = pkg_from_name("bootstrap-icons"), + include = [ + "icons/pin-angle.svg", + ], + strip_prefix = "icons/", + visibility = ["//visibility:public"], +) + esbuild( name = "editor", entry_point = "index_wrapper.ts", visibility = ["//visibility:public"], deps = [ "editor_ts", + "bootstrap-icons", ], ) diff --git a/ts/editor/labelContainer.ts b/ts/editor/labelContainer.ts index 27148fbbb..e34a59a95 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; 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/vendor.bzl b/ts/vendor.bzl index 0688cdec4..75bd21f0e 100644 --- a/ts/vendor.bzl +++ b/ts/vendor.bzl @@ -26,7 +26,7 @@ vendor_js_lib = rule( }, ) -def _pkg_from_name(name): +def pkg_from_name(name): return "@npm//{0}:{0}__files".format(name) # @@ -37,7 +37,7 @@ def _pkg_from_name(name): def copy_jquery(name = "jquery", visibility = ["//visibility:public"]): vendor_js_lib( name = name, - pkg = _pkg_from_name(name), + pkg = pkg_from_name(name), include = [ "dist/jquery.min.js", ], @@ -48,7 +48,7 @@ def copy_jquery(name = "jquery", visibility = ["//visibility:public"]): def copy_jquery_ui(name = "jquery-ui", visibility = ["//visibility:public"]): vendor_js_lib( name = name, - pkg = _pkg_from_name("jquery-ui-dist"), + pkg = pkg_from_name("jquery-ui-dist"), base = "external/npm/node_modules/jquery-ui-dist/", include = [ "jquery-ui.min.js", @@ -59,7 +59,7 @@ def copy_jquery_ui(name = "jquery-ui", visibility = ["//visibility:public"]): def copy_protobufjs(name = "protobufjs", visibility = ["//visibility:public"]): vendor_js_lib( name = name, - pkg = _pkg_from_name(name), + pkg = pkg_from_name(name), include = [ "dist/protobuf.min.js", ], @@ -70,7 +70,7 @@ def copy_protobufjs(name = "protobufjs", visibility = ["//visibility:public"]): def copy_mathjax(name = "mathjax", visibility = ["//visibility:public"]): vendor_js_lib( name = name, - pkg = _pkg_from_name(name), + pkg = pkg_from_name(name), include = [ "es5/tex-chtml.js", "es5/input/tex/extensions", @@ -88,7 +88,7 @@ def copy_mathjax(name = "mathjax", visibility = ["//visibility:public"]): def copy_css_browser_selector(name = "css-browser-selector", visibility = ["//visibility:public"]): vendor_js_lib( name = name, - pkg = _pkg_from_name(name), + pkg = pkg_from_name(name), include = [ "css_browser_selector.min.js", ], @@ -98,7 +98,7 @@ def copy_css_browser_selector(name = "css-browser-selector", visibility = ["//vi def copy_bootstrap_js(name = "bootstrap-js", visibility = ["//visibility:public"]): vendor_js_lib( name = name, - pkg = _pkg_from_name(name), + pkg = pkg_from_name(name), include = [ "dist/js/bootstrap.bundle.min.js", ], @@ -109,7 +109,7 @@ def copy_bootstrap_js(name = "bootstrap-js", visibility = ["//visibility:public" def copy_bootstrap_css(name = "bootstrap-css", visibility = ["//visibility:public"]): vendor_js_lib( name = name, - pkg = _pkg_from_name(name), + pkg = pkg_from_name(name), include = [ "dist/css/bootstrap.min.css", ], From dbfbcc36c6793922f78a940267e99ca533183907 Mon Sep 17 00:00:00 2001 From: Damien Elmes Date: Sun, 28 Mar 2021 18:17:07 +1000 Subject: [PATCH 3/5] define file extension in .d.ts so typescript doesn't complain --- ts/BUILD.bazel | 7 +++++++ ts/editor/BUILD.bazel | 1 + ts/images.d.ts | 1 + 3 files changed, 9 insertions(+) create mode 100644 ts/images.d.ts 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 5b21fc4d8..69289ea75 100644 --- a/ts/editor/BUILD.bazel +++ b/ts/editor/BUILD.bazel @@ -22,6 +22,7 @@ ts_library( srcs = glob(["*.ts"]), tsconfig = "//ts:tsconfig.json", deps = [ + "//ts:image_module_support", "//ts/html-filter", ], ) 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"; From 7dcb3ae6781a508120233a7d1a2ac26d98555f59 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Sun, 28 Mar 2021 15:45:51 +0200 Subject: [PATCH 4/5] Include pin-angle icon via inline SVG --- ts/editor/editor.scss | 13 ++++++++----- ts/editor/labelContainer.ts | 5 +++-- 2 files changed, 11 insertions(+), 7 deletions(-) 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 e34a59a95..41b205048 100644 --- a/ts/editor/labelContainer.ts +++ b/ts/editor/labelContainer.ts @@ -1,5 +1,5 @@ import { bridgeCommand } from "./lib"; -// import pinIcon from "./pin-angle.svg"; +import pinIcon from "./pin-angle.svg"; function removeHoverIcon(evt: Event): void { const icon = evt.currentTarget as HTMLElement; @@ -24,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); From 922ee56ce8ff36514e0286237c5c8a73db39f8a9 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Sun, 28 Mar 2021 18:47:06 +0200 Subject: [PATCH 5/5] Add copy_bootstrap_icons macro --- ts/editor/BUILD.bazel | 11 +++-------- ts/vendor.bzl | 25 +++++++++++++++++-------- 2 files changed, 20 insertions(+), 16 deletions(-) diff --git a/ts/editor/BUILD.bazel b/ts/editor/BUILD.bazel index 69289ea75..2db1cccf8 100644 --- a/ts/editor/BUILD.bazel +++ b/ts/editor/BUILD.bazel @@ -2,7 +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", "vendor_js_lib", "pkg_from_name") +load("//ts:vendor.bzl", "copy_bootstrap_icons") load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") sass_binary( @@ -27,14 +27,9 @@ ts_library( ], ) -vendor_js_lib( +copy_bootstrap_icons( name = "bootstrap-icons", - pkg = pkg_from_name("bootstrap-icons"), - include = [ - "icons/pin-angle.svg", - ], - strip_prefix = "icons/", - visibility = ["//visibility:public"], + icons = ["pin-angle.svg"], ) esbuild( diff --git a/ts/vendor.bzl b/ts/vendor.bzl index 75bd21f0e..f88920c4c 100644 --- a/ts/vendor.bzl +++ b/ts/vendor.bzl @@ -26,7 +26,7 @@ vendor_js_lib = rule( }, ) -def pkg_from_name(name): +def _pkg_from_name(name): return "@npm//{0}:{0}__files".format(name) # @@ -37,7 +37,7 @@ def pkg_from_name(name): def copy_jquery(name = "jquery", visibility = ["//visibility:public"]): vendor_js_lib( name = name, - pkg = pkg_from_name(name), + pkg = _pkg_from_name(name), include = [ "dist/jquery.min.js", ], @@ -48,7 +48,7 @@ def copy_jquery(name = "jquery", visibility = ["//visibility:public"]): def copy_jquery_ui(name = "jquery-ui", visibility = ["//visibility:public"]): vendor_js_lib( name = name, - pkg = pkg_from_name("jquery-ui-dist"), + pkg = _pkg_from_name("jquery-ui-dist"), base = "external/npm/node_modules/jquery-ui-dist/", include = [ "jquery-ui.min.js", @@ -59,7 +59,7 @@ def copy_jquery_ui(name = "jquery-ui", visibility = ["//visibility:public"]): def copy_protobufjs(name = "protobufjs", visibility = ["//visibility:public"]): vendor_js_lib( name = name, - pkg = pkg_from_name(name), + pkg = _pkg_from_name(name), include = [ "dist/protobuf.min.js", ], @@ -70,7 +70,7 @@ def copy_protobufjs(name = "protobufjs", visibility = ["//visibility:public"]): def copy_mathjax(name = "mathjax", visibility = ["//visibility:public"]): vendor_js_lib( name = name, - pkg = pkg_from_name(name), + pkg = _pkg_from_name(name), include = [ "es5/tex-chtml.js", "es5/input/tex/extensions", @@ -88,7 +88,7 @@ def copy_mathjax(name = "mathjax", visibility = ["//visibility:public"]): def copy_css_browser_selector(name = "css-browser-selector", visibility = ["//visibility:public"]): vendor_js_lib( name = name, - pkg = pkg_from_name(name), + pkg = _pkg_from_name(name), include = [ "css_browser_selector.min.js", ], @@ -98,7 +98,7 @@ def copy_css_browser_selector(name = "css-browser-selector", visibility = ["//vi def copy_bootstrap_js(name = "bootstrap-js", visibility = ["//visibility:public"]): vendor_js_lib( name = name, - pkg = pkg_from_name(name), + pkg = _pkg_from_name(name), include = [ "dist/js/bootstrap.bundle.min.js", ], @@ -109,10 +109,19 @@ def copy_bootstrap_js(name = "bootstrap-js", visibility = ["//visibility:public" def copy_bootstrap_css(name = "bootstrap-css", visibility = ["//visibility:public"]): vendor_js_lib( name = name, - pkg = pkg_from_name(name), + pkg = _pkg_from_name(name), include = [ "dist/css/bootstrap.min.css", ], strip_prefix = "dist/css/", visibility = visibility, ) + +def copy_bootstrap_icons(name = "bootstrap-icons", icons = [], visibility = ["//visibility:public"]): + vendor_js_lib( + name = name, + pkg = _pkg_from_name(name), + include = ["icons/{}".format(icon) for icon in icons], + strip_prefix = "icons/", + visibility = visibility, + )