Merge pull request #138 from klinker-apps/fix/unread-count

Add Unread Count to Title (And Fixes)
Serubin · May 7, 2020 · da802f3 · da802f3
2 parents 7d5107c + 7098108
commit da802f3
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pulse-sms-web",
-  "version": "v1.3.3",
+  "version": "v1.3.4",
   "description": "Pulse SMS - text from your computer.",
   "license": "(Apache-2.0 AND MIT)",
   "author": {
@@ -28,6 +28,7 @@
     "hotkeys-js": "^3.6.3",
     "jump.js": "^1.0.2",
     "linkifyjs": "^2.1.9",
+    "lodash": "^4.17.15",
     "notifyjs": "^3.0.0",
     "object-hash": "^1.3.1",
     "reconnecting-websocket": "^3.2.2",

diff --git a/src/App.vue b/src/App.vue
@@ -261,12 +261,11 @@ export default {
                 Util.materialColorChange(toolbar, to);
             });
         },
-        '$store.state.title' (to) {
-            if (to.length > 0) {
-                document.title = to;
-            } else {
-                document.title = "Pulse SMS";
-            }
+        '$store.state.title' () {
+            this.updateTitle();
+        },
+        '$store.state.unread_count' () {
+            this.updateTitle();
         }
 
     },
@@ -539,6 +538,21 @@ export default {
             this.toolbar_color = color;
         },
 
+        /**
+        * Update title from state
+        * will include unread count
+        */
+        updateTitle () {
+            const title = this.$store.state.title;
+            const unread = this.$store.state.unread_count ? `(${this.$store.state.unread_count})` : '';
+
+            if (title.length > 0) {
+                document.title = `${unread} ${title}`;
+            } else {
+                document.title = `${unread} Pulse SMS`;
+            }
+        },
+
         settings () {
             this.$router.push('/settings').catch(() => {});
         },

diff --git a/src/components/Thread/Thread.vue b/src/components/Thread/Thread.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="thread-wrap" @click="markAsRead">
+    <div id="thread-wrap">
         <div id="message-list" class="page-content" :style="{marginBottom: margin_bottom + 'px'}">
             <!-- Load More Button -->
             <button v-if="messages.length > 69" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" @click="handleShowMore">
@@ -22,6 +22,7 @@
 <script>
 import Vue from 'vue';
 import jump from 'jump.js';
+import debounce from 'lodash/debounce';
 
 import { Util, Api, SessionCache, TimeUtils } from '@/utils';
 
@@ -145,7 +146,10 @@ export default {
             e.stopPropagation();
             return false;
         });
+        this.listeners.extend(events);
 
+        // Mark as read when action is taken on page (just focus is not enough)
+        events = Util.addEventListeners(['keydown', 'click'], debounce(this.markAsRead, 250));
         this.listeners.extend(events);
 
         // Snackbar Clean up