From c891ab2588159e3d349baf2fe2768d0c44abcaeb Mon Sep 17 00:00:00 2001
From: Thiago Perrotta <tbperrotta@gmail.com>
Date: Tue, 18 Jan 2022 00:00:32 -0500
Subject: [PATCH] Add several icons to menus according to their roles

- refresh: https://tabler-icons.io/i/refresh
- edit: https://tabler-icons.io/i/edit
- delete: https://tabler-icons.io/i/delete
- mark page as read: https://tabler-icons.io/i/check
- mark all as read: https://tabler-icons.io/i/checks
- show all entries: https://tabler-icons.io/i/eye
- show only unread entries: https://tabler-icons.io/i/eye-off
- create category: https://tabler-icons.io/i/folder-plus
- add subscription: https://tabler-icons.io/i/plus
- import: https://tabler-icons.io/i/file-import
- export: https://tabler-icons.io/i/file-export
- categories: https://tabler-icons.io/i/folders
---
 template/templates/common/feed_menu.html      | 12 ++---
 template/templates/views/categories.html      |  2 +-
 .../templates/views/category_entries.html     | 12 ++---
 template/templates/views/category_feeds.html  |  6 +--
 template/templates/views/create_category.html |  2 +-
 template/templates/views/edit_category.html   |  6 +--
 template/templates/views/edit_feed.html       |  6 +--
 template/templates/views/feed_entries.html    | 16 +++----
 template/templates/views/sessions.html        |  2 +-
 template/templates/views/unread_entries.html  |  6 +--
 ui/static/bin/sprite.svg                      | 48 ++++++++++++++++++-
 11 files changed, 82 insertions(+), 36 deletions(-)

diff --git a/template/templates/common/feed_menu.html b/template/templates/common/feed_menu.html
index faba6fd2..bbbdcf04 100644
--- a/template/templates/common/feed_menu.html
+++ b/template/templates/common/feed_menu.html
@@ -1,19 +1,19 @@
 {{ define "feed_menu" }}
 <ul>
     <li>
-        <a href="{{ route "feeds" }}">{{ t "menu.feeds" }}</a>
+        <a href="{{ route "feeds" }}">{{ icon "feeds" }}{{ t "menu.feeds" }}</a>
     </li>
     <li>
-        <a href="{{ route "addSubscription" }}">{{ t "menu.add_feed" }}</a>
+        <a href="{{ route "addSubscription" }}">{{ icon "add-feed" }}{{ t "menu.add_feed" }}</a>
     </li>
     <li>
-        <a href="{{ route "export" }}">{{ t "menu.export" }}</a>
+        <a href="{{ route "export" }}">{{ icon "feed-export" }}{{ t "menu.export" }}</a>
     </li>
     <li>
-        <a href="{{ route "import" }}">{{ t "menu.import" }}</a>
+        <a href="{{ route "import" }}">{{ icon "feed-import" }}{{ t "menu.import" }}</a>
     </li>
     <li>
-        <a href="{{ route "refreshAllFeeds" }}">{{ t "menu.refresh_all_feeds" }}</a>
+        <a href="{{ route "refreshAllFeeds" }}">{{ icon "refresh" }}{{ t "menu.refresh_all_feeds" }}</a>
     </li>
 </ul>
-{{ end }}
\ No newline at end of file
+{{ end }}
diff --git a/template/templates/views/categories.html b/template/templates/views/categories.html
index 4ecd8a46..8e593474 100644
--- a/template/templates/views/categories.html
+++ b/template/templates/views/categories.html
@@ -5,7 +5,7 @@
     <h1>{{ t "page.categories.title" }} ({{ .total }})</h1>
     <ul>
         <li>
-            <a href="{{ route "createCategory" }}">{{ t "menu.create_category" }}</a>
+            <a href="{{ route "createCategory" }}">{{ icon "add-category" }}{{ t "menu.create_category" }}</a>
         </li>
     </ul>
 </section>
diff --git a/template/templates/views/category_entries.html b/template/templates/views/category_entries.html
index 392a40dc..7041e19f 100644
--- a/template/templates/views/category_entries.html
+++ b/template/templates/views/category_entries.html
@@ -12,7 +12,7 @@
                 data-label-yes="{{ t "confirm.yes" }}"
                 data-label-no="{{ t "confirm.no" }}"
                 data-label-loading="{{ t "confirm.loading" }}"
-                data-show-only-unread="{{ if .showOnlyUnreadEntries }}1{{ end }}">{{ t "menu.mark_page_as_read" }}</a>
+                data-show-only-unread="{{ if .showOnlyUnreadEntries }}1{{ end }}">{{ icon "mark-page-as-read" }}{{ t "menu.mark_page_as_read" }}</a>
         </li>
         <li>
             <a href="#"
@@ -21,20 +21,20 @@
                 data-label-yes="{{ t "confirm.yes" }}"
                 data-label-no="{{ t "confirm.no" }}"
                 data-label-loading="{{ t "confirm.loading" }}"
-                data-url="{{ route "markCategoryAsRead" "categoryID" .category.ID }}">{{ t "menu.mark_all_as_read" }}</a>
+                data-url="{{ route "markCategoryAsRead" "categoryID" .category.ID }}">{{ icon "mark-all-as-read" }}{{ t "menu.mark_all_as_read" }}</a>
         </li>
     {{ end }}
     {{ if .showOnlyUnreadEntries }}
         <li>
-            <a href="{{ route "categoryEntriesAll" "categoryID" .category.ID }}">{{ t "menu.show_all_entries" }}</a>
+            <a href="{{ route "categoryEntriesAll" "categoryID" .category.ID }}">{{ icon "show-all-entries" }}{{ t "menu.show_all_entries" }}</a>
         </li>
     {{ else }}
         <li>
-            <a href="{{ route "categoryEntries" "categoryID" .category.ID }}">{{ t "menu.show_only_unread_entries" }}</a>
+            <a href="{{ route "categoryEntries" "categoryID" .category.ID }}">{{ icon "show-unread-entries" }}{{ t "menu.show_only_unread_entries" }}</a>
         </li>
     {{ end }}
         <li>
-            <a href="{{ route "categoryFeeds" "categoryID" .category.ID }}">{{ t "menu.feeds" }}</a>
+            <a href="{{ route "categoryFeeds" "categoryID" .category.ID }}">{{ icon "feeds" }}{{ t "menu.feeds" }}</a>
         </li>
     </ul>
 </section>
@@ -71,7 +71,7 @@
                     data-label-yes="{{ t "confirm.yes" }}"
                     data-label-no="{{ t "confirm.no" }}"
                     data-label-loading="{{ t "confirm.loading" }}"
-                    data-show-only-unread="{{ if .showOnlyUnreadEntries }}1{{ end }}">{{ t "menu.mark_page_as_read" }}</a>
+                    data-show-only-unread="{{ if .showOnlyUnreadEntries }}1{{ end }}">{{ icon "mark-page-as-read" }}{{ t "menu.mark_page_as_read" }}</a>
             </li>
         </ul>
         {{ end }}
diff --git a/template/templates/views/category_feeds.html b/template/templates/views/category_feeds.html
index 9e92d153..26d4d2a7 100644
--- a/template/templates/views/category_feeds.html
+++ b/template/templates/views/category_feeds.html
@@ -5,10 +5,10 @@
     <h1 dir="auto">{{ .category.Title }} &gt; {{ t "page.feeds.title" }} ({{ .total }})</h1>
     <ul>
         <li>
-            <a href="{{ route "categoryEntries" "categoryID" .category.ID }}">{{ t "menu.feed_entries" }}</a>
+            <a href="{{ route "categoryEntries" "categoryID" .category.ID }}">{{ icon "entries" }}{{ t "menu.feed_entries" }}</a>
         </li>
         <li>
-            <a href="{{ route "editCategory" "categoryID" .category.ID }}">{{ t "menu.edit_category" }}</a>
+            <a href="{{ route "editCategory" "categoryID" .category.ID }}">{{ icon "edit" }}{{ t "menu.edit_category" }}</a>
         </li>
         {{ if eq .total 0 }}
         <li>
@@ -19,7 +19,7 @@
                 data-label-no="{{ t "confirm.no" }}"
                 data-label-loading="{{ t "confirm.loading" }}"
                 data-redirect-url="{{ route "categories" }}"
-                data-url="{{ route "removeCategory" "categoryID" .category.ID }}">{{ t "action.remove" }}</a>
+                data-url="{{ route "removeCategory" "categoryID" .category.ID }}">{{ icon "delete" }}{{ t "action.remove" }}</a>
         </li>
         {{ end }}
     </ul>
diff --git a/template/templates/views/create_category.html b/template/templates/views/create_category.html
index 1a7212c6..c6be3e6f 100644
--- a/template/templates/views/create_category.html
+++ b/template/templates/views/create_category.html
@@ -5,7 +5,7 @@
     <h1>{{ t "page.new_category.title" }}</h1>
     <ul>
         <li>
-            <a href="{{ route "categories" }}">{{ t "menu.categories" }}</a>
+            <a href="{{ route "categories" }}">{{ icon "categories" }}{{ t "menu.categories" }}</a>
         </li>
     </ul>
 </section>
diff --git a/template/templates/views/edit_category.html b/template/templates/views/edit_category.html
index 5fbc91e1..4412ff97 100644
--- a/template/templates/views/edit_category.html
+++ b/template/templates/views/edit_category.html
@@ -5,13 +5,13 @@
     <h1>{{ t "page.edit_category.title" .category.Title }}</h1>
     <ul>
         <li>
-            <a href="{{ route "categories" }}">{{ t "menu.categories" }}</a>
+            <a href="{{ route "categories" }}">{{ icon "categories" }}{{ t "menu.categories" }}</a>
         </li>
         <li>
-            <a href="{{ route "categoryFeeds" "categoryID" .category.ID }}">{{ t "menu.feeds" }}</a>
+            <a href="{{ route "categoryFeeds" "categoryID" .category.ID }}">{{ icon "feeds" }}{{ t "menu.feeds" }}</a>
         </li>
         <li>
-            <a href="{{ route "createCategory" }}">{{ t "menu.create_category" }}</a>
+            <a href="{{ route "createCategory" }}">{{ icon "add-category" }}{{ t "menu.create_category" }}</a>
         </li>
     </ul>
 </section>
diff --git a/template/templates/views/edit_feed.html b/template/templates/views/edit_feed.html
index b4c3efa1..f29e33e5 100644
--- a/template/templates/views/edit_feed.html
+++ b/template/templates/views/edit_feed.html
@@ -5,13 +5,13 @@
     <h1 dir="auto">{{ .feed.Title }}</h1>
     <ul>
         <li>
-            <a href="{{ route "feeds" }}">{{ t "menu.feeds" }}</a>
+            <a href="{{ route "feeds" }}">{{ icon "feeds" }}{{ t "menu.feeds" }}</a>
         </li>
         <li>
-            <a href="{{ route "feedEntries" "feedID" .feed.ID }}">{{ t "menu.feed_entries" }}</a>
+            <a href="{{ route "feedEntries" "feedID" .feed.ID }}">{{ icon "entries" }}{{ t "menu.feed_entries" }}</a>
         </li>
         <li>
-            <a href="{{ route "refreshFeed" "feedID" .feed.ID }}">{{ t "menu.refresh_feed" }}</a>
+            <a href="{{ route "refreshFeed" "feedID" .feed.ID }}">{{ icon "refresh" }}{{ t "menu.refresh_feed" }}</a>
         </li>
     </ul>
 </section>
diff --git a/template/templates/views/feed_entries.html b/template/templates/views/feed_entries.html
index f3796e15..0a731551 100644
--- a/template/templates/views/feed_entries.html
+++ b/template/templates/views/feed_entries.html
@@ -15,7 +15,7 @@
                 data-label-yes="{{ t "confirm.yes" }}"
                 data-label-no="{{ t "confirm.no" }}"
                 data-label-loading="{{ t "confirm.loading" }}"
-                data-show-only-unread="{{ if .showOnlyUnreadEntries }}1{{ end }}">{{ t "menu.mark_page_as_read" }}</a>
+                data-show-only-unread="{{ if .showOnlyUnreadEntries }}1{{ end }}">{{ icon "mark-page-as-read" }}{{ t "menu.mark_page_as_read" }}</a>
         </li>
         <li>
             <a href="#"
@@ -24,23 +24,23 @@
                 data-label-yes="{{ t "confirm.yes" }}"
                 data-label-no="{{ t "confirm.no" }}"
                 data-label-loading="{{ t "confirm.loading" }}"
-                data-url="{{ route "markFeedAsRead" "feedID" .feed.ID }}">{{ t "menu.mark_all_as_read" }}</a>
+                data-url="{{ route "markFeedAsRead" "feedID" .feed.ID }}">{{ icon "mark-all-as-read" }}{{ t "menu.mark_all_as_read" }}</a>
         </li>
         {{ end }}
         {{ if .showOnlyUnreadEntries }}
         <li>
-            <a href="{{ route "feedEntriesAll" "feedID" .feed.ID }}">{{ t "menu.show_all_entries" }}</a>
+            <a href="{{ route "feedEntriesAll" "feedID" .feed.ID }}">{{ icon "show-all-entries" }}{{ t "menu.show_all_entries" }}</a>
         </li>
         {{ else }}
         <li>
-            <a href="{{ route "feedEntries" "feedID" .feed.ID }}">{{ t "menu.show_only_unread_entries" }}</a>
+            <a href="{{ route "feedEntries" "feedID" .feed.ID }}">{{ icon "show-unread-entries" }}{{ t "menu.show_only_unread_entries" }}</a>
         </li>
         {{ end }}
         <li>
-            <a href="{{ route "refreshFeed" "feedID" .feed.ID }}">{{ t "menu.refresh_feed" }}</a>
+            <a href="{{ route "refreshFeed" "feedID" .feed.ID }}">{{ icon "refresh" }}{{ t "menu.refresh_feed" }}</a>
         </li>
         <li>
-            <a href="{{ route "editFeed" "feedID" .feed.ID }}">{{ t "menu.edit_feed" }}</a>
+            <a href="{{ route "editFeed" "feedID" .feed.ID }}">{{ icon "edit" }}{{ t "menu.edit_feed" }}</a>
         </li>
         <li>
             <a href="#"
@@ -51,7 +51,7 @@
                 data-label-no="{{ t "confirm.no" }}"
                 data-label-loading="{{ t "confirm.loading" }}"
                 data-url="{{ route "removeFeed" "feedID" .feed.ID }}"
-                data-redirect-url="{{ route "feeds" }}">{{ t "action.remove_feed" }}</a>
+                data-redirect-url="{{ route "feeds" }}">{{ icon "delete" }}{{ t "action.remove_feed" }}</a>
         </li>
     </ul>
 </section>
@@ -99,7 +99,7 @@
                     data-label-yes="{{ t "confirm.yes" }}"
                     data-label-no="{{ t "confirm.no" }}"
                     data-label-loading="{{ t "confirm.loading" }}"
-                    data-show-only-unread="{{ if .showOnlyUnreadEntries }}1{{ end }}">{{ t "menu.mark_page_as_read" }}</a>
+                    data-show-only-unread="{{ if .showOnlyUnreadEntries }}1{{ end }}">{{ icon "mark-page-as-read" }}{{ t "menu.mark_page_as_read" }}</a>
             </li>
         </ul>
         {{ end }}
diff --git a/template/templates/views/sessions.html b/template/templates/views/sessions.html
index 09772b68..24192843 100644
--- a/template/templates/views/sessions.html
+++ b/template/templates/views/sessions.html
@@ -28,7 +28,7 @@
                     data-label-yes="{{ t "confirm.yes" }}"
                     data-label-no="{{ t "confirm.no" }}"
                     data-label-loading="{{ t "confirm.loading" }}"
-                    data-url="{{ route "removeSession" "sessionID" .ID }}">{{ t "action.remove" }}</a>
+                    data-url="{{ route "removeSession" "sessionID" .ID }}">{{ icon "delete" }}{{ t "action.remove" }}</a>
             {{ end }}
         </td>
     </tr>
diff --git a/template/templates/views/unread_entries.html b/template/templates/views/unread_entries.html
index 8e00a055..b78153d2 100644
--- a/template/templates/views/unread_entries.html
+++ b/template/templates/views/unread_entries.html
@@ -12,7 +12,7 @@
                 data-label-question="{{ t "confirm.question" }}"
                 data-label-yes="{{ t "confirm.yes" }}"
                 data-label-no="{{ t "confirm.no" }}"
-                data-label-loading="{{ t "confirm.loading" }}">{{ t "menu.mark_page_as_read" }}</a>
+                data-label-loading="{{ t "confirm.loading" }}">{{ icon "mark-page-as-read" }}{{ t "menu.mark_page_as_read" }}</a>
         </li>
         <li>
             <a href="#"
@@ -22,7 +22,7 @@
                 data-label-question="{{ t "confirm.question" }}"
                 data-label-yes="{{ t "confirm.yes" }}"
                 data-label-no="{{ t "confirm.no" }}"
-                data-label-loading="{{ t "confirm.loading" }}">{{ t "menu.mark_all_as_read" }}</a>
+                data-label-loading="{{ t "confirm.loading" }}">{{ icon "mark-all-as-read" }}{{ t "menu.mark_all_as_read" }}</a>
         </li>
     </ul>
     {{ end }}
@@ -59,7 +59,7 @@
                     data-label-question="{{ t "confirm.question" }}"
                     data-label-yes="{{ t "confirm.yes" }}"
                     data-label-no="{{ t "confirm.no" }}"
-                    data-label-loading="{{ t "confirm.loading" }}">{{ t "menu.mark_page_as_read" }}</a>
+                    data-label-loading="{{ t "confirm.loading" }}">{{ icon "mark-page-as-read" }}{{ t "menu.mark_page_as_read" }}</a>
             </li>
         </ul>
         {{ end }}
diff --git a/ui/static/bin/sprite.svg b/ui/static/bin/sprite.svg
index 19163c10..99aff3fa 100644
--- a/ui/static/bin/sprite.svg
+++ b/ui/static/bin/sprite.svg
@@ -115,4 +115,50 @@ Source: https://github.com/tabler/tabler-icons
         <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>
         <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"></path>
     </symbol>
-</svg>
\ No newline at end of file
+    <symbol id="icon-mark-page-as-read" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+       <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+       <path d="M5 12l5 5l10 -10" />
+    </symbol>
+    <symbol id="icon-mark-all-as-read" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+       <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+       <path d="M7 12l5 5l10 -10" />
+       <path d="M2 12l5 5m5 -5l5 -5" />
+    </symbol>
+    <symbol id="icon-show-all-entries" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <circle cx="12" cy="12" r="2"></circle>
+        <path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7"></path>
+    </symbol>
+    <symbol id="icon-show-unread-entries" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <line x1="3" y1="3" x2="21" y2="21"></line>
+        <path d="M10.584 10.587a2 2 0 0 0 2.828 2.83"></path>
+        <path d="M9.363 5.365a9.466 9.466 0 0 1 2.637 -.365c4 0 7.333 2.333 10 7c-.778 1.361 -1.612 2.524 -2.503 3.488m-2.14 1.861c-1.631 1.1 -3.415 1.651 -5.357 1.651c-4 0 -7.333 -2.333 -10 -7c1.369 -2.395 2.913 -4.175 4.632 -5.341"></path>
+    </symbol>
+    <symbol id="icon-add-category" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
+        <line x1="12" y1="10" x2="12" y2="16"></line>
+        <line x1="9" y1="13" x2="15" y2="13"></line>
+    </symbol>
+    <symbol id="icon-add-feed" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <line x1="12" y1="5" x2="12" y2="19"></line>
+        <line x1="5" y1="12" x2="19" y2="12"></line>
+    </symbol>
+    <symbol id="icon-feed-import" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
+        <path d="M5 13v-8a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2h-5.5m-9.5 -2h7m-3 -3l3 3l-3 3"></path>
+    </symbol>
+    <symbol id="icon-feed-export" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
+        <path d="M11.5 21h-4.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v5m-5 6h7m-3 -3l3 3l-3 3"></path>
+    </symbol>
+    <symbol id="icon-categories" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M9 4h3l2 2h5a2 2 0 0 1 2 2v7a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2"></path>
+        <path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2h2"></path>
+    </symbol>
+</svg>