muc: Show room domain in header.

Also make sure room name gets saved once it's been updated.

CHANGES.md

@@ -21,6 +21,10 @@
   instead of jQuery's Deferred. [jcbrand]
 - #866 Add babel in order to support ES2015 syntax [jcbrand]
 
+#### Bugfixes:
+
+- Room name wasn't being updated after changing it in the configuration form. [jcbrand]
+
 ## 3.1.1 (2017-07-12)
 
 - Use a patched version of [awesomplete](https://github.com/LeaVerou/awesomplete)

css/converse.css

@@ -1522,10 +1522,11 @@
   #converse-embedded-chat .chatbox .chat-title,
   #conversejs .chatbox .chat-title {
     color: white;
-    line-height: 15px;
     display: block;
+    line-height: 15px;
+    overflow: hidden;
     text-overflow: ellipsis;
-    overflow: hidden; }
+    white-space: nowrap; }
     #converse-embedded-chat .chatbox .chat-title a,
     #conversejs .chatbox .chat-title a {
       color: white;
@@ -2402,17 +2403,23 @@
   #conversejs .chat-head-chatroom .chatbox-btn.button-on {
     background-color: white;
     color: #E77051; }
-  #converse-embedded-chat .chat-head-chatroom .chatroom-description,
-  #conversejs .chat-head-chatroom .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; }
+  #converse-embedded-chat .chat-head-chatroom .chat-title,
+  #conversejs .chat-head-chatroom .chat-title {
+    color: #FF977C; }
+    #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-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; }
 #converse-embedded-chat .chatroom,
 #conversejs .chatroom {
   width: 300px; }

css/inverse.css

@@ -1568,10 +1568,11 @@ body {
   #converse-embedded-chat .chatbox .chat-title,
   #conversejs .chatbox .chat-title {
     color: white;
-    line-height: 15px;
     display: block;
+    line-height: 15px;
+    overflow: hidden;
     text-overflow: ellipsis;
-    overflow: hidden; }
+    white-space: nowrap; }
     #converse-embedded-chat .chatbox .chat-title a,
     #conversejs .chatbox .chat-title a {
       color: white;
@@ -2518,17 +2519,23 @@ body {
   #conversejs .chat-head-chatroom .chatbox-btn.button-on {
     background-color: white;
     color: #E77051; }
-  #converse-embedded-chat .chat-head-chatroom .chatroom-description,
-  #conversejs .chat-head-chatroom .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; }
+  #converse-embedded-chat .chat-head-chatroom .chat-title,
+  #conversejs .chat-head-chatroom .chat-title {
+    color: #FF977C; }
+    #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-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; }
 #converse-embedded-chat .chatroom,
 #conversejs .chatroom {
   width: 300px; }

sass/_chatbox.scss

@@ -100,10 +100,11 @@
         }
         .chat-title {
             color: $chat-head-text-color;
-            line-height: 15px;
             display: block;
-            text-overflow: ellipsis;
+            line-height: 15px;
             overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
             a {
                 color: $chat-head-text-color;
                 width: 100%;

sass/_chatrooms.scss

@@ -19,17 +19,22 @@
                 color: $chatroom-head-color;
             }
         }
-
-        .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;
+        .chat-title {
+            color: $chatroom-color-lightest;
+            .chatroom-name {
+                color: white;
+            }
+            .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;
+            }
         }
     }
 

sass/converse/_variables.scss

@@ -120,6 +120,7 @@ $font-path: "../fonticons/fonts/" !default;
 $chatroom-width: 300px !default;
 $chatroom-head-color: $red !default;
 $chatroom-color-light: $light-red !default;
+$chatroom-color-lightest: $light-red !default;
 $chatroom-color-dark: $darkest-red !default;
 $chatroom-message-them-color: $green !default;
 $chatroom-toolbar-color: $reddish-white !default;

sass/inverse/_variables.scss

@@ -125,6 +125,7 @@ $chatroom-head-height: 62px !default;
 $chatroom-width: 300px !default;
 $chatroom-head-color: $red !default;
 $chatroom-color-light: $light-red !default;
+$chatroom-color-lightest: $light-red !default;
 $chatroom-color-dark: $darkest-red !default;
 $chatroom-message-them-color: $green !default;
 $chatroom-toolbar-color: $reddish-white !default;

src/converse-muc.js

@@ -342,7 +342,15 @@
                  * are correct, for example that the "type" is set to
                  * "chatroom".
                  */
-                settings = _.assign({'type': CHATROOMS_TYPE}, settings);
+                settings = _.assign({
+                    'name': Strophe.unescapeNode(
+                        Strophe.getNodeFromJid(settings.jid)
+                    ),
+                    'domain': Strophe.getDomainFromJid(settings.jid),
+                    'type': CHATROOMS_TYPE,
+                }, settings);
+
+
                 return _converse.chatboxviews.showChat(settings);
             };
 
@@ -1284,7 +1292,9 @@
                     });
                     $form.on('submit', (ev) => {
                         ev.preventDefault();
-                        this.saveConfiguration(ev.target);
+                        this.saveConfiguration(ev.target).then(
+                            this.getRoomFeatures.bind(this)
+                        );
                     });
                 },
 
@@ -1434,8 +1444,9 @@
                      *  <feature var='urn:xmpp:mam:0'/>
                      */
                     const features = {
-                        'features_fetched': true
-                    };
+                        'features_fetched': true,
+                        'name': iq.querySelector('identity').getAttribute('name')
+                    }
                     _.each(iq.querySelectorAll('feature'), function (field) {
                         const fieldname = field.getAttribute('var');
                         if (!fieldname.startsWith('muc_')) {
@@ -2623,8 +2634,6 @@
                     const chatroom = _converse.openChatRoom({
                         'id': room_jid,
                         'jid': room_jid,
-                        'name': Strophe.unescapeNode(Strophe.getNodeFromJid(room_jid)),
-                        'type': CHATROOMS_TYPE,
                         'box_id': b64_sha1(room_jid),
                         'password': $x.attr('password')
                     });

src/templates/chatroom_head.html

@@ -3,6 +3,6 @@
     <a class="chatbox-btn configure-chatroom-button icon-wrench" title="{{{info_configure}}} "></a>
 {[ } ]}
 <div class="chat-title" title="{{{jid}}}">
-    {{{ name }}}
+    <span class="chatroom-name">{{{ name }}}</span>@{{{ domain }}}
     <p class="chatroom-description">{{{ description }}}<p/>
 </div>