Only show controlbox head when logging in, in overlayed view mode

CHANGES.md

@@ -18,6 +18,8 @@ with regards to sponsoring development on reintroducing them.
   event and make the XMLHttpRequest yourself.
 * Removed the `xhr_user_search` and `xhr_user_search_url` configuration options.
 
+## Updated UI
+
 The UI is now rewritten with Bootstrap4 and Flexbox is used pretty much
 everywhere. Unfortunately this means that in the overlayed view_mode, chat
 boxes can no longer be resized horizontally (or diagonally). Perhaps a solution

css/converse.css

@@ -4964,7 +4964,7 @@ body.reset {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    background-color: white;
+    background-color: #3AA569;
     box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
     height: 450px;
     min-height: 225px;
@@ -5103,6 +5103,7 @@ body.reset {
     white-space: nowrap; }
   #converse-embedded-chat .chatbox .chat-content,
   #conversejs .chatbox .chat-content {
+    height: 100%;
     padding: 0.5em;
     font-size: 13px;
     color: #777;
@@ -5436,6 +5437,8 @@ body.reset {
     margin-top: 0.25em; }
 #conversejs #controlbox {
   margin-right: 1.5em; }
+  #conversejs #controlbox .box-flyout {
+    background-color: white; }
   #conversejs #controlbox.logged-out .box-flyout .controlbox-pane {
     overflow-y: auto; }
   #conversejs #controlbox form.search-xmpp-contact {
@@ -5764,11 +5767,8 @@ body.reset {
       padding-left: 15px;
       flex: 0 0 66.6666666667%;
       max-width: 66.6666666667%;
-      order: 1;
       color: #777;
       font-size: 2em; }
-    #conversejs:not(.fullscreen) #controlbox .controlbox-head .close-chatbox-button {
-      order: 2; }
     #conversejs:not(.fullscreen) #controlbox .controlbox-head .chatbox-btn {
       color: #578EA9;
       margin: 0; }
@@ -5976,6 +5976,7 @@ body.reset {
   #converse-embedded-chat .chatroom .box-flyout,
   #conversejs .chatroom .box-flyout {
     overflow-y: hidden;
+    background-color: #E77051;
     width: 100%; }
     @media screen and (max-height: 450px) {
       #converse-embedded-chat .chatroom .box-flyout,

css/inverse.css

@@ -5014,7 +5014,7 @@ body {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    background-color: white;
+    background-color: #3AA569;
     box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
     height: 100%;
     min-height: 50%;
@@ -5153,6 +5153,7 @@ body {
     white-space: nowrap; }
   #converse-embedded-chat .chatbox .chat-content,
   #conversejs .chatbox .chat-content {
+    height: 100%;
     padding: 0.5em;
     font-size: 13px;
     color: #777;
@@ -5417,8 +5418,8 @@ body {
       max-width: 75%; } }
   @media (min-width: 1200px) {
     #conversejs.fullscreen .chatbox {
-      flex: 0 0 75%;
-      max-width: 75%; } }
+      flex: 0 0 83.3333333333%;
+      max-width: 83.3333333333%; } }
   #conversejs.fullscreen .chatbox .box-flyout {
     background-color: #3AA569;
     height: 100vh;
@@ -5440,7 +5441,6 @@ body {
           height: 22px;
           margin-bottom: -5.5px; }
   #conversejs.fullscreen .chatbox .chat-content {
-    height: 100%;
     padding: 0 1em 1em 1em;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px; }
@@ -5492,6 +5492,8 @@ body {
     margin-top: 0.25em; }
 #conversejs #controlbox {
   margin-right: 1.5em; }
+  #conversejs #controlbox .box-flyout {
+    background-color: white; }
   #conversejs #controlbox.logged-out .box-flyout .controlbox-pane {
     overflow-y: auto; }
   #conversejs #controlbox form.search-xmpp-contact {
@@ -5783,6 +5785,11 @@ body {
   #conversejs.sidebar-open #controlbox .controlbox-pane {
     display: block; } }
 #conversejs.fullscreen #controlbox {
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 15px;
   margin: 0; }
   @media (min-width: 768px) {
     #conversejs.fullscreen #controlbox {
@@ -5817,6 +5824,8 @@ body {
       #conversejs.fullscreen #controlbox .brand-heading-container .brand-heading {
         font-size: 400%; } }
   #conversejs.fullscreen #controlbox.logged-out {
+    flex: 0 0 100%;
+    max-width: 100%;
     opacity: 0;
     /* make things invisible upon start */
     -webkit-animation-name: fadein;
@@ -6069,6 +6078,7 @@ body {
   #converse-embedded-chat .chatroom .box-flyout,
   #conversejs .chatroom .box-flyout {
     overflow-y: hidden;
+    background-color: #E77051;
     width: 100%; }
     @media screen and (max-height: 450px) {
       #converse-embedded-chat .chatroom .box-flyout,

mockup/overlayed-login.html

@@ -19,8 +19,8 @@
             <div id="controlbox" class="chatbox">
                 <div class="flyout box-flyout">
                     <div class="chat-head controlbox-head">
-                        <a class="chatbox-btn close-chatbox-button fa fa-close"></a>
                         <div class="brand-heading"><i class="icon-conversejs"></i><span class="brand-name">converse</span></div>
+                        <a class="chatbox-btn close-chatbox-button fa fa-close"></a>
                     </div>
                     <div class="controlbox-panes">
                         <div id="login-dialog" class="controlbox-pane row">

sass/_chatbox.scss

@@ -115,7 +115,7 @@
             display: flex;
             flex-direction: column;
             justify-content: space-between;
-            background-color: white;
+            background-color: $chat-head-color;
             box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
             height: $chat-height;
             min-height: $chat-height/2;
@@ -258,6 +258,7 @@
             white-space: nowrap;
         }
         .chat-content {
+            height: 100%;
             padding: 0.5em;
             font-size: 13px;
             color: $text-color;

sass/_chatrooms.scss

@@ -69,6 +69,7 @@
 
         .box-flyout {
             overflow-y: hidden;
+            background-color: $chatroom-head-color;
 
             width: 100%;
             @media screen and (max-height: $mobile-landscape-height) {

sass/_controlbox.scss

@@ -50,6 +50,10 @@
     }
 
     #controlbox {
+        .box-flyout {
+            background-color: white;
+        }
+
         margin-right: 3*$chat-gutter;
 
         &.logged-out {

sass/converse/_chatrooms.scss

+#conversejs {
+    .chatbox {
+        &.chatroom {
+            @include media-breakpoint-up(xs) {
+                @include make-col(12);
+            }
+            @include media-breakpoint-up(sm) {
+                @include make-col(8);
+            }
+            @include media-breakpoint-up(md) {
+                @include make-col(6);
+            }
+            @include media-breakpoint-up(lg) {
+                @include make-col(4);
+            }
+        }
+    }
+}

sass/converse/_controlbox.scss

@@ -27,15 +27,9 @@
             .brand-heading {
                 @include make-col-ready();
                 @include make-col(8);
-
-                order: 1;
                 color: $text-color;
                 font-size: 2em;
             }
-
-            .close-chatbox-button {
-                order: 2;
-            }
             .chatbox-btn {
                 color: $controlbox-head-color;
                 margin: 0;

sass/inverse/_chatbox.scss

@@ -33,7 +33,7 @@
             @include make-col(9);
         }
         @include media-breakpoint-up(xl) {
-            @include make-col(9);
+            @include make-col(10);
         }
 
         .box-flyout {
@@ -64,7 +64,6 @@
             }
         }
         .chat-content {
-            height: 100%;
             padding: 0 $padding $padding $padding;
             border-top-left-radius: $chatbox-border-radius;
             border-top-right-radius: $chatbox-border-radius;

sass/inverse/_controlbox.scss

 #conversejs.fullscreen {
     #controlbox {
+        @include make-col-ready();
         @include media-breakpoint-up(md) {
             @include make-col(3);
         }
@@ -49,6 +50,7 @@
         }
 
         &.logged-out {
+            @include make-col(12);
             @include fade-in;
             width: 100%;
             .box-flyout {

src/converse-controlbox.js

@@ -256,10 +256,7 @@
                             this.model.set('closed', !_converse.show_controlbox_by_default);
                         }
                     }
-                    this.el.innerHTML = tpl_controlbox(
-                        _.extend(this.model.toJSON(), {
-                            'sticky_controlbox': _converse.sticky_controlbox
-                        }));
+                    this.el.innerHTML = tpl_controlbox(_.extend(this.model.toJSON()));
 
                     if (!this.model.get('closed')) {
                         this.show();
@@ -296,17 +293,14 @@
                 },
 
                  createBrandHeadingHTML () {
-                    return tpl_brand_heading();
+                    return tpl_brand_heading({
+                        'sticky_controlbox': _converse.sticky_controlbox
+                    });
                 },
 
                 insertBrandHeading () {
-                    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();
-                    }
+                    const panes_el = this.el.querySelector('.controlbox-panes');
+                    panes_el.insertAdjacentHTML('beforeBegin', this.createBrandHeadingHTML());
                 },
 
                 renderLoginPanel () {

src/templates/controlbox.html

-<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>
+<div class="flyout box-flyout"><div class="controlbox-panes"></div></div>

src/templates/converse_brand_heading.html

-<div class="brand-heading"><i class="icon-conversejs"></i><span class="brand-name">converse</span></div>
+<div class="chat-head controlbox-head">
+    <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>
+
+