From 70160f0262aba58c34ffaa37e9f7e32d5973613f Mon Sep 17 00:00:00 2001 From: yelinz Date: Tue, 8 Aug 2023 17:45:38 +0200 Subject: [PATCH] feat(mark): use fontawesome icons --- README.md | 21 ++++++++++----- addon/components/document-card.hbs | 4 ++- addon/components/document-list-item.hbs | 6 +++-- addon/components/mark-icon.hbs | 7 ----- addon/components/mark-icon.js | 8 ------ addon/components/mark-manager.hbs | 2 +- addon/components/mark-manager.js | 10 ++++--- addon/components/tag-filter.hbs | 4 +-- app/styles/components/_document-details.scss | 5 ++-- app/styles/ember-alexandria.scss | 2 ++ tests/dummy/app/services/alexandria-config.js | 8 ++---- tests/dummy/config/icons.js | 5 ++++ .../integration/components/mark-icon-test.js | 26 ------------------- 13 files changed, 43 insertions(+), 65 deletions(-) delete mode 100644 addon/components/mark-icon.hbs delete mode 100644 addon/components/mark-icon.js create mode 100644 tests/dummy/config/icons.js delete mode 100644 tests/integration/components/mark-icon-test.js diff --git a/README.md b/README.md index f2e94701..3d65b043 100644 --- a/README.md +++ b/README.md @@ -135,18 +135,17 @@ export default class AlexandriaConfigService extends ConfigService { Additionally to tags you can configure marks. Marks are similar to tags, but are always displayed for the user to add, even when then are not selected yet. This avoids the issue where users might create multiple, slightly different tags while meaning the same thing. We recommend using not more than five marks for the most important classifications of documents. -The icons for marks are either from [UIkit](https://getuikit.com/docs/icon) or you can use an svg string. To use an svg string you need to wrap it in `htmlSafe` from `@ember/template`. +The icons for marks are from [FontAwesome](https://fontawesome.com/search?o=r&m=free&s=regular%2Csolid). The object for a mark has the following properties: - `type`: This is the id of a tag used to identify the mark in the backend. -- `icon`: This can be either a string (referring to an UIkit icon name) or an `htmlSafe` object (containing SVG icon source code). +- `icon`: This a string, which references an FontAwesome. - `tooltip`: This is shown when hovering over the mark. An example configuration with two icons might look like this: ```js import ConfigService from "ember-alexandria/services/config"; -import { htmlSafe } from "@ember/template"; export default class AlexandriaConfigService extends ConfigService { get marks() { @@ -154,20 +153,28 @@ export default class AlexandriaConfigService extends ConfigService { { type: "important", tooltip: "This is an important document", - icon: "bolt", + icon: "stamp", }, { type: "problem", tooltip: "This document has problems", - icon: htmlSafe( - ``, - ), + icon: "hippo", }, ]; } } ``` +Configure used icons in `config/icons.js` +```js +module.exports = function () { + return { + "free-solid-svg-icons": ["stamp", "hippo"], + }; +}; +``` + + ## Contributing See the [Contributing](CONTRIBUTING.md) guide for details. diff --git a/addon/components/document-card.hbs b/addon/components/document-card.hbs index fbf07fee..10ed31f9 100644 --- a/addon/components/document-card.hbs +++ b/addon/components/document-card.hbs @@ -11,7 +11,9 @@ > {{#each @document.marks as |mark|}} {{#if mark.active}} - +
+ +
{{/if}} {{/each}} diff --git a/addon/components/document-list-item.hbs b/addon/components/document-list-item.hbs index 4687f0be..37ef88a6 100644 --- a/addon/components/document-list-item.hbs +++ b/addon/components/document-list-item.hbs @@ -27,10 +27,12 @@ /> - + {{#each @document.marks as |mark|}} {{#if mark.active}} - +
+ +
{{/if}} {{/each}} diff --git a/addon/components/mark-icon.hbs b/addon/components/mark-icon.hbs deleted file mode 100644 index 66fc17b3..00000000 --- a/addon/components/mark-icon.hbs +++ /dev/null @@ -1,7 +0,0 @@ -
- {{#if this.hasHTML}} - {{@mark.icon}} - {{else}} - - {{/if}} -
\ No newline at end of file diff --git a/addon/components/mark-icon.js b/addon/components/mark-icon.js deleted file mode 100644 index b977c366..00000000 --- a/addon/components/mark-icon.js +++ /dev/null @@ -1,8 +0,0 @@ -import { isHTMLSafe } from "@ember/template"; -import Component from "@glimmer/component"; - -export default class MarkIcon extends Component { - get hasHTML() { - return isHTMLSafe(this.args.mark.icon); - } -} diff --git a/addon/components/mark-manager.hbs b/addon/components/mark-manager.hbs index 1e5f2454..8bde63e9 100644 --- a/addon/components/mark-manager.hbs +++ b/addon/components/mark-manager.hbs @@ -8,7 +8,7 @@ 'mark-mixed light-blue' }}" > - + { + this.documents.map((document) => { if (mark.activeOnAll) { return this.tagService.remove(document, mark.type); } @@ -17,9 +17,13 @@ export default class TagManagerComponent extends Component { ); } + get documents() { + return this.args.documents.filter((document) => !document.isDeleted); + } + get marks() { return this.config.marks.map((mark) => { - const activeDocuments = this.args.documents.reduce((acc, doc) => { + const activeDocuments = this.documents.reduce((acc, doc) => { return ( acc + Number(Boolean(doc.tags.find((tag) => tag.name === mark.type))) ); @@ -27,7 +31,7 @@ export default class TagManagerComponent extends Component { return { ...mark, - activeOnAll: activeDocuments === this.args.documents.length, + activeOnAll: activeDocuments === this.documents.length, activeOnNone: activeDocuments === 0, }; }); diff --git a/addon/components/tag-filter.hbs b/addon/components/tag-filter.hbs index 9a8bf323..c0dc4204 100644 --- a/addon/components/tag-filter.hbs +++ b/addon/components/tag-filter.hbs @@ -1,5 +1,5 @@
{{#if tag.isMark}} - + {{else}} {{tag.name}} {{/if}} diff --git a/app/styles/components/_document-details.scss b/app/styles/components/_document-details.scss index 8d23fd7b..b37425e5 100644 --- a/app/styles/components/_document-details.scss +++ b/app/styles/components/_document-details.scss @@ -22,12 +22,13 @@ label { height: 36px; width: 36px; + padding: 5px; + display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; - border-radius: 500px; + border-radius: 50px; border: 1px solid $global-muted-color; - display: inline-flex; z-index: 0; background-color: #fff; cursor: pointer; diff --git a/app/styles/ember-alexandria.scss b/app/styles/ember-alexandria.scss index 5155d051..999027e0 100644 --- a/app/styles/ember-alexandria.scss +++ b/app/styles/ember-alexandria.scss @@ -47,9 +47,11 @@ display: inline-flex; color: #fff; border: 2px solid $global-primary-background; + align-items: center; cursor: pointer; svg { + margin: 0.2rem; fill: #fff; } } diff --git a/tests/dummy/app/services/alexandria-config.js b/tests/dummy/app/services/alexandria-config.js index 669ad9d3..88119172 100644 --- a/tests/dummy/app/services/alexandria-config.js +++ b/tests/dummy/app/services/alexandria-config.js @@ -1,5 +1,3 @@ -import { htmlSafe } from "@ember/template"; - import ConfigService from "ember-alexandria/services/config"; export default class AlexandriaConfigService extends ConfigService { @@ -35,15 +33,13 @@ export default class AlexandriaConfigService extends ConfigService { return [ { type: "important", + icon: "stamp", tooltip: "This is an important document", - icon: "bolt", }, { type: "problem", + icon: "bullhorn", tooltip: "This document has problems", - icon: htmlSafe( - ``, - ), }, ]; } diff --git a/tests/dummy/config/icons.js b/tests/dummy/config/icons.js new file mode 100644 index 00000000..30e3f879 --- /dev/null +++ b/tests/dummy/config/icons.js @@ -0,0 +1,5 @@ +module.exports = function () { + return { + "free-solid-svg-icons": ["stamp", "bullhorn"], + }; +}; diff --git a/tests/integration/components/mark-icon-test.js b/tests/integration/components/mark-icon-test.js deleted file mode 100644 index 39da24d5..00000000 --- a/tests/integration/components/mark-icon-test.js +++ /dev/null @@ -1,26 +0,0 @@ -import { htmlSafe } from "@ember/template"; -import { render } from "@ember/test-helpers"; -import { setupRenderingTest } from "dummy/tests/helpers"; -import { hbs } from "ember-cli-htmlbars"; -import { module, test } from "qunit"; - -module("Integration | Component | mark-icon", function (hooks) { - setupRenderingTest(hooks); - - test("it renders uikit", async function (assert) { - this.set("mark", { - icon: "bolt", - }); - await render(hbs``); - - assert.dom("span").hasClass("uk-icon"); - }); - test("it renders htmlsafe", async function (assert) { - this.set("mark", { - icon: htmlSafe("

foo

"), - }); - await render(hbs``); - - assert.dom(this.element).hasText("foo"); - }); -});