From 88b12aa2bf32e47c21010ac966a64b16af39a168 Mon Sep 17 00:00:00 2001
From: Tankred Hase <tankred@whiteout.io>
Date: Wed, 11 Sep 2013 15:19:18 +0200
Subject: [PATCH] styled plain read view

---
 src/css/message-list-desktop.scss |  3 +++
 src/css/message-list.scss         |  2 +-
 src/css/read.scss                 | 40 +++++++++++++++++++++++++++++++
 src/css/style.scss                |  4 ++++
 src/js/controller/message-list.js |  9 ++++++-
 src/tpl/read.html                 | 26 +++++++++++++++-----
 6 files changed, 76 insertions(+), 8 deletions(-)

diff --git a/src/css/message-list-desktop.scss b/src/css/message-list-desktop.scss
index e65933f..a734e2c 100644
--- a/src/css/message-list-desktop.scss
+++ b/src/css/message-list-desktop.scss
@@ -3,6 +3,9 @@
 .left-listing {
     float: left;
     width: 344px;
+    border: 1px;
+    border-right-style:solid;
+    border-color: $grey-text-color;
 }
 
 .right-reader {
diff --git a/src/css/message-list.scss b/src/css/message-list.scss
index 6b49790..99b1052 100644
--- a/src/css/message-list.scss
+++ b/src/css/message-list.scss
@@ -101,7 +101,7 @@
         }
         .sent-date {
             float: right;
-            color: #D8D8D8;
+            color: $grey-text-color;
         }
         .text-preview {
             font-size: 0.875em;
diff --git a/src/css/read.scss b/src/css/read.scss
index a495ac4..cc42936 100644
--- a/src/css/read.scss
+++ b/src/css/read.scss
@@ -2,4 +2,44 @@
 
 .read-message {
     padding: 10px 15px;
+
+    .subject {
+        font-size: 1.5em;
+    }
+
+    .date {
+        color: $grey-text-color;
+        font-size: 0.875em;
+        margin-top: 0.5em;
+        margin-bottom: 1.5em;
+    }
+
+    .address-headers {
+        color: $header-text-color;
+
+        p {
+            line-height: 1.9em;
+        }
+
+        .address {
+            color: $blue-color;
+        }
+    }
+
+    .seperator-line {
+        height: 1px;
+        color: $grey-border-color;
+        background-color: $grey-border-color;
+        border-color: $grey-border-color;
+        margin-top: 1em;
+        margin-bottom: 1.5em;
+    }
+
+    .body {
+        line-height: 1.5em;
+
+        p {
+            margin-bottom: 1em;
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/css/style.scss b/src/css/style.scss
index f978a8a..e09ddbd 100644
--- a/src/css/style.scss
+++ b/src/css/style.scss
@@ -1,6 +1,10 @@
 /* colors */
 
 $default-text-color: #333333;
+$header-text-color: #666666;
+$grey-text-color: #cccccc;
+$grey-border-color: #dddddd;
+
 $blue-color: #00c6ff;
 $lightgrey-color: #f9f9f9;
 $blue-box-shadow-color: #A4A4A4;
diff --git a/src/js/controller/message-list.js b/src/js/controller/message-list.js
index 4a37906..b50cacc 100644
--- a/src/js/controller/message-list.js
+++ b/src/js/controller/message-list.js
@@ -9,6 +9,7 @@ define(function(require) {
         $scope.messageId = $routeParams.messageId;
 
         $scope.select = function(email) {
+            email.bodyDisplayParts = email.body.split('\n');
             $scope.selected = email;
         };
 
@@ -68,11 +69,17 @@ define(function(require) {
             this.to = [{
                 address: 'max.musterman@gmail.com'
             }]; // list of receivers
+            this.cc = [{
+                address: 'hans.wurst@gmail.com'
+            }]; // list of receivers
             this.unread = unread;
             this.displayDate = '23.08.13';
             this.longDisplayDate = 'Wednesday, 23.08.2013 19:23';
             this.subject = "Welcome Max"; // Subject line
-            this.body = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy."; // plaintext body
+            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" +
+                "Best regards\nYour whiteout team"; // plaintext body
         };
 
         var dummys = [new Email(true), new Email(true), new Email(false), new Email(false), new Email(false), new Email(false)];
diff --git a/src/tpl/read.html b/src/tpl/read.html
index dd3da1d..aadf643 100644
--- a/src/tpl/read.html
+++ b/src/tpl/read.html
@@ -1,8 +1,22 @@
 <div class="read-message">
-    <p>{{selected.subject}}</p>
-    <p>{{selected.longDisplayDate}}</p>
-    <p>From: {{selected.from[0].name}}</p>
-    <p>To: <span ng-repeat="t in selected.to">{{t.address}} </span></p>
-    <p>CC: <span ng-repeat="t in selected.cc">{{t.address}} </span></p>
-    <p>{{selected.body}}</p>
+
+  <p class="subject">{{selected.subject}}</p>
+  <p class="date">{{selected.longDisplayDate}}</p>
+
+  <div class="address-headers">
+    <p>From: <span class="address">{{selected.from[0].name}}</span></p>
+    <p>To: <span class="address" 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>
+      </p>
+    </div>
+  </div>
+
+  <div class="seperator-line"></div>
+
+  <div class="body">
+    <p ng-repeat="part in selected.bodyDisplayParts">{{part}}</p>
+  </div>
+
 </div>
\ No newline at end of file