Add info icon

cli/dom.js

@@ -28,7 +28,9 @@ function createTypingDisplay() {
 **/
 function createChanListItem(chan, alternateChanName) {
     var dom = document.createElement("li")
-        ,link = document.createElement("a");
+        ,link = document.createElement("a")
+        ,linkText = document.createElement("span")
+        ,info = document.createElement("a");
 
     dom.id = "room_" +chan.id;
     link.href = '#' +chan.id;
@@ -40,7 +42,12 @@ function createChanListItem(chan, alternateChanName) {
     }
     if (SELECTED_ROOM === chan)
         dom.classList.add(R.klass.selected);
-    link.textContent = alternateChanName || chan.name;
+    linkText.className = R.klass.chatList.roomInfo.name;
+    linkText.textContent = alternateChanName || chan.name;
+    info.textContent = "i";
+    info.className = R.klass.chatList.roomInfo.info;
+    link.appendChild(linkText);
+    link.appendChild(info);
     dom.appendChild(createTypingDisplay());
     dom.appendChild(link);
     if (chan.lastMsg !== chan.lastRead && chan.lastMsg !== undefined) {
@@ -72,12 +79,19 @@ var createChanListHeader = (function() {
 **/
 function createImsListItem(ims, alternateChanName) {
     var dom = document.createElement("li")
-        ,link = document.createElement("a");
+        ,link = document.createElement("a")
+        ,linkText = document.createElement("span")
+        ,info = document.createElement("a");
 
     dom.id = "room_" +ims.id;
     link.href = '#' +ims.id;
     dom.className = R.klass.chatList.entry + " " +R.klass.chatList.typeDirect +" " +R.klass.presenceIndicator;
-    link.textContent = alternateChanName || ims.user.getName();
+    linkText.textContent = alternateChanName || ims.user.getName();
+    linkText.className = R.klass.chatList.roomInfo.name;
+    info.textContent = "i";
+    info.className = R.klass.chatList.roomInfo.info;
+    link.appendChild(linkText);
+    link.appendChild(info);
     dom.appendChild(createTypingDisplay());
     dom.appendChild(link);
 

cli/resources.js

@@ -135,7 +135,9 @@ var R = {
                 type: {
                     channel: "roominfo-channel",
                     user: "roominfo-user"
-                }
+                },
+                name: "room-name",
+                info: "room-info"
             }
         },
         msg: {

cli/ui.js

@@ -585,6 +585,8 @@ document.addEventListener('DOMContentLoaded', function() {
     });
 
     document.addEventListener("mouseover", function(e) {
+        if (isResponsivePhone())
+            return;
         var t = e.target;
         if (roomInfo.isParentOf(t)) {
             roomInfo.cancelHide();
@@ -713,6 +715,10 @@ document.addEventListener('DOMContentLoaded', function() {
         startPolling();
 });
 
+function isResponsivePhone() {
+    return document.body.clientWidth <= 720;
+}
+
 function onMsgFormSubmit() {
     var input = document.getElementById(R.id.message.input);
     if (SELECTED_ROOM && input.value) {

srv/public/style.css

@@ -33,7 +33,7 @@ button, .button { border: 1px solid black; border-radius: 3px; background: rgb(2
 .chat-context-channellist > header { color: #AB9BA9; text-transform: uppercase; margin-top: 2em; padding-left: 1.5em; }
 .chat-context-rooms { flex: 1; }
 .chat-context-room { position: relative; color: #AB9BA9; }
-.chat-context-room > a { display: block; padding: 3px 0 3px 1.5em; text-decoration: none; color: #AB9BA9; margin-right: 15px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
+.chat-context-room > a { display: flex; padding: 3px 0 3px 1.5em; text-decoration: none; color: #AB9BA9; margin-right: 15px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
 .chat-context-room.chat-ims { color: #4c9689; }
 .chat-context-room.chat-ims.presence-away { color: #AB9BA9; font-style: italic; }
 .chat-context-room > a:hover { background-color: rgba(10, 5, 10, .6); }
@@ -44,6 +44,8 @@ button, .button { border: 1px solid black; border-radius: 3px; background: rgb(2
 .chat-context-room.chat-channel::before { content: "#"; }
 .chat-context-room.chat-group::before { content: attr(data-count); font-size: 12px; height: 12px; line-height: 12px; padding: 2px; overflow: hidden; background: #AB9BA9; color: white; border-radius: 5px; }
 .chat-context-room.chat-ims.selected::before { background-color: white; border-color: white; }
+.chat-context-room > a > .room-name { flex: 1; }
+.chat-context-room > a > .room-info { align-self: flex-end; margin-right: .75em; font-style: normal; }
 .presence-indicator::before { content: " "; display: inline-block; height: 6px; width: 6px; padding: 0; border: 2px solid currentColor; vertical-align: middle; background: currentColor; border-radius: 5px; }
 .presence-indicator.presence-away::before { background: transparent; }