implement read view

Gruntfile.js

@@ -75,11 +75,6 @@ module.exports = function(grunt) {
                 files: {
                     'dist/css/all.css': 'src/sass/all.scss'
                 }
-            },
-            oldSass: {
-                files: {
-                    'dist/css/style.css': 'src/css/style.scss'
-                }
             }
         },
         autoprefixer: {
@@ -107,10 +102,6 @@ module.exports = function(grunt) {
                 files: ['src/sass/**/*.scss'],
                 tasks: ['dist-css']
             },
-            oldSass: {
-                files: ['src/css/**/*.scss'],
-                tasks: ['sass:oldSass']
-            },
             js: {
                 files: ['src/js/**/*.js'],
                 tasks: ['copy:js']
@@ -125,12 +116,6 @@ module.exports = function(grunt) {
             }
         },
         copy: {
-            oldSass: {
-                expand: true,
-                cwd: 'src/css/',
-                src: ['reset.css', 'icons.ttf'],
-                dest: 'dist/css/'
-            },
             npm: {
                 expand: true,
                 flatten: true,

src/js/controller/mail-list.js

@@ -14,6 +14,8 @@ define(function(require) {
         $scope.select = function(email) {
             email.bodyDisplayParts = email.body.split('\n');
             $scope.selected = email;
+            // set selected in parent scope ro it can be displayed in the read view
+            $scope.$parent.selected = $scope.selected;
         };
 
         $scope.write = function(replyTo) {

src/sass/all.scss

@@ -21,3 +21,4 @@
 // Views
 @import "views/navigation";
 @import "views/mail-list";
+@import "views/read";

src/sass/views/_navigation.scss

@@ -21,6 +21,7 @@
                 height: 100px;
                 width: 300px;
                 margin: 0px;
+                padding: 0px;
                 padding-top: 10px;
                 color: #fff;
 

src/sass/views/_read.scss

@@ -0,0 +1,44 @@
+.view-read {
+    padding: 10px 15px;
+    color: $color-grey-dark;
+
+    .headers {
+        p {
+            margin: 0px;
+            padding: 0px;            
+        }
+
+        .subject {
+            font-size: $font-size-bigger;
+        }
+
+        .date {
+            color: $color-grey-light;
+            font-size: $font-size-small;
+            margin-top: 0.5em;
+            margin-bottom: 1.5em;
+            padding: 0px;
+        }
+
+        .address {
+            padding: 0.2em 0;            
+        }
+    }
+
+    .seperator-line {
+        height: 1px;
+        color: $color-grey-lighter;
+        background-color: $color-grey-lighter;
+        margin-top: 1em;
+        margin-bottom: 1.5em;
+    }
+}
+
+.controls {
+    float: right;
+    margin: 10px 15px;
+
+    button {
+        margin-left: 7px;
+    }
+}

src/tpl/read.html

@@ -1,39 +1,29 @@
-<div class="buttons">
-  <div ng-click="write()" class="circle btn-shadow">
-    <div class="icon-new-mail"></div>
-  </div>
+<div class="controls">
+  <button class="btn-icon">&#xe005;</button>
+  <button class="btn-icon">&#xe002;</button>
+  <button ng-click="write()" class="btn-icon">&#xe006;</button>
+</div><!--/.controls-->
 
-  <div class="circle btn-shadow">
-    <div class="icon-reply"></div>
-  </div>
-
-  <div class="circle btn-shadow">
-    <div class="icon-delete"></div>
-  </div>
-</div><!--/.buttons-->
-
-<div class="read-message">
-  <p class="subject">{{selected.subject}}</p>
-  <p class="date">{{selected.longDisplayDate}}</p>
-
-  <div class="address-headers">
-    <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 class="view-read">
+  <div class="headers">
+    <p class="subject">{{selected.subject}}</p>
+    <p class="date">{{selected.longDisplayDate}}</p>
+    <p class="address">From: <span class="label">{{selected.from[0].name || selected.from[0].address}}</span></p>
+    <p class="address">To: <span class="label" 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 address-verified" ng-repeat="t in selected.cc">{{t.address}} </span>
+      <p class="address" ng-switch-when="true">
+        CC: <span class="label" ng-repeat="t in selected.cc">{{t.address}} </span>
       </p>
     </div>
-  </div><!--/.address-headers-->
+  </div><!--/.headers-->
 
   <div class="seperator-line"></div>
 
   <div class="mail-text-body">
     <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 ng-switch="part.length !== 0">
+        <span ng-switch-when="true">{{part}}</span>
       </span>
     </p>
-  </div>
-</div><!--/.read-message-->
+  </div><!--/.mail-text-body-->
+</div><!--/.view-read-->