Retool various sub-screens to fit two-column layout

background.html

@@ -91,10 +91,10 @@
       </div>
   </script>
   <script type='text/x-tmpl-mustache' id='new-group-update-form'>
-      <div class='title-bar' id='header'>
+      <div class='conversation-header'>
         <button class='back'></button>
         <button class='send check'></button>
-        <span class='title-text'>Update group</span>
+        <span class='conversation-title'>Update group</span>
       </div>
       <div class='container'>
         <div class='scrollable'>
@@ -147,9 +147,9 @@
       restrictions. ({{ limit }}kB)
   </script>
   <script type='text/x-tmpl-mustache' id='message-detail'>
-    <div class='title-bar' id='header'>
+    <div class='conversation-header'>
         <button class='back'></button>
-        <span class='title-text'>Message Detail</span>
+        <span class='conversation-title'>Message Detail</span>
     </div>
     <div class='container'>
       <div class='message-container'></div>
@@ -166,18 +166,18 @@
     </div>
   </script>
   <script type='text/x-tmpl-mustache' id='group-member-list'>
-    <div class='title-bar' id='header'>
+    <div class='conversation-header'>
         <button class='back'></button>
-        <span class='title-text'>Members</span>
+        <span class='conversation-title'>Members</span>
     </div>
     <div class='container'>
       <div class='scrollable'></div>
     </div>
   </script>
   <script type='text/x-tmpl-mustache' id='key-verification'>
-    <div class='title-bar' id='header'>
+    <div class='conversation-header'>
         <button class='back'></button>
-        <span class='title-text'>Verify Identity</span>
+        <span class='conversation-title'>Verify Identity</span>
     </div>
     <div class='container'>
       <p> Their identity (they read): </p>
@@ -201,12 +201,12 @@
     </div>
   </script>
   <script type='text/x-tmpl-mustache' id='new-conversation'>
-      <div class='title-bar' id='header'>
+      <div class='conversation-header'>
         <button class='back'></button>
         <button class='create check hide'></button>
-        <span class='title-text'>New Message</span>
+        <span class='conversation-title'>New Message</span>
       </div>
-      <div class='gutter'>
+      <div class='container'>
         <div class='scrollable'>
           <div class='new-group-update-form clearfix'>
             <div class='group-avatar'>

index.html

@@ -4,7 +4,7 @@
         <meta charset='utf-8'>
         <meta content='width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0' name='viewport'>
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <title>Inbox - Signal</title>
+        <title>Signal</title>
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link href='/images/icon_128.png' rel='shortcut icon'>

js/views/inbox_view.js

@@ -87,7 +87,6 @@
                 this.newConversationView = new Whisper.NewConversationView({
                     appWindow: options.appWindow
                 });
-                this.newConversationView.$el.hide();
                 this.listenTo(this.newConversationView, 'open',
                     this.openConversation.bind(this, null));
 
@@ -119,15 +118,12 @@
             },
             showCompose: function() {
                 this.newConversationView.reset();
-                this.$el.hide();
-                this.newConversationView.$el.insertAfter(this.$el);
-                this.newConversationView.$el.show();
+                this.newConversationView.$el.prependTo(this.conversation_stack.el);
                 this.newConversationView.$input.focus();
                 this.listenToOnce(this.newConversationView, 'back', this.hideCompose);
             },
             hideCompose: function() {
-                this.newConversationView.$el.hide();
-                this.$el.show();
+                this.newConversationView.$el.remove();
             }
         });
     });

js/views/new_conversation_view.js

@@ -159,6 +159,7 @@
         },
 
         reset: function() {
+            this.delegateEvents();
             this.$create.hide();
             this.$('.new-group-update-form .name').val('');
             this.$group_update.hide();

stylesheets/_conversation.scss

@@ -1,20 +1,17 @@
+.conversation-title {
+  display: block;
+  line-height: $header-height;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-left: 10px;
+}
+
 .conversation {
   .file-input .close {
     top: -10px;
   }
 
-  .conversation-title {
-    display: block;
-    line-height: $header-height;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  #header {
-    position: inherit;
-  }
-
   .discussion-container {
     height: calc(100% - 2 * #{$header-height});
   }
@@ -26,7 +23,6 @@
 }
 
 .key-verification {
-  padding: $header-height 0 0;
   .container {
     height: 100%;
     overflow: auto;
@@ -41,7 +37,6 @@
 }
 
 .message-detail {
-  padding: $header-height 0 0;
   background: $grey_l;
 
   .container {
@@ -97,25 +92,16 @@
   font-size: smaller;
 }
 
-.group-member-list {
+.group-member-list,
+.new-group-update-form {
   height: 100%;
 
-  #header {
-    position: inherit;
-  }
-
   .container {
     height: calc(100% - #{$header-height});
   }
  }
-.new-group-update-form {
-  .container {
-    height: 100%;
-    padding-top: $header-height;
-  }
-  .scrollable {
-    padding: 0.5em;
-  }
+.new-group-update-form .scrollable {
+  padding: 0.5em;
 }
 
 .private .sender,

stylesheets/_global.scss

@@ -62,6 +62,7 @@ body {
   font-family: $roboto-light;
 }
 
+.conversation-header button,
 .title-bar button {
   width: $header-height;
   height: $header-height;
@@ -258,7 +259,7 @@ $avatar-size: 44px;
   }
 }
 
-.title-bar .check {
+.conversation-header .check {
   float: right;
   background: url('/images/check.png') no-repeat center center;
 }
@@ -299,6 +300,8 @@ $avatar-size: 44px;
     margin: 0;
     font-size: 1em;
     font-weight: 400;
+    text-overflow: ellipsis;
+    overflow-x: hidden;
   }
 
 }

stylesheets/_index.scss

@@ -110,9 +110,6 @@ input.search {
   font-size: smaller;
 }
 
-.new-conversation {
-}
-
 .new-contact {
   display: none;
   .contact-name { display: none; }

stylesheets/manifest.css

@@ -64,6 +64,7 @@ body {
   line-height: 36px;
   font-family: Roboto-Light, "Helvetica Neue", Arial, Helvetica, sans-serif; }
 
+.conversation-header button,
 .title-bar button {
   width: 36px;
   height: 36px;
@@ -216,7 +217,7 @@ img.emoji {
     background: white;
     cursor: auto; }
 
-.title-bar .check {
+.conversation-header .check {
   float: right;
   background: url("/images/check.png") no-repeat center center; }
 
@@ -244,7 +245,9 @@ img.emoji {
   .contact .contact-name {
     margin: 0;
     font-size: 1em;
-    font-weight: 400; }
+    font-weight: 400;
+    text-overflow: ellipsis;
+    overflow-x: hidden; }
 
 .recipients-input .recipients-container {
   background-color: white;
@@ -449,16 +452,16 @@ input.search {
 .conversations .unread .contact-details .last-timestamp {
   font-weight: bold; }
 
-.conversation .file-input .close {
-  top: -10px; }
-.conversation .conversation-title {
+.conversation-title {
   display: block;
   line-height: 36px;
   white-space: nowrap;
   overflow: hidden;
-  text-overflow: ellipsis; }
-.conversation #header {
-  position: inherit; }
+  text-overflow: ellipsis;
+  padding-left: 10px; }
+
+.conversation .file-input .close {
+  top: -10px; }
 .conversation .discussion-container {
   height: calc(100% - 2 * 36px); }
 
@@ -466,19 +469,16 @@ input.search {
 .conversation, .message-list, .message-detail, .key-verification {
   height: 100%; }
 
-.key-verification {
-  padding: 36px 0 0; }
-  .key-verification .container {
-    height: 100%;
-    overflow: auto; }
-  .key-verification p {
-    padding: 1em; }
-  .key-verification .key {
-    font-family: monospace;
-    padding: 0 1em; }
+.key-verification .container {
+  height: 100%;
+  overflow: auto; }
+.key-verification p {
+  padding: 1em; }
+.key-verification .key {
+  font-family: monospace;
+  padding: 0 1em; }
 
 .message-detail {
-  padding: 36px 0 0;
   background: #f3f3f3; }
   .message-detail .container {
     height: 100%;
@@ -516,16 +516,13 @@ input.search {
 .group-update {
   font-size: smaller; }
 
-.group-member-list {
+.group-member-list,
+.new-group-update-form {
   height: 100%; }
-  .group-member-list #header {
-    position: inherit; }
-  .group-member-list .container {
+  .group-member-list .container,
+  .new-group-update-form .container {
     height: calc(100% - 36px); }
 
-.new-group-update-form .container {
-  height: 100%;
-  padding-top: 36px; }
 .new-group-update-form .scrollable {
   padding: 0.5em; }