From 36f63d90008e01567c6b74225ec52d5f5a1b0c94 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Fri, 26 Oct 2018 16:37:56 +0200
Subject: [PATCH] Fixes #1272  Hiding MUC occupants leaves a blank space

---
 CHANGES.md                 |  1 +
 css/converse.css           |  7 ++-----
 dist/converse.js           | 20 +++++++++++++++++---
 sass/_chatrooms.scss       |  1 -
 src/converse-muc-views.js  | 12 ++++++++++--
 src/templates/toolbar.html |  3 ++-
 6 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 79627b7e3..64ae8cc60 100644
--- a/CHANGES.md
+++ b/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)
 
diff --git a/css/converse.css b/css/converse.css
index f3baf6f6b..6a40e43ce 100644
--- a/css/converse.css
+++ b/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;
diff --git a/dist/converse.js b/dist/converse.js
index 56a77dbbe..914908d90 100644
--- a/dist/converse.js
+++ b/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';
  } ;
diff --git a/sass/_chatrooms.scss b/sass/_chatrooms.scss
index f9a6ddb21..649f8a2f5 100644
--- a/sass/_chatrooms.scss
+++ b/sass/_chatrooms.scss
@@ -406,7 +406,6 @@
                         border-top-left-radius: $chatbox-border-radius;
                     }
                     &.full {
-                        max-width: 100%;
                         .new-msgs-indicator {
                             max-width: 100%;
                         }
diff --git a/src/converse-muc-views.js b/src/converse-muc-views.js
index 1a391e5bd..070e12b45 100644
--- a/src/converse-muc-views.js
+++ b/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();
             },
diff --git a/src/templates/toolbar.html b/src/templates/toolbar.html
index 311c05893..9a1b1b5ae 100644
--- a/src/templates/toolbar.html
+++ b/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>
 {[ } ]}