From 580744bfd7274a229dcf146fa5a1ca1ddbc42ede Mon Sep 17 00:00:00 2001
From: Nazar Kanaev <nkanaev@live.com>
Date: Sat, 15 Aug 2020 22:20:24 +0100
Subject: [PATCH] item status indicator

---
 template/index.html                 | 12 +++++++++---
 template/static/stylesheets/app.css | 21 +++++++++++++++++++++
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/template/index.html b/template/index.html
index 06a9d13..130bfc9 100644
--- a/template/index.html
+++ b/template/index.html
@@ -147,11 +147,17 @@
                        class="selectgroup">
                     <input type="radio" name="item" :value="item.id" v-model="itemSelected">
                     <div class="selectgroup-label d-flex flex-column">
-                        <div style="line-height: 1.2; opacity: .6;" class="d-flex">
-                            <small class="flex-fill text-truncate mr-1">{{feedsById[item.feed_id].title}}</small>
+                        <div style="line-height: 1; opacity: .7; margin-bottom: .1rem;" class="d-flex align-items-center">
+                            <transition name="indicator">
+                                <span class="icon icon-small mr-1" v-if="item.status=='unread'">{% inline "circle-full.svg" %}</span>
+                                <span class="icon icon-small mr-1" v-if="item.status=='starred'">{% inline "star-full.svg" %}</span>
+                            </transition>
+                            <small class="flex-fill text-truncate mr-1">
+                                {{feedsById[item.feed_id].title}}
+                            </small>
                             <small class="flex-shrink-0"><relative-time :val="item.date"/></small>
                         </div>
-                        <span>{{item.title}}</span>
+                        <div>{{item.title}}</div>
                     </div>
                 </label>
                 <button class="btn btn-link btn-block loading my-3" v-if="itemsPage.cur < itemsPage.num"></button>
diff --git a/template/static/stylesheets/app.css b/template/static/stylesheets/app.css
index 77d057d..9851f0f 100644
--- a/template/static/stylesheets/app.css
+++ b/template/static/stylesheets/app.css
@@ -124,6 +124,17 @@ select.form-control:not([multiple]):not([size]) {
   vertical-align: top;
 }
 
+.icon-small {
+  width: .6rem;
+  height: .6rem;
+  display: inline-block;
+}
+
+.icon-small > svg , .icon-small > img {
+  width: .6rem;
+  height: .6rem;
+}
+
 .feed-icon {
   width: 16px;
   height: 16px;
@@ -485,3 +496,13 @@ a,
 .theme-night .toolbar-search:focus {
   background-color: #1a1a1a;
 }
+
+/* animation */
+.indicator-enter-active, .indicator-leave-active {
+  transition: all .3s;
+}
+.indicator-enter, .indicator-leave-to {
+  width: 0;
+  opacity: 0;
+  margin: 0 !important;
+}