Update and further style toolbars

css/converse.css

@@ -5396,6 +5396,7 @@ body.reset {
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
     background-clip: padding-box;
+    background-color: white;
     border-top: 1px solid #BBB;
     border: 0;
     margin: 0;
@@ -5445,14 +5446,14 @@ body.reset {
       padding: 0.25em;
       height: 25px;
       display: block;
-      background-color: #50c282;
-      color: white; }
-      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar a,
-      #conversejs .chatbox .sendXMPPMessage .chat-toolbar a {
-        color: white;
-        font-size: 16px;
-        text-decoration: none;
-        text-shadow: none; }
+      border-top: 8px solid #3AA569;
+      background-color: white;
+      color: #3AA569; }
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .fa, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .fa:hover,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .fa,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .fa:hover {
+        color: #3AA569;
+        font-size: 16px; }
       #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
       #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted,
       #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
@@ -5541,9 +5542,6 @@ body.reset {
             #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
             #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
               color: #8f2831; }
-        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
-        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
-          color: white; }
         #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
         #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
         #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
@@ -6363,7 +6361,13 @@ body.reset {
           background-color: #E77051; }
   #converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar,
   #conversejs .chatroom .sendXMPPMessage .chat-toolbar {
-    background-color: #ed957e; }
+    background-color: white;
+    border-top: 8px solid #E77051;
+    color: #E77051; }
+    #converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar .fa, #converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar .fa:hover,
+    #conversejs .chatroom .sendXMPPMessage .chat-toolbar .fa,
+    #conversejs .chatroom .sendXMPPMessage .chat-toolbar .fa:hover {
+      color: #E77051; }
   #converse-embedded-chat .chatroom .sendXMPPMessage .chat-textarea,
   #conversejs .chatroom .sendXMPPMessage .chat-textarea {
     border-bottom-right-radius: 0; }

css/inverse.css

@@ -5446,6 +5446,7 @@ body {
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
     background-clip: padding-box;
+    background-color: white;
     border-top: 1px solid #BBB;
     border: 0;
     margin: 0;
@@ -5495,14 +5496,14 @@ body {
       padding: 0.25em;
       height: 29px;
       display: block;
-      background-color: #50c282;
-      color: white; }
-      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar a,
-      #conversejs .chatbox .sendXMPPMessage .chat-toolbar a {
-        color: white;
-        font-size: 18px;
-        text-decoration: none;
-        text-shadow: none; }
+      border-top: 8px solid #3AA569;
+      background-color: white;
+      color: #3AA569; }
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .fa, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .fa:hover,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .fa,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .fa:hover {
+        color: #3AA569;
+        font-size: 18px; }
       #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
       #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted,
       #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
@@ -5591,9 +5592,6 @@ body {
             #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
             #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
               color: #8f2831; }
-        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
-        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
-          color: white; }
         #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
         #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
         #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
@@ -6480,7 +6478,13 @@ body {
           background-color: #E77051; }
   #converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar,
   #conversejs .chatroom .sendXMPPMessage .chat-toolbar {
-    background-color: #ed957e; }
+    background-color: white;
+    border-top: 8px solid #E77051;
+    color: #E77051; }
+    #converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar .fa, #converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar .fa:hover,
+    #conversejs .chatroom .sendXMPPMessage .chat-toolbar .fa,
+    #conversejs .chatroom .sendXMPPMessage .chat-toolbar .fa:hover {
+      color: #E77051; }
   #converse-embedded-chat .chatroom .sendXMPPMessage .chat-textarea,
   #conversejs .chatroom .sendXMPPMessage .chat-textarea {
     border-bottom-right-radius: 0; }

mockup/chatroom.html

@@ -23,11 +23,11 @@
             <div class="chatbox chatroom col-xl-10 col-md-9" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392">
                 <div class="flyout box-flyout">
                     <div class="chat-head chat-head-chatroom row no-gutters">
-                        <div class="col-sm-10 col-lg-10">
+                        <div class="col">
                             <div class="chat-title">Chatroom with a very long name</div>
                             <p class="chatroom-topic">May the force be with you</p>
                         </div>
-                        <div class="col-sm-2 col-lg-2">
+                        <div class="col-sm-3 col-lg-2">
                             <div class="chatbox-buttons row no-gutters">
                                 <a class="chatbox-btn fa fa-minus"></a>
                                 <a class="chatbox-btn fa fa-close"></a>
@@ -80,7 +80,7 @@
                                     <ul class="chat-toolbar no-text-select">
                                         <li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
                                         <li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
-                                        <li class="toggle-clear"><a class="fa fa-times" title="Clear all messages"></a></li>
+                                        <li class="toggle-clear"><a class="fa fa-eraser" title="Clear all messages"></a></li>
                                     </ul>
                                     <textarea class="chat-textarea form-control" placeholder="Message"></textarea>
                                 </form>

sass/_chatbox.scss

@@ -284,6 +284,7 @@
             -webkit-background-clip: padding-box;
             @include border-bottom-radius($chatbox-border-radius);
             background-clip: padding-box;
+            background-color: white;
             border-top: 1px solid #BBB;
             border: 0;
             margin: 0;
@@ -332,13 +333,12 @@
                 padding: 0.25em;
                 height: $toolbar-height;
                 display: block;
-                background-color: lighten($chat-head-color, 10%);
-                color: white;
-                a {
-                    color: white;
+                border-top: 8px solid $chat-head-color;
+                background-color: white;
+                color: $chat-head-color;
+                .fa, .fa:hover {
+                    color: $chat-head-color;
                     font-size: $font-size-large;
-                    text-decoration: none;
-                    text-shadow: none;
                 }
                 .unencrypted a,
                 .unencrypted {
@@ -427,9 +427,6 @@
                             }
                         }
                     }
-                    &.toggle-toolbar-menu {
-                        color: white;
-                    }
                     &.toggle-smiley {
                         .emoji-toolbar {
                             .emoji-category-picker,

sass/_chatrooms.scss

@@ -276,7 +276,12 @@
 
         .sendXMPPMessage {
             .chat-toolbar {
-                background-color: lighten($chatroom-head-color, 10%);
+                background-color: white;
+                border-top: 8px solid $chatroom-head-color;
+                color: $chatroom-head-color;
+                .fa, .fa:hover {
+                    color: $chatroom-head-color;
+                }
             }
             .chat-textarea {
                 border-bottom-right-radius: 0;

src/converse-muc-views.js

@@ -397,7 +397,7 @@
                     'click .toggle-smiley ul.emoji-picker li': 'insertEmoji',
                     'click .toggle-clear': 'clearChatRoomMessages',
                     'click .toggle-call': 'toggleCall',
-                    'click .toggle-occupants a': 'toggleOccupants',
+                    'click .toggle-occupants': 'toggleOccupants',
                     'click .new-msgs-indicator': 'viewUnreadMessages',
                     'click .occupant': 'onOccupantClicked',
                     'keypress .chat-textarea': 'keyPressed',
@@ -545,6 +545,7 @@
                     }
                     this.occupantsview.setOccupantsHeight();
                     this.scrollDown();
+                    this.renderEmojiPicker();
                     if (focus) { this.focus(); }
                 },
 
@@ -563,7 +564,6 @@
                     if (this.model.get('connection_status') === converse.ROOMSTATUS.ENTERED) {
                         this.setChatState(_converse.ACTIVE);
                         this.scrollDown();
-                        this.renderEmojiPicker();
                         this.focus();
                     }
                 },
@@ -599,20 +599,11 @@
                 },
 
                 setOccupantsVisibility () {
+                    const icon_el = this.el.querySelector('.toggle-occupants');
                     if (this.model.get('hidden_occupants')) {
-                        const icon_el = this.el.querySelector('.icon-hide-users');
-                        if (!_.isNull(icon_el)) {
-                            icon_el.classList.remove('icon-hide-users');
-                            icon_el.classList.add('icon-show-users');
-                        }
                         this.el.querySelector('.chat-area').classList.add('full');
                         u.hideElement(this.el.querySelector('.occupants'));
                     } else {
-                        const icon_el = this.el.querySelector('.icon-show-users');
-                        if (!_.isNull(icon_el)) {
-                            icon_el.classList.remove('icon-show-users');
-                            icon_el.classList.add('icon-hide-users');
-                        }
                         this.el.querySelector('.chat-area').classList.remove('full');
                         this.el.querySelector('.occupants').classList.remove('hidden');
                     }

src/templates/chatroom_head.html

-<div class="col-sm-9 col-lg-9">
+<div class="col">
     <div class="chat-title" title="{{{o.jid}}}">
         {[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]}
             <span class="chatroom-name">{{{ o.name }}}</span>
@@ -8,7 +8,7 @@
         <p class="chatroom-description">{{{ o.description }}}<p/>
     </div>
 </div>
-<div class="col-sm-3 col-lg-3">
+<div class="col-sm-3 col-lg-2">
     <div class="chatbox-buttons row no-gutters">
         <a class="chatbox-btn close-chatbox-button fa fa-sign-out" title="{{{o.info_close}}}"></a>
         {[ if (o.affiliation == 'owner') { ]}

src/templates/chatroom_toolbar.html

 {[ if (o.use_emoji)  { ]}
-<li class="toggle-toolbar-menu toggle-smiley">
-    <a class="icon-happy" title="{{{o.label_insert_smiley}}}"></a>
+<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="{{{o.label_insert_smiley}}}"></a>
     <span class="emoji-picker"></span>
 </li>
 {[ } ]}
 {[ if (o.show_call_button)  { ]}
-<li class="toggle-call"><a class="icon-phone" title="{{{o.label_start_call}}}"></a></li>
+<li class="toggle-call fa fa-phone" title="{{{o.label_start_call}}}"></li>
 {[ } ]}
 {[ if (o.show_occupants_toggle)  { ]}
-<li class="toggle-occupants"><a class="icon-hide-users" title="{{{o.label_hide_occupants}}}"></a></li>
+<li class="toggle-occupants fa fa-users" title="{{{o.label_hide_occupants}}}"></li>
 {[ } ]}
 {[ if (o.show_clear_button)  { ]}
-<li class="toggle-clear"><a class="icon-trash" title="{{{o.label_clear}}}"></a></li>
+<li class="toggle-clear fa fa-eraser" title="{{{o.label_clear}}}"></li>
 {[ } ]}
 

src/templates/toolbar.html

 {[ if (o.use_emoji)  { ]}
-<li class="toggle-toolbar-menu toggle-smiley">
-    <a class="icon-happy" title="{{{o.label_insert_smiley}}}"></a>
+<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="{{{o.label_insert_smiley}}}"></a>
     <span class="emoji-picker"></span>
 </li>
 {[ } ]}
 {[ if (o.show_call_button)  { ]}
-<li class="toggle-call"><a class="icon-phone" title="{{{o.label_start_call}}}"></a></li>
+<li class="toggle-call fa fa-phone" title="{{{o.label_start_call}}}"></li>
 {[ } ]}
 {[ if (o.show_clear_button)  { ]}
-<li class="toggle-clear"><a class="icon-remove" title="{{{o.label_clear}}}"></a></li>
+<li class="toggle-clear fa fa-eraser" title="{{{o.label_clear}}}"></li>
 {[ } ]}