Fixes #953 MUC "Features" displayed when exiting configuration

CHANGES.md

@@ -5,6 +5,7 @@
 ### Bugfixes
 - #800 Could not register successfully in ejabberd 17.01
 - #949 Don't flash the roster contacts filter (i.e. hide by default)
+- #953 MUC "Features" displayed when exiting configuration
 - Don't require `auto_login` to be `true` when using the API to log in.
 - Moment locale wasn't being set to the value passed via the `i18n` option.
 - In the chat heading, two avatars sometimes get rendered.

css/converse.css

@@ -2595,11 +2595,8 @@
           font-weight: bold; }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
-          position: absolute;
           bottom: 0.5em;
-          width: 25%;
+          width: 100%; }
-          width: -webkit-calc(30% - 1em);
-          width: calc(30% - 1em); }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
           padding: 0; }

css/inverse.css

@@ -2757,11 +2757,8 @@ body {
           font-weight: bold; }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
-          position: absolute;
           bottom: 0.5em;
-          width: 25%;
+          width: 100%; }
-          width: -webkit-calc(30% - 1em);
-          width: calc(30% - 1em); }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
           padding: 0; }
@@ -2906,10 +2903,7 @@ body {
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
           font-size: 18px; }
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
-          bottom: 1em;
+          bottom: 1em; }
-          width: 25%;
-          width: -webkit-calc(30% - 2em);
-          width: calc(30% - 2em); }
         #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list {
           height: -webkit-calc(100% - 212px);
           height: calc(100% - 212px); }

sass/_chatrooms.scss

@@ -119,10 +119,8 @@
                         font-weight: bold;
                     }
                     .chatroom-features {
-                        position: absolute;
                         bottom: 0.5em;
-                        width: 25%;
+                        width: 100%;
-                        @include calc(width, '30% - 1em');
                     }
                     .awesomplete {
                         ul {

sass/inverse/_chatrooms.scss

@@ -46,8 +46,6 @@
                     }
                     .chatroom-features {
                         bottom: $padding;
-                        width: 25%;
-                        @include calc(width, '30% - 2em');
                     }
                     ul {
                         &.occupant-list {

src/converse-muc.js

@@ -573,6 +573,27 @@
                     this.leave();
                 },
 
+                setOccupantsVisibility () {
+                    if (this.model.get('hidden_occupants')) {
+                        const icon_el = this.el.querySelector('.icon-show-users');
+                        if (!_.isNull(icon_el)) {
+                            icon_el.classList.remove('icon-show-users');
+                            icon_el.classList.add('icon-hide-users');
+                        }
+                        this.el.querySelector('.chat-area').classList.remove('full');
+                        this.el.querySelector('.occupants').classList.remove('hidden');
+                    } else {
+                        const icon_el = this.el.querySelector('.icon-hide-users');
+                        if (!_.isNull(icon_el)) {
+                            icon_el.classList.remove('icon-hide-users');
+                            icon_el.classList.add('icon-show-users');
+                        }
+                        this.el.querySelector('.chat-area').classList.add('full');
+                        u.hideElement(this.el.querySelector('.occupants'));
+                    }
+                    this.occupantsview.setOccupantsHeight();
+                },
+
                 toggleOccupants (ev, preserve_state) {
                     /* Show or hide the right sidebar containing the chat
                      * occupants (and the invite widget).
@@ -581,27 +602,10 @@
                         ev.preventDefault();
                         ev.stopPropagation();
                     }
-                    if (preserve_state) {
+                    if (!preserve_state) {
-                        // Bit of a hack, to make sure that the sidebar's state doesn't change
                         this.model.set({hidden_occupants: !this.model.get('hidden_occupants')});
                     }
-                    if (!this.model.get('hidden_occupants')) {
+                    this.setOccupantsVisibility();
-                        this.model.save({hidden_occupants: true});
-                        const icon_el = this.el.querySelector('.icon-hide-users');
-                        icon_el.classList.remove('icon-hide-users');
-                        icon_el.classList.add('icon-show-users');
-                        this.el.querySelector('.chat-area').classList.add('full');
-                        u.hideElement(this.el.querySelector('.occupants'));
-                    } else {
-                        this.model.save({hidden_occupants: false});
-                        const icon_el = this.el.querySelector('.icon-show-users');
-                        if (!_.isNull(icon_el)) {
-                            icon_el.classList.remove('icon-show-users');
-                            icon_el.classList.add('icon-hide-users');
-                        }
-                        this.el.querySelector('.chat-area').classList.remove('full');
-                        this.el.querySelector('.occupants').classList.remove('hidden');
-                    }
                     this.scrollDown();
                 },
 
@@ -1862,9 +1866,8 @@
                     } else if (this.model.get('connection_status') == converse.ROOMSTATUS.PASSWORD_REQUIRED) {
                         this.renderPasswordForm();
                     } else {
-                        this.$el.find('.chat-area').removeClass('hidden');
+                        this.el.querySelector('.chat-area').classList.remove('hidden');
-                        this.$el.find('.occupants').removeClass('hidden');
+                        this.setOccupantsVisibility();
-                        this.occupantsview.setOccupantsHeight();
                         this.scrollDown();
                     }
                 },