Conversation subscreens share a header

// FREEBIE

background.html

@@ -42,40 +42,40 @@
     <p> {{ content }}</p>
   </script>
   <script type='text/x-tmpl-mustache' id='conversation'>
-    <div class='panel'>
-      <div class='conversation-header'
-          style='background-color: {{ avatar.color }}'>
-          <div class='header-buttons'>
-            <div class='vertical-align'>
-              <div class='conversation-menu menu'>
-                <button class='hamburger'></button>
-                <ul class='menu-list'>
-                    {{#group}}
-                        <li><a class='view-members'>{{ view-members }}</a></li>
-                        <!-- <li><a class='update-group'>Update group</a></li> -->
-                        <!-- <li><a class='leave-group'>Leave group</a></li> -->
-                    {{/group}}
-                    {{^group}}
-                        <li><a class='end-session'>{{ end-session }}</a></li>
-                        <li><a class='verify-identity'>{{ verify-identity }}</a></li>
-                    {{/group}}
-                    <li><a class='destroy'>{{ destroy }}</a></li>
-                </ul>
-              </div>
+    <div class='conversation-header'
+        style='background-color: {{ avatar.color }}'>
+        <div class='header-buttons'>
+          <div class='vertical-align'>
+            <button class='back hide'></button>
+            <div class='conversation-menu menu'>
+              <button class='hamburger'></button>
+              <ul class='menu-list'>
+                  {{#group}}
+                      <li><a class='view-members'>{{ view-members }}</a></li>
+                      <!-- <li><a class='update-group'>Update group</a></li> -->
+                      <!-- <li><a class='leave-group'>Leave group</a></li> -->
+                  {{/group}}
+                  {{^group}}
+                      <li><a class='end-session'>{{ end-session }}</a></li>
+                      <li><a class='verify-identity'>{{ verify-identity }}</a></li>
+                  {{/group}}
+                  <li><a class='destroy'>{{ destroy }}</a></li>
+              </ul>
             </div>
           </div>
-          <span class='conversation-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>
+        <span class='conversation-title'>
+          {{ #name }}
+            <span class='conversation-name'>{{ name }}</span>
+          {{ /name }}
+          {{ #number }}
+            <span class='conversation-number'>{{ number }}</span>
+          {{ /number }}
+        </span>
+        {{> avatar }}
+    </div>
+    <div class='main panel'>
+      <div class='discussion-container container'>
           <div class='bar-container hide'>
             <div class='bar active progress-bar-striped progress-bar'></div>
           </div>
@@ -191,10 +191,6 @@
       Sorry, your attachment has a type, {{type}}, that is not currently supported.
   </script>
   <script type='text/x-tmpl-mustache' id='message-detail'>
-    <div class='conversation-header'>
-        <button class='back'></button>
-        <span class='conversation-title'>{{ title }}</span>
-    </div>
     <div class='container'>
       {{ #hasRetry }}
         <div class='hasRetry clearfix'>
@@ -235,19 +231,9 @@
     </div>
   </script>
   <script type='text/x-tmpl-mustache' id='group-member-list'>
-    <div class='conversation-header'>
-        <button class='back'></button>
-        <span class='conversation-title'>{{ members }}</span>
-    </div>
-    <div class='container'>
-      <div class='scrollable'></div>
-    </div>
+    <div class='container'></div>
   </script>
   <script type='text/x-tmpl-mustache' id='key-verification'>
-    <div class='conversation-header'>
-        <button class='back'></button>
-        <span class='conversation-title'>{{ verifyIdentity }}</span>
-    </div>
     <div class='container'>
       <p> {{theirIdentity}} </p>
       {{ ^their_key }}

js/models/conversations.js

@@ -366,12 +366,10 @@
         if (this.avatarUrl) {
             return { url: this.avatarUrl, color: color };
         } else if (this.isPrivate()) {
-            var content;
-            if (!title) {
-                content = '#';
-            }
-            var content = title.trim()[0];
-            return { content: content, color: color };
+            return {
+                color: color,
+                content: title ? title.trim()[0] : '#'
+            };
         } else {
             return { url: '/images/group_default.png', color: color };
         }

js/views/conversation_view.js

@@ -95,7 +95,8 @@
             'click .choose-file': 'focusMessageField',
             'loadMore .message-list': 'fetchMessages',
             'focus .send-message': 'focusBottomBar',
-            'blur .send-message': 'unfocusBottomBar'
+            'blur .send-message': 'unfocusBottomBar',
+            'click .back': 'resetPanel'
         },
 
         unfocusBottomBar: function() {
@@ -179,13 +180,16 @@
         },
 
         listenBack: function(view) {
-            this.$('.panel').hide();
-            view.$el.prependTo(this.el);
-            this.listenToOnce(view, 'back', function(e) {
-                view.remove();
-                this.$('.panel').show();
-                this.$el.trigger('force-resize');
-            }.bind(this));
+            this.panel = view;
+            this.$('.main.panel, .menu').hide();
+            this.$('.back').show();
+            view.$el.insertBefore(this.$('.panel'));
+        },
+        resetPanel: function() {
+            this.panel.remove();
+            this.$('.main.panel, .menu').show();
+            this.$('.back').hide();
+            this.$el.trigger('force-resize');
         },
 
         closeMenu: function(e) {
@@ -283,7 +287,7 @@
 
             $bottomBar.outerHeight(
                     this.$messageField.outerHeight() +
-                    $attachmentPreviews.outerHeight() + 10);
+                    $attachmentPreviews.outerHeight() + 12);
 
             this.view.scrollToBottomIfNeeded();
         },

js/views/group_member_list_view.js

@@ -6,7 +6,7 @@
     window.Whisper = window.Whisper || {};
 
     Whisper.GroupMemberList = Whisper.View.extend({
-        className: 'group-member-list',
+        className: 'group-member-list panel',
         templateName: 'group-member-list',
         initialize: function() {
             this.render();
@@ -15,7 +15,7 @@
                 className: 'members'
             });
             this.member_list_view.render();
-            this.$('.scrollable').append(this.member_list_view.el);
+            this.$('.container').append(this.member_list_view.el);
         },
         render_attributes: {
             members: i18n('members')

js/views/key_verification_view.js

@@ -6,7 +6,7 @@
     window.Whisper = window.Whisper || {};
 
     Whisper.KeyVerificationView = Whisper.View.extend({
-        className: 'key-verification',
+        className: 'key-verification panel',
         templateName: 'key-verification',
         events: {
             'click .back': 'goBack'

js/views/message_detail_view.js

@@ -28,7 +28,7 @@
     });
 
     Whisper.MessageDetailView = Whisper.View.extend({
-        className: 'message-detail',
+        className: 'message-detail panel',
         templateName: 'message-detail',
         initialize: function(options) {
             this.view = new Whisper.MessageView({model: this.model});

stylesheets/_conversation.scss

@@ -1,6 +1,6 @@
 .conversation-title {
   display: block;
-  line-height: $header-height;
+  line-height: $button-height;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -20,11 +20,11 @@
   height: 100%;
 
   .panel {
-    height: 100%;
+    height: calc(100% - #{$header-height});
     display: flex;
     flex-direction: column;
 
-    .discussion-container {
+    .container {
       flex-grow: 1;
       position: relative;
 
@@ -45,12 +45,6 @@
   }
 }
 
-.group-member-list,
-.new-group-update,
-.message-detail, .key-verification {
-  height: 100%;
-}
-
 .key-verification {
   background: white;
 
@@ -67,16 +61,9 @@
   .placeholder {
     font-weight: bold;
   }
-  .container {
-    height: calc(100% - (#{$header-height} + 5px + 1px + 4px));
-  }
 }
 
 .message-detail {
-  .container {
-    height: calc(100% - (#{$header-height} + 4px));
-  }
-
   .key-conflict-dialogue,
   .hasRetry {
     background: #F3F3A7;
@@ -236,14 +223,8 @@
   font-size: smaller;
 }
 
-.group-member-list {
-  .container {
-    height: calc(100% - #{$header-height});
-  }
- }
-
 .new-group-update {
-  .container { height: calc(100% - #{$header-height} - 85px); }
+  .container { height: calc(100% - #{$button-height} - 85px); }
 }
 
 .private .entry .avatar,
@@ -264,7 +245,7 @@
   margin-right: 3px;
 }
 
-.message-detail,
+.message-container,
 .message-list {
   list-style: none;
 
@@ -559,14 +540,10 @@
     }
   }
 
-  form, input, textarea {
-    height: 100%;
-  }
-
   .send-message {
     display: block;
     width: calc(100% - #{$button-width});
-    min-height: $header-height - 1px;
+    min-height: $button-height - 1px;
     max-height: 100px;
     padding: 10px;
     border: 0;

stylesheets/_global.scss

@@ -40,24 +40,18 @@ body {
 
   h1 {
     margin: 0;
-    line-height: 64px;
+    line-height: $header-height;
     padding-left: 20px;
     font-size: 22px;
     font-weight: normal;
   }
 }
 
-.title-text {
-  height: $header-height;
-  line-height: $header-height;
-  font-family: $roboto-light;
-}
-
 .conversation-header button,
 .title-bar button {
-  width: $header-height;
-  height: $header-height;
-  line-height: $header-height;
+  width: $button-height;
+  height: $button-height;
+  line-height: $button-height;
   padding: 0;
   border: 0;
   outline: 0;
@@ -65,13 +59,11 @@ body {
 
 button { cursor: pointer; }
 
-button.back {
-  float: left;
+.inactive button.back {
   background: url('/images/back.png') no-repeat center center;
-
-  & + .title-text {
-    text-indent: -$header-height;
-  }
+}
+button.back {
+  background: url('/images/back_white.png') no-repeat center center;
 }
 
 ::-webkit-scrollbar {
@@ -91,7 +83,7 @@ button.back {
   height: 0;
 
   .vertical-align {
-    height: 64px;
+    height: $header-height;
     vertical-align: middle;
     display: table-cell;
   }
@@ -106,8 +98,8 @@ button.back {
   float: right;
 
   .hamburger {
-    width: $header-height;
-    height: $header-height;
+    width: $button-height;
+    height: $button-height;
     background: url('/images/menu.png') no-repeat center;
     vertical-align: middle;
 

stylesheets/_index.scss

@@ -26,7 +26,7 @@
 
 .socket-status {
   float: right;
-  line-height: $header-height;
+  line-height: $button-height;
 
   * {
     display: inline;
@@ -55,7 +55,7 @@
 }
 
 .conversation-header {
-  height: 64px;
+  height: $header-height;
   text-align: center;
   color: white;
   background-color: #999999;
@@ -99,8 +99,8 @@ input.search {
 
   button.show-new-conversation {
     float: right;
-    height: $header-height;
-    width: $header-height;
+    height: $button-height;
+    width: $button-height;
     border: 0;
     outline: 0;
     font: 300 36px $roboto;
@@ -113,7 +113,7 @@ input.search {
   }
 
   input.search {
-    height: $header-height;
+    height: $button-height;
     width: 100%;
     padding: 10px;
     border: solid 1px $grey_l;

stylesheets/_variables.scss

@@ -29,7 +29,8 @@ $grey_d: #454545;
 $roboto: Roboto, 'Helvetica Neue', Arial, Helvetica, sans-serif;
 $roboto-light: Roboto-Light, 'Helvetica Neue', Arial, Helvetica, sans-serif;
 
-$header-height: 36px;
+$header-height: 64px;
+$button-height: 36px;
 $header-color: $blue;
 $bubble-border-radius: 20px;
 

stylesheets/manifest.css

@@ -51,11 +51,6 @@ body {
     font-size: 22px;
     font-weight: normal; }
 
-.title-text {
-  height: 36px;
-  line-height: 36px;
-  font-family: Roboto-Light, "Helvetica Neue", Arial, Helvetica, sans-serif; }
-
 .conversation-header button,
 .title-bar button {
   width: 36px;
@@ -68,11 +63,11 @@ body {
 button {
   cursor: pointer; }
 
-button.back {
-  float: left;
+.inactive button.back {
   background: url("/images/back.png") no-repeat center center; }
-  button.back + .title-text {
-    text-indent: -36px; }
+
+button.back {
+  background: url("/images/back_white.png") no-repeat center center; }
 
 ::-webkit-scrollbar {
   width: 10px; }
@@ -642,15 +637,15 @@ input.search {
   background-color: #ffffff;
   height: 100%; }
   .conversation .panel {
-    height: 100%;
+    height: calc(100% - 64px);
     display: flex;
     flex-direction: column; }
-    .conversation .panel .discussion-container {
+    .conversation .panel .container {
       flex-grow: 1;
       position: relative; }
-      .conversation .panel .discussion-container .bar-container {
+      .conversation .panel .container .bar-container {
         height: 5px; }
-      .conversation .panel .discussion-container .message-list {
+      .conversation .panel .container .message-list {
         position: absolute;
         top: 0;
         height: 100%;
@@ -659,11 +654,6 @@ input.search {
         padding: 2em 20px 0;
         overflow-y: auto; }
 
-.group-member-list,
-.new-group-update,
-.message-detail, .key-verification {
-  height: 100%; }
-
 .key-verification {
   background: white; }
   .key-verification p {
@@ -675,11 +665,7 @@ input.search {
     font-family: monospace; }
   .key-verification .placeholder {
     font-weight: bold; }
-  .key-verification .container {
-    height: calc(100% - (36px + 5px + 1px + 4px)); }
 
-.message-detail .container {
-  height: calc(100% - (36px + 4px)); }
 .message-detail .key-conflict-dialogue,
 .message-detail .hasRetry {
   background: #F3F3A7;
@@ -797,9 +783,6 @@ input.search {
 .group-update {
   font-size: smaller; }
 
-.group-member-list .container {
-  height: calc(100% - 36px); }
-
 .new-group-update .container {
   height: calc(100% - 36px - 85px); }
 
@@ -818,14 +801,14 @@ input.search {
   font-size: smaller;
   margin-right: 3px; }
 
-.message-detail,
+.message-container,
 .message-list {
   list-style: none; }
-  .message-detail li,
+  .message-container li,
   .message-list li {
     max-width: 800px;
     margin: 0 auto 16px; }
-    .message-detail li::after,
+    .message-container li::after,
     .message-list li::after {
       visibility: hidden;
       display: block;
@@ -833,7 +816,7 @@ input.search {
       content: " ";
       clear: both;
       height: 0; }
-  .message-detail .bubble,
+  .message-container .bubble,
   .message-list .bubble {
     position: relative;
     left: -2px;
@@ -846,56 +829,56 @@ input.search {
     margin-left: 8px;
     max-width: 30em; }
     @media (max-width: 899px) {
-      .message-detail .bubble,
+      .message-container .bubble,
       .message-list .bubble {
         max-width: calc(100% - 45px); } }
-    .message-detail .bubble .content,
+    .message-container .bubble .content,
     .message-list .bubble .content {
       -webkit-user-select: text;
       white-space: pre-wrap; }
-      .message-detail .bubble .content a,
+      .message-container .bubble .content a,
       .message-list .bubble .content a {
         word-break: break-all; }
-    .message-detail .bubble p,
+    .message-container .bubble p,
     .message-list .bubble p {
       margin: 0; }
-  .message-detail .meta,
+  .message-container .meta,
   .message-list .meta {
     margin-top: 3px;
     float: right;
     cursor: pointer; }
-    .message-detail .meta .timestamp, .message-detail .meta .status,
+    .message-container .meta .timestamp, .message-container .meta .status,
     .message-list .meta .timestamp,
     .message-list .meta .status {
       opacity: 0.5; }
-    .message-detail .meta:hover .timestamp, .message-detail .meta:hover .status,
+    .message-container .meta:hover .timestamp, .message-container .meta:hover .status,
     .message-list .meta:hover .timestamp,
     .message-list .meta:hover .status {
       opacity: 1.0; }
-    .message-detail .meta:hover .timestamp,
+    .message-container .meta:hover .timestamp,
     .message-list .meta:hover .timestamp {
       text-decoration: underline; }
-  .message-detail .status,
+  .message-container .status,
   .message-list .status {
     float: right;
     width: 18px;
     height: 1em; }
-  .message-detail .sent .status,
+  .message-container .sent .status,
   .message-list .sent .status {
     display: inline-block;
     background: url("/images/check-white.png"); }
-  .message-detail .delivered .status,
+  .message-container .delivered .status,
   .message-list .delivered .status {
     display: inline-block;
     background: url("/images/double-check-white.png"); }
-  .message-detail .pending .status,
+  .message-container .pending .status,
   .message-list .pending .status {
     display: inline-block;
     background: none; }
-    .message-detail .pending .status:before,
+    .message-container .pending .status:before,
     .message-list .pending .status:before {
       content: '...'; }
-  .message-detail .error .status,
+  .message-container .error .status,
   .message-list .error .status {
     position: relative;
     display: inline-block;
@@ -904,102 +887,102 @@ input.search {
     opacity: 1 !important;
     background: url("/images/error_red.png") no-repeat;
     cursor: pointer; }
-  .message-detail .incoming .avatar, .message-detail .incoming .bubble,
+  .message-container .incoming .avatar, .message-container .incoming .bubble,
   .message-list .incoming .avatar,
   .message-list .incoming .bubble {
     float: left; }
-  .message-detail .incoming .bubble,
+  .message-container .incoming .bubble,
   .message-list .incoming .bubble {
     color: #454545;
     background-color: #f3f3f3; }
-    .message-detail .incoming .bubble::before,
+    .message-container .incoming .bubble::before,
     .message-list .incoming .bubble::before {
       left: -10px;
       border-right: 10px solid white; }
-    .message-detail .incoming .bubble::after,
+    .message-container .incoming .bubble::after,
     .message-list .incoming .bubble::after {
       left: -8px;
       border-right: 8px solid #f3f3f3; }
-  .message-detail .outgoing .avatar, .message-detail .outgoing .bubble,
+  .message-container .outgoing .avatar, .message-container .outgoing .bubble,
   .message-list .outgoing .avatar,
   .message-list .outgoing .bubble {
     float: right; }
-  .message-detail .outgoing .bubble,
+  .message-container .outgoing .bubble,
   .message-list .outgoing .bubble {
     clear: left;
     color: white;
     background-color: #2090ea; }
-    .message-detail .outgoing .bubble .meta,
+    .message-container .outgoing .bubble .meta,
     .message-list .outgoing .bubble .meta {
       color: white; }
-    .message-detail .outgoing .bubble::before,
+    .message-container .outgoing .bubble::before,
     .message-list .outgoing .bubble::before {
       right: -10px;
       border-left: 10px solid white; }
-    .message-detail .outgoing .bubble::after,
+    .message-container .outgoing .bubble::after,
     .message-list .outgoing .bubble::after {
       right: -8px;
       border-left: 8px solid #2090ea; }
-    .message-detail .outgoing .bubble .attachments a, .message-detail .outgoing .bubble .content a,
+    .message-container .outgoing .bubble .attachments a, .message-container .outgoing .bubble .content a,
     .message-list .outgoing .bubble .attachments a,
     .message-list .outgoing .bubble .content a {
       color: #f3f3f3; }
-    .message-detail .outgoing .bubble .content::selection, .message-detail .outgoing .bubble .content a::selection,
+    .message-container .outgoing .bubble .content::selection, .message-container .outgoing .bubble .content a::selection,
     .message-list .outgoing .bubble .content::selection,
     .message-list .outgoing .bubble .content a::selection {
       color: #454545;
       background: white; }
-    .message-detail .outgoing .bubble .content::-moz-selection, .message-detail .outgoing .bubble .content a::-moz-selection,
+    .message-container .outgoing .bubble .content::-moz-selection, .message-container .outgoing .bubble .content a::-moz-selection,
     .message-list .outgoing .bubble .content::-moz-selection,
     .message-list .outgoing .bubble .content a::-moz-selection {
       color: #454545;
       background: white; }
-  .message-detail .control .bubble .content,
+  .message-container .control .bubble .content,
   .message-list .control .bubble .content {
     font-style: italic; }
-  .message-detail .control .bubble::before, .message-detail .control .bubble::after,
+  .message-container .control .bubble::before, .message-container .control .bubble::after,
   .message-list .control .bubble::before,
   .message-list .control .bubble::after {
     display: none; }
-  .message-detail .attachments a,
+  .message-container .attachments a,
   .message-list .attachments a {
     font-style: italic;
     display: block;
     padding: 1em;
     background-color: #ccc; }
-  .message-detail .attachments img, .message-detail .attachments audio, .message-detail .attachments video,
+  .message-container .attachments img, .message-container .attachments audio, .message-container .attachments video,
   .message-list .attachments img,
   .message-list .attachments audio,
   .message-list .attachments video {
     max-width: 100%;
     max-height: 300px; }
-  .message-detail .attachments video,
+  .message-container .attachments video,
   .message-list .attachments video {
     background: black;
     min-height: 300px; }
-  .message-detail .attachments img,
+  .message-container .attachments img,
   .message-list .attachments img {
     cursor: pointer; }
-  .message-detail .outgoing .avatar,
+  .message-container .outgoing .avatar,
   .message-list .outgoing .avatar {
     display: none; }
-  .message-detail .avatar,
+  .message-container .avatar,
   .message-list .avatar {
     height: 36px;
     width: 36px;
     line-height: 36px; }
-  .message-detail .end-session,
+  .message-container .end-session,
   .message-list .end-session {
     font: small;
     font-style: italic;
     opacity: 0.8; }
-  .message-detail .bubble .error-message,
+  .message-container .bubble .error-message,
   .message-list .bubble .error-message {
     font-style: italic; }
-  .message-detail .key-conflict,
+  .message-container .key-conflict,
   .message-list .key-conflict {
     padding: 15px 10px; }
-    .message-detail .key-conflict button,
+    .message-container .key-conflict button,
     .message-list .key-conflict button {
       margin-top: 5px; }
 
@@ -1050,8 +1033,6 @@ input.search {
     cursor: pointer; }
     .bottom-bar .send-btn::before {
       content: '+'; }
-  .bottom-bar form, .bottom-bar input, .bottom-bar textarea {
-    height: 100%; }
   .bottom-bar .send-message {
     display: block;
     width: calc(100% - 36px);