Show chat room occupants' states.

css/converse.css

@@ -1164,6 +1164,9 @@
     #conversejs {
       width: 100%;
       width: 100vw; } }
+  #converse-embedded-chat .circle,
+  #conversejs .circle {
+    border-radius: 50%; }
   #converse-embedded-chat ::selection,
   #conversejs ::selection {
     background-color: #DCF9F6; }
@@ -2353,7 +2356,7 @@
             display: block;
             font-size: 12px;
             overflow: hidden;
-            padding: 2px 5px;
+            padding: 0.2em 0.5em 0.2em 0;
             text-overflow: ellipsis;
             white-space: nowrap; }
             #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li [class^="icon-"], #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li [class*=" icon-"],
@@ -2366,6 +2369,24 @@
             #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant,
             #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant {
               cursor: pointer; }
+              #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status,
+              #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status {
+                display: inline-block;
+                margin-right: 0.5em;
+                width: 0.5em;
+                height: 0.5em; }
+                #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online,
+                #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online {
+                  background-color: green; }
+                #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-dnd,
+                #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-dnd {
+                  background-color: red; }
+                #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-away,
+                #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-away {
+                  background-color: orange; }
+                #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-xa,
+                #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-xa {
+                  background-color: orange; }
             #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.moderator,
             #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.moderator {
               color: #D24E2B; }

docs/CHANGES.md

@@ -16,6 +16,7 @@
     * Templates are no longer stored as attributes on the `_converse` object.
       If you need a particular template, use `require` to load it.
 
+- Show the chat states of room occupants. [jcbrand]
 - The no-jQuery build has been renamed from `converse.nojquery.js` to
   `converse-no-jquery.js` to fit the convention used for other build names.
   [jcbrand]

sass/_chatrooms.scss

@@ -128,7 +128,7 @@
                             display: block;
                             font-size: $font-size-small;
                             overflow: hidden;
-                            padding: 2px 5px;
+                            padding: 0.2em 0.5em 0.2em 0;
                             text-overflow: ellipsis;
                             white-space: nowrap;
                             [class^="icon-"], [class*=" icon-"] {
@@ -139,6 +139,24 @@
                             }
                             &.occupant {
                                 cursor: pointer;
+                                .occupant-status {
+									display: inline-block;
+                                    margin-right: 0.5em;
+									width: 0.5em;
+									height: 0.5em;
+                                    &.occupant-online {
+                                        background-color: green;
+                                    }
+                                    &.occupant-dnd {
+                                        background-color: red;
+                                    }
+                                    &.occupant-away {
+                                        background-color: darkorange;
+                                    }
+                                    &.occupant-xa {
+                                        background-color: orange;
+                                    }
+                                }
                             }
                             &.moderator {
                                 color: $moderator-color;

sass/_core.scss

@@ -20,6 +20,10 @@
         width: 100vw;
     }
 
+    .circle {
+        border-radius: 50%;
+    }
+
     ::selection {
         background-color: $highlight-color;
     }

src/converse-muc.js

@@ -1928,6 +1928,7 @@
                     var new_el = tpl_occupant(
                         _.extend(
                             { 'jid': '',
+                              'show': 'online',
                               'hint_occupant': __('Click to mention this user in your message.'),
                               'desc_moderator': __('This user is a moderator.'),
                               'desc_occupant': __('This user can send messages in this room.'),
@@ -2077,7 +2078,7 @@
                                 data.status = child.textContent || null;
                                 break;
                             case "show":
-                                data.show = child.textContent || null;
+                                data.show = child.textContent || 'online';
                                 break;
                             case "x":
                                 if (child.getAttribute("xmlns") === Strophe.NS.MUC_USER) {

src/templates/occupant.html

@@ -10,4 +10,4 @@
     {[ } ]}
     {[ if (!_.includes(["visitor", "occupant", "moderator"], role)) { ]}
        title="{{{ jid }}} {{{ hint_occupant }}}"
-    {[ } ]}>{{{nick}}}</li>
+    {[ } ]}><div class="occupant-status occupant-{{{show}}} circle"></div>{{{nick}}}</li>