Show the description in the heading, not the subject

css/converse.css

@@ -1415,7 +1415,7 @@
   font-size: 100%;
   height: 55px;
   margin: 0;
-  padding: 5px;
+  padding: 0.5em;
   position: relative; }
   @media screen and (max-height: 450px) {
     #converse-embedded-chat .chat-head,
@@ -2241,8 +2241,8 @@
   #conversejs .chat-head-chatroom .chatbox-btn.button-on {
     background-color: white;
     color: #E76F51; }
-  #converse-embedded-chat .chat-head-chatroom .chatroom-topic,
-  #conversejs .chat-head-chatroom .chatroom-topic {
+  #converse-embedded-chat .chat-head-chatroom .chatroom-description,
+  #conversejs .chat-head-chatroom .chatroom-description {
     color: white;
     font-size: 80%;
     font-style: italic;

docs/CHANGES.md

@@ -14,6 +14,8 @@
       The public API is accessible via a global `converse` object.
     * The `keepalive` and `roster_groups` options are now set to `true` by default.
 
+- The chat room `description` is now shown in the heading, not the `subject`.
+  [jcbrand]
 - Created a new non-core plugin `converse-muc-embedded` which embeds a single
   chat room into a page. An example can be found at https://conversejs.org/demo/embedded.html
   [jcbrand]

sass/_chatbox.scss

@@ -33,7 +33,7 @@
         font-size: 100%;
         height: $chat-head-height;
         margin: 0;
-        padding: 5px;
+        padding: 0.5em;
         position: relative;
         .avatar {
             margin-right: 0.5em;

sass/_chatrooms.scss

@@ -20,7 +20,7 @@
             }
         }
 
-        .chatroom-topic {
+        .chatroom-description {
             color: white;
             font-size: 80%;
             font-style: italic;

spec/chatroom.js

@@ -345,6 +345,47 @@
 
         describe("A Chat Room", function () {
 
+            it("shows its description in the chat heading",  mock.initConverse(function (_converse) {
+                var sent_IQ, IQ_id;
+                var sendIQ = _converse.connection.sendIQ;
+                spyOn(_converse.connection, 'sendIQ').andCallFake(function (iq, callback, errback) {
+                    sent_IQ = iq;
+                    IQ_id = sendIQ.bind(this)(iq, callback, errback);
+                });
+                var view = _converse.api.rooms.open('coven@chat.shakespeare.lit', {'nick': 'some1'});
+                spyOn(view, 'generateHeadingHTML').andCallThrough();
+                var features_stanza = $iq({
+                        from: 'coven@chat.shakespeare.lit',
+                        'id': IQ_id,
+                        'to': 'dummy@localhost/desktop',
+                        'type': 'result'
+                    })
+                    .c('query', { 'xmlns': 'http://jabber.org/protocol/disco#info'})
+                        .c('identity', {
+                            'category': 'conference',
+                            'name': 'A Dark Cave',
+                            'type': 'text'
+                        }).up()
+                        .c('feature', {'var': 'http://jabber.org/protocol/muc'}).up()
+                        .c('feature', {'var': 'muc_passwordprotected'}).up()
+                        .c('feature', {'var': 'muc_hidden'}).up()
+                        .c('feature', {'var': 'muc_temporary'}).up()
+                        .c('feature', {'var': 'muc_open'}).up()
+                        .c('feature', {'var': 'muc_unmoderated'}).up()
+                        .c('feature', {'var': 'muc_nonanonymous'}).up()
+                        .c('feature', {'var': 'urn:xmpp:mam:0'}).up()
+                        .c('x', { 'xmlns':'jabber:x:data', 'type':'result'})
+                            .c('field', {'var':'FORM_TYPE', 'type':'hidden'})
+                                .c('value').t('http://jabber.org/protocol/muc#roominfo').up().up()
+                            .c('field', {'type':'text-single', 'var':'muc#roominfo_description', 'label':'Description'})
+                                .c('value').t('This is the description').up().up()
+                            .c('field', {'type':'text-single', 'var':'muc#roominfo_occupants', 'label':'Number of occupants'})
+                                .c('value').t(0);
+                _converse.connection._dataRecv(test_utils.createRequest(features_stanza));
+                expect(view.generateHeadingHTML).toHaveBeenCalled();
+                expect(view.$('.chatroom-description').text()).toBe('This is the description');
+            }));
+
             it("will specially mark messages in which you are mentioned", mock.initConverse(function (_converse) {
                 test_utils.createContacts(_converse, 'current');
                 test_utils.openAndEnterChatRoom(_converse, 'lounge', 'localhost', 'dummy');

src/converse-muc.js

@@ -345,8 +345,9 @@
                     this.model.on('show', this.show, this);
                     this.model.on('destroy', this.hide, this);
                     this.model.on('change:connection_status', this.afterConnected, this);
-                    this.model.on('change:chat_state', this.sendChatState, this);
                     this.model.on('change:affiliation', this.renderHeading, this);
+                    this.model.on('change:chat_state', this.sendChatState, this);
+                    this.model.on('change:description', this.renderHeading, this);
                     this.model.on('change:name', this.renderHeading, this);
 
                     this.createOccupantsView();
@@ -435,6 +436,7 @@
                         _.extend(this.model.toJSON(), {
                             info_close: __('Close and leave this room'),
                             info_configure: __('Configure this room'),
+                            description: this.model.get('description') || ''
                     }));
                 },
 
@@ -1268,7 +1270,7 @@
 
                 autoConfigureChatRoom: function (stanza) {
                     /* Automatically configure room based on the
-                     * 'roomconfigure' data on this view's model.
+                     * 'roomconfig' data on this view's model.
                      *
                      * Returns a promise which resolves once a response IQ has
                      * been received.
@@ -1354,8 +1356,7 @@
                     var that = this;
                     _converse.connection.disco.info(this.model.get('jid'), null,
                         function (iq) {
-                            /*
-                             * See http://xmpp.org/extensions/xep-0045.html#disco-roominfo
+                            /* See http://xmpp.org/extensions/xep-0045.html#disco-roominfo
                              *
                              *  <identity
                              *      category='conference'
@@ -1379,6 +1380,10 @@
                                 }
                                 features[fieldname.replace('muc_', '')] = true;
                             });
+                            var desc_field = iq.querySelector('field[var="muc#roominfo_description"] value');
+                            if (!_.isNull(desc_field)) {
+                                features.description = desc_field.textContent;
+                            }
                             that.model.save(features);
                             return deferred.resolve();
                         },
@@ -1830,7 +1835,6 @@
                 },
 
                 setChatRoomSubject: function (sender, subject) {
-                    this.$el.find('.chatroom-topic').text(subject).attr('title', subject);
                     // For translators: the %1$s and %2$s parts will get replaced by the user and topic text respectively
                     // Example: Topic set by JC Brand to: Hello World!
                     this.$content.append(

src/templates/chatroom_head.html

@@ -4,5 +4,5 @@
 {[ } ]}
 <div class="chat-title">
     {{{ name }}}
-    <p class="chatroom-topic"><p/>
+    <p class="chatroom-description">{{{ description }}}<p/>
 </div>