feat(mark): use fontawesome icons

README.md

@@ -135,39 +135,46 @@ 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() {
     return [
       {
         type: "important",
         tooltip: "This is an important document",
-        icon: "bolt",
+        icon: "stamp",
       },
       {
         type: "problem",
         tooltip: "This document has problems",
-        icon: htmlSafe(
-          `<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 0c53 0 96 43 96 96v3.6c0 15.7-12.7 28.4-28.4 28.4H188.4c-15.7 0-28.4-12.7-28.4-28.4V96c0-53 43-96 96-96zM41.4 105.4c12.5-12.5 32.8-12.5 45.3 0l64 64c.7 .7 1.3 1.4 1.9 2.1c14.2-7.3 30.4-11.4 47.5-11.4H312c17.1 0 33.2 4.1 47.5 11.4c.6-.7 1.2-1.4 1.9-2.1l64-64c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-64 64c-.7 .7-1.4 1.3-2.1 1.9c6.2 12 10.1 25.3 11.1 39.5H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H416c0 24.6-5.5 47.8-15.4 68.6c2.2 1.3 4.2 2.9 6 4.8l64 64c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-63.1-63.1c-24.5 21.8-55.8 36.2-90.3 39.6V240c0-8.8-7.2-16-16-16s-16 7.2-16 16V479.2c-34.5-3.4-65.8-17.8-90.3-39.6L86.6 502.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l64-64c1.9-1.9 3.9-3.4 6-4.8C101.5 367.8 96 344.6 96 320H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H96.3c1.1-14.1 5-27.5 11.1-39.5c-.7-.6-1.4-1.2-2.1-1.9l-64-64c-12.5-12.5-12.5-32.8 0-45.3z"/></svg>`,
-        ),
+        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.

addon/components/document-card.hbs

@@ -11,7 +11,9 @@
   >
     {{#each @document.marks as |mark|}}
       {{#if mark.active}}
-        <MarkIcon title={{mark.tooltip}} @mark={{mark}} />
+        <div title={{mark.tooltip}}>
+          <FaIcon @icon={{mark.icon}} />
+        </div>
       {{/if}}
     {{/each}}
   </div>

addon/components/document-list-item.hbs

@@ -27,10 +27,12 @@
       />
     </div>
   </td>
-  <td class="uk-flex list-marks">
+  <td class="list-marks uk-flex">
     {{#each @document.marks as |mark|}}
       {{#if mark.active}}
-        <MarkIcon title={{mark.tooltip}} @mark={{mark}} />
+        <div title={{mark.tooltip}}>
+          <FaIcon @icon={{mark.icon}} />
+        </div>
       {{/if}}
     {{/each}}
   </td>

addon/components/mark-manager.hbs

@@ -8,7 +8,7 @@
           'mark-mixed light-blue'
         }}"
     >
-      <MarkIcon @mark={{mark}} />
+      <FaIcon @icon={{mark.icon}} />
       <Input
         @type="checkbox"
         hidden

addon/components/mark-manager.js

@@ -8,7 +8,7 @@ export default class TagManagerComponent extends Component {
   @action
   toggleMark(mark) {
     Promise.all(
-      this.args.documents.map((document) => {
+      this.documents.map((document) => {
         if (mark.activeOnAll) {
           return this.tagService.remove(document, mark.type);
         }
@@ -17,17 +17,21 @@ 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)))
         );
       }, 0);
 
       return {
         ...mark,
-        activeOnAll: activeDocuments === this.args.documents.length,
+        activeOnAll: activeDocuments === this.documents.length,
         activeOnNone: activeDocuments === 0,
       };
     });

addon/components/tag-filter.hbs

@@ -1,5 +1,5 @@
 <div
-  class="uk-border uk-padding-small uk-width-expand uk-flex uk-flex-wrap"
+  class="uk-border uk-padding-small uk-width-expand uk-flex uk-flex-wrap uk-flex-middle"
   ...attributes
   {{did-insert this.onInsert}}
   {{did-update this.onInsert @category}}
@@ -19,7 +19,7 @@
       title={{tag.tooltip}}
     >
       {{#if tag.isMark}}
-        <MarkIcon @mark={{tag}} />
+        <FaIcon @icon={{tag.icon}} />
       {{else}}
         {{tag.name}}
       {{/if}}

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;

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;
   }
 }

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(
-          `<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 0c53 0 96 43 96 96v3.6c0 15.7-12.7 28.4-28.4 28.4H188.4c-15.7 0-28.4-12.7-28.4-28.4V96c0-53 43-96 96-96zM41.4 105.4c12.5-12.5 32.8-12.5 45.3 0l64 64c.7 .7 1.3 1.4 1.9 2.1c14.2-7.3 30.4-11.4 47.5-11.4H312c17.1 0 33.2 4.1 47.5 11.4c.6-.7 1.2-1.4 1.9-2.1l64-64c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-64 64c-.7 .7-1.4 1.3-2.1 1.9c6.2 12 10.1 25.3 11.1 39.5H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H416c0 24.6-5.5 47.8-15.4 68.6c2.2 1.3 4.2 2.9 6 4.8l64 64c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-63.1-63.1c-24.5 21.8-55.8 36.2-90.3 39.6V240c0-8.8-7.2-16-16-16s-16 7.2-16 16V479.2c-34.5-3.4-65.8-17.8-90.3-39.6L86.6 502.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l64-64c1.9-1.9 3.9-3.4 6-4.8C101.5 367.8 96 344.6 96 320H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H96.3c1.1-14.1 5-27.5 11.1-39.5c-.7-.6-1.4-1.2-2.1-1.9l-64-64c-12.5-12.5-12.5-32.8 0-45.3z"/></svg>`,
-        ),
       },
     ];
   }

tests/dummy/config/icons.js

@@ -0,0 +1,5 @@
+module.exports = function () {
+  return {
+    "free-solid-svg-icons": ["stamp", "bullhorn"],
+  };
+};