Initial updates to the chat head look.

- Round buttons
- Make the head taller
- Wrap name
- Add "view" button for viewing vcard data (needs JS code still).

converse.js

@@ -1253,6 +1253,9 @@
                     .html(converse.templates.chatbox(
                             _.extend(this.model.toJSON(), {
                                     show_toolbar: converse.show_toolbar,
+                                    info_close: __('Close this chat box'),
+                                    info_minimize: __('Minimize this chat box'),
+                                    info_view: __('View more information on this person'),
                                     label_personal_message: __('Personal message')
                                 }
                             )

css/converse.css

@@ -103,6 +103,8 @@
   content: "\2b14"; }
 #conversejs .icon-info:before {
   content: "\2360"; }
+#conversejs .icon-info-2:before {
+  content: "i"; }
 #conversejs .icon-italic:before {
   content: "\e04f"; }
 #conversejs .icon-key-2:before {
@@ -1132,8 +1134,7 @@
     display: block;
     text-align: center;
     width: 100%; }
-  #conversejs a.restore-chat,
+  #conversejs a.restore-chat {
-  #conversejs .chat-title {
     padding: 1px 0 1px 5px;
     color: white;
     line-height: 15px;
@@ -1143,17 +1144,6 @@
     white-space: nowrap; }
   #conversejs a.restore-chat:visited {
     color: white; }
-  #conversejs .user-custom-message,
-  #conversejs .chatroom-topic {
-    color: white;
-    font-size: 80%;
-    font-style: italic;
-    height: 1.3em;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    margin: 0;
-    padding: 1px 0 1px 5px; }
   #conversejs .activated {
     display: block !important; }
   #conversejs .pure-button {
@@ -1215,28 +1205,37 @@
   border-top-right-radius: 4px;
   color: #ffffff;
   font-size: 100%;
-  height: 44px;
+  height: 55px;
   margin: 0;
   padding: 5px;
   position: relative; }
   #conversejs .chat-head .avatar {
+    margin-right: 0.5em;
     border-radius: 50%;
     float: left; }
   #conversejs .chat-head.chat-head-chatbox {
     background-color: #F4A261; }
+  #conversejs .chat-head .user-custom-message {
+    clear: left;
+    color: white;
+    font-size: 80%;
+    font-style: italic;
+    height: 1.3em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin: 0;
+    margin-top: 0.3em; }
 #conversejs .chatbox-btn {
-  border-radius: 4px;
+  border-radius: 50%;
   border: 1px solid white;
   color: white;
   cursor: pointer;
   display: inline-block;
   float: right;
-  font-size: 10px;
+  font-size: 9px;
-  margin: 0 0 0 3px;
+  margin: 0 0.2em;
-  padding-bottom: 4px;
+  padding: 5px;
-  padding-left: 4px;
-  padding-right: 4px;
-  padding-top: 4px;
   text-decoration: none; }
   #conversejs .chatbox-btn:active {
     position: relative;
@@ -1262,19 +1261,22 @@
       #conversejs .chatbox .box-flyout {
         height: 400px;
         width: 100%; } }
-  #conversejs .chatbox .chat-title a {
+  #conversejs .chatbox .chat-title {
     color: white;
-    width: 100%;
+    line-height: 15px;
-    text-overflow: ellipsis;
+    display: block; }
-    white-space: nowrap; }
+    #conversejs .chatbox .chat-title a {
+      color: white;
+      width: 100%;
+      word-wrap: break-word; }
   #conversejs .chatbox .chat-body {
     background-color: white;
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
     border-top: 0;
     height: 289px;
-    height: -webkit-calc(100% - 44px);
+    height: -webkit-calc(100% - 55px);
-    height: calc(100% - 44px); }
+    height: calc(100% - 55px); }
     #conversejs .chatbox .chat-body p {
       color: #818479;
       font-size: 14px;
@@ -1459,7 +1461,7 @@
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     color: white;
-    height: 44px;
+    height: 55px;
     margin: 0;
     padding: 6px 6px 6px 0; }
   #conversejs #controlbox form.search-xmpp-contact {
@@ -1632,8 +1634,8 @@
         color: #818479;
         display: block;
         font-size: 12px;
-        height: 43px;
+        height: 54px;
-        line-height: 43px;
+        line-height: 54px;
         margin: 0;
         text-align: center;
         text-decoration: none; }
@@ -1642,7 +1644,7 @@
         #conversejs #controlbox #controlbox-tabs li a.current, #conversejs #controlbox #controlbox-tabs li a.current:hover {
           box-shadow: none;
           border-bottom: 0;
-          height: 44px;
+          height: 55px;
           cursor: default;
           color: #818479; }
   #conversejs #controlbox .xmpp-status {
@@ -1684,8 +1686,8 @@
     text-align: center;
     width: 100%;
     height: 289px;
-    height: -webkit-calc(100% - 44px);
+    height: -webkit-calc(100% - 55px);
-    height: calc(100% - 44px);
+    height: calc(100% - 55px);
     overflow-y: scroll;
     overflow-x: hidden; }
     #conversejs #controlbox .controlbox-pane label {
@@ -1845,6 +1847,16 @@
 
 #conversejs .chat-head-chatroom {
   background-color: #E76F51; }
+  #conversejs .chat-head-chatroom .chatroom-topic {
+    color: white;
+    font-size: 80%;
+    font-style: italic;
+    height: 1.3em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin: 0;
+    margin-top: 0.3em; }
 #conversejs .chatroom {
   width: 300px; }
   @media screen and (max-width: 480px) {
@@ -1860,8 +1872,8 @@
       height: 289px;
       border-bottom-left-radius: 4px;
       border-bottom-right-radius: 4px;
-      height: -webkit-calc(100% - 44px);
+      height: -webkit-calc(100% - 55px);
-      height: calc(100% - 44px);
+      height: calc(100% - 55px);
       background-color: white;
       border-top: 0;
       display: table;
@@ -1917,8 +1929,8 @@
         color: #818479;
         font-size: 14px;
         height: 289px;
-        height: -webkit-calc(100% - 44px);
+        height: -webkit-calc(100% - 55px);
-        height: calc(100% - 44px);
+        height: calc(100% - 55px);
         overflow-y: auto;
         position: absolute; }
   #conversejs .chatroom .chat-textarea {

mockup/index.html

@@ -247,12 +247,13 @@
             <div class="dragresize dragresize-topleft"></div>
             <div class="dragresize dragresize-left"></div>
             <div class="chat-head chat-head-chatbox">
-                <a class="chatbox-btn close-chatbox-button icon-close"></a>
+                <a class="chatbox-btn close-chatbox-button icon-close" title="Close this chat box"></a>
-                <a class="chatbox-btn toggle-chatbox-button icon-minus"></a>
+                <a class="chatbox-btn toggle-chatbox-button icon-minus" title="Minimize this chat box"></a>
+                <a class="chatbox-btn toggle-chatbox-button icon-eye" title="View more information on this person"></a>
                 <canvas height="31px" width="31px" class="avatar" style="background-color: black"></canvas>
                 <div class="chat-title">
                     <a href="http://opkode.com" target="_blank" class="user">
-                        JC Brand
+                        Jan-Carel Brand
                     </a>
                 </div>
                 <p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>

sass/_chatbox.scss

@@ -15,26 +15,36 @@
         padding: 5px;
         position: relative;
         .avatar {
+            margin-right: 0.5em;
             border-radius: 50%;
             float: left;
         }
         &.chat-head-chatbox {
             background-color: $chat-head-color;
         }
+        .user-custom-message {
+            clear: left;
+            color: white;
+            font-size: 80%;
+            font-style: italic;
+            height: 1.3em;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin: 0;
+            margin-top: 0.3em;
+        }
     }
     .chatbox-btn {
-        border-radius: $chatbox-border-radius;
+        border-radius: 50%;
         border: 1px solid white;
         color: white;
         cursor: pointer;
         display: inline-block;
         float: right;
         font-size: $box-close-font-size;
-        margin: 0 0 0 3px;
+        margin: 0 0.2em;
-        padding-bottom: $box-close-button-padding-bottom;
+        padding: 5px;
-        padding-left: $box-close-button-padding-left;
-        padding-right: $box-close-button-padding-right;
-        padding-top: $box-close-button-padding-top;
         text-decoration: none;
         &:active {
             position: relative;
@@ -64,11 +74,13 @@
             }
         }
         .chat-title {
+            color: $chat-head-text-color;
+            line-height: 15px;
+            display: block;
             a {
                 color: $chat-head-text-color;
                 width: 100%;
-                text-overflow: ellipsis;
+                word-wrap: break-word;
-                white-space: nowrap;
             }
         }
         .chat-body {

sass/_chatrooms.scss

@@ -1,6 +1,18 @@
 #conversejs {
     .chat-head-chatroom {
         background-color: $chatroom-head-color;
+
+        .chatroom-topic {
+            color: white;
+            font-size: 80%;
+            font-style: italic;
+            height: 1.3em;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin: 0;
+            margin-top: 0.3em;
+        }
     }
 
     .chatroom {

sass/_core.scss

@@ -96,8 +96,7 @@
         width: 100%;
     }
 
-    a.restore-chat,
+    a.restore-chat {
-    .chat-title {
         padding: 1px 0 1px 5px;
         color: $chat-head-text-color;
         line-height: 15px;
@@ -111,19 +110,6 @@
         color: $chat-head-text-color;
     }
 
-    .user-custom-message,
-    .chatroom-topic {
-        color: white;
-        font-size: 80%;
-        font-style: italic;
-        height: 1.3em;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        margin: 0;
-        padding: 1px 0 1px 5px;
-    }
-
     .activated {
         display: block !important;
     }

sass/_fonts.scss

@@ -60,6 +60,7 @@
     .icon-home:before               { content: "\e000"; }
     .icon-image:before              { content: "\2b14"; }
     .icon-info:before               { content: "\2360"; }
+    .icon-info-2:before             { content: "i"; }
     .icon-italic:before             { content: "\e04f"; }
     .icon-key-2:before              { content: "\e029"; }
     .icon-key:before                { content: "\e028"; }

sass/_variables.scss

@@ -10,15 +10,16 @@ $text-shadow-color: #FAFAFA !default;
 $text-color: #818479 !default;
 $border-color: #CCC !default;
 $icon-color: #114327 !default;
-$chat-head-color: #F4A261 !default;
-$chat-head-text-color: white !default;
-$chat-head-inverse-text-color: white !default;
-$chat-head-height: 44px !default;
 $save-button-color: #436F64 !default;
 $chat-textarea-height: 70px !default;
 $message-them-color: #1A9707 !default;
 $roster-height: 194px !default;
 
+$chat-head-color: #F4A261 !default;
+$chat-head-text-color: white !default;
+$chat-head-inverse-text-color: white !default;
+$chat-head-height: 55px !default;
+
 $input-focus-color: #1A9707 !default;
 $highlight-color: #DCF9F6 !default;
 
@@ -66,4 +67,4 @@ $box-close-button-padding-top: 4px !default;
 $box-close-button-padding-bottom: 4px !default;
 $box-close-button-padding-left: 4px !default;
 $box-close-button-padding-right: 4px !default;
-$box-close-font-size: 10px !default;
+$box-close-font-size: 9px !default;

src/templates/chatbox.html

@@ -3,8 +3,9 @@
     <div class="dragresize dragresize-topleft"></div>
     <div class="dragresize dragresize-left"></div>
     <div class="chat-head chat-head-chatbox">
-        <a class="chatbox-btn close-chatbox-button icon-close"></a>
+        <a class="chatbox-btn close-chatbox-button icon-close" title="{{info_close}}"></a>
-        <a class="chatbox-btn toggle-chatbox-button icon-minus"></a>
+        <a class="chatbox-btn toggle-chatbox-button icon-minus" title="{{info_minimize}}"></a>
+        <a class="chatbox-btn toggle-chatbox-button icon-eye" title="{{info_view}}"></a>
         <div class="chat-title">
             {[ if (url) { ]}
                 <a href="{{url}}" target="_blank" class="user">