From aeda64a89017c962c59bb5f3aed3773e1188463b Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Sat, 27 Feb 2021 04:01:33 +0100 Subject: [PATCH 01/25] Add bootstrap, bootstrap-icons, and popperjs --- qt/aqt/data/web/css/BUILD.bazel | 1 + qt/aqt/data/web/css/vendor/BUILD.bazel | 20 +++++++++++ qt/aqt/data/web/js/vendor/BUILD.bazel | 16 ++++++++- ts/licenses.json | 23 +++++++++++++ ts/package.json | 3 ++ ts/vendor.bzl | 46 ++++++++++++++++++++++++++ ts/yarn.lock | 15 +++++++++ 7 files changed, 123 insertions(+), 1 deletion(-) create mode 100644 qt/aqt/data/web/css/vendor/BUILD.bazel diff --git a/qt/aqt/data/web/css/BUILD.bazel b/qt/aqt/data/web/css/BUILD.bazel index ff0045e68..f27b9d463 100644 --- a/qt/aqt/data/web/css/BUILD.bazel +++ b/qt/aqt/data/web/css/BUILD.bazel @@ -32,6 +32,7 @@ filegroup( "core.css", "css_local", "editor", + "//qt/aqt/data/web/css/vendor", ], visibility = ["//qt:__subpackages__"], ) diff --git a/qt/aqt/data/web/css/vendor/BUILD.bazel b/qt/aqt/data/web/css/vendor/BUILD.bazel new file mode 100644 index 000000000..23b604f63 --- /dev/null +++ b/qt/aqt/data/web/css/vendor/BUILD.bazel @@ -0,0 +1,20 @@ +load("//ts:vendor.bzl", "copy_bootstrap_css", "copy_bootstrap_icons") + +copy_bootstrap_css(name = "bootstrap") + +copy_bootstrap_icons(name = "bootstrap-icons") + +files = [ + "bootstrap", + "bootstrap-icons", +] + +directories = [] + +filegroup( + name = "vendor", + srcs = glob(["*.css"]) + + ["//qt/aqt/data/web/css/vendor:{}".format(file) for file in files] + + ["//qt/aqt/data/web/css/vendor/{}".format(dir) for dir in directories], + visibility = ["//qt:__subpackages__"], +) diff --git a/qt/aqt/data/web/js/vendor/BUILD.bazel b/qt/aqt/data/web/js/vendor/BUILD.bazel index f12e3be27..45a0b1005 100644 --- a/qt/aqt/data/web/js/vendor/BUILD.bazel +++ b/qt/aqt/data/web/js/vendor/BUILD.bazel @@ -1,4 +1,12 @@ -load("//ts:vendor.bzl", "copy_css_browser_selector", "copy_jquery", "copy_jquery_ui", "copy_protobufjs") +load( + "//ts:vendor.bzl", + "copy_css_browser_selector", + "copy_jquery", + "copy_jquery_ui", + "copy_protobufjs", + "copy_bootstrap_js", + "copy_popperjs", +) copy_jquery(name = "jquery") @@ -8,11 +16,17 @@ copy_protobufjs(name = "protobufjs") copy_css_browser_selector(name = "css-browser-selector") +copy_bootstrap_js(name = "bootstrap") + +copy_popperjs(name = "popperjs") + files = [ "jquery", "jquery-ui", "protobufjs", "css-browser-selector", + "bootstrap", + "popperjs", ] directories = [ diff --git a/ts/licenses.json b/ts/licenses.json index c6dcc95dc..22c188171 100644 --- a/ts/licenses.json +++ b/ts/licenses.json @@ -7,6 +7,14 @@ "path": "node_modules/@fluent/bundle", "licenseFile": "node_modules/@fluent/bundle/README.md" }, + "@popperjs/core@2.8.6": { + "licenses": "MIT", + "repository": "https://github.com/popperjs/popper-core", + "publisher": "Federico Zivolo", + "email": "federico.zivolo@gmail.com", + "path": "node_modules/@popperjs/core", + "licenseFile": "node_modules/@popperjs/core/LICENSE.md" + }, "@protobufjs/aspromise@1.1.2": { "licenses": "BSD-3-Clause", "repository": "https://github.com/dcodeIO/protobuf.js", @@ -99,6 +107,21 @@ "path": "node_modules/protobufjs/node_modules/@types/node", "licenseFile": "node_modules/protobufjs/node_modules/@types/node/LICENSE" }, + "bootstrap-icons@1.4.0": { + "licenses": "MIT", + "repository": "https://github.com/twbs/icons", + "publisher": "mdo", + "path": "node_modules/bootstrap-icons", + "licenseFile": "node_modules/bootstrap-icons/LICENSE.md" + }, + "bootstrap@5.0.0-beta2": { + "licenses": "MIT", + "repository": "https://github.com/twbs/bootstrap", + "publisher": "The Bootstrap Authors", + "url": "https://github.com/twbs/bootstrap/graphs/contributors", + "path": "node_modules/bootstrap", + "licenseFile": "node_modules/bootstrap/LICENSE" + }, "commander@2.20.3": { "licenses": "MIT", "repository": "https://github.com/tj/commander.js", diff --git a/ts/package.json b/ts/package.json index 84dbfc85c..c6fd8c300 100644 --- a/ts/package.json +++ b/ts/package.json @@ -50,6 +50,9 @@ }, "dependencies": { "@fluent/bundle": "^0.15.1", + "@popperjs/core": "^2.8.6", + "bootstrap": "^5.0.0-beta2", + "bootstrap-icons": "^1.4.0", "css-browser-selector": "^0.6.5", "d3": "^6.5.0", "intl-pluralrules": "^1.2.2", diff --git a/ts/vendor.bzl b/ts/vendor.bzl index c1cbb5bb6..cfe5b758f 100644 --- a/ts/vendor.bzl +++ b/ts/vendor.bzl @@ -94,3 +94,49 @@ def copy_css_browser_selector(name = "css-browser-selector", visibility = ["//vi ], visibility = visibility, ) + +def copy_bootstrap_js(name = "bootstrap-js", visibility = ["//visibility:public"]): + vendor_js_lib( + name = name, + pkg = _pkg_from_name(name), + include = [ + "dist/js/bootstrap.bundle.min.js", + ], + strip_prefix = "dist/js/", + visibility = visibility, + ) + +def copy_bootstrap_css(name = "bootstrap-css", visibility = ["//visibility:public"]): + vendor_js_lib( + 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", 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, + ) + +def copy_popperjs(name = "popperjs", visibility = ["//visibility:public"]): + vendor_js_lib( + name = name, + pkg = "@npm//@popperjs/core:core__files", + include = [ + "external/npm/node_modules/@popperjs/core/dist/umd/popper.min.js", + ], + strip_prefix = "external/npm/node_modules/@popperjs/core/dist/umd/", + visibility = visibility, + ) diff --git a/ts/yarn.lock b/ts/yarn.lock index f73eb1287..cd2cdde78 100644 --- a/ts/yarn.lock +++ b/ts/yarn.lock @@ -53,6 +53,11 @@ resolved "https://registry.yarnpkg.com/@fluent/bundle/-/bundle-0.15.1.tgz#95d3b9f836ac138b6ee8480ef8d0547dd59195b1" integrity sha512-uhDGjpEwTMBNxYMSXyjXFBG5LY7dqoNatle6mnghu5lFOrf0JyblY/Y0al2GzDKFuYbtOSbJvUkxzjtYX3odkw== +"@popperjs/core@^2.8.6": + version "2.8.6" + resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.8.6.tgz#ad75ebe8dbecfa145af3c7e4d0ae98016458d005" + integrity sha512-1oXH2bAFXz9SttE1v/0Jp+2ZVePsPEAPGIuPKrmljWZcS3FPBEn2Q4WcANozZC0YiCjTWOF55k0g6rbSZS39ew== + "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2": version "1.1.2" resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf" @@ -699,6 +704,16 @@ bluebird@^3.7.2: resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f" integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg== +bootstrap-icons@^1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/bootstrap-icons/-/bootstrap-icons-1.4.0.tgz#ea08e2c8bc1535576ad267312cca9ee84ea73343" + integrity sha512-EynaOv/G/X/sQgPUqkdLJoxPrWk73wwsVjVR3cDNYO0jMS58poq7DOC2CraBWlBt1AberEmt0blfw4ony2/ZIg== + +bootstrap@^5.0.0-beta2: + version "5.0.0-beta2" + resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.0.0-beta2.tgz#ab1504a12807fa58e5e41408e35fcea42461e84b" + integrity sha512-e+uPbPHqTQWKyCX435uVlOmgH9tUt0xtjvyOC7knhKgOS643BrQKuTo+KecGpPV7qlmOyZgCfaM4xxPWtDEN/g== + brace-expansion@^1.1.7: version "1.1.11" resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd" From f2cc85a3bc1937365d2a605a943c690410ddb942 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Sat, 27 Feb 2021 16:34:22 +0100 Subject: [PATCH 02/25] Include bootstrap in editor --- qt/aqt/editor.py | 11 +++++++++-- ts/editor/editor.scss | 4 ++-- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py index f699cef44..4bde86c78 100644 --- a/qt/aqt/editor.py +++ b/qt/aqt/editor.py @@ -222,8 +222,15 @@ class Editor: # then load page self.web.stdHtml( _html % (bgcol, topbuts, tr(TR.EDITING_SHOW_DUPLICATES)), - css=["css/editor.css"], - js=["js/vendor/jquery.min.js", "js/editor.js"], + css=[ + "css/vendor/bootstrap.min.css", + "css/editor.css", + ], + js=[ + "js/vendor/jquery.min.js", + "js/vendor/bootstrap.bundle.min.js", + "js/editor.js", + ], context=self, ) self.web.eval("preventButtonFocus();") diff --git a/ts/editor/editor.scss b/ts/editor/editor.scss index 30b0af96b..42b84cf27 100644 --- a/ts/editor/editor.scss +++ b/ts/editor/editor.scss @@ -1,8 +1,8 @@ /* Copyright: Ankitects Pty Ltd and contributors * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */ -html { - background: var(--bg-color); +body { + background-color: var(--bg-color); } #fields { From 037539dbf4c020ffa4b70213d1a254338bc5c7f1 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Sat, 27 Feb 2021 16:41:58 +0100 Subject: [PATCH 03/25] Remove field margins * Bootstrap solves it more elegantly with line-height * body { margin: 0 } is also defined by bootstrap --- ts/editor/editor.scss | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/ts/editor/editor.scss b/ts/editor/editor.scss index 42b84cf27..14ae103a0 100644 --- a/ts/editor/editor.scss +++ b/ts/editor/editor.scss @@ -9,19 +9,6 @@ body { display: flex; flex-direction: column; margin: 5px; - - & > *, - & > * > * { - margin: 1px 0; - - &:first-child { - margin-top: 0; - } - - &:last-child { - margin-bottom: 0; - } - } } .field { @@ -38,10 +25,6 @@ body { padding: 0; } -body { - margin: 0; -} - #topbutsOuter { display: flex; flex-wrap: wrap; From 81d1f2906a3cbe0bfa17eb1c1c56649a94d083ce Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Sat, 27 Feb 2021 16:49:47 +0100 Subject: [PATCH 04/25] Fix highlight for topright buttons --- ts/editor/editor.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/ts/editor/editor.scss b/ts/editor/editor.scss index 14ae103a0..59f57f26c 100644 --- a/ts/editor/editor.scss +++ b/ts/editor/editor.scss @@ -105,10 +105,11 @@ button.highlighted { #topbutsright & { border-bottom: 3px solid black; - } + border-radius: 3px; - .nightMode #topbutsright & { - border-bottom: 3px solid white; + .nightMode & { + border-bottom-color: white; + } } } From a66b0fbd84ad30f322cc2978f74974d310008b6c Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Sat, 27 Feb 2021 17:22:55 +0100 Subject: [PATCH 05/25] Fix positioning of buttons --- qt/aqt/editor.py | 13 +++++-------- ts/editor/editor.scss | 6 ++++++ 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py index 4bde86c78..afdd62e6c 100644 --- a/qt/aqt/editor.py +++ b/qt/aqt/editor.py @@ -179,19 +179,16 @@ class Editor: "colour", tr(TR.EDITING_SET_FOREGROUND_COLOUR_F7), """ -
""", + +""" ), self._addButton( None, "changeCol", tr(TR.EDITING_CHANGE_COLOUR_F8), """ -
""", + +""" ), self._addButton( "text_cloze", "cloze", tr(TR.EDITING_CLOZE_DELETION_CTRLANDSHIFTANDC) @@ -321,7 +318,7 @@ class Editor: else: imgelm = "" if label or not imgelm: - labelelm = f"""{label or cmd}""" + labelelm = label or cmd else: labelelm = "" if id: diff --git a/ts/editor/editor.scss b/ts/editor/editor.scss index 59f57f26c..1569cf29a 100644 --- a/ts/editor/editor.scss +++ b/ts/editor/editor.scss @@ -56,9 +56,15 @@ body { } .topbut { + display: inline-block; width: 16px; height: 16px; margin-top: 4px; + vertical-align: -.125em; +} + +.topbut--rounded { + border-radius: 5px; } .rainbow { From fb5763afb6e7228587a34b1742e706fabc7302b3 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Sat, 27 Feb 2021 17:25:40 +0100 Subject: [PATCH 06/25] Change font-size in topbar buttons Bootstrap sets font-size to inherit, so it's not inherited from top. Before, it defaulted to 13, so this should prevent add-ons, which feature text in their buttons (like