muc: Show room domain in header.

Also make sure room name gets saved once it's been updated.
2017-07-17 17:10:25 +02:00 · 2017-07-17 17:10:25 +02:00 · 496d2521fc
parent 49dd36dd6c
commit 496d2521fc
9 changed files with 81 additions and 46 deletions
--- a/CHANGES.md
+++ b/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)
--- a/css/converse.css
+++ b/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; }
--- a/css/inverse.css
+++ b/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; }
--- a/sass/_chatbox.scss
+++ b/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%;
--- a/sass/_chatrooms.scss
+++ b/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;
+            }
        }
    }

--- a/sass/converse/_variables.scss
+++ b/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;
--- a/sass/inverse/_variables.scss
+++ b/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;
--- a/src/converse-muc.js
+++ b/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')
                    });
--- a/src/templates/chatroom_head.html
+++ b/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>