Merge pull request #453 from subugoe/icon-fixes

Icon fixes
subugoe · Jul 16, 2024 · 329a272 · 329a272
2 parents 80a3c6e + a0a5ca4
commit 329a272
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -351,14 +351,45 @@ no options
 
 ##### Annotations
 
-| Name                    | Type                   | Default      | Description                                                                                                                                                                                                                  |
-|-------------------------|------------------------|--------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| types                   | AnnotationTypeConfig[] | `[]`         | Defines annotation types that should be displayed in this view. The Annotation API response will then be filtered according to this config.                                                                                  |
-| types[i].name           | String                 | `null`       | Specifies the name which corresponds to the `x-content-type` property from annotations response.                                                                                                                             |
-| types[i].index           | String                 | `null`       | Specifies the index name that should be used in the annotation item. TIDO uses Bootstrap Icons, please lookup the allowed values [here](https://github.com/quasarframework/quasar/blob/dev/extras/bootstrap-icons/icons.json) |
-| types[i].displayWhen    | String                 | `null`       | Text content type that was specified under [Text options](#text). Annotation will only be shown if that content type is currently active.                                                                                    |
+| Name                    | Type                   | Default      | Description                                                                                                                                                                                                                   |
+|-------------------------|------------------------|--------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| types                   | AnnotationTypeConfig[] | `[]`         | Defines annotation types that should be displayed in this view. The Annotation API response will then be filtered according to this config.                                                                                   |
+| types[i].name           | String                 | `null`       | Specifies the name which corresponds to the `x-content-type` property from annotations response.                                                                                                                              |
+| types[i].icon           | String                 | `null`       | Specifies an icon that is displayed on the left of the annotation item. Currently we provide only a fixed list of possible icons. [here](#icons)                                                                              |
+| types[i].index          | String                 | `null`       | Specifies the index name that should be used in the annotation item. TIDO uses Bootstrap Icons, please lookup the allowed values [here](https://github.com/quasarframework/quasar/blob/dev/extras/bootstrap-icons/icons.json) |
+| types[i].displayWhen    | String                 | `null`       | Text content type that was specified under [Text options](#text). Annotation will only be shown if that content type is currently active.                                                                                     |
 | types[i].annotationType | String                 | `annotation` | Controls the look of the annotation item. Allowed values: `annotation` or `text`. Currently the only difference is that there is no index at type `text`.                                                                     |
 
+###### Icons
+
+Below you can find a list of icons that can be used for annotation items. Please use these as values for the `icon`
+configuration option at annotations.
+- archive
+- arrowLeft
+- arrowRight
+- bank
+- book
+- chat
+- check
+- code
+- dropdown
+- externalLink
+- fullscreen
+- info
+- journals
+- marker
+- minus
+- moon
+- pen
+- pencil
+- person
+- reset
+- sun
+- translate
+- warning
+- zoomIn
+- zoomOut
+
 ## Methods
 
 The instantiated TIDO Object exposes methods to control TIDO's behaviour programmatically.

diff --git a/examples/gfl.html b/examples/gfl.html
@@ -38,7 +38,7 @@
   }
 
   window.addEventListener('load', function () {
-    const tido = new Tido({
+    new Tido({
       manifest: "https://goethes-farbenlehre-berlin.sub.uni-goettingen.de/textapi/Z_1822-02-20_k/manifest.json",
       labels: {
         item: "Seite",
@@ -96,7 +96,7 @@
                   types: [
                     {
                       name: "Editorial Comment",
-                      icon: "biChatFill"
+                      icon: "chat"
                     },
                     {
                       name: "Abstract",
@@ -116,27 +116,27 @@
                   types: [
                     {
                       name: "Person",
-                      icon: "biPersonFill"
+                      icon: "person"
                     },
                     {
                       name: "Place",
-                      icon: "biGeoAltFill"
+                      icon: "marker"
                     },
                     {
                       name: "Org",
-                      icon: "biBank2"
+                      icon: "bank"
                     },
                     {
                       name: "Object",
-                      icon: "biArchiveFill"
+                      icon: "archive"
                     },
                     {
                       name: "Date",
-                      icon: "biCalendarWeek"
+                      icon: "calendar"
                     },
                     {
                       name: "Work",
-                      icon: "biJournals"
+                      icon: "journals"
                     }
                   ]
                 }

diff --git a/src/utils/annotations.js b/src/utils/annotations.js
@@ -32,7 +32,7 @@ export const createSvgIcon = (name) => {
   figure.classList.add(`icon-${name}`);
   style.innerHTML = `
     .icon-${name}::after {
-      content: url('data:image/svg+xml; utf8, ${iconString}');
+      content: url('data:image/svg+xml; utf8, ${iconString}') !important;
     }
   `;
   figure.appendChild(style);