From ed51dfa9f28c24443cf953c6c058d2a8dcaa555d Mon Sep 17 00:00:00 2001 From: Dario Mory Date: Tue, 11 Jan 2022 11:05:17 +0100 Subject: [PATCH 1/3] =?UTF-8?q?:heavy=5Fplus=5Fsign:=20Add=20tippy.js=20de?= =?UTF-8?q?pendency=20=E2=80=94=20#347?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 37 +++++++++++++++++++++++++++++++++++-- package.json | 5 +++-- 2 files changed, 38 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0d63b441e..7e9731a29 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,6 @@ "version": "1.0.0-alpha.0", "license": "UNLICENSED", "dependencies": { - "@ckeditor/ckeditor5-table": "^30.0.0", "@fortawesome/fontawesome-free": "^5.15.4", "ckeditor5": "^30.0.0", "flag-icon-css": "^4.1.6", @@ -18,7 +17,8 @@ "pretty-checkbox": "^3.0.3", "reseter.css": "^2.0.0", "showdown": "^1.9.1", - "text-diff": "^1.0.1" + "text-diff": "^1.0.1", + "tippy.js": "^6.3.7" }, "devDependencies": { "@babel/core": "latest", @@ -38,6 +38,7 @@ "@ckeditor/ckeditor5-list": "^30.0.0", "@ckeditor/ckeditor5-markdown-gfm": "^30.0.0", "@ckeditor/ckeditor5-paragraph": "^30.0.0", + "@ckeditor/ckeditor5-table": "^30.0.0", "@ckeditor/ckeditor5-theme-lark": "^30.0.0", "arrayify": "^1.0.0", "autoprefixer": "^9.0.0", @@ -2190,6 +2191,7 @@ "version": "30.0.0", "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-table/-/ckeditor5-table-30.0.0.tgz", "integrity": "sha512-B4/h6YV3ZD7GJFlL51zyQ+wrv1T9KMsNHCWafYPey/OGTCW66L5018XlsjM2Lc3LWweHHotlS4uJq7Ys4zlcnA==", + "dev": true, "dependencies": { "ckeditor5": "^30.0.0", "lodash-es": "^4.17.15" @@ -2435,6 +2437,15 @@ "node": ">=10" } }, + "node_modules/@popperjs/core": { + "version": "2.11.2", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz", + "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@sinonjs/commons": { "version": "1.8.3", "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.3.tgz", @@ -13312,6 +13323,14 @@ "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", "dev": true }, + "node_modules/tippy.js": { + "version": "6.3.7", + "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz", + "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==", + "dependencies": { + "@popperjs/core": "^2.9.0" + } + }, "node_modules/tmp": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz", @@ -16130,6 +16149,7 @@ "version": "30.0.0", "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-table/-/ckeditor5-table-30.0.0.tgz", "integrity": "sha512-B4/h6YV3ZD7GJFlL51zyQ+wrv1T9KMsNHCWafYPey/OGTCW66L5018XlsjM2Lc3LWweHHotlS4uJq7Ys4zlcnA==", + "dev": true, "requires": { "ckeditor5": "^30.0.0", "lodash-es": "^4.17.15" @@ -16313,6 +16333,11 @@ } } }, + "@popperjs/core": { + "version": "2.11.2", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz", + "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==" + }, "@sinonjs/commons": { "version": "1.8.3", "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.3.tgz", @@ -25067,6 +25092,14 @@ "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", "dev": true }, + "tippy.js": { + "version": "6.3.7", + "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz", + "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==", + "requires": { + "@popperjs/core": "^2.9.0" + } + }, "tmp": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz", diff --git a/package.json b/package.json index 35b227dcc..89c287d35 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,8 @@ "pretty-checkbox": "^3.0.3", "reseter.css": "^2.0.0", "showdown": "^1.9.1", - "text-diff": "^1.0.1" + "text-diff": "^1.0.1", + "tippy.js": "^6.3.7" }, "devDependencies": { "@babel/core": "latest", @@ -48,8 +49,8 @@ "@ckeditor/ckeditor5-list": "^30.0.0", "@ckeditor/ckeditor5-markdown-gfm": "^30.0.0", "@ckeditor/ckeditor5-paragraph": "^30.0.0", - "@ckeditor/ckeditor5-theme-lark": "^30.0.0", "@ckeditor/ckeditor5-table": "^30.0.0", + "@ckeditor/ckeditor5-theme-lark": "^30.0.0", "arrayify": "^1.0.0", "autoprefixer": "^9.0.0", "babel-loader": "latest", From 8985b3a90576499aaece3ba56032882926823dee Mon Sep 17 00:00:00 2001 From: Dario Mory Date: Tue, 11 Jan 2022 11:06:02 +0100 Subject: [PATCH 2/3] =?UTF-8?q?:sparkles:=20Add=20custom=20tooltip=20to=20?= =?UTF-8?q?info=20icon=20=E2=80=94=20#347?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/sdg/js/components/index.js | 1 + src/sdg/js/components/tooltip.js | 21 +++++++++++++++++++++ src/sdg/scss/components/_index.scss | 1 + src/sdg/scss/components/_tooltip.scss | 12 ++++++++++++ src/sdg/templates/admin/base_site.html | 2 +- src/sdg/templates/master.html | 2 +- 6 files changed, 37 insertions(+), 2 deletions(-) create mode 100644 src/sdg/js/components/tooltip.js create mode 100644 src/sdg/scss/components/_tooltip.scss diff --git a/src/sdg/js/components/index.js b/src/sdg/js/components/index.js index 652d45e07..e685a662b 100644 --- a/src/sdg/js/components/index.js +++ b/src/sdg/js/components/index.js @@ -10,3 +10,4 @@ import "./catalog"; import "./diff"; import "./general"; import "./product"; +import "./tooltip"; diff --git a/src/sdg/js/components/tooltip.js b/src/sdg/js/components/tooltip.js new file mode 100644 index 000000000..35bd88255 --- /dev/null +++ b/src/sdg/js/components/tooltip.js @@ -0,0 +1,21 @@ +import tippy from "tippy.js"; + +const infoIcons = document.querySelectorAll("svg.fa-info-circle[title]"); + +class InfoTooltip { + + constructor(node) { + this.node = node; + tippy(this.node, { + content: this.node.firstChild.textContent, + placement: "right", + animation: "scale", + theme: "sdg", + }); + } +} + +document.addEventListener("DOMContentLoaded", () => { + [...infoIcons].forEach(icon => new InfoTooltip(icon)); +}); + diff --git a/src/sdg/scss/components/_index.scss b/src/sdg/scss/components/_index.scss index a5de700d1..c4537dc13 100644 --- a/src/sdg/scss/components/_index.scss +++ b/src/sdg/scss/components/_index.scss @@ -27,3 +27,4 @@ @import 'diff'; @import 'reference'; @import 'flags'; +@import 'tooltip'; diff --git a/src/sdg/scss/components/_tooltip.scss b/src/sdg/scss/components/_tooltip.scss new file mode 100644 index 000000000..57fa874b4 --- /dev/null +++ b/src/sdg/scss/components/_tooltip.scss @@ -0,0 +1,12 @@ +@import 'tippy.js/dist/tippy.css'; +@import 'tippy.js/animations/scale.css'; +@import 'colors'; + + +.tippy-box { + background-color: $color_primary_darker; +} + +.tippy-arrow { + color: $color_primary_darker; +} diff --git a/src/sdg/templates/admin/base_site.html b/src/sdg/templates/admin/base_site.html index 20315692a..ca3bdecfb 100644 --- a/src/sdg/templates/admin/base_site.html +++ b/src/sdg/templates/admin/base_site.html @@ -13,8 +13,8 @@ {% block extrahead %} {{ block.super }} - + {% endblock %} {% block branding %} diff --git a/src/sdg/templates/master.html b/src/sdg/templates/master.html index 4d55383e7..40d710393 100644 --- a/src/sdg/templates/master.html +++ b/src/sdg/templates/master.html @@ -33,6 +33,6 @@ {% block extra_js %} {% endblock %} - + From 8bf42c8e05023dcc2787f96e840fb63a7a4faf6c Mon Sep 17 00:00:00 2001 From: Dario Mory Date: Tue, 11 Jan 2022 12:09:41 +0100 Subject: [PATCH 3/3] =?UTF-8?q?:sparkles:=20Add=20listener=20for=20fontawe?= =?UTF-8?q?some=20svg=20rendering=20(tooltip)=20=E2=80=94=20#347?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 35 ++++++++++++++++++++++++++ package.json | 1 + src/sdg/js/components/tooltip.js | 12 ++++++--- src/sdg/templates/account/base.html | 2 +- src/sdg/templates/admin/base_site.html | 2 +- src/sdg/templates/core/base_home.html | 2 +- src/sdg/templates/producten/base.html | 2 +- 7 files changed, 48 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7e9731a29..19c2b88ef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "UNLICENSED", "dependencies": { "@fortawesome/fontawesome-free": "^5.15.4", + "@fortawesome/fontawesome-svg-core": "^1.2.36", "ckeditor5": "^30.0.0", "flag-icon-css": "^4.1.6", "flatpickr": "^4.6.9", @@ -2310,6 +2311,15 @@ "node": ">=10.0.0" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "0.2.36", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz", + "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, "node_modules/@fortawesome/fontawesome-free": { "version": "5.15.4", "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz", @@ -2318,6 +2328,18 @@ "node": ">=6" } }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "1.2.36", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz", + "integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "^0.2.36" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/@gar/promisify": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.2.tgz", @@ -16233,11 +16255,24 @@ "integrity": "sha512-Fxt+AfXgjMoin2maPIYzFZnQjAXjAL0PHscM5pRTtatFqB+vZxAM9tLp2Optnuw3QOQC40jTNeGYFOMvyf7v9g==", "dev": true }, + "@fortawesome/fontawesome-common-types": { + "version": "0.2.36", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz", + "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==" + }, "@fortawesome/fontawesome-free": { "version": "5.15.4", "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz", "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==" }, + "@fortawesome/fontawesome-svg-core": { + "version": "1.2.36", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz", + "integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.36" + } + }, "@gar/promisify": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.2.tgz", diff --git a/package.json b/package.json index 89c287d35..9c1ace1bd 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "homepage": "https://maykinmedia.nl", "dependencies": { "@fortawesome/fontawesome-free": "^5.15.4", + "@fortawesome/fontawesome-svg-core": "^1.2.36", "ckeditor5": "^30.0.0", "flag-icon-css": "^4.1.6", "flatpickr": "^4.6.9", diff --git a/src/sdg/js/components/tooltip.js b/src/sdg/js/components/tooltip.js index 35bd88255..3f1a57a75 100644 --- a/src/sdg/js/components/tooltip.js +++ b/src/sdg/js/components/tooltip.js @@ -1,13 +1,15 @@ +import {dom} from '@fortawesome/fontawesome-svg-core' import tippy from "tippy.js"; -const infoIcons = document.querySelectorAll("svg.fa-info-circle[title]"); class InfoTooltip { constructor(node) { this.node = node; + const text = this.node.firstChild.textContent; + this.node.firstChild.remove(); tippy(this.node, { - content: this.node.firstChild.textContent, + content: text, placement: "right", animation: "scale", theme: "sdg", @@ -15,7 +17,9 @@ class InfoTooltip { } } -document.addEventListener("DOMContentLoaded", () => { +const iconsDoneRendering = () => { + const infoIcons = document.querySelectorAll("svg.fa-info-circle[title]"); [...infoIcons].forEach(icon => new InfoTooltip(icon)); -}); +}; +dom.i2svg({callback: iconsDoneRendering}); diff --git a/src/sdg/templates/account/base.html b/src/sdg/templates/account/base.html index 1bf474357..4b549ccde 100644 --- a/src/sdg/templates/account/base.html +++ b/src/sdg/templates/account/base.html @@ -3,7 +3,7 @@ {% block title %}{% block head_title %}{% endblock head_title %} | SDG invoervoorziening{% endblock title %} {% block main_container %}{% endblock %} {% block extra_css %} - + {% endblock %} {% block outer_content %} diff --git a/src/sdg/templates/admin/base_site.html b/src/sdg/templates/admin/base_site.html index ca3bdecfb..5e6fc4cf0 100644 --- a/src/sdg/templates/admin/base_site.html +++ b/src/sdg/templates/admin/base_site.html @@ -13,7 +13,7 @@ {% block extrahead %} {{ block.super }} - + {% endblock %} diff --git a/src/sdg/templates/core/base_home.html b/src/sdg/templates/core/base_home.html index 6ec6f55ef..26309e020 100644 --- a/src/sdg/templates/core/base_home.html +++ b/src/sdg/templates/core/base_home.html @@ -4,7 +4,7 @@ {% block title %}{% block head_title %}{% endblock head_title %} | SDG{% endblock title %} {% block extra_css %} - + {% endblock %} {% block outer_content %} diff --git a/src/sdg/templates/producten/base.html b/src/sdg/templates/producten/base.html index 5b43f24b8..0847964d8 100644 --- a/src/sdg/templates/producten/base.html +++ b/src/sdg/templates/producten/base.html @@ -6,5 +6,5 @@ {% block title %}SDG | {% trans "Producten" %}{% endblock %} {% block notifications %}{% endblock %} {% block extra_css %} - + {% endblock %}