[add] Display ... next to a typing chan/room/ims

[bugfix] Restore unread/unreadhi state on channels after a context update
[quickfix] presence color
[bugfix] do not check "still-typing" against version but current time

cli/resources.js

@@ -33,6 +33,12 @@ var R = {
         ,unreadHi: "unreadHi"
         ,replyingTo: "replyingTo"
         ,presenceAway: "away"
+        ,typing: {
+            container: "typing-container"
+            ,dot1: "typing-dot1"
+            ,dot2: "typing-dot2"
+            ,dot3: "typing-dot3"
+        }
         ,emoji: {
             emoji: "emoji"
             ,small: "emoji-small"

cli/ui.js

@@ -24,6 +24,28 @@ var
 
 ;
 
+/**
+ * @return {Element!}
+**/
+function createTypingDisplay() {
+    var dom = document.createElement("span")
+        ,dot1 = document.createElement("span")
+        ,dot2 = document.createElement("span")
+        ,dot3 = document.createElement("span");
+
+    dom.className = R.klass.typing.container;
+    dot1.className = R.klass.typing.dot1;
+    dot2.className = R.klass.typing.dot2;
+    dot3.className = R.klass.typing.dot3;
+
+    dot1.textContent = dot2.textContent = dot3.textContent = '.';
+
+    dom.appendChild(dot1);
+    dom.appendChild(dot2);
+    dom.appendChild(dot3);
+    return dom;
+}
+
 /**
  * @param {SlackChan|SlackGroup} chan
  * @return {Element}
@@ -43,7 +65,14 @@ function createChanListItem(chan) {
     if (SELECTED_ROOM === chan)
         dom.classList.add(R.klass.selected);
     link.textContent = chan.name;
+    dom.appendChild(createTypingDisplay());
     dom.appendChild(link);
+    if (UNREAD_CHANS[chan.id]) {
+        if (UNREAD_CHANS[chan.id].hl)
+            dom.classList.add(R.klass.unreadHi);
+        if (UNREAD_CHANS[chan.id].unread)
+            dom.classList.add(R.klass.unread);
+    }
     return dom;
 }
 
@@ -59,12 +88,20 @@ function createImsListItem(ims) {
     link.href = '#' +ims.id;
     dom.className = R.klass.chatList.entry + " " +R.klass.chatList.typeDirect;
     link.textContent = ims.user.name;
+    dom.appendChild(createTypingDisplay());
     dom.appendChild(link);
 
     if (!ims.user.presence)
         dom.classList.add(R.klass.presenceAway);
     if (SELECTED_ROOM === ims)
         dom.classList.add(R.klass.selected);
+
+    if (UNREAD_CHANS[ims.id]) {
+        if (UNREAD_CHANS[ims.id].hl)
+            dom.classList.add(R.klass.unreadHi);
+        if (UNREAD_CHANS[ims.id].unread)
+            dom.classList.add(R.klass.unread);
+    }
     return dom;
 }
 

srv/public/style.css

@@ -10,11 +10,15 @@ body { display: flex; margin: 0; padding: 0; font-family: Lato, sans-serif; }
 .slack-context-room > a:hover { background-color: rgba(10, 5, 10, .6); }
 .slack-context-room.selected > a { background-color: #4c9689; color: #fff; border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
 .slack-context-room.slack-ims { font-style: italic; }
+.slack-context-room.slack-ims.slack-context-typing::before { display: none; }
 .slack-context-room.slack-ims::before { content: " "; position: absolute; display: inline-block; height: 6px; width: 6px; border: 2px solid #4c9689; background: #4c9689; top: 0; bottom: 0; margin: auto auto auto 7px; border-radius: 5px; }
 .slack-context-room.slack-ims.selected::before { background-color: white; border-color: white; }
-.slack-context-room.slack-ims.away::before { background: transparent; }
+.slack-context-room.slack-ims.away::before { background: transparent; border-color: #AB9BA9; }
 .slack-context-roominfo { position: absolute; display: block; left: 250px; width: 100%; max-width: 300px; top: 0; height: 100%; z-index: 100; background-color: #4D394B; }
 
+.slack-context .typing-container { position: absolute; left: 6.5px; display: none; }
+.slack-context .slack-context-typing .typing-container { display: block; }
+
 .hidden { display: none; }
 .error { display: none; position: fixed; top: 0; left: 0; right: 0; height: 2em; line-height: 2em; background: #ffa2a2; padding: 0.5em 1em; }
 .button { border: 1px solid black; background: white; cursor: pointer; font: 13.3333px Arial; margin: 0; padding: 1px 6px; }

srv/src/slack.js

@@ -151,7 +151,7 @@ Slack.prototype.waitForEvent = function(knownVersion) {
             return;
         }
         if (_this.connected) {
-            var updatedCtx = _this.data.getUpdates(knownVersion)
+            var updatedCtx = _this.data.getUpdates(knownVersion, Date.now())
                 ,updatedLive = _this.getLiveUpdates(knownVersion)
                 ,updated;
 

srv/src/slackData.js

@@ -635,7 +635,7 @@ SlackData.prototype.getChannel = function(chanId) {
 };
 
 /** @return {Object} */
-SlackData.prototype.buildStatic = function(t) {
+SlackData.prototype.buildStatic = function(t, now) {
     var res = {
         "team": this.team.toStatic(t)
         ,"channels": []
@@ -677,7 +677,7 @@ SlackData.prototype.buildStatic = function(t) {
     for (var typingChan in this.typing) {
         var tChan;
         for (var typingUser in this.typing[typingChan]) {
-            if (this.typing[typingChan][typingUser] +3000 >= this.staticV) {
+            if (this.typing[typingChan][typingUser] +3000 >= now) {
                 if (!tChan) tChan = {};
                 tChan[typingUser] = 1;
             } else {
@@ -734,11 +734,12 @@ SlackData.prototype.onMessage = function(msg, t) {
 
 /**
  * @param {number} knownVersion
+ * @param {number} now time at update check
  * @return {Object|undefined}
 **/
-SlackData.prototype.getUpdates = function(knownVersion) {
+SlackData.prototype.getUpdates = function(knownVersion, now) {
     if (this.staticV > knownVersion)
-        return this.buildStatic(knownVersion);
+        return this.buildStatic(knownVersion, now);
     return undefined;
 };