Add close button for controlbox in overlay view mode

css/converse.css

@@ -4877,7 +4877,7 @@ body.reset {
   cursor: pointer;
   font-size: 16px;
   margin: 0 0.2em;
-  padding: 0.3em;
+  padding: 0 0 0 0.5em;
   text-decoration: none; }
   #converse-embedded-chat .chatbox-btn:active,
   #conversejs .chatbox-btn:active {
@@ -5509,13 +5509,10 @@ body.reset {
       padding-bottom: 0.5em; }
       #conversejs #controlbox .conn-feedback p.feedback-subject.error {
         font-weight: bold; }
-  #conversejs #controlbox .brand-heading-container {
-    flex: 0 0 100%;
-    max-width: 100%; }
-    #conversejs #controlbox .brand-heading-container .brand-heading {
-      text-align: center; }
-    #conversejs #controlbox .brand-heading-container .brand-name {
-      font-size: 120%; }
+  #conversejs #controlbox .brand-heading-container .brand-heading {
+    text-align: center; }
+  #conversejs #controlbox .brand-heading-container .brand-name {
+    font-size: 120%; }
   #conversejs #controlbox #converse-login-panel, #conversejs #controlbox #converse-register-panel {
     padding-top: 0;
     padding-bottom: 0; }
@@ -5728,9 +5725,11 @@ body.reset {
   #conversejs:not(.fullscreen) #controlbox .box-flyout {
     min-width: 250px !important;
     width: 250px; }
+  #conversejs:not(.fullscreen) #controlbox:not(.logged-out) .controlbox-head {
+    height: 15px; }
   #conversejs:not(.fullscreen) #controlbox .controlbox-head {
     display: flex;
-    flex-direction: row;
+    flex-direction: row-reverse;
     flex-wrap: nowrap;
     justify-content: space-between; }
     #conversejs:not(.fullscreen) #controlbox .controlbox-head .brand-heading {
@@ -6209,8 +6208,6 @@ body.reset {
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     background-color: #578EA9;
-    border: 1px solid white;
-    border-bottom: none;
     padding: 0.5em 0;
     text-align: center;
     color: white;
@@ -6218,7 +6215,7 @@ body.reset {
     overflow-y: hidden;
     text-overflow: ellipsis;
     display: block;
-    height: 50px; }
+    height: 45px; }
   #conversejs:not(.fullscreen) #minimized-chats a.restore-chat {
     padding: 1px 0 1px 5px;
     color: white;
@@ -6233,7 +6230,7 @@ body.reset {
     color: white; }
   #conversejs:not(.fullscreen) #minimized-chats .minimized-chats-flyout {
     flex-direction: column-reverse;
-    bottom: 34px;
+    bottom: 30px;
     width: 130px; }
     #conversejs:not(.fullscreen) #minimized-chats .minimized-chats-flyout .chat-head {
       padding: 0.3em;

css/inverse.css

@@ -4929,7 +4929,7 @@ body {
   cursor: pointer;
   font-size: 16px;
   margin: 0 0.2em;
-  padding: 0.3em;
+  padding: 0 0 0 0.5em;
   text-decoration: none; }
   #converse-embedded-chat .chatbox-btn:active,
   #conversejs .chatbox-btn:active {
@@ -5579,13 +5579,10 @@ body {
       padding-bottom: 0.5em; }
       #conversejs #controlbox .conn-feedback p.feedback-subject.error {
         font-weight: bold; }
-  #conversejs #controlbox .brand-heading-container {
-    flex: 0 0 100%;
-    max-width: 100%; }
-    #conversejs #controlbox .brand-heading-container .brand-heading {
-      text-align: center; }
-    #conversejs #controlbox .brand-heading-container .brand-name {
-      font-size: 120%; }
+  #conversejs #controlbox .brand-heading-container .brand-heading {
+    text-align: center; }
+  #conversejs #controlbox .brand-heading-container .brand-name {
+    font-size: 120%; }
   #conversejs #controlbox #converse-login-panel, #conversejs #controlbox #converse-register-panel {
     padding-top: 0;
     padding-bottom: 0; }
@@ -5820,6 +5817,8 @@ body {
   #conversejs.fullscreen #controlbox .toggle-register-login {
     line-height: 26px; }
   #conversejs.fullscreen #controlbox .brand-heading-container {
+    flex: 0 0 100%;
+    max-width: 100%;
     text-align: center; }
     #conversejs.fullscreen #controlbox .brand-heading-container .brand-heading {
       font-size: 150%;

sass/_chatbox.scss

@@ -25,7 +25,7 @@
         cursor: pointer;
         font-size: $box-close-font-size;
         margin: 0 0.2em;
-        padding: 0.3em;
+        padding: 0 0 0 0.5em;
         text-decoration: none;
 
         &:active {

sass/_controlbox.scss

@@ -152,7 +152,6 @@
         }
 
         .brand-heading-container {
-            @include make-col(12);
 
             .brand-heading {
                 text-align: center;

sass/converse/_controlbox.scss

@@ -7,12 +7,20 @@
             min-width: $controlbox-width !important;
             width: $controlbox-width;
         }
+
+        &:not(.logged-out) {
+            .controlbox-head {
+                height: 15px;
+            }
+        }
+
         .controlbox-head {
             display: flex;
-            flex-direction: row;
+            flex-direction: row-reverse;
             flex-wrap: nowrap;
             justify-content: space-between;
 
+
             .brand-heading {
                 @include make-col-ready();
                 @include make-col(8);

sass/converse/_minimized_chats.scss

@@ -19,8 +19,6 @@
             border-top-left-radius: $chatbox-border-radius;
             border-top-right-radius: $chatbox-border-radius;
             background-color: $link-color;
-            border: 1px solid white;
-            border-bottom: none;
             padding: 0.5em 0;
             text-align: center;
             color: white;
@@ -28,7 +26,7 @@
             overflow-y: hidden;
             text-overflow: ellipsis;
             display: block;
-            height: 50px;
+            height: 45px;
         }
 
         a.restore-chat {
@@ -50,7 +48,7 @@
 
         .minimized-chats-flyout {
             flex-direction: column-reverse;
-            bottom: 34px;
+            bottom: 30px;
             width: $minimized-chats-width;
 
             .chat-head {

sass/inverse/_controlbox.scss

@@ -34,6 +34,7 @@
         }
 
         .brand-heading-container {
+            @include make-col(12);
             text-align: center;
             .brand-heading {
                 font-size: 150%;

src/converse-controlbox.js

@@ -299,8 +299,13 @@
                 },
 
                 insertBrandHeading () {
-                    const panes_el = this.el.querySelector('.controlbox-panes');
-                    panes_el.insertAdjacentHTML('beforeBegin', this.createBrandHeadingHTML());
+                    const heading_el = this.el.querySelector('.brand-heading-container');
+                    if (_.isNull(heading_el)) {
+                        const el = this.el.querySelector('.controlbox-head');
+                        el.insertAdjacentHTML('beforeend', this.createBrandHeadingHTML());
+                    } else {
+                        heading_el.outerHTML = this.createBrandHeadingHTML();
+                    }
                 },
 
                 renderLoginPanel () {

src/templates/controlbox.html

@@ -1 +1,8 @@
-<div class="flyout box-flyout"><div class="controlbox-panes"></div></div>
+<div class="flyout box-flyout">
+    <div class="chat-head controlbox-head">
+        {[ if (!o.sticky_controlbox) { ]}
+            <a class="chatbox-btn close-chatbox-button fa fa-close"></a>
+        {[ } ]}
+    </div>
+    <div class="controlbox-panes"></div>
+</div>

src/templates/converse_brand_heading.html

@@ -1,12 +1,7 @@
-<div class="chat-head controlbox-head">
+<span class="brand-heading-container">
     <div class="brand-heading">
         <a href="https://conversejs.org" target="_blank" rel="noopener">
             <i class="icon-conversejs"></i><span class="brand-name">converse</span>
         </a>
     </div>
-    {[ if (!o.sticky_controlbox) { ]}
-        <a class="chatbox-btn close-chatbox-button fa fa-close"></a>
-    {[ } ]}
-</div>
-
-
+</span>