Add info icon in room header and show room details in modal

css/converse.css

@@ -6938,6 +6938,8 @@ body.reset {
     min-height: 0; }
   #conversejs strong {
     font-weight: 700; }
+  #conversejs em {
+    font-style: italic; }
   #conversejs ol, #conversejs ul {
     list-style: none; }
   #conversejs li {
@@ -8443,6 +8445,26 @@ body.reset {
 #conversejs .add-chatroom input[type="submit"],
 #conversejs .add-chatroom input[type="button"] {
   margin: 0.3em 0; }
+#conversejs.converse-embedded #room-details-modal .features-list,
+#conversejs #room-details-modal .features-list {
+  margin-left: 1em; }
+#conversejs.converse-embedded .chatroom-features,
+#conversejs .chatroom-features {
+  width: 100%; }
+  #conversejs.converse-embedded .chatroom-features .features-list,
+  #conversejs .chatroom-features .features-list {
+    padding-top: 0; }
+    #conversejs.converse-embedded .chatroom-features .features-list .feature,
+    #conversejs .chatroom-features .features-list .feature {
+      width: 100%;
+      margin-right: 0.5em;
+      padding-right: 0;
+      font-size: 1em;
+      cursor: help; }
+      #conversejs.converse-embedded .chatroom-features .features-list .feature .fa,
+      #conversejs .chatroom-features .features-list .feature .fa {
+        margin-right: 0.5em;
+        color: #666; }
 #conversejs.converse-embedded .chat-head-chatroom,
 #conversejs .chat-head-chatroom {
   background-color: #E77051; }
@@ -8567,16 +8589,6 @@ body.reset {
           #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-header .occupants-heading {
             font-family: "Century Gothic", futura, "URW Gothic L", Verdana, sans-serif;
             padding: 0.3em 0; }
-        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
-        #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
-          width: 100%; }
-          #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature,
-          #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature {
-            float: left;
-            margin-right: 0.5em;
-            padding-right: 0;
-            font-size: 1em;
-            cursor: help; }
         #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
           padding: 0; }
@@ -8596,15 +8608,6 @@ body.reset {
             flex-basis: 0;
             flex-grow: 1;
             border-bottom: 1px solid lightgrey; }
-          #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul.features-list,
-          #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list {
-            padding-top: 0; }
-            #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature,
-            #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature {
-              width: 100%; }
-              #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature .fa,
-              #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature .fa {
-                color: #666; }
           #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li,
           #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li {
             cursor: default;

dev.html

@@ -32,8 +32,8 @@
         notify_all_room_messages: [
             'discuss@conference.conversejs.org'
         ],
-        // bosh_service_url: 'http://chat.example.org:5280/http-bind/',
-        bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
+        bosh_service_url: 'http://chat.example.org:5280/http-bind/',
+        // bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
         message_archiving: 'always',
         debug: true
     });

sass/_chatrooms.scss

@@ -7,6 +7,31 @@
         }
     }
 
+    #room-details-modal {
+        .features-list {
+            margin-left: 1em;
+        }
+    }
+
+    .chatroom-features {
+        width: 100%;
+        .features-list {
+            padding-top: 0;
+            .feature {
+                width: 100%;
+                margin-right: 0.5em;
+                padding-right: 0;
+                font-size: 1em;
+                cursor: help;
+                .fa {
+                    margin-right: 0.5em;
+                    color: $text-color;
+                }
+            }
+        }
+    }
+
+
     .chat-head-chatroom {
         background-color: $chatroom-head-color;
 
@@ -133,16 +158,6 @@
                         }
                     }
 
-                    .chatroom-features {
-                        width: 100%;
-                        .feature {
-                            float: left;
-                            margin-right: 0.5em;
-                            padding-right: 0;
-                            font-size: 1em;
-                            cursor: help;
-                        }
-                    }
                     .awesomplete {
                         ul {
                             padding: 0;
@@ -164,15 +179,6 @@
                             flex-grow: 1;
                             border-bottom: 1px solid lightgrey;
                         }
-                        &.features-list {
-                            padding-top: 0;
-                            .feature {
-                                width: 100%;
-                                .fa {
-                                    color: $text-color;
-                                }
-                            }
-                        }
                         li {
                             cursor: default;
                             display: block;

sass/_core.scss

@@ -159,6 +159,10 @@ body.reset {
         font-weight: 700;
     }
 
+    em {
+        font-style: italic;
+    }
+
     ol, ul {
         list-style: none;
     }

spec/chatroom.js

@@ -814,9 +814,8 @@
                             .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));
-                test_utils.waitUntil(function () {
-                    return _.get(view.el.querySelector('.chatroom-description'), 'textContent');
-                }).then(function () {
+                test_utils.waitUntil(() => _.get(view.el.querySelector('.chatroom-description'), 'textContent'))
+                .then(function () {
                     expect($(view.el.querySelector('.chatroom-description')).text()).toBe('This is the description');
                     done();
                 });
@@ -1842,7 +1841,7 @@
                 _converse.connection._dataRecv(test_utils.createRequest(features_stanza));
 
                 var view = _converse.chatboxviews.get('coven@chat.shakespeare.lit');
-                expect(view.model.get('features_fetched')).toBe(true);
+                expect(view.model.get('features_fetched')).toBeTruthy();
                 expect(view.model.get('passwordprotected')).toBe(true);
                 expect(view.model.get('hidden')).toBe(true);
                 expect(view.model.get('temporary')).toBe(true);

spec/roomslist.js

@@ -3,11 +3,15 @@
 } (this, function (jasmine, mock, test_utils) {
     var _ = converse.env._;
     var $msg = converse.env.$msg;
+    var $iq = converse.env.$iq;
+    var $pres = converse.env.$pres;
     var Promise = converse.env.Promise;
+    var Strophe = converse.env.Strophe;
+    var u = converse.env.utils;
 
-    describe("The converse-roomslist plugin", function () {
+    describe("A list of open rooms", function () {
 
-        it("is shown under a list of open rooms in the \"Rooms\" panel", mock.initConverseWithPromises(
+        it("is shown in the \"Rooms\" panel", mock.initConverseWithPromises(
             null, ['rosterGroupsFetched'],
             { allow_bookmarks: false // Makes testing easier, otherwise we
                                      // have to mock stanza traffic.
@@ -50,7 +54,104 @@
         ));
     });
 
-    describe("An room shown in the rooms list", function () {
+    describe("A room shown in the rooms list", function () {
+
+        it("has an info icon which opens a details modal when clicked", mock.initConverseWithPromises(
+            null, ['rosterGroupsFetched'],
+            { whitelisted_plugins: ['converse-roomslist'],
+              allow_bookmarks: false // Makes testing easier, otherwise we
+                                     // have to mock stanza traffic.
+            }, function (done, _converse) {
+
+            test_utils.openControlBox();
+            _converse.api.rooms.open('coven@chat.shakespeare.lit', {'nick': 'some1'});
+            const view = _converse.chatboxviews.get('coven@chat.shakespeare.lit');
+            const last_stanza = _.last(_converse.connection.IQ_stanzas).nodeTree;
+            const IQ_id = last_stanza.getAttribute('id');
+            const 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));
+
+            test_utils.waitUntil(() => view.model.get('connection_status') === converse.ROOMSTATUS.CONNECTING)
+            .then(function () {
+                var presence = $pres({
+                        to: _converse.connection.jid,
+                        from: 'coven@chat.shakespeare.lit/some1',
+                        id: 'DC352437-C019-40EC-B590-AF29E879AF97'
+                }).c('x').attrs({xmlns:'http://jabber.org/protocol/muc#user'})
+                    .c('item').attrs({
+                        affiliation: 'member',
+                        jid: _converse.bare_jid,
+                        role: 'participant'
+                    }).up()
+                    .c('status').attrs({code:'110'});
+                _converse.connection._dataRecv(test_utils.createRequest(presence));
+
+                const room_els = _converse.rooms_list_view.el.querySelectorAll(".open-room");
+                expect(room_els.length).toBe(1);
+                var info_el = _converse.rooms_list_view.el.querySelector(".room-info");
+                info_el.click();
+
+                const modal = view.model.room_details_modal;
+                return test_utils.waitUntil(() => u.isVisible(modal.el), 2000);
+            }).then(() => {
+                const modal = view.model.room_details_modal;
+                let els = modal.el.querySelectorAll('p.room-info');
+                expect(els[0].textContent).toBe("Room address (JID): coven@chat.shakespeare.lit")
+                expect(els[1].textContent).toBe("Name: A Dark Cave")
+                expect(els[2].textContent).toBe("Description: This is the description")
+                expect(els[3].textContent).toBe("Online users: 1")
+                const features_list = modal.el.querySelector('.features-list');
+                expect(features_list.textContent.replace(/(\n|\s{2,})/g, '')).toBe(
+                    'Password protected - This room requires a password before entry'+
+                    'Hidden - This room is not publicly searchable'+
+                    'Open - Anyone can join this room'+
+                    'Temporary - This room will disappear once the last person leaves'+
+                    'Not anonymous - All other room occupants can see your XMPP username'+
+                    'Not moderated - This room is not being moderated'
+                );
+                const presence = $pres({
+                        to: 'dummy@localhost/_converse.js-29092160',
+                        from: 'coven@chat.shakespeare.lit/newguy'
+                    })
+                    .c('x', {xmlns: Strophe.NS.MUC_USER})
+                    .c('item', {
+                        'affiliation': 'none',
+                        'jid': 'newguy@localhost/_converse.js-290929789',
+                        'role': 'participant'
+                    });
+                _converse.connection._dataRecv(test_utils.createRequest(presence));
+
+                els = modal.el.querySelectorAll('p.room-info');
+                expect(els[3].textContent).toBe("Online users: 2")
+                done();
+            });
+        }));
 
         it("can be closed", mock.initConverseWithPromises(
             null, ['rosterGroupsFetched'],

spec/spoilers.js

 (function (root, factory) {
     define(["jasmine", "mock", "test-utils"], factory);
 } (this, function (jasmine, mock, test_utils) {
-
     var _ = converse.env._;
     var Strophe = converse.env.Strophe;
     var $msg = converse.env.$msg;

src/converse-chatview.js

@@ -422,6 +422,7 @@
                 },
 
                 showUserDetailsModal (ev) {
+                    ev.preventDefault();
                     if (_.isUndefined(this.user_details_modal)) {
                         this.user_details_modal = new _converse.UserDetailsModal({model: this.model});
                     }

src/converse-muc-views.js

@@ -11,6 +11,7 @@
         "templates/add_chatroom_modal.html",
         "templates/chatarea.html",
         "templates/chatroom.html",
+        "templates/chatroom_details_modal.html",
         "templates/chatroom_disconnect.html",
         "templates/chatroom_features.html",
         "templates/chatroom_form.html",
@@ -37,6 +38,7 @@
     tpl_add_chatroom_modal,
     tpl_chatarea,
     tpl_chatroom,
+    tpl_chatroom_details_modal,
     tpl_chatroom_disconnect,
     tpl_chatroom_features,
     tpl_chatroom_form,
@@ -482,6 +484,26 @@
             });
 
 
+            _converse.RoomDetailsModal = _converse.BootstrapModal.extend({
+
+                initialize () {
+                    _converse.BootstrapModal.prototype.initialize.apply(this, arguments);
+                    this.model.on('change', this.render, this);
+                    this.model.occupants.on('change', this.render, this);
+                },
+
+                toHTML () {
+                    return tpl_chatroom_details_modal(_.extend(
+                        this.model.toJSON(), {
+                            '__': __,
+                            'display_name': this.model.getDisplayName(),
+                            'num_occupants': this.model.occupants.length
+                        })
+                    );
+                }
+            });
+
+
             _converse.ChatRoomView = _converse.ChatBoxView.extend({
                 /* Backbone.NativeView which renders a chat room, based upon the view
                  * for normal one-on-one chat boxes.
@@ -495,6 +517,7 @@
                     'click .chatbox-navback': 'showControlBox',
                     'click .close-chatbox-button': 'close',
                     'click .configure-chatroom-button': 'getAndRenderConfigurationForm',
+                    'click .show-room-details-modal': 'showRoomDetailsModal',
                     'click .hide-occupants': 'hideOccupants',
                     'click .new-msgs-indicator': 'viewUnreadMessages',
                     'click .occupant-nick': 'onOccupantClicked',
@@ -595,6 +618,14 @@
                     return this;
                 },
 
+                showRoomDetailsModal (ev) {
+                    ev.preventDefault();
+                    if (_.isUndefined(this.model.room_details_modal)) {
+                        this.model.room_details_modal = new _converse.RoomDetailsModal({'model': this.model});
+                    }
+                    this.model.room_details_modal.show(ev);
+                },
+
                 showChatStateNotification (message) {
                     if (message.get('sender') === 'me') {
                         return;
@@ -632,10 +663,11 @@
                      */
                     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') || ''
+                            'Strophe': Strophe,
+                            'info_close': __('Close and leave this room'),
+                            'info_configure': __('Configure this room'),
+                            'info_details': __('Show more details about this room'),
+                            'description': this.model.get('description') || ''
                     }));
                 },
 
@@ -1035,7 +1067,8 @@
                         this.closeForm();
                     });
 
-                    form_el.addEventListener('submit', (ev) => {
+                    form_el.addEventListener('submit',
+                        (ev) => {
                             ev.preventDefault();
                             this.model.saveConfiguration(ev.target).then(
                                 this.model.getRoomFeatures.bind(this.model)
@@ -1547,16 +1580,13 @@
 
             _converse.RoomsPanel = Backbone.NativeView.extend({
                 /* Backbone.NativeView which renders MUC section of the control box.
-                 *
-                 * Chat rooms can be listed, joined and new rooms can be created.
                  */
                 tagName: 'div',
                 className: 'controlbox-section',
                 id: 'chatrooms',
                 events: {
                     'click a.chatbox-btn.show-add-muc-modal': 'showAddRoomModal',
-                    'click a.chatbox-btn.show-list-muc-modal': 'showListRoomsModal',
-                    'click a.room-info': 'toggleRoomInfo'
+                    'click a.chatbox-btn.show-list-muc-modal': 'showListRoomsModal'
                 },
 
                 render () {
@@ -1568,11 +1598,6 @@
                     return this;
                 },
 
-                toggleRoomInfo (ev) {
-                    ev.preventDefault();
-                    toggleRoomInfo(ev);
-                },
-
                 showAddRoomModal (ev) {
                     if (_.isUndefined(this.add_room_modal)) {
                         this.add_room_modal = new _converse.AddChatRoomModal({'model': this.model});
@@ -1703,34 +1728,8 @@
 
                     el.innerHTML = tpl_chatroom_features(
                             _.extend(this.chatroomview.model.toJSON(), {
-                                'has_features': _.reduce(_.values(picks), iteratee),
-                                'label_features': __('Features'),
-                                'label_hidden': __('Hidden'),
-                                'label_mam_enabled': __('Message archiving'),
-                                'label_membersonly': __('Members only'),
-                                'label_moderated': __('Moderated'),
-                                'label_nonanonymous': __('Non-anonymous'),
-                                'label_open': __('Open'),
-                                'label_passwordprotected': __('Password protected'),
-                                'label_persistent': __('Persistent'),
-                                'label_public': __('Public'),
-                                'label_semianonymous': __('Semi-anonymous'),
-                                'label_temporary': __('Temporary'),
-                                'label_unmoderated': __('Unmoderated'),
-                                'label_unsecured': __('No password'),
-                                'tt_hidden': __('This room is not publicly searchable'),
-                                'tt_mam_enabled': __('Messages are archived on the server'),
-                                'tt_membersonly': __('This room is restricted to members only'),
-                                'tt_moderated': __('This room is being moderated'),
-                                'tt_nonanonymous': __('All other room occupants can see your XMPP username'),
-                                'tt_open': __('Anyone can join this room'),
-                                'tt_passwordprotected': __('This room requires a password before entry'),
-                                'tt_persistent': __('This room persists even if it\'s unoccupied'),
-                                'tt_public': __('This room is publicly searchable'),
-                                'tt_semianonymous': __('Only moderators can see your XMPP username'),
-                                'tt_temporary': __('This room will disappear once the last person leaves'),
-                                'tt_unmoderated': __('This room is not being moderated'),
-                                'tt_unsecured': __('This room does not require a password upon entry')
+                                '__': __,
+                                'has_features': _.reduce(_.values(picks), iteratee)
                             }));
                     this.setOccupantsHeight();
                     return this;

src/converse-muc.js

@@ -246,6 +246,10 @@
                     this.handlers[type][name] = callback;
                 },
 
+                getDisplayName () {
+                    return this.get('name') || this.get('jid');
+                },
+
                 join (nick, password) {
                     /* Join the chat room.
                      *
@@ -430,7 +434,7 @@
                      *  <feature var='urn:xmpp:mam:0'/>
                      */
                     const features = {
-                        'features_fetched': true,
+                        'features_fetched': moment().format(),
                         'name': iq.querySelector('identity').getAttribute('name')
                     }
                     _.each(iq.querySelectorAll('feature'), function (field) {

src/converse-roomslist.js

@@ -45,6 +45,7 @@
 
 
             _converse.OpenRooms = Backbone.Collection.extend({
+
                 comparator (room) {
                     if (room.get('bookmarked')) {
                         const bookmark = _.head(_converse.bookmarksview.model.where({'jid': room.get('jid')}));
@@ -97,6 +98,10 @@
             });
 
             _converse.RoomsListElementView = Backbone.VDOMView.extend({
+                events: {
+                    'click a.room-info': 'showRoomDetailsModal'
+                },
+
                 initialize () {
                     this.model.on('destroy', this.remove, this);
                     this.model.on('remove', this.remove, this);
@@ -106,15 +111,6 @@
                     this.model.on('change:num_unread_general', this.render, this);
                 },
 
-                getRoomsListElementName () {
-                    if (this.model.get('bookmarked') && _converse.bookmarksview) {
-                        const bookmark = _.head(_converse.bookmarksview.model.where({'jid': this.model.get('jid')}));
-                        return bookmark.get('name');
-                    } else {
-                        return this.model.get('name');
-                    }
-                },
-
                 toHTML () {
                     return tpl_rooms_list_item(
                         _.extend(this.model.toJSON(), {
@@ -130,9 +126,28 @@
                             'name': this.getRoomsListElementName(),
                             'open_title': __('Click to open this room')
                         }));
+                },
+
+                showRoomDetailsModal (ev) {
+                    const room = _converse.chatboxes.get(this.model.get('jid'));
+                    ev.preventDefault();
+                    if (_.isUndefined(room.room_details_modal)) {
+                        room.room_details_modal = new _converse.RoomDetailsModal({'model': room});
+                    }
+                    room.room_details_modal.show(ev);
+                },
+
+                getRoomsListElementName () {
+                    if (this.model.get('bookmarked') && _converse.bookmarksview) {
+                        const bookmark = _.head(_converse.bookmarksview.model.where({'jid': this.model.get('jid')}));
+                        return bookmark.get('name');
+                    } else {
+                        return this.model.get('name');
+                    }
                 }
             });
 
+
             _converse.RoomsListView = Backbone.OrderedListView.extend({
                 tagName: 'div',
                 className: 'open-rooms-list list-container rooms-list-container',

src/templates/chatroom_details_modal.html

+<div class="modal fade" id="room-details-modal" tabindex="-1" role="dialog" aria-labelledby="user-profile-modal-label" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="user-profile-modal-label">{{{o.display_name}}}</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="{{{o.label_close}}}"><span aria-hidden="true">&times;</span></button>
+            </div>
+            <div class="modal-body">
+                <div class="room-info">
+                    <p class="room-info"><strong>{{{o.__('Room address (JID)')}}}</strong>: {{{o.jid}}}</p>
+                    <p class="room-info"><strong>{{{o.__('Name')}}}</strong>: {{{o.name}}}</p>
+                    <p class="room-info"><strong>{{{o.__('Description')}}}</strong>: {{{o.description}}}</p>
+                    <p class="room-info"><strong>{{{o.__('Online users')}}}</strong>: {{{o.num_occupants}}}</p>
+                    <p class="room-info"><strong>{{{o.__('Features')}}}</strong>:
+                        <div class="chatroom-features">
+                        <ul class="features-list">
+                        {[ if (o.passwordprotected) { ]}
+                        <li class="feature" ><span class="fa fa-lock"></span>{{{ o.__('Password protected') }}} - <em>{{{ o.__('This room requires a password before entry') }}}</em></li>
+                        {[ } ]}
+                        {[ if (o.unsecured) { ]}
+                        <li class="feature" ><span class="fa fa-unlock"></span>{{{ o.__('No password required') }}} - <em>{{{ o.__('This room does not require a password upon entry') }}}</em></li>
+                        {[ } ]}
+                        {[ if (o.hidden) { ]}
+                        <li class="feature" ><span class="fa fa-eye-slash"></span>{{{ o.__('Hidden') }}} - <em>{{{ o.__('This room is not publicly searchable') }}}</em></li>
+                        {[ } ]}
+                        {[ if (o.public_room) { ]}
+                        <li class="feature" ><span class="fa fa-eye"></span>{{{ o.__('Public') }}} - <em>{{{ o.__('This room is publicly searchable') }}}</em></li>
+                        {[ } ]}
+                        {[ if (o.membersonly) { ]}
+                        <li class="feature" ><span class="fa fa-address-book"></span>{{{ o.__('Members only') }}} - <em>{{{ o.__('this room is restricted to members only') }}}</em></li>
+                        {[ } ]}
+                        {[ if (o.open) { ]}
+                        <li class="feature" ><span class="fa fa-globe"></span>{{{ o.__('Open') }}} - <em>{{{ o.__('Anyone can join this room') }}}</em></li>
+                        {[ } ]}
+                        {[ if (o.persistent) { ]}
+                        <li class="feature" ><span class="fa fa-save"></span>{{{ o.__('Persistent') }}} - <em>{{{ o.__('This room persists even if it\'s unoccupied') }}}</em></li>
+                        {[ } ]}
+                        {[ if (o.temporary) { ]}
+                        <li class="feature" ><span class="fa fa-snowflake-o"></span>{{{ o.__('Temporary') }}} - <em>{{{ o.__('This room will disappear once the last person leaves') }}}</em></li>
+                        {[ } ]}
+                        {[ if (o.nonanonymous) { ]}
+                        <li class="feature" ><span class="fa fa-id-card"></span>{{{ o.__('Not anonymous') }}} - <em>{{{ o.__('All other room occupants can see your XMPP username') }}}</em></li>
+                        {[ } ]}
+                        {[ if (o.semianonymous) { ]}
+                        <li class="feature" ><span class="fa fa-user-secret"></span>{{{ o.__('Semi-anonymous') }}} - <em>{{{ o.__('Only moderators can see your XMPP username') }}}</em></li>
+                        {[ } ]}
+                        {[ if (o.moderated) { ]}
+                        <li class="feature" ><span class="fa fa-gavel"></span>{{{ o.__('Moderated') }}} - <em>{{{ o.__('This room is being moderated') }}}</em></li>
+                        {[ } ]}
+                        {[ if (o.unmoderated) { ]}
+                        <li class="feature" ><span class="fa fa-info-circle"></span>{{{ o.__('Not moderated') }}} - <em>{{{ o.__('This room is not being moderated') }}}</em></li>
+                        {[ } ]}
+                        {[ if (o.mam_enabled) { ]}
+                        <li class="feature" ><span class="fa fa-database"></span>{{{ o.__('Message archiving') }}} - <em>{{{ o.__('Messages are archived on the server') }}}</em></li>
+                        {[ } ]}
+                        </ul>
+                        </div>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/templates/chatroom_features.html

 {[ if (o.has_features) { ]}
-<p class="occupants-heading">{{{o.label_features}}}</p>
+<p class="occupants-heading">{{{o.__('Features')}}}</p>
 {[ } ]}
 <ul class="features-list">
 {[ if (o.passwordprotected) { ]}
-<li class="feature" title="{{{ o.tt_passwordprotected }}}"><span class="fa fa-lock"></span>{{{ o.label_passwordprotected }}}</li>
+<li class="feature" title="{{{ o.__('This room requires a password before entry') }}}"><span class="fa fa-lock"></span>{{{ o.__('Password protected') }}}</li>
 {[ } ]}
 {[ if (o.unsecured) { ]}
-<li class="feature" title="{{{ o.tt_unsecured }}}"><span class="fa fa-unlock"></span>{{{ o.label_unsecured }}}</li>
+<li class="feature" title="{{{ o.__('This room does not require a password upon entry') }}}"><span class="fa fa-unlock"></span>{{{ o.__('No password') }}}</li>
 {[ } ]}
 {[ if (o.hidden) { ]}
-<li class="feature" title="{{{ o.tt_hidden }}}"><span class="fa fa-eye-slash"></span>{{{ o.label_hidden }}}</li>
+<li class="feature" title="{{{ o.__('This room is not publicly searchable') }}}"><span class="fa fa-eye-slash"></span>{{{ o.__('Hidden') }}}</li>
 {[ } ]}
 {[ if (o.public_room) { ]}
-<li class="feature" title="{{{ o.tt_public }}}"><span class="fa fa-eye"></span>{{{ o.label_public }}}</li>
+<li class="feature" title="{{{ o.__('This room is publicly searchable') }}}"><span class="fa fa-eye"></span>{{{ o.__('Public') }}}</li>
 {[ } ]}
 {[ if (o.membersonly) { ]}
-<li class="feature" title="{{{ o.tt_membersonly }}}"><span class="fa fa-address-book"></span>{{{ o.label_membersonly }}}</li>
+<li class="feature" title="{{{ o.__('this room is restricted to members only') }}}"><span class="fa fa-address-book"></span>{{{ o.__('Members only') }}}</li>
 {[ } ]}
 {[ if (o.open) { ]}
-<li class="feature" title="{{{ o.tt_open }}}"><span class="fa fa-globe"></span>{{{ o.label_open }}}</li>
+<li class="feature" title="{{{ o.__('Anyone can join this room') }}}"><span class="fa fa-globe"></span>{{{ o.__('Open') }}}</li>
 {[ } ]}
 {[ if (o.persistent) { ]}
-<li class="feature" title="{{{ o.tt_persistent }}}"><span class="fa fa-save"></span>{{{ o.label_persistent }}}</li>
+<li class="feature" title="{{{ o.__('This room persists even if it\'s unoccupied') }}}"><span class="fa fa-save"></span>{{{ o.__('Persistent') }}}</li>
 {[ } ]}
 {[ if (o.temporary) { ]}
-<li class="feature" title="{{{ o.tt_temporary }}}"><span class="fa fa-snowflake-o"></span>{{{ o.label_temporary }}}</li>
+<li class="feature" title="{{{ o.__('This room will disappear once the last person leaves') }}}"><span class="fa fa-snowflake-o"></span>{{{ o.__('Temporary') }}}</li>
 {[ } ]}
 {[ if (o.nonanonymous) { ]}
-<li class="feature" title="{{{ o.tt_nonanonymous }}}"><span class="fa fa-id-card"></span>{{{ o.label_nonanonymous }}}</li>
+<li class="feature" title="{{{ o.__('All other room occupants can see your XMPP username') }}}"><span class="fa fa-id-card"></span>{{{ o.__('Not anonymous') }}}</li>
 {[ } ]}
 {[ if (o.semianonymous) { ]}
-<li class="feature" title="{{{ o.tt_semianonymous }}}"><span class="fa fa-user-secret"></span>{{{ o.label_semianonymous }}}</li>
+<li class="feature" title="{{{ o.__('Only moderators can see your XMPP username') }}}"><span class="fa fa-user-secret"></span>{{{ o.__('Semi-anonymous') }}}</li>
 {[ } ]}
 {[ if (o.moderated) { ]}
-<li class="feature" title="{{{ o.tt_moderated }}}"><span class="fa fa-gavel"></span>{{{ o.label_moderated }}}</li>
+<li class="feature" title="{{{ o.__('This room is being moderated') }}}"><span class="fa fa-gavel"></span>{{{ o.__('Moderated') }}}</li>
 {[ } ]}
 {[ if (o.unmoderated) { ]}
-<li class="feature" title="{{{ o.tt_unmoderated }}}"><span class="fa fa-info-circle"></span>{{{ o.label_unmoderated }}}</li>
+<li class="feature" title="{{{ o.__('This room is not being moderated') }}}"><span class="fa fa-info-circle"></span>{{{ o.__('Not moderated') }}}</li>
 {[ } ]}
 {[ if (o.mam_enabled) { ]}
-<li class="feature" title="{{{ o.tt_mam_enabled }}}"><span class="fa fa-database"></span>{{{ o.label_mam_enabled }}}</li>
+<li class="feature" title="{{{ o.__('Messages are archived on the server') }}}"><span class="fa fa-database"></span>{{{ o.__('Message archiving') }}}</li>
 {[ } ]}
 </ul>

src/templates/chatroom_head.html

@@ -14,4 +14,5 @@
     {[ if (o.affiliation == 'owner') { ]}
     <a class="chatbox-btn configure-chatroom-button fa fa-wrench" title="{{{o.info_configure}}} "></a>
     {[ } ]}
+    <a class="chatbox-btn show-room-details-modal fa fa-info-circle" title="{{{o.info_details}}}"></a>
 </div>