muc: Show JID (instead of only server) in room info

Also made some styling changes and tweaked the room head to better
differentiate between the Name and JID of a room.

css/converse.css

@@ -2424,17 +2424,18 @@
     #converse-embedded-chat .chat-head-chatroom .chat-title .chatroom-name,
     #conversejs .chat-head-chatroom .chat-title .chatroom-name {
       color: white; }
+    #converse-embedded-chat .chat-head-chatroom .chat-title .chatroom-jid,
+    #conversejs .chat-head-chatroom .chat-title .chatroom-jid {
+      font-size: 12px; }
     #converse-embedded-chat .chat-head-chatroom .chat-title .chatroom-description,
     #conversejs .chat-head-chatroom .chat-title .chatroom-description {
       color: white;
       font-size: 80%;
       font-style: italic;
-      height: 1.3em;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      margin: 0;
-      margin-top: 0.3em; }
+      margin: 0.3em 0; }
 #converse-embedded-chat .chatroom,
 #conversejs .chatroom {
   width: 300px; }

css/inverse.css

@@ -2531,17 +2531,18 @@ body {
     #converse-embedded-chat .chat-head-chatroom .chat-title .chatroom-name,
     #conversejs .chat-head-chatroom .chat-title .chatroom-name {
       color: white; }
+    #converse-embedded-chat .chat-head-chatroom .chat-title .chatroom-jid,
+    #conversejs .chat-head-chatroom .chat-title .chatroom-jid {
+      font-size: 14px; }
     #converse-embedded-chat .chat-head-chatroom .chat-title .chatroom-description,
     #conversejs .chat-head-chatroom .chat-title .chatroom-description {
       color: white;
       font-size: 80%;
       font-style: italic;
-      height: 1.3em;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      margin: 0;
-      margin-top: 0.3em; }
+      margin: 0.3em 0; }
 #converse-embedded-chat .chatroom,
 #conversejs .chatroom {
   width: 300px; }
@@ -2746,9 +2747,8 @@ body {
   font-size: 20px; }
   #conversejs .chat-head-chatroom .close-chatbox-button:before {
     content: "\e601"; }
-  #conversejs .chat-head-chatroom .chatroom-description {
-    font-size: 66%;
-    margin-top: 3px; }
+  #conversejs .chat-head-chatroom .chat-title .chatroom-description {
+    font-size: 65%; }
 #conversejs .chatroom {
   width: -webkit-calc(100% - 250px);
   width: calc(100% - 250px); }

sass/_chatrooms.scss

@@ -24,16 +24,17 @@
             .chatroom-name {
                 color: white;
             }
+            .chatroom-jid {
+                font-size: $font-size-small;
+            }
             .chatroom-description {
                 color: white;
                 font-size: 80%;
                 font-style: italic;
-                height: 1.3em;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
-                margin: 0;
-                margin-top: 0.3em;
+                margin: 0.3em 0;
             }
         }
     }

sass/inverse/_chatrooms.scss

@@ -5,9 +5,10 @@
         .close-chatbox-button:before {
             content: "\e601"; // Leave icon
         }
+        .chat-title {
             .chatroom-description {
-            font-size: 66%;
-            margin-top: 3px;
+                font-size: 65%;
+            }
         }
     }
 

src/converse-muc.js

@@ -342,15 +342,7 @@
                  * are correct, for example that the "type" is set to
                  * "chatroom".
                  */
-                settings = _.assign({
-                    'name': Strophe.unescapeNode(
-                        Strophe.getNodeFromJid(settings.jid)
-                    ),
-                    'domain': Strophe.getDomainFromJid(settings.jid),
-                    'type': CHATROOMS_TYPE,
-                }, settings);
-
-
+                settings.type = CHATROOMS_TYPE
                 return _converse.chatboxviews.showChat(settings);
             };
 
@@ -373,6 +365,7 @@
 
                           'affiliation': null,
                           'connection_status': ROOMSTATUS.DISCONNECTED,
+                          'name': '',
                           'description': '',
                           'features_fetched': false,
                           'roomconfig': {},
@@ -538,6 +531,7 @@
                      */
                     return tpl_chatroom_head(
                         _.extend(this.model.toJSON(), {
+                            Strophe: Strophe,
                             info_close: __('Close and leave this room'),
                             info_configure: __('Configure this room'),
                             description: this.model.get('description') || ''
@@ -2529,9 +2523,9 @@
                      */
                     const $stanza = $(stanza);
                     // All MUC features found here: http://xmpp.org/registrar/disco-features.html
-                    $(el).find('span.spinner').replaceWith(
+                    el.querySelector('span.spinner').outerHTML =
                         tpl_room_description({
-                            'server': Strophe.getDomainFromJid(stanza.getAttribute('from')),
+                            'jid': stanza.getAttribute('from'),
                             'desc': $stanza.find('field[var="muc#roominfo_description"] value').text(),
                             'occ': $stanza.find('field[var="muc#roominfo_occupants"] value').text(),
                             'hidden': $stanza.find('feature[var="muc_hidden"]').length,
@@ -2546,7 +2540,7 @@
                             'temporary': $stanza.find('feature[var="muc_temporary"]').length,
                             'unmoderated': $stanza.find('feature[var="muc_unmoderated"]').length,
                             'label_desc': __('Description:'),
-                            'label_server': __('Server:'),
+                            'label_jid': __('Room Address (JID):'),
                             'label_occ': __('Occupants:'),
                             'label_features': __('Features:'),
                             'label_requires_auth': __('Requires authentication'),
@@ -2561,7 +2555,6 @@
                             'label_temp_room':  __('Temporary room'),
                             'label_unmoderated': __('Unmoderated')
                         })
-                    );
                 },
 
                 toggleRoomInfo (ev) {

src/templates/chatroom_head.html

@@ -3,6 +3,10 @@
     <a class="chatbox-btn configure-chatroom-button icon-wrench" title="{{{info_configure}}} "></a>
 {[ } ]}
 <div class="chat-title" title="{{{jid}}}">
-    <span class="chatroom-name">{{{ name }}}</span>@{{{ domain }}}
+    {[ if (name && name !== Strophe.getNodeFromJid(jid)) { ]}
+        <span class="chatroom-name">{{{ name }}}</span>
+    {[ } else { ]}
+        <span class="chatroom-name">{{{ Strophe.getNodeFromJid(jid) }}}</span>@{{{ Strophe.getDomainFromJid(jid) }}}
+    {[ } ]}
     <p class="chatroom-description">{{{ description }}}<p/>
 </div>

src/templates/room_description.html

@@ -1,6 +1,6 @@
 <!-- FIXME: check markup in mockup -->
 <div class="room-info">
-<p class="room-info"><strong>{{{label_server}}}</strong> {{{server}}}</p>
+<p class="room-info"><strong>{{{label_jid}}}</strong> {{{jid}}}</p>
 <p class="room-info"><strong>{{{label_desc}}}</strong> {{{desc}}}</p>
 <p class="room-info"><strong>{{{label_occ}}}</strong> {{{occ}}}</p>
 <p class="room-info"><strong>{{{label_features}}}</strong>