Restyle conversation panel

// FREEBIE

background.html

@@ -38,9 +38,10 @@
   </script>
   <script type='text/x-tmpl-mustache' id='conversation'>
     <div class='panel'>
-      <div class='conversation-header'>
+      <div class='conversation-header'
+          style='background-color: {{ avatar.color }}'>
           <div class='conversation-menu menu'>
-            <button class='drop-down'></button>
+            <button class='hamburger'></button>
             <ul class='menu-list'>
                 {{#group}}
                     <li><a class='view-members'>{{ view-members }}</a></li>
@@ -54,13 +55,15 @@
                 <li><a class='destroy'>{{ destroy }}</a></li>
             </ul>
           </div>
-          {{> avatar }}
           <span class='conversation-title'>
-            {{ title }}
+            {{ #name }}
+              <span class='conversation-name'>{{ name }}</span>
+            {{ /name }}
             {{ #number }}
               <span class='conversation-number'>{{ number }}</span>
             {{ /number }}
           </span>
+          {{> avatar }}
       </div>
 
       <div class='discussion-container'></div>

js/models/conversations.js

@@ -287,6 +287,14 @@
         }.bind(this));
     },
 
+    getName: function() {
+        if (this.isPrivate()) {
+            return this.get('name');
+        } else {
+            return this.get('name') || 'Unknown group';
+        }
+    },
+
     getTitle: function() {
         if (this.isPrivate()) {
             return this.get('name') || this.getNumber();
@@ -338,25 +346,27 @@
             this.trigger('change');
         }
     },
-
     getAvatar: function() {
         if (this.avatarUrl === undefined) {
             this.updateAvatarUrl(true);
         }
+
+        var title = this.get('name');
+        var color = '#999999';
+        if (this.isPrivate() && title) {
+            color = COLORS[Math.abs(this.hashCode()) % 15];
+        }
+
         if (this.avatarUrl) {
-            return { url: this.avatarUrl };
+            return { url: this.avatarUrl, color: color };
         } else if (this.isPrivate()) {
-            var title = this.get('name');
             if (!title) {
-                return { content: '#', color: '#999999' };
+                return { content: '#', color: color };
             }
             var initials = title.trim()[0];
-            return {
-                color: COLORS[Math.abs(this.hashCode()) % 15],
-                content: initials
-            };
+            return { content: initials, color: color };
         } else {
-            return { url: '/images/group_default.png', color: 'gray' };
+            return { url: '/images/group_default.png', color: color };
         }
     },
 

js/views/conversation_view.js

@@ -17,7 +17,7 @@
         render_attributes: function() {
             return {
                 group: this.model.get('type') === 'group',
-                title: this.model.getTitle(),
+                name: this.model.getName(),
                 number: this.model.getNumber(),
                 avatar: this.model.getAvatar(),
                 'view-members'    : i18n('members'),
@@ -84,7 +84,7 @@
             'click .update-group': 'newGroupUpdate',
             'click .verify-identity': 'verifyIdentity',
             'click .view-members': 'viewMembers',
-            'click .drop-down': 'toggleMenu',
+            'click .conversation-menu .hamburger': 'toggleMenu',
             'click .openInbox' : 'openInbox',
             'click' : 'onClick',
             'select .message-list .entry': 'messageDetail',
@@ -177,7 +177,7 @@
         },
 
         closeMenu: function(e) {
-            if (e && !$(e.target).hasClass('drop-down')) {
+            if (e && !$(e.target).hasClass('hamburger')) {
                 this.$('.menu-list').hide();
             }
         },
@@ -271,7 +271,7 @@
 
             $bottomBar.outerHeight(
                     this.$messageField.outerHeight() +
-                    $attachmentPreviews.outerHeight() + 1);
+                    $attachmentPreviews.outerHeight() + 10);
 
             this.view.scrollToBottomIfNeeded();
         },

js/views/inbox_view.js

@@ -110,7 +110,7 @@
         },
         events: {
             'click': 'closeMenu',
-            'click .hamburger': 'toggleMenu',
+            'click .global-menu .hamburger': 'toggleMenu',
             'click .show-debug-log': 'showDebugLog',
             'click .settings': 'showSettings',
             'select .gutter .conversation-list-item': 'openConversation',

stylesheets/_conversation.scss

@@ -4,27 +4,21 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  padding-left: 10px;
+  padding: 0 10px;
   -webkit-user-select: text;
 }
-.conversation-number {
-  padding-left: 5px;
-  line-height: 1em;
-  font-size: small;
-  color: #999;
+.conversation-name + .conversation-number {
+  &:before {
+    content:"\00b7"; // &middot
+    font-weight: bold;
+    padding: 0 5px 0 4px;
+  }
 }
 
 .conversation {
-  max-width: 950px;
   background-color: #ffffff;
-  padding: 20px 20px 10px;
-  border-radius: 10px;
   height: 100%;
 
-  ::-webkit-scrollbar-thumb {
-    background: rgba(0,0,0,0.15);
-  }
-
   .panel {
     height: 100%;
     display: flex;
@@ -43,10 +37,6 @@
         padding: 2em 8px 0;
         overflow-y: auto;
 
-        @media(min-width: $big-avatar-min-width) {
-          padding-left: 70px;
-        }
-
         &:before {
           display: block;
           margin: -25px auto 10px;
@@ -286,7 +276,7 @@
 
   li {
     max-width: 800px;
-    margin: 0 8px 16px;
+    margin: 0 auto 16px;
 
     &::after {
       visibility: hidden;
@@ -506,10 +496,13 @@
 
 .bottom-bar {
   $button-width: 36px;
-  margin-top: 4px;
-  height: 36px;
-  border-top: 1px solid $grey_l;
-  background: white;
+  padding: 5px;
+  height: 50px;
+  background: $grey_l;
+
+  form.send {
+    background: #ffffff;
+  }
 
   button, input, textarea {
     color: $grey_d;

stylesheets/_global.scss

@@ -91,7 +91,6 @@ button.back {
 .menu {
   position: relative;
   float: right;
-  height: 36px;
 
   .hamburger {
     width: $header-height;
@@ -102,7 +101,7 @@ button.back {
     display: none;
     position: absolute;
     color: $grey_d;
-    z-index: 1;
+    z-index: 50;
 
     top: 100%;
     right: 0;
@@ -132,7 +131,6 @@ button.back {
 
 .file-input {
   position: relative;
-  margin-right: 10px;
   box-sizing: content-box;
   border: 1px transparent solid;
   .choose-file {
@@ -464,7 +462,7 @@ $avatar-size: 44px;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.3);
   padding: 0 20px;
-  z-index: 10;
+  z-index: 100;
 
   .content {
     position: relative;

stylesheets/_index.scss

@@ -62,23 +62,18 @@
 }
 
 .conversation-header {
-  border-bottom: solid 1px $grey_l2;
-  margin-bottom: 4px;
-  padding-bottom: 5px;
+  height: 64px;
+  text-align: center;
+  color: white;
+
   .avatar {
-    float: left;
-    width: 36px;
-    height: 36px;
-    line-height: 36px;
-  }
-  @media(min-width: $big-avatar-min-width) {
-    .avatar {
-      width: 70px;
-      height: 70px;
-      line-height: 70px;
-      margin-bottom: -60px;
-      position: relative;
-    }
+    margin-bottom: -30px;
+    border: solid 2px white;
+    z-index: 10;
+    width: 48px;
+    height: 48px;
+    line-height: 44px;
+    position: relative;
   }
 }
 .menu.conversation-menu {
@@ -128,6 +123,10 @@ input.search {
     width: 100%;
     padding: 10px;
     border: solid 1px $grey_l;
+
+    &.active {
+      outline: solid 1px $blue;
+    }
   }
 }
 
@@ -135,6 +134,7 @@ input.search {
   font-size: smaller;
   float: right;
   margin: 0 10px;
+  color: $grey;
 }
 
 .new-contact {
@@ -165,14 +165,13 @@ input.search {
     margin: 6px 0;
     font-size: small;
     font-weight: 300;
-    color: $grey;
   }
 
   .gutter .timestamp {
     position: absolute;
     top: 14px;
     right: 12px;
-    color: #888;
+    color: $grey;
   }
 
 }

stylesheets/manifest.css

@@ -83,8 +83,7 @@ button.back {
 
 .menu {
   position: relative;
-  float: right;
-  height: 36px; }
+  float: right; }
   .menu .hamburger {
     width: 36px;
     height: 36px;
@@ -93,7 +92,7 @@ button.back {
     display: none;
     position: absolute;
     color: #454545;
-    z-index: 1;
+    z-index: 50;
     top: 100%;
     right: 0;
     margin: 0;
@@ -113,7 +112,6 @@ button.back {
 
 .file-input {
   position: relative;
-  margin-right: 10px;
   box-sizing: content-box;
   border: 1px transparent solid; }
   .file-input .choose-file {
@@ -364,7 +362,7 @@ img.emoji {
   width: 100%;
   background-color: rgba(0, 0, 0, 0.3);
   padding: 0 20px;
-  z-index: 10; }
+  z-index: 100; }
   .modal .content {
     position: relative;
     max-width: 350px;
@@ -439,21 +437,17 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
     display: block; }
 
 .conversation-header {
-  border-bottom: solid 1px #d9d9d9;
-  margin-bottom: 4px;
-  padding-bottom: 5px; }
+  height: 64px;
+  text-align: center;
+  color: white; }
   .conversation-header .avatar {
-    float: left;
-    width: 36px;
-    height: 36px;
-    line-height: 36px; }
-  @media (min-width: 900px) {
-    .conversation-header .avatar {
-      width: 70px;
-      height: 70px;
-      line-height: 70px;
-      margin-bottom: -60px;
-      position: relative; } }
+    margin-bottom: -30px;
+    border: solid 2px white;
+    z-index: 10;
+    width: 48px;
+    height: 48px;
+    line-height: 44px;
+    position: relative; }
 
 .menu.conversation-menu button.drop-down {
   background: url("/images/arrow_drop_down.png") no-repeat center; }
@@ -491,11 +485,14 @@ input.search {
     width: 100%;
     padding: 10px;
     border: solid 1px #f3f3f3; }
+    .tool-bar input.search.active {
+      outline: solid 1px #2090ea; }
 
 .last-timestamp {
   font-size: smaller;
   float: right;
-  margin: 0 10px; }
+  margin: 0 10px;
+  color: #616161; }
 
 .new-contact {
   display: none;
@@ -517,13 +514,12 @@ input.search {
   .index .last-message {
     margin: 6px 0;
     font-size: small;
-    font-weight: 300;
-    color: #616161; }
+    font-weight: 300; }
   .index .gutter .timestamp {
     position: absolute;
     top: 14px;
     right: 12px;
-    color: #888; }
+    color: #616161; }
 
 .conversations .unread .contact-details .name,
 .conversations .unread .contact-details .last-message,
@@ -595,23 +591,17 @@ input.search {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  padding-left: 10px;
+  padding: 0 10px;
   -webkit-user-select: text; }
 
-.conversation-number {
-  padding-left: 5px;
-  line-height: 1em;
-  font-size: small;
-  color: #999; }
+.conversation-name + .conversation-number:before {
+  content: "\00b7";
+  font-weight: bold;
+  padding: 0 5px 0 4px; }
 
 .conversation {
-  max-width: 950px;
   background-color: #ffffff;
-  padding: 20px 20px 10px;
-  border-radius: 10px;
   height: 100%; }
-  .conversation ::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.15); }
   .conversation .panel {
     height: 100%;
     display: flex;
@@ -627,9 +617,6 @@ input.search {
         margin: 0;
         padding: 2em 8px 0;
         overflow-y: auto; }
-        @media (min-width: 900px) {
-          .conversation .panel .discussion-container .message-list {
-            padding-left: 70px; } }
         .conversation .panel .discussion-container .message-list:before {
           display: block;
           margin: -25px auto 10px;
@@ -803,7 +790,7 @@ input.search {
   .message-detail li,
   .message-list li {
     max-width: 800px;
-    margin: 0 8px 16px; }
+    margin: 0 auto 16px; }
     .message-detail li::after,
     .message-list li::after {
       visibility: hidden;
@@ -983,10 +970,11 @@ input.search {
       margin-top: 5px; }
 
 .bottom-bar {
-  margin-top: 4px;
-  height: 36px;
-  border-top: 1px solid #f3f3f3;
-  background: white; }
+  padding: 5px;
+  height: 50px;
+  background: #f3f3f3; }
+  .bottom-bar form.send {
+    background: #ffffff; }
   .bottom-bar button, .bottom-bar input, .bottom-bar textarea {
     color: #454545; }
   .bottom-bar button {