Fixes #1272 Hiding MUC occupants leaves a blank space

CHANGES.md

@@ -7,6 +7,7 @@
 - #1257 Prefer 'probably' over 'maybe' when evaluating audio play support.
 - #1261 File upload not working
 - #1252 Correctly reflect the state in bookmark icon title.
+- #1272 Hiding MUC occupants leaves a blank space
 
 ## 4.0.3 (2018-10-22)
 

css/converse.css

@@ -10699,12 +10699,9 @@ body.reset {
       #conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
       #conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
         border-top-left-radius: 4px; }
-      #conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full,
-      #conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chat-area.full {
+      #conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator,
+      #conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
         max-width: 100%; }
-        #conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator,
-        #conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
-          max-width: 100%; }
     #conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .occupants,
     #conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .occupants {
       border-top-right-radius: 4px;

dist/converse.js

@@ -63440,13 +63440,21 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_3__["default"].plugins
         if (this.model.get('hidden_occupants')) {
           u.removeClass('fa-angle-double-right', icon_el);
           u.addClass('fa-angle-double-left', icon_el);
-          u.addClass('full', this.el.querySelector('.chat-area'));
+          const chat_area = this.el.querySelector('.chat-area');
+          u.removeClass('col-md-9', chat_area);
+          u.removeClass('col-8', chat_area);
+          u.addClass('full', chat_area);
+          u.addClass('col-12', chat_area);
           u.hideElement(this.el.querySelector('.occupants'));
         } else {
+          const chat_area = this.el.querySelector('.chat-area');
           u.addClass('fa-angle-double-right', icon_el);
           u.removeClass('fa-angle-double-left', icon_el);
-          u.removeClass('full', this.el.querySelector('.chat-area'));
           u.removeClass('hidden', this.el.querySelector('.occupants'));
+          u.removeClass('full', chat_area);
+          u.removeClass('col-12', chat_area);
+          u.addClass('col-md-9', chat_area);
+          u.addClass('col-8', chat_area);
         }
 
         this.occupantsview.setOccupantsHeight();
@@ -103495,7 +103503,13 @@ __e(o.label_start_call) +
  } ;
 __p += '\n';
  if (o.show_occupants_toggle)  { ;
-__p += '\n<li class="toggle-occupants fa fa-angle-double-right" title="' +
+__p += '\n<li class="toggle-occupants fa ';
+ if (o.hidden_occupants)  { ;
+__p += ' fa-angle-double-left ';
+ } else { ;
+__p += ' fa-angle-double-right ';
+ } ;
+__p += '"\n    title="' +
 __e(o.label_hide_occupants) +
 '"></li>\n';
  } ;

sass/_chatrooms.scss

@@ -406,7 +406,6 @@
                         border-top-left-radius: $chatbox-border-radius;
                     }
                     &.full {
-                        max-width: 100%;
                         .new-msgs-indicator {
                             max-width: 100%;
                         }

src/converse-muc-views.js

@@ -735,13 +735,21 @@ converse.plugins.add('converse-muc-views', {
                 if (this.model.get('hidden_occupants')) {
                     u.removeClass('fa-angle-double-right', icon_el);
                     u.addClass('fa-angle-double-left', icon_el);
-                    u.addClass('full', this.el.querySelector('.chat-area'));
+                    const chat_area = this.el.querySelector('.chat-area');
+                    u.removeClass('col-md-9', chat_area);
+                    u.removeClass('col-8', chat_area);
+                    u.addClass('full', chat_area);
+                    u.addClass('col-12', chat_area);
                     u.hideElement(this.el.querySelector('.occupants'));
                 } else {
+                    const chat_area = this.el.querySelector('.chat-area');
                     u.addClass('fa-angle-double-right', icon_el);
                     u.removeClass('fa-angle-double-left', icon_el);
-                    u.removeClass('full', this.el.querySelector('.chat-area'));
                     u.removeClass('hidden', this.el.querySelector('.occupants'));
+                    u.removeClass('full', chat_area);
+                    u.removeClass('col-12', chat_area);
+                    u.addClass('col-md-9', chat_area);
+                    u.addClass('col-8', chat_area);
                 }
                 this.occupantsview.setOccupantsHeight();
             },

src/templates/toolbar.html

@@ -8,5 +8,6 @@
 <li class="toggle-call fa fa-phone" title="{{{o.label_start_call}}}"></li>
 {[ } ]}
 {[ if (o.show_occupants_toggle)  { ]}
-<li class="toggle-occupants fa fa-angle-double-right" title="{{{o.label_hide_occupants}}}"></li>
+<li class="toggle-occupants fa {[ if (o.hidden_occupants)  { ]} fa-angle-double-left {[ } else { ]} fa-angle-double-right {[ } ]}"
+    title="{{{o.label_hide_occupants}}}"></li>
 {[ } ]}