From 7ecdada4ca91dac7a0db32baeb7013be53160a35 Mon Sep 17 00:00:00 2001
From: Nazar Kanaev <nkanaev@live.com>
Date: Sun, 5 Jul 2020 13:44:20 +0100
Subject: [PATCH] item status toggle buttons

---
 template/index.html                  | 13 ++++++++++++-
 template/static/images/star-full.svg |  1 +
 template/static/javascripts/app.js   | 17 +++++++++++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 template/static/images/star-full.svg

diff --git a/template/index.html b/template/index.html
index 8304933..f45f434 100644
--- a/template/index.html
+++ b/template/index.html
@@ -89,7 +89,18 @@
         </div>
         <div class="vh-100 d-flex flex-column w-100">
             <div class="p-2 d-flex">
-                <div class="flex-grow-1"></div>
+                <div class="flex-grow-1">
+                    <div v-if="itemSelected">
+                        <button class="btn btn-link p-0" style="line-height: 1" @click="toggleItemStarred(itemSelectedDetails)">
+                            <img v-if="itemSelectedDetails.status=='starred'" src="./static/images/star-full.svg" alt="" style="width: 20px; height: 20px;">
+                            <img v-else-if="itemSelectedDetails.status!='starred'" src="./static/images/star.svg" alt="" style="width: 20px; height: 20px;">
+                        </button>
+                        <button class="btn btn-link p-0" style="line-height: 1" v-if="itemSelectedDetails.status!='starred'" @click="toggleItemRead(itemSelectedDetails)">
+                            <img v-if="itemSelectedDetails.status=='unread'" src="./static/images/circle-full.svg" alt="" style="width: 20px; height: 20px;">
+                            <img v-if="itemSelectedDetails.status=='read'" src="./static/images/circle.svg" src="./static/images/circle-full.svg" alt="" style="width: 20px; height: 20px;">
+                        </button>
+                    </div>
+                </div>
                 <button class="btn btn-link p-0" v-b-modal.settings-modal style="line-height: 1">
                     <img src="./static/images/settings.svg" alt="" style="width: 20px; height: 20px;">
                 </button>
diff --git a/template/static/images/star-full.svg b/template/static/images/star-full.svg
new file mode 100644
index 0000000..eeed68d
--- /dev/null
+++ b/template/static/images/star-full.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
diff --git a/template/static/javascripts/app.js b/template/static/javascripts/app.js
index bf569ed..cd566f6 100644
--- a/template/static/javascripts/app.js
+++ b/template/static/javascripts/app.js
@@ -55,6 +55,9 @@ var vm = new Vue({
     },
     'itemSelected': function(newVal, oldVal) {
       this.itemSelectedDetails = this.itemsById[newVal]
+      if (this.itemSelectedDetails.status == 'unread') {
+        this.itemSelectedDetails.status = 'read'
+      }
     },
   },
   methods: {
@@ -141,5 +144,19 @@ var vm = new Vue({
         vm.loading.newfeed = false
       })
     },
+    toggleItemStarred: function(item) {
+      if (item.status == 'starred') {
+        item.status = 'read'
+      } else if (item.status != 'starred') {
+        item.status = 'starred'
+      }
+    },
+    toggleItemRead: function(item) {
+      if (item.status == 'unread') {
+        item.status = 'read'
+      } else if (item.status == 'read') {
+        item.status = 'unread'
+      }
+    },
   }
 })