HTML and CSS improvements for listed items in the controlbox

Fixes #1348

Tried to get the unread messages indicator to line up properly with the
text and icons in a room list item.

Also tried to reuse styles where appropriate, specifically
`.list-container` and `.list-toggle`.

CHANGES.md

@@ -7,6 +7,7 @@
 - Bugfix: MUC messages sometimes appear twice after resync.
 - #1331 Fix missing checkmarks in old muc messages
 - #1333 Don't send receipt requests in MUCs
+- #1348 Font gets cut off in Firefox #1348
 
 ## 4.0.5 (2018-11-15)
 

css/converse.css

@@ -3804,6 +3804,10 @@ readers do not read off random characters that represent icons */
   position: static;
   width: auto; }
 
+/* Apparent font-awesome bug? The circle has some kind of bottom margin */
+#conversejs .fa-info-circle {
+  height: 1em; }
+
 #conversejs :root {
   --blue: #007bff;
   --indigo: #6610f2;
@@ -9311,7 +9315,6 @@ readers do not read off random characters that represent icons */
   --send-button-height: 27px;
   --send-button-margin: 3px;
   --roster-height: 194px;
-  --roster-group-toggle-hover-color: #585B51;
   --flyout-padding: 1.2em;
   --chat-head-color: #3AA569;
   --chat-head-color-lighten-50-percent: #e7f7ee;
@@ -9401,8 +9404,8 @@ readers do not read off random characters that represent icons */
   --overlayed-emoji-picker-height: 100px;
   --overlayed-max-chat-textarea-height: 200px;
   --overlayed-badge-color: #818479;
-  --list-toggle-color: #585B51;
-  --list-toggle-hover-color: #818479;
+  --list-toggle-color: #818479;
+  --list-toggle-hover-color: #585B51;
   --list-toggle-font-weight: normal;
   --list-item-action-color: #e3eef3;
   --list-item-link-color: inherit;
@@ -9894,6 +9897,8 @@ body.reset {
   #conversejs .list-group-item.active {
     background-color: var(--primary-color);
     border-color: var(--primary-color-dark); }
+  #conversejs .badge {
+    text-shadow: none; }
   #conversejs .btn-primary, #conversejs .button-primary, #conversejs .badge-primary {
     color: white;
     background-color: var(--primary-color);
@@ -10780,7 +10785,7 @@ body.reset {
     color: var(--controlbox-heading-color);
     font-weight: var(--controlbox-heading-font-weight);
     padding: 0;
-    margin: 0.75em 0;
+    margin: 1em 0 0.5em 0;
     font-size: 1.1em;
     text-transform: uppercase; }
   #conversejs #controlbox .controlbox-section .controlbox-heading__btn {
@@ -11164,13 +11169,10 @@ body.reset {
       margin: 0.75em 0 0.75em 0; }
       #conversejs #converse-roster .roster-contacts .roster-group .group-toggle {
         font-family: var(--heading-font);
-        color: var(--text-color);
         display: block;
         width: 100%;
         padding-top: 0;
         padding-bottom: 0.3rem; }
-        #conversejs #converse-roster .roster-contacts .roster-group .group-toggle:hover {
-          color: var(--roster-group-toggle-hover-color); }
       #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a {
         line-height: var(--line-height); }
         #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a.far, #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a.fas, #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a.fa {
@@ -11232,10 +11234,10 @@ body.reset {
     font-family: var(--heading-font);
     font-weight: var(--list-toggle-font-weight);
     display: block;
-    color: var(--text-color);
+    color: var(--list-toggle-color);
     padding: 0 0 0.5rem 0; }
     #conversejs .list-container .list-toggle:hover {
-      color: var(--list-toggle-color); }
+      color: var(--list-toggle-hover-color); }
 
 #conversejs .items-list {
   text-align: left; }
@@ -11243,22 +11245,26 @@ body.reset {
     border: none;
     clear: both;
     color: var(--text-color);
-    display: block;
-    height: 2em;
     overflow: hidden;
-    padding-top: 0.5em;
+    padding: 0.5em 0;
     text-shadow: 0 1px 0 var(--text-shadow-color);
     word-wrap: break-word; }
     #conversejs .items-list .list-item .list-item-link {
       color: var(--list-item-link-color);
+      margin: auto;
       font-size: var(--font-size);
-      line-height: var(--font-size);
-      padding-right: 0.5em;
       overflow: hidden;
       white-space: nowrap;
-      text-overflow: ellipsis; }
+      text-overflow: ellipsis;
+      vertical-align: baseline; }
       #conversejs .items-list .list-item .list-item-link:hover {
         color: var(--list-item-link-hover-color); }
+    #conversejs .items-list .list-item .list-item-badge {
+      opacity: 1;
+      border-radius: 25%;
+      color: white;
+      font-size: var(--font-size-small);
+      line-height: var(--font-size-small); }
     #conversejs .items-list .list-item .list-item-action {
       opacity: 0;
       font-size: var(--font-size-tiny);
@@ -11300,13 +11306,10 @@ body.reset {
       background-color: var(--controlbox-head-color-lighten-45-percent); }
       #conversejs .items-list .list-item:hover .fa, #conversejs .items-list .list-item:hover .far, #conversejs .items-list .list-item:hover .fas {
         opacity: 1; }
-    #conversejs .items-list .list-item.unread-msgs .msgs-indicator {
-      border-radius: 10%;
-      opacity: 1; }
-    #conversejs .items-list .list-item.unread-msgs .available-room,
-    #conversejs .items-list .list-item.unread-msgs .open-room {
-      width: 100%;
-      font-weight: bold; }
+
+#conversejs.converse-embedded .badge-room-color,
+#conversejs .badge-room-color {
+  background-color: var(--chatroom-head-color); }
 
 #conversejs.converse-embedded .add-chatroom input[type="submit"],
 #conversejs.converse-embedded .add-chatroom input[type="button"],

dist/converse.js

@@ -93107,7 +93107,7 @@ var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./no
 module.exports = function(o) {
 var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
 function print() { __p += __j.call(arguments, '') }
-__p += '<!-- src/templates/group_header.html -->\n<a href="#" class="group-toggle controlbox-padded" title="' +
+__p += '<!-- src/templates/group_header.html -->\n<a href="#" class="list-toggle group-toggle controlbox-padded" title="' +
 __e(o.desc_group_toggle) +
 '">\n    <span class="fa ';
  if (o.toggle_state === o._converse.OPENED) { ;
@@ -94176,9 +94176,9 @@ __p += ' unread-msgs ';
  } ;
 __p += '"\n    data-room-jid="' +
 __e(o.jid) +
-'">\n';
+'">\n\n';
  if (o.num_unread) { ;
-__p += '\n    <span class="msgs-indicator badge badge-info">' +
+__p += '\n    <span class="list-item-badge badge badge-room-color msgs-indicator">' +
 __e( o.num_unread ) +
 '</span>\n';
  } ;
@@ -94267,7 +94267,7 @@ __p += '\n        <a class="controlbox-heading__btn add-contact fa fa-user-plus"
 __e(o.title_add_contact) +
 '"\n           data-toggle="modal"\n           data-target="#add-contact-modal"></a>\n    ';
  } ;
-__p += '\n</div>\n\n<form class="roster-filter-form"></form>\n\n<div class="roster-contacts"></div>\n';
+__p += '\n</div>\n\n<form class="roster-filter-form"></form>\n\n<div class="list-container roster-contacts"></div>\n';
 return __p
 };
 

mockup/user-panel.html

@@ -32,24 +32,25 @@
 
 <div id="chatrooms" class="controlbox-section">
     <div class="d-flex controlbox-padded">
-        <span class="w-100 controlbox-heading">Group Chats</span>
+        <span class="w-100 controlbox-heading">Groupchats</span>
 
         <a class="controlbox-heading__btn show-list-muc-modal fa fa-list-ul" title="Query for groupchats" data-toggle="modal" data-target="#list-chatrooms-modal"></a> 
         <a class="controlbox-heading__btn fa fa-plus" title="Click to add a new room" data-toggle="modal" data-target="#chatroomsModal"></a>
     </div>
     <div class="list-container items-list-container">
-        <div class="items-list">
-            <div class="controlbox-padded list-item available-chatroom d-flex flex-row open">
+        <div class="items-list rooms-list">
+            <div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row open">
                 <a class="list-item-link open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="chatroom.html">Capulet's orchard</a>
-                <!-- <span class="badge badge-info msgs-indicator">1</span> -->
                 <a href="#"
                    class="list-item-action room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
                    data-html="true" data-content="<b>Room Address (JID): </b><br/>public@conference.test.com<br/><b>Discussions: </b><br/>Public discussions<br/><b>Participants: </b>1<br/><b>Features: </b><br/>Non-anonymous">
                    &nbsp;</a>
                 <a href="#" class="list-item-action fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
             </div>
-            <div class="controlbox-padded list-item available-chatroom d-flex flex-row">
-                <a class="list-item-link open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="chatroom.html">Juliet's Balcony</a>
+            <div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row">
+                <span class="list-item-badge badge badge-room-color msgs-indicator">18</span>
+                <a class="list-item-link open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="chatroom.html">
+                    Juliet's Balcony</a>
                 <a href="#"
                    class="list-item-action room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
                     data-html="true" data-content="<b>Room Address (JID): </b><br/>public@conference.test.com<br/><b>Discussions: </b><br/>Public discussions<br/><b>Participants: </b>1<br/><b>Features: </b><br/>Non-anonymous">
@@ -65,17 +66,16 @@
         <span class="w-100 controlbox-heading">Bookmarks</span>
     </div>
     <div class="list-container items-list-container">
-        <div class="items-list">
-            <div class="controlbox-padded list-item available-chatroom d-flex flex-row">
+        <div class="items-list rooms-list">
+            <div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row">
                 <a class="list-item-link open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="chatroom.html">Capulet's orchard</a>
-                <!-- <span class="badge badge-info msgs-indicator">1</span> -->
                 <a href="#"
                    class="list-item-action room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
                    data-html="true" data-content="<b>Room Address (JID): </b><br/>public@conference.test.com<br/><b>Discussions: </b><br/>Public discussions<br/><b>Participants: </b>1<br/><b>Features: </b><br/>Non-anonymous">
                    &nbsp;</a>
                 <a href="#" class="list-item-action fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
             </div>
-            <div class="controlbox-padded list-item available-chatroom d-flex flex-row">
+            <div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row">
                 <a class="list-item-link open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="chatroom.html">Juliet's Balcony</a>
                 <a href="#"
                    class="list-item-action room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
@@ -107,7 +107,7 @@
         </div>
     </form>
 
-    <div class="roster-contacts">
+    <div class="list-container roster-contacts">
         <div class="roster-group" id="xmpp-contact-requests">
             <a href="#" class="group-toggle controlbox-padded " title="Click to hide these contacts">
                 <span class="fa fa-caret-down"></span> Contact Requests</a>
@@ -126,7 +126,7 @@
         </div>
 
         <div class="roster-group" data-group="Colleagues">
-            <a href="#" data-group="Colleagues" class="group-toggle controlbox-padded " title="Click to hide these contacts">
+            <a href="#" data-group="Colleagues" class="list-toggle group-toggle controlbox-padded " title="Click to hide these contacts">
                 <span class="fa fa-caret-down"></span> Colleagues</a>
             <ul class="items-list roster-group-contacts">
                 <li class="list-item controlbox-padded away current-xmpp-contact d-flex">
@@ -143,7 +143,7 @@
         </div>
 
         <div class="roster-group" data-group="Family">
-            <a href="#" data-group="Family" class="group-toggle controlbox-padded " title="Click to hide these contacts">
+            <a href="#" data-group="Family" class="list-toggle group-toggle controlbox-padded" title="Click to hide these contacts">
                 <span class="fa fa-caret-down"></span> Family</a>
             <ul class="items-list roster-group-contacts">
                 <li class="list-item controlbox-padded online current-xmpp-contact d-flex">
@@ -165,7 +165,7 @@
         </div>
 
         <div class="roster-group" data-group="Friends">
-            <a href="#" data-group="Friends" class="group-toggle controlbox-padded " title="Click to hide these contacts">
+            <a href="#" data-group="Friends" class="list-toggle group-toggle controlbox-padded" title="Click to hide these contacts">
                 <span class="fa fa-caret-down"></span> Friends</a>
             <ul class="items-list roster-group-contacts">
                 <li class="list-item controlbox-padded online current-xmpp-contact d-flex">
@@ -177,7 +177,7 @@
         </div>
 
         <div class="roster-group" data-group="Ungrouped">
-            <a href="#" class="group-toggle controlbox-padded " title="Click to hide these contacts">
+            <a href="#" class="list-toggle group-toggle controlbox-padded" title="Click to hide these contacts">
                 <span class="fa fa-caret-down"></span> Ungrouped</a>
             <ul class="items-list roster-group-contacts">
                 <li class="list-item controlbox-padded online current-xmpp-contact d-flex">
@@ -199,7 +199,7 @@
         </div>
 
         <div class="roster-group" id="pending-xmpp-contacts">
-            <a href="#" class="group-toggle controlbox-padded " title="Click to hide these contacts">
+            <a href="#" class="list-toggle group-toggle controlbox-padded" title="Click to hide these contacts">
                 <span class="fa fa-caret-down"></span> Pending Contacts</a>
             <ul class="items-list roster-group-contacts">
                 <li class="list-item controlbox-padded offline pending-xmpp-contact d-flex">

sass/_chatrooms.scss

@@ -1,5 +1,11 @@
 #conversejs.converse-embedded,
 #conversejs {
+
+
+    .badge-room-color {
+        background-color: var(--chatroom-head-color);
+    }
+
     .add-chatroom {
         input[type="submit"],
         input[type="button"] {

sass/_controlbox.scss

@@ -218,7 +218,7 @@
                 color: var(--controlbox-heading-color);
                 font-weight: var(--controlbox-heading-font-weight);
                 padding: 0;
-                margin: 0.75em 0;
+                margin: 1em 0 0.5em 0;
                 font-size: 1.1em;
                 text-transform: uppercase;
             }

sass/_core.scss

@@ -466,6 +466,10 @@ body.reset {
         border-color: var(--primary-color-dark);
     }
 
+    .badge {
+        text-shadow: none;
+    }
+
     .btn-primary, .button-primary, .badge-primary {
         color: white;
         background-color: var(--primary-color);

sass/_lists.scss

@@ -7,10 +7,10 @@
             font-family: var(--heading-font);
             font-weight: var(--list-toggle-font-weight);
             display: block;
-            color: var(--text-color);
+            color: var(--list-toggle-color);
             padding: 0 0 0.5rem 0;
             &:hover {
-                color: var(--list-toggle-color);
+                color: var(--list-toggle-hover-color);
             }
         }
     }
@@ -22,10 +22,8 @@
             border: none;
             clear: both;
             color: var(--text-color);
-            display: block;
-            height: 2em;
             overflow: hidden;
-            padding-top: 0.5em;
+            padding: 0.5em 0;
             text-shadow: 0 1px 0 var(--text-shadow-color);
             word-wrap: break-word;
 
@@ -34,12 +32,20 @@
                 &:hover {
                     color: var(--list-item-link-hover-color);
                 }
+                margin: auto;
                 font-size: var(--font-size);
-                line-height: var(--font-size);
-                padding-right: 0.5em;
                 overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;
+                vertical-align: baseline;
+            }
+
+            .list-item-badge {
+                opacity: 1;
+                border-radius: 25%;
+                color: white;
+                font-size: var(--font-size-small);
+                line-height: var(--font-size-small);
             }
 
             .list-item-action {
@@ -104,17 +110,6 @@
                     opacity: 1;
                 }
             }
-            &.unread-msgs {
-                .msgs-indicator {
-                    border-radius: 10%;
-                    opacity: 1;
-                }
-                .available-room,
-                .open-room {
-                    width: 100%;
-                    font-weight: bold;
-                }
-            }
         }
     }
 }

sass/_roster.scss

@@ -60,11 +60,7 @@
             margin: 0.75em 0 0.75em 0;
 
             .group-toggle {
-                &:hover {
-                    color: var(--roster-group-toggle-hover-color);
-                }
                 font-family: var(--heading-font);
-                color: var(--text-color);
                 display: block;
                 width: 100%;
                 padding-top: 0;

sass/_variables.scss

@@ -39,7 +39,6 @@ $font-path: "webfonts/icomoon/fonts/" !default;
     --send-button-margin: 3px;
 
     --roster-height: 194px;
-    --roster-group-toggle-hover-color: #585B51; // $dark-gray-color
 
     --flyout-padding: 1.2em;
 
@@ -160,8 +159,8 @@ $font-path: "webfonts/icomoon/fonts/" !default;
     --overlayed-max-chat-textarea-height: 200px;
     --overlayed-badge-color: #818479; // $gray-color
 
-    --list-toggle-color: #585B51; // $dark-gray-color
-    --list-toggle-hover-color: #818479; // $gray-color
+    --list-toggle-color: #818479; // $gray-color
+    --list-toggle-hover-color: #585B51; // $dark-gray-color
     --list-toggle-font-weight: normal;
     --list-item-action-color: #e3eef3; // lighten($lightest-blue, 25%)
     --list-item-link-color: inherit;

sass/font-awesome.scss

@@ -70,3 +70,10 @@
 @import "@fortawesome/fontawesome-free/scss/stacked";
 @import "@fortawesome/fontawesome-free/scss/icons";
 @import "@fortawesome/fontawesome-free/scss/screen-reader";
+
+/* Apparent font-awesome bug? The circle has some kind of bottom margin */
+#conversejs {
+    .fa-info-circle {
+        height: 1em;
+    }
+}

src/templates/group_header.html

@@ -1,4 +1,4 @@
-<a href="#" class="group-toggle controlbox-padded" title="{{{o.desc_group_toggle}}}">
+<a href="#" class="list-toggle 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="items-list roster-group-contacts {[ if (o.toggle_state === o._converse.CLOSED) { ]} collapsed {[ } ]}"></ul>

src/templates/rooms_list_item.html

@@ -2,8 +2,9 @@
     {[ if (o.currently_open) { ]} open {[ } ]}
     {[ 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>
+    <span class="list-item-badge badge badge-room-color msgs-indicator">{{{ o.num_unread }}}</span>
 {[ } ]}
 <a class="list-item-link open-room available-room w-100"
     data-room-jid="{{{o.jid}}}"

src/templates/roster.html

@@ -11,4 +11,4 @@
 
 <form class="roster-filter-form"></form>
 
-<div class="roster-contacts"></div>
+<div class="list-container roster-contacts"></div>