Tell the user which messages arrived since they last saw the browser tab.

When the user switches context away from our browser tab, draw a line under
the last seen message, so when they return they know which messages are new.

diff --git a/client/assets/themes/basic/style.css b/client/assets/themes/basic/style.css
index f59b6eec8b6a9dcef873d5bb3b4decfabe619da0..566facc1c69d47c74977f61ad70ac9aad918bf4e 100644 (file)
--- a/client/assets/themes/basic/style.css
+++ b/client/assets/themes/basic/style.css
@@ -175,6 +175,9 @@
 #kiwi .messages .msg .media.reddit .thumbnail { float:left; margin-right: 0.5em; }
 
 
+#kiwi .messages .last_seen {
+    border-bottom: #b0cf82 solid 1px;
+}
 
 #kiwi .right_bar {
     background-color: #DADADA;

diff --git a/client/assets/themes/cli/style.css b/client/assets/themes/cli/style.css
index 48a62093eee041b766483d64e57cd49cbe8e8d87..4f4f675894e8e553a4cdba62de1cfb687462b315 100644 (file)
--- a/client/assets/themes/cli/style.css
+++ b/client/assets/themes/cli/style.css
@@ -218,6 +218,11 @@
 }
 #kiwi .messages .msg .media.reddit .thumbnail { float:left; margin-right: 0.5em; }
 
+#kiwi .messages .last_seen {
+    border-bottom-color: #090;
+    border-bottom-style: dashed;
+}
+
 
 
 /* The server select dialog */

diff --git a/client/assets/themes/mini/style.css b/client/assets/themes/mini/style.css
index be3fa1df5ccc7cacee43d7e2730ae5400e7fea11..3ed48ed0f04f71445d7c16c231310b9120d8f647 100644 (file)
--- a/client/assets/themes/mini/style.css
+++ b/client/assets/themes/mini/style.css
@@ -130,6 +130,11 @@
 #kiwi .messages .msg.highlight { background:#D9D9D9; }
 
 
+#kiwi .messages .last_seen {
+    border-bottom-color: #B0CF82;
+}
+
+
 
 #kiwi.chanlist_treeview .panels { left:160px; }
 #kiwi.chanlist_treeview .toolbar { position:static; }

diff --git a/client/assets/themes/relaxed/style.css b/client/assets/themes/relaxed/style.css
index ffefed54dadbe00ff9f8c5a602d15667be10b304..44324c3d8f1bd09048ee84db24c8127ffcda01af 100644 (file)
--- a/client/assets/themes/relaxed/style.css
+++ b/client/assets/themes/relaxed/style.css
@@ -185,6 +185,9 @@
 }
 #kiwi .messages .msg .media.reddit .thumbnail { float:left; margin-right: 0.5em; }
 
+#kiwi .messages .last_seen {
+    border-bottom-color: #B0CF82;
+}
 
 #kiwi .right_bar {
     background-color: #DADADA;

diff --git a/client/src/applets/startup.js b/client/src/applets/startup.js
index 839732c72423ed299c89ce871c87c8a70fe54a93..23a72a5255bf2fa8815857d31d03a903cce1a7c2 100644 (file)
--- a/client/src/applets/startup.js
+++ b/client/src/applets/startup.js
@@ -54,4 +54,4 @@
 
 
     _kiwi.model.Applet.register('kiwi_startup', applet);
-})();
\ No newline at end of file
+})();

diff --git a/client/src/views/application.js b/client/src/views/application.js
index 3d01d3401a0bebf6733b946484654db8415964e7..bc3a73888a559423b4623b73606ce89576587fe1 100644 (file)
--- a/client/src/views/application.js
+++ b/client/src/views/application.js
@@ -48,6 +48,9 @@ _kiwi.view.Application = Backbone.View.extend({
             that.has_focus = true;
         });
         $(window).on('blur', function () {
+            if (_kiwi.global.connections.active && _kiwi.global.connections.active.view.updateLastSeenMarker) {
+                _kiwi.global.connections.active.view.updateLastSeenMarker();
+            }
             that.has_focus = false;
         });
 

diff --git a/client/src/views/channel.js b/client/src/views/channel.js
index b8b56c33b9a04a1bd8a021b9f32875fb6516d19c..037b0b83f4de038dc512f9eb07205efe2a5d270e 100644 (file)
--- a/client/src/views/channel.js
+++ b/client/src/views/channel.js
@@ -346,6 +346,8 @@ _kiwi.view.Channel = _kiwi.view.Panel.extend({
             am_pm_locale_key = pm ?
                 'client_views_panel_timestamp_pm' :
                 'client_views_panel_timestamp_am';
+        this.updateLastSeenMarker();
+
 
             msg.time_string = translateText(am_pm_locale_key, hour + ":" + msg.time.getMinutes().toString().lpad(2, "0") + ":" + msg.time.getSeconds().toString().lpad(2, "0"));
         }
@@ -389,6 +391,23 @@ _kiwi.view.Channel = _kiwi.view.Panel.extend({
         if (!nick) {
             nick = $target.parent('.msg').data('message').nick;
         }
+    },
+
+
+    updateLastSeenMarker: function() {
+        if (_kiwi.app.connections.active.view === this && _kiwi.app.view.has_focus) {
+            // Remove the previous last seen classes
+            var candidate = this.$(".last_seen");
+            if (candidate && candidate.length) {
+                candidate.removeClass("last_seen");
+            }
+
+            // Mark the last message the user saw
+            var last = this.$messages.children().last();
+            if (last) {
+                last.addClass("last_seen");
+            }
+        }
 
         // Make sure this nick is still in the channel
         member = members ? members.getByNick(nick) : null;