From 74f52ef52c858162acc1195f58845be5db5ece1c Mon Sep 17 00:00:00 2001
From: Tankred Hase <tankred@whiteout.io>
Date: Sat, 14 Sep 2013 18:20:25 +0200
Subject: [PATCH] implement inputs for address headers in write

---
 src/css/global.scss               |  9 ++++-----
 src/css/write.scss                | 14 ++++++++++----
 src/js/controller/message-list.js |  6 +++---
 src/tpl/read.html                 | 13 +++++++++----
 src/tpl/write.html                | 18 ++++++++++++------
 5 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/src/css/global.scss b/src/css/global.scss
index a4dd8fe..d7fb11c 100644
--- a/src/css/global.scss
+++ b/src/css/global.scss
@@ -17,9 +17,12 @@ body, input, button {
 
 .address {
     margin-left: 0.3em;
+    padding: 0.25em 1em;
+}
+
+.address-verified {
     color: $lightgrey-color;
     background-color: $blue-color;
-    padding: 0.25em 1em;
     border-radius: 1em;
     box-shadow: 1px 1px 0px $blue-box-shadow-color;
 }
@@ -38,8 +41,4 @@ body, input, button {
 
 .mail-text-body {
     line-height: 1.5em;
-
-    p {
-        margin-bottom: 1em;
-    }
 }
\ No newline at end of file
diff --git a/src/css/write.scss b/src/css/write.scss
index 881a900..a799398 100644
--- a/src/css/write.scss
+++ b/src/css/write.scss
@@ -9,6 +9,16 @@
         margin-bottom: 20px;
     }
 
+    input {
+        font-size: 1em;
+        border: 0!important;
+        outline: 0px;
+    }
+
+    .address-input {
+        width: 90%;
+    }
+
     .subject-box {
         margin: 20px 0;
         width: inherit;
@@ -25,12 +35,8 @@
         }
 
         .subject {
-            border: 0!important;
             font-weight: bold;
-            font-size: 1em;
             width: 100%;
-            color: $default-text-color;
-            outline: 0px;
         }
 
         .attachment-btn {
diff --git a/src/js/controller/message-list.js b/src/js/controller/message-list.js
index f713128..01b65ce 100644
--- a/src/js/controller/message-list.js
+++ b/src/js/controller/message-list.js
@@ -122,9 +122,9 @@ define(function(require) {
             this.displayDate = '23.08.13';
             this.longDisplayDate = 'Wednesday, 23.08.2013 19:23';
             this.subject = "Welcome Max"; // Subject line
-            this.body = "Hi Max,\n" +
-                "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n" +
-                "Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,\n" +
+            this.body = "Hi Max,\n\n" +
+                "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\n" +
+                "Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.\n\n" +
                 "Best regards\nYour whiteout team"; // plaintext body
         };
 
diff --git a/src/tpl/read.html b/src/tpl/read.html
index 07fe7c2..871120f 100644
--- a/src/tpl/read.html
+++ b/src/tpl/read.html
@@ -17,11 +17,11 @@
   <p class="date">{{selected.longDisplayDate}}</p>
 
   <div class="address-headers">
-    <p>From: <span class="address">{{selected.from[0].name || selected.from[0].address}}</span></p>
-    <p>To: <span class="address" ng-repeat="t in selected.to">{{t.address}} </span></p>
+    <p>From: <span class="address address-verified">{{selected.from[0].name || selected.from[0].address}}</span></p>
+    <p>To: <span class="address address-verified" ng-repeat="t in selected.to">{{t.address}} </span></p>
     <div ng-switch="selected.cc !== undefined">
       <p ng-switch-when="true">
-        CC: <span class="address" ng-repeat="t in selected.cc">{{t.address}} </span>
+        CC: <span class="address address-verified" ng-repeat="t in selected.cc">{{t.address}} </span>
       </p>
     </div>
   </div><!--/.address-headers-->
@@ -29,6 +29,11 @@
   <div class="seperator-line"></div>
 
   <div class="mail-text-body">
-    <p ng-repeat="part in selected.bodyDisplayParts">{{part}}</p>
+    <p ng-repeat="part in selected.bodyDisplayParts track by $index">
+      <span ng-switch="part.length === 0">
+        <span ng-switch-when="true"><br></span>
+        <span ng-switch-when="false">{{part}}</span>
+      </span>
+    </p>
   </div>
 </div><!--/.read-message-->
\ No newline at end of file
diff --git a/src/tpl/write.html b/src/tpl/write.html
index 1f3e2db..28c4a0e 100644
--- a/src/tpl/write.html
+++ b/src/tpl/write.html
@@ -2,13 +2,19 @@
   <p class="title">New Mail</p>
 
   <div class="address-headers">
-    <p>To: <span class="address">Max Musterman</span></p>
-    <p>CC: <span class="address">Alice Example</span> <span class="address">Hans Wurst</span></p>
+    <p>
+      <span>To:</span>
+      <input ng-model="to" class="address-input" tabindex="1">
+    </p>
+    <p>
+      <span>CC:</span>
+      <input ng-model="cc" class="address-input" tabindex="2">
+    </p>
   </div><!--/.address-headers-->
 
   <div class="subject-box">
     <div class="subject-line">
-      <input ng-model="subject" class="subject" spellcheck="true" tabindex="1" placeholder="Subject" ng-change="updatePreview()">
+      <input ng-model="subject" class="subject" spellcheck="true" tabindex="3" placeholder="Subject" ng-change="updatePreview()">
     </div>
     <div class="attachment-btn btn-shadow">
       <div class="icon-attachment"></div>
@@ -16,13 +22,13 @@
   </div><!--/.subject-box-->
 
   <div class="mail-text-body">
-    <p ng-model="body" contentEditable="true" ng-change="updatePreview()" focus-me ></p>
+    <p ng-model="body" contentEditable="true" ng-change="updatePreview()" focus-me tabindex="4"></p>
 
     <div class="encrypt-preview">
       <p>-----BEGIN ENCRYPTED PREVIEW-----<br>{{ciphertextPreview}}<br>-----END ENCRYPTED PREVIEW-----</p>
-      <p>--<br>{{signature}}</p>
+      <p><br>--<br>{{signature}}</p>
     </div><!--/.encrypt-preview-->
   </div><!--/.mail-text-body-->
 
-  <div class="send-btn btn-shadow">Send securely</div>
+  <div class="send-btn btn-shadow" tabindex="5">Send securely</div>
 </div>
\ No newline at end of file