Update padding of controlbox elements

Instead of padding the container, pad individual elements that need it.
This enables us to have highlighting (e.g. on hover) that spans the full
width of the controlbox.

updates #1069

css/converse.css

@@ -6858,18 +6858,22 @@ body.reset {
     font-size: 60%; }
 
 #conversejs {
+  bottom: 0;
+  height: 100%;
+  position: fixed;
   padding-left: env(safe-area-inset-left);
   padding-right: env(safe-area-inset-right);
   color: #666;
   font-family: "Helvetica", "Arial", sans-serif;
   font-size: 14px;
   direction: ltr;
-  display: block;
   z-index: 1031; }
   #conversejs .brand-heading {
     font-family: "Century Gothic", futura, "URW Gothic L", Verdana, sans-serif; }
     #conversejs .brand-heading .icon-conversejs {
       font-size: 80%; }
+  #conversejs .popover {
+    position: fixed; }
   #conversejs .converse-chatboxes {
     z-index: 1031;
     position: fixed;
@@ -7203,7 +7207,7 @@ body.reset {
 #conversejs form .form-group {
   margin-bottom: 2em; }
 #conversejs form .form-check-label {
-  margin-top: 0.1rem; }
+  margin-top: 0.3rem; }
 #conversejs form .form-control::-webkit-input-placeholder {
   /* Chrome/Opera/Safari */
   color: #A8ABA1; }
@@ -7276,9 +7280,6 @@ body.reset {
 #conversejs form.converse-centered-form {
   text-align: center; }
 
-#conversejs.fullscreen form .form-check-label {
-  margin-top: 0.3rem; }
-
 #conversejs #user-profile-modal label {
   font-weight: bold; }
 
@@ -7868,13 +7869,16 @@ body.reset {
     overflow-y: auto;
     background-color: white; }
   #conversejs #controlbox .controlbox-pane {
-    padding: 1em;
     background-color: white;
     border: 0;
     font-size: 14px;
     left: 0;
     text-align: left;
-    overflow-x: hidden; }
+    overflow-x: hidden;
+    padding: 1em 0 1em 0; }
+    #conversejs #controlbox .controlbox-pane .controlbox-padded {
+      padding-left: 1em;
+      padding-right: 1em; }
     #conversejs #controlbox .controlbox-pane .add-converse-contact {
       margin: 0 0 0.75em 0; }
     #conversejs #controlbox .controlbox-pane .chatbox-btn {
@@ -7939,21 +7943,21 @@ body.reset {
         display: none; }
       #conversejs:not(.converse-embedded) .converse-chatboxes.sidebar-open #controlbox .controlbox-pane {
         display: block; } }
-#conversejs:not(.fullscreen) #controlbox {
+#conversejs:not(.converse-fullscreen) #controlbox {
   order: -1;
   min-width: 250px !important;
   width: 250px; }
-  #conversejs:not(.fullscreen) #controlbox .box-flyout {
+  #conversejs:not(.converse-fullscreen) #controlbox .box-flyout {
     min-width: 250px !important;
     width: 250px; }
-  #conversejs:not(.fullscreen) #controlbox:not(.logged-out) .controlbox-head {
+  #conversejs:not(.converse-fullscreen) #controlbox:not(.logged-out) .controlbox-head {
     height: 15px; }
-  #conversejs:not(.fullscreen) #controlbox .controlbox-head {
+  #conversejs:not(.converse-fullscreen) #controlbox .controlbox-head {
     display: flex;
     flex-direction: row-reverse;
     flex-wrap: nowrap;
     justify-content: space-between; }
-    #conversejs:not(.fullscreen) #controlbox .controlbox-head .brand-heading {
+    #conversejs:not(.converse-fullscreen) #controlbox .controlbox-head .brand-heading {
       position: relative;
       width: 100%;
       min-height: 1px;
@@ -7963,16 +7967,16 @@ body.reset {
       max-width: 66.6666666667%;
       color: #666;
       font-size: 2em; }
-    #conversejs:not(.fullscreen) #controlbox .controlbox-head .chatbox-btn {
+    #conversejs:not(.converse-fullscreen) #controlbox .controlbox-head .chatbox-btn {
       color: #578EA9;
       margin: 0; }
-  #conversejs:not(.fullscreen) #controlbox #converse-register, #conversejs:not(.fullscreen) #controlbox #converse-login {
+  #conversejs:not(.converse-fullscreen) #controlbox #converse-register, #conversejs:not(.converse-fullscreen) #controlbox #converse-login {
     flex: 0 0 100%;
     max-width: 100%;
     padding-bottom: 0; }
-  #conversejs:not(.fullscreen) #controlbox #converse-register .button-cancel {
+  #conversejs:not(.converse-fullscreen) #controlbox #converse-register .button-cancel {
     font-size: 90%; }
-  #conversejs:not(.fullscreen) #controlbox .controlbox-panes {
+  #conversejs:not(.converse-fullscreen) #controlbox .controlbox-panes {
     border-radius: 4px; }
 
 #conversejs .list-container {
@@ -8107,7 +8111,8 @@ body.reset {
         color: #666;
         display: block;
         width: 100%;
-        padding: 0 0 0.3rem 0; }
+        padding-top: 0;
+        padding-bottom: 0.3rem; }
         #conversejs #converse-roster .roster-contacts .roster-group .group-toggle:hover {
           color: #585B51; }
       #conversejs #converse-roster .roster-contacts .roster-group li {

css/inverse.css

@@ -6858,18 +6858,22 @@ body.reset {
     font-size: 60%; }
 
 #conversejs {
+  bottom: 0;
+  height: 100%;
+  position: fixed;
   padding-left: env(safe-area-inset-left);
   padding-right: env(safe-area-inset-right);
   color: #666;
   font-family: "Helvetica", "Arial", sans-serif;
   font-size: 16px;
   direction: ltr;
-  display: block;
   z-index: 1031; }
   #conversejs .brand-heading {
     font-family: "Century Gothic", futura, "URW Gothic L", Verdana, sans-serif; }
     #conversejs .brand-heading .icon-conversejs {
       font-size: 80%; }
+  #conversejs .popover {
+    position: fixed; }
   #conversejs .converse-chatboxes {
     z-index: 1031;
     position: fixed;
@@ -7245,7 +7249,7 @@ body {
 #conversejs form .form-group {
   margin-bottom: 2em; }
 #conversejs form .form-check-label {
-  margin-top: 0.1rem; }
+  margin-top: 0.3rem; }
 #conversejs form .form-control::-webkit-input-placeholder {
   /* Chrome/Opera/Safari */
   color: #A8ABA1; }
@@ -7318,9 +7322,6 @@ body {
 #conversejs form.converse-centered-form {
   text-align: center; }
 
-#conversejs.fullscreen form .form-check-label {
-  margin-top: 0.3rem; }
-
 #conversejs #user-profile-modal label {
   font-weight: bold; }
 
@@ -7929,13 +7930,16 @@ body {
     overflow-y: auto;
     background-color: white; }
   #conversejs #controlbox .controlbox-pane {
-    padding: 1.2em;
     background-color: white;
     border: 0;
     font-size: 16px;
     left: 0;
     text-align: left;
-    overflow-x: hidden; }
+    overflow-x: hidden;
+    padding: 1em 0 1em 0; }
+    #conversejs #controlbox .controlbox-pane .controlbox-padded {
+      padding-left: 1em;
+      padding-right: 1em; }
     #conversejs #controlbox .controlbox-pane .add-converse-contact {
       margin: 0 0 0.75em 0; }
     #conversejs #controlbox .controlbox-pane .chatbox-btn {
@@ -8000,6 +8004,42 @@ body {
         display: none; }
       #conversejs:not(.converse-embedded) .converse-chatboxes.sidebar-open #controlbox .controlbox-pane {
         display: block; } }
+#conversejs:not(.converse-fullscreen) #controlbox {
+  order: -1;
+  min-width: 250px !important;
+  width: 250px; }
+  #conversejs:not(.converse-fullscreen) #controlbox .box-flyout {
+    min-width: 250px !important;
+    width: 250px; }
+  #conversejs:not(.converse-fullscreen) #controlbox:not(.logged-out) .controlbox-head {
+    height: 15px; }
+  #conversejs:not(.converse-fullscreen) #controlbox .controlbox-head {
+    display: flex;
+    flex-direction: row-reverse;
+    flex-wrap: nowrap;
+    justify-content: space-between; }
+    #conversejs:not(.converse-fullscreen) #controlbox .controlbox-head .brand-heading {
+      position: relative;
+      width: 100%;
+      min-height: 1px;
+      padding-right: 15px;
+      padding-left: 15px;
+      flex: 0 0 66.6666666667%;
+      max-width: 66.6666666667%;
+      color: #666;
+      font-size: 2em; }
+    #conversejs:not(.converse-fullscreen) #controlbox .controlbox-head .chatbox-btn {
+      color: #578EA9;
+      margin: 0; }
+  #conversejs:not(.converse-fullscreen) #controlbox #converse-register, #conversejs:not(.converse-fullscreen) #controlbox #converse-login {
+    flex: 0 0 100%;
+    max-width: 100%;
+    padding-bottom: 0; }
+  #conversejs:not(.converse-fullscreen) #controlbox #converse-register .button-cancel {
+    font-size: 90%; }
+  #conversejs:not(.converse-fullscreen) #controlbox .controlbox-panes {
+    border-radius: 4px; }
+
 #conversejs.fullscreen #controlbox {
   position: relative;
   width: 100%;
@@ -8149,7 +8189,8 @@ body {
         color: #666;
         display: block;
         width: 100%;
-        padding: 0 0 0.3rem 0; }
+        padding-top: 0;
+        padding-bottom: 0.3rem; }
         #conversejs #converse-roster .roster-contacts .roster-group .group-toggle:hover {
           color: #585B51; }
       #conversejs #converse-roster .roster-contacts .roster-group li {

mockup/overlayed-login.html

@@ -9,22 +9,27 @@
     <link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
 </head>
 
-<body style="background-color: #578EA9">
+<body class="reset">
     <div class="converse-bg container">
         <h1 class="brand-heading">Converse</h1>
     </div>
-
     <div id="conversejs" class="converse-overlayed">
         <div class="converse-chatboxes row no-gutters">
-            <div id="controlbox" class="chatbox">
+            <div id="controlbox" class="chatbox logged-out">
                 <div class="flyout box-flyout">
                     <div class="chat-head controlbox-head">
-                        <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>
+                        <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>
+                        </span>
                     </div>
                     <div class="controlbox-panes">
-                        <div id="login-dialog" class="controlbox-pane row">
-                            <form id="converse-login" class="pure-form converse-form">
+                        <div id="converse-login-panel" class="controlbox-pane fade-in row no-gutters">
+                            <form id="converse-login" class="converse-form">
                                 <div class="form-group">
                                     <label for="jid">XMPP Username:</label>
                                     <input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
@@ -33,9 +38,14 @@
                                     <label for="password">Password:</label>
                                     <input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
                                 </div>
-                                <p></p>
-                                <p><input class="btn btn-primary" type="submit" value="Log In"></p>
-                                <p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
+                                <div class="form-group form-check">
+                                    <input id="converse-login-trusted" class="form-check-input" type="checkbox" name="trusted" checked="">
+                                    <label class="form-check-label" for="converse-login-trusted">This is a trusted device</label>
+                                </div>
+                                <fieldset class="buttons">
+                                    <input class="btn btn-primary" type="submit" value="Log in">
+                                    <p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
+                                </fieldset>
                             </form>
                         </div>
                     </div>

sass/_controlbox.scss

@@ -274,13 +274,18 @@
         }
 
         .controlbox-pane {
-            padding: $controlbox-pane-padding;
             background-color: white;
             border: 0;
             font-size: $font-size;
             left: 0;
             text-align: left;
             overflow-x: hidden;
+            padding: 1em 0 1em 0;
+
+            .controlbox-padded {
+               padding-left: 1em;
+               padding-right: 1em;
+            }
 
             .add-converse-contact {
                 margin: 0 0 0.75em 0;
@@ -387,3 +392,55 @@
         }
     }
 }
+
+#conversejs:not(.converse-fullscreen) {
+    #controlbox {
+        order: -1;
+        min-width: $controlbox-width !important;
+        width: $controlbox-width;
+        .box-flyout {
+            min-width: $controlbox-width !important;
+            width: $controlbox-width;
+        }
+
+        &:not(.logged-out) {
+            .controlbox-head {
+                height: 15px;
+            }
+        }
+
+        .controlbox-head {
+            display: flex;
+            flex-direction: row-reverse;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+
+
+            .brand-heading {
+                @include make-col-ready();
+                @include make-col(8);
+                color: $text-color;
+                font-size: 2em;
+            }
+            .chatbox-btn {
+                color: $controlbox-head-color;
+                margin: 0;
+            }
+        }
+
+        #converse-register, #converse-login {
+            @include make-col(12);
+            padding-bottom: 0;
+        }
+
+        #converse-register {
+            .button-cancel {
+                font-size: 90%;
+            }
+        }
+
+        .controlbox-panes {
+            border-radius: $chatbox-border-radius;
+        }
+    }
+}

sass/_forms.scss

@@ -5,7 +5,7 @@
         }
 
         .form-check-label {
-            margin-top: 0.1rem;
+            margin-top: $form-check-input-margin-y;
         }
 
         .form-control {
@@ -108,12 +108,3 @@
         }
     }
 }
-
-#conversejs.fullscreen {
-    form {
-        .form-check-label {
-            margin-top: $form-check-input-margin-y;
-        }
-    }
-}
-

sass/_roster.scss

@@ -70,7 +70,8 @@
                 color: $text-color;
                 display: block;
                 width: 100%;
-                padding: 0 0 0.3rem 0;
+                padding-top: 0;
+                padding-bottom: 0.3rem;
             }
 
             li {

sass/converse.scss

@@ -46,7 +46,6 @@
 @import "chatbox";
 @import "converse/chatbox";
 @import "controlbox";
-@import "converse/controlbox";
 @import "roomslist";
 @import "roster";
 @import "chatrooms";

sass/converse/_controlbox.scss

-#conversejs:not(.fullscreen) {
-    #controlbox {
-        order: -1;
-        min-width: $controlbox-width !important;
-        width: $controlbox-width;
-        .box-flyout {
-            min-width: $controlbox-width !important;
-            width: $controlbox-width;
-        }
-
-        &:not(.logged-out) {
-            .controlbox-head {
-                height: 15px;
-            }
-        }
-
-        .controlbox-head {
-            display: flex;
-            flex-direction: row-reverse;
-            flex-wrap: nowrap;
-            justify-content: space-between;
-
-
-            .brand-heading {
-                @include make-col-ready();
-                @include make-col(8);
-                color: $text-color;
-                font-size: 2em;
-            }
-            .chatbox-btn {
-                color: $controlbox-head-color;
-                margin: 0;
-            }
-        }
-
-        #converse-register, #converse-login {
-            @include make-col(12);
-            padding-bottom: 0;
-        }
-
-        #converse-register {
-            .button-cancel {
-                font-size: 90%;
-            }
-        }
-
-        .controlbox-panes {
-            border-radius: $chatbox-border-radius;
-        }
-    }
-}

sass/converse/_variables.scss

@@ -7,7 +7,6 @@ $chat-head-height: 55px !default;
 
 $controlbox-dropdown-height: 25px !default;
 $controlbox-head-height: 55px !default;
-$controlbox-pane-padding: 1em !default;
 
 $chatbox-hover-height: 1em !default;
 

sass/inverse/_variables.scss

@@ -9,7 +9,6 @@ $chat-head-height: 62px !default;
 
 $controlbox-dropdown-height: 30px !default;
 $controlbox-head-height: 63px !default;
-$controlbox-pane-padding: $flyout-padding !default;
 
 $rounded-border-radius: 4px !default;
 

src/converse-rosterview.js

@@ -357,7 +357,7 @@
 
             _converse.RosterContactView = Backbone.NativeView.extend({
                 tagName: 'li',
-                className: 'd-flex hidden',
+                className: 'd-flex hidden controlbox-padded',
 
                 events: {
                     "click .accept-xmpp-request": "acceptRequest",

src/templates/bookmark.html

-<div class="list-item room-item available-chatroom d-flex flex-row {[ if (o.hidden) { ]} hidden {[ } ]}" data-room-jid="{{{o.jid}}}">
+<div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row {[ if (o.hidden) { ]} hidden {[ } ]}" data-room-jid="{{{o.jid}}}">
     <a class="open-room w-100" data-room-jid="{{{o.jid}}}" title="{{{o.open_title}}}" href="#">{{{o.name}}}</a>
     <a class="remove-bookmark fa fa-bookmark align-self-center {[ if (o.bookmarked) { ]} button-on {[ } ]}"
         data-room-jid="{{{o.jid}}}" data-bookmark-name="{{{o.name}}}"

src/templates/bookmarks_list.html

-<a href="#" class="rooms-toggle bookmarks-toggle" title="{{{o.desc_bookmarks}}}">
+<a href="#" class="rooms-toggle bookmarks-toggle controlbox-padded" title="{{{o.desc_bookmarks}}}">
     <span class="fa {[ if (o.toggle_state === o._converse.OPENED) { ]} fa-caret-down {[ } else { ]} fa-caret-right {[ } ]}">
     </span> {{{o.label_bookmarks}}}</a>
 <div class="items-list bookmarks rooms-list {[ if (o.toggle_state !== o._converse.OPENED) { ]} hidden {[ } ]}"></div>

src/templates/group_header.html

-<a href="#" class="group-toggle" title="{{{o.desc_group_toggle}}}">
+<a href="#" class="group-toggle controlbox-padded" title="{{{o.desc_group_toggle}}}">
     <span class="fa {[ if (o.toggle_state === o._converse.OPENED) { ]} fa-caret-down {[ } else { ]} fa-caret-right {[ } ]}">
     </span> {{{o.label_group}}}</a>
 <ul class="roster-group-contacts {[ if (o.toggle_state === o._converse.CLOSED) { ]} collapsed {[ } ]}"></ul>

src/templates/login_panel.html

-<div id="converse-login-panel" class="controlbox-pane fade-in row">
+<div id="converse-login-panel" class="controlbox-pane fade-in row no-gutters">
     <form id="converse-login" class="converse-form" method="post">
         <div class="conn-feedback fade-in {[ if (!o.conn_feedback_subject) { ]} hidden {[ } ]} {{{o.conn_feedback_class}}}">
             <p class="feedback-subject">{{{ o.conn_feedback_subject }}}</p>
@@ -22,8 +22,8 @@
                     <input id="converse-login-trusted" type="checkbox" class="form-check-input" name="trusted" checked="checked">
                     <label for="converse-login-trusted" class="form-check-label">{{{o.__('This is a trusted device')}}}</label>
                     <i class="fa fa-info-circle" data-toggle="popover"
-                       data-title=""
-                       data-content="{{{o.__('To improve performance, we cache your data in this browser. Uncheck this box if you want your data to be deleted when you log out. It\'s important that you explicitly log out, otherwise not all data might be deleted.')}}}"></i>
+                       data-title="Trusted device?"
+                       data-content="{{{o.__('To improve performance, we cache your data in this browser. Uncheck this box if this is a public computer or if you want your data to be deleted when you log out. It\'s important that you explicitly log out, otherwise not all cached data might be deleted.')}}}"></i>
                 </div>
 
                 <fieldset class="buttons">

src/templates/profile_view.html

-<div class="userinfo">
+<div class="userinfo controlbox-padded">
 <div class="profile d-flex">
     <a class="show-profile" href="#">
         <img alt="User Avatar" class="avatar align-self-center" height="40px" width="40px" src="data:{{{o.image_type}}};base64,{{{o.image}}}"/>

src/templates/room_panel.html

 <!-- <div id="chatrooms"> -->
-<div class="d-flex">
+<div class="d-flex controlbox-padded">
     <span class="w-100 controlbox-heading">{{{o.heading_chatrooms}}}</span>
     <a class="chatbox-btn trigger-list-chatrooms-modal fa fa-list-ul" title="{{{o.title_list_rooms}}}" data-toggle="modal" data-target="#list-chatrooms-modal"></a>
     <a class="chatbox-btn trigger-add-chatrooms-modal fa fa-users" title="{{{o.title_new_room}}}" data-toggle="modal" data-target="#add-chatrooms-modal"></a>

src/templates/rooms_list.html

-<a href="#" class="rooms-toggle open-rooms-toggle" title="{{{o.desc_rooms}}}">
+<a href="#" class="rooms-toggle open-rooms-toggle controlbox-padded" title="{{{o.desc_rooms}}}">
     <span class="fa {[ if (o.toggle_state === o._converse.OPENED) { ]} fa-caret-down {[ } else { ]} fa-caret-right {[ } ]}">
     </span> {{{o.label_rooms}}}</a>
 <div class="items-list rooms-list open-rooms-list"></div>

src/templates/rooms_list_item.html

-<div class="list-item available-chatroom d-flex flex-row {[ if (o.num_unread_general) { ]} unread-msgs {[ } ]}" data-room-jid="{{{o.jid}}}">
+<div class="list-item controlbox-padded available-chatroom d-flex flex-row {[ if (o.num_unread_general) { ]} unread-msgs {[ } ]}" data-room-jid="{{{o.jid}}}">
 {[ if (o.num_unread) { ]}
     <span class="msgs-indicator badge badge-info">{{{ o.num_unread }}}</span>
 {[ } ]}

src/templates/roster.html

-<div class="d-flex">
+<div class="d-flex controlbox-padded">
     <span class="w-100 controlbox-heading">{{{o.heading_contacts}}}</span>
     <a class="chatbox-btn add-contact fa fa-user-plus" title="{{{o.title_add_contact}}}"
        data-toggle="modal" data-target="#add-contact-modal"></a>

src/templates/roster_filter.html

-<form class="roster-filter-form input-button-group {[ if (!o.visible) { ]} hidden {[ } ]}">
+<form class="controlbox-padded roster-filter-form input-button-group {[ if (!o.visible) { ]} hidden {[ } ]}">
     <div class="form-inline flex-nowrap">
         <div class="btn-group">
             <input {[ if (o.filter_text) { ]} value="{{{o.filter_text}}}" {[ } ]}