Refs #57 unread separator issue

Refs #9 prepare CSS for daily-group separator

cli/resources.js

@@ -144,6 +144,7 @@ var R = {
             notice: "chatmsg-notice",
             firstUnread: "chatmsg-first-unread",
             firstOfDay: "chatmsg-first-daily",
+            unread: "chatmsg-unread",
             content: "chatmsg-content",
             meMessage: "chatmsg-me_message",
             ts: "chatmsg-ts",

cli/ui.js

@@ -313,6 +313,7 @@ function onRoomUpdated() {
         prevMsg = null,
         firstTsCombo = 0,
         prevMsgDom = null,
+        prevTs = 0,
         currentMsgGroupDom;
 
     if (SELECTED_ROOM.starred)
@@ -325,7 +326,7 @@ function onRoomUpdated() {
             if (!msg.removed) {
                 var dom = msg.getDom(),
                     newGroupDom = false,
-                    sameDayThanPrevious = prevMsg && isSameDay(msg.ts, prevMsg.ts);
+                    sameDayThanPrevious = isSameDay(msg.ts, prevTs);
 
                 if (prevMsg && prevMsg.userId === msg.userId && msg.userId && sameDayThanPrevious) {
                     if (Math.abs(firstTsCombo -msg.ts) < 30 && !(msg instanceof MeMessage))
@@ -338,10 +339,12 @@ function onRoomUpdated() {
                 }
                 if (SELECTED_ROOM_UNREAD > -1 &&
                         (!prevMsg || prevMsg.ts <= SELECTED_ROOM_UNREAD) &&
-                        msg.ts > SELECTED_ROOM_UNREAD)
+                        msg.ts > SELECTED_ROOM_UNREAD) {
                     dom.classList.add(R.klass.msg.firstUnread);
-                else
+                    dom.insertBefore(UNREAD_INDICATOR_DOM, dom.firstChild);
+                } else {
                     dom.classList.remove(R.klass.msg.firstUnread);
+                }
                 if (msg instanceof MeMessage) {
                     prevMsg = null;
                     prevMsgDom = null;
@@ -365,6 +368,7 @@ function onRoomUpdated() {
                     (currentMsgGroupDom || dom).classList.add(R.klass.msg.firstOfDay);
                     (currentMsgGroupDom || dom).dataset["date"] = locale.formatDay(msg.ts);
                 }
+                prevTs = msg.ts;
             } else {
                 msg.removeDom();
             }

cli/workflow.js

@@ -14,7 +14,12 @@ var
     /**
      * @type {number}
     **/
-    SELECTED_ROOM_UNREAD =-1,
+    SELECTED_ROOM_UNREAD = -1,
+
+    /**
+     * @type {Element}
+    **/
+    UNREAD_INDICATOR_DOM = document.createElement("span"),
 
     /**
      * @type {SimpleChatSystem|null}
@@ -180,6 +185,10 @@ function setNativeTitle(title) {
 function selectRoom(room) {
     if (SELECTED_ROOM)
         unselectRoom();
+
+    UNREAD_INDICATOR_DOM.className = R.klass.msg.unread;
+    UNREAD_INDICATOR_DOM.textContent = locale.newMessage;
+
     document.getElementById("room_" +room.id).classList.add(R.klass.selected);
     document.body.classList.remove(R.klass.noRoomSelected);
     SELECTED_ROOM = room;
@@ -232,6 +241,7 @@ function unstarChannel(room) {
 function unselectRoom() {
     document.getElementById("room_" +SELECTED_ROOM.id).classList.remove(R.klass.selected);
     document.getElementById(R.id.mainSection).classList.add(R.klass.noRoomSelected);
+    UNREAD_INDICATOR_DOM.remove();
 }
 
 /**
@@ -312,6 +322,7 @@ function sendMsg(chan, msg, pendingObj, replyTo) {
         url += "&attachments=" +HttpRequestWrapper.encode(JSON.stringify([attachment]));
     }
     SELECTED_ROOM_UNREAD = -1;
+    UNREAD_INDICATOR_DOM.remove();
     HttpRequestWrapper(HttpRequestMethod.POST, url).setResponseType(HttpRequestResponseType.JSON).callbackSuccess(function(code, text, resp) {
         if (resp && resp["pendingId"] !== undefined) {
             pendingObj.pendingId = resp["pendingId"];

srv/public/style.css

@@ -102,8 +102,8 @@ button, .button { border: 1px solid black; border-radius: 3px; background: rgb(2
 .chatmsg-item { display: flex; position: relative; }
 .chatmsg-item:hover { background: #F9F9F9; }
 .chat-context-roominfo .chatmsg-item:hover { background: inherit; }
-.chatmsg-item.chatmsg-first-unread { border-top: 1px solid rgba(255,135,109,.5); }
-.chatmsg-item.chatmsg-first-unread::before { display: inline-block; position: absolute; right: 0; top: -0.8em; content: "New"; color: rgba(255,135,109,.5); background: white; padding: 0 5px 0 3px; font-style: italic; }
+.chatmsg-item .chatmsg-unread { display: inline-block; position: absolute; right: 0; top: -1em; color: rgba(255,135,109,.5); background: white; padding: 0 5px 0 3px; font-style: italic; text-align: right; }
+.chatmsg-item .chatmsg-unread::after { border-top: 2px solid rgba(255,135,109); display: inline-block; position: absolute; right: 0; left: -10px; bottom: -1px; content: " "; }
 .chatmsg-content { display: inline-block; width: 100%; }
 .chatmsg-content .chatmsg-msg, .chatmsg-content .chatmsg-msg *,
 .chatmsg-content .chatmsg-attachments, .chatmsg-content .chatmsg-attachments * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }