Improve UI to show if threads are filtered

haystack · Mar 31, 2022 · 684bef2 · 684bef2
1 parent 87c1ccb
commit 684bef2
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/public/style/plugin.css b/public/style/plugin.css
@@ -142,7 +142,7 @@
   top: 0;
   right: 0;
   line-height: normal;
-  font-size: 16px;
+  font-size: 12px;
   font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
   background: #fff;
   z-index: 99999;

diff --git a/src/components/list/ListView.vue b/src/components/list/ListView.vue
@@ -10,7 +10,7 @@
         <div v-if="!isCollapsed">
             <div class="list-header">
                 <span class="count">
-                    {{ threads.length }} of {{ totalLabel }}
+                    <span v-bind:class="{ 'filterdThreads': currentThreadsCount !== totalCount}">{{ currentThreadsCount }}</span> of {{ totalLabel }}
                 </span>
                 <span class="toggle-highlights" v-tooltip="showHighlights ? 'hide highlights' : 'show highlights'" @click="toggleHighlights">
                     <font-awesome-icon v-if="showHighlights" icon="eye" class="icon"></font-awesome-icon>
@@ -146,6 +146,9 @@ export default {
         this.sortBy = this.currentConfigs.sortByConfig
     },
     computed: {
+        currentThreadsCount: function () {
+            return this.threads.length
+        },
         totalLabel: function () {
             if (this.totalCount === 1) {
                 return '1 thread'
@@ -216,3 +219,11 @@ export default {
     }
 }
 </script>
+<style>
+.filterdThreads {
+    background: yellow;
+    font-weight: bold;
+    font-style: italic;
+}
+
+</style>