pat relateditems: use iconresolver

plone · Mar 14, 2021 · ece87f6 · ece87f6
1 parent 37af641
commit ece87f6
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git a/src/pat/relateditems/README.md b/src/pat/relateditems/README.md
@@ -85,6 +85,17 @@ This is the related items pattern.
 ```
 
 
+## Default, mode auto, favorites and recentlyUsed
+
+<input type="text" class="pat-relateditems"
+    data-pat-relateditems='{"vocabularyUrl": "relateditems-test.json", "favorites": [{"title": "Projects", "path": "/path"}], "recentlyUsed": true}' />
+
+```html
+<input type="text" class="pat-relateditems"
+    data-pat-relateditems='{"vocabularyUrl": "relateditems-test.json", "favorites": [{"title": "Projects", "path": "/path"}], "recentlyUsed": true}' />
+```
+
+
 ## Existing values, some bad
 
 <input type="text" class="pat-relateditems"

diff --git a/src/pat/relateditems/relateditems.js b/src/pat/relateditems/relateditems.js
@@ -16,7 +16,6 @@ import SelectionTemplate from "./templates/selection.xml";
 import ToolbarTemplate from "./templates/toolbar.xml";
 import registry from "patternslib/src/core/registry";
 
-
 // Other patterns
 import Select2 from "../select2/select2";
 
@@ -299,6 +298,9 @@ export default Base.extend({
             browseModeText: _t("Browse"),
             recentlyUsedItems: recentlyUsedHtml,
             recentlyUsedText: _t("Recently Used"),
+            icon_root: await utils.resolveIcon("house-fill"),
+            icon_recently_used: await utils.resolveIcon("grid-fill"),
+            icon_favorites: await utils.resolveIcon("star-fill"),
         });
 
         self.$toolbar.html(html);
@@ -506,7 +508,7 @@ export default Base.extend({
         }
     },
 
-    init: function () {
+    init: async function () {
         var self = this;
 
         self.browsing = self.options.mode !== "search";
@@ -560,12 +562,11 @@ export default Base.extend({
 
         Select2.prototype.initializeOrdering.call(self);
 
+        const icon_level_up = await utils.resolveIcon("arrow-left-circle");
+        const icon_level_down = await utils.resolveIcon("arrow-right-circle");
+
         self.options.formatResult = function (item) {
-            // async seems to be a problem here, data in selection missing!
             item.selectable = self.isSelectable(item);
-            // item.iconLevelUp = await utils.resolveIcon('plone-relateditems-level-up');
-            // item.iconLevelDown = await utils.resolveIcon('plone-relateditems-level-down');
-            // console.log(item.iconLevelUp);
             item = $.extend(
                 true,
                 {
@@ -574,8 +575,8 @@ export default Base.extend({
                     getURL: "",
                     is_folderish: false,
                     oneLevelUp: false,
-                    iconLevelUp: '<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-left-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z"/></svg>',
-                    iconLevelDown: '<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-right-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path fill-rule="evenodd" d="M4 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5A.5.5 0 0 0 4 8z"/></svg>',
+                    iconLevelUp: icon_level_up,
+                    iconLevelDown: icon_level_down,
                     path: "",
                     portal_type: "",
                     review_state: "",

diff --git a/src/pat/relateditems/templates/toolbar.xml b/src/pat/relateditems/templates/toolbar.xml
@@ -6,15 +6,15 @@
 <% } %>
 <div class="path-wrapper">
   <span class="pattern-relateditems-path-label"><%- searchText %></span>
-  <a class="crumb" href="/"><span class="glyphicon glyphicon-home"/></a>
+  <a class="crumb" href="/"><%= icon_root %></a>
   <%= items %>
 </div>
 <div class="controls pull-right">
 
   <% if (recentlyUsedItems) { %>
   <div class="recentlyUsed dropdown pull-right">
     <button type="button" class="recentlyUsed dropdown-toggle btn btn-primary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-      <span class="glyphicon glyphicon-time"/>
+      <%= icon_recently_used %>
       <%- recentlyUsedText %>
       <span class="caret"/>
     </button>
@@ -27,7 +27,7 @@
   <% if (favorites.length > 0) { %>
   <div class="favorites dropdown pull-right">
     <button type="button" class="favorites dropdown-toggle btn btn-primary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-      <span class="glyphicon glyphicon-star"/>
+      <%= icon_favorites %>
       <%- favText %>
       <span class="caret"/>
     </button>