From 60d76476e5b21675d45a84de511a4d57b20790b3 Mon Sep 17 00:00:00 2001
From: Tankred Hase <tankred@whiteout.io>
Date: Thu, 12 Sep 2013 13:36:40 +0200
Subject: [PATCH] started writer

---
 src/css/global.scss               | 26 ++++++++++++++++++
 src/css/read.scss                 | 24 -----------------
 src/css/write.scss                | 45 +++++++++++++++++++++++++++++++
 src/js/controller/message-list.js |  4 +--
 src/tpl/read.html                 |  8 +++---
 src/tpl/write.html                | 25 ++++++++++++++++-
 6 files changed, 101 insertions(+), 31 deletions(-)

diff --git a/src/css/global.scss b/src/css/global.scss
index 7c603e0..1725379 100644
--- a/src/css/global.scss
+++ b/src/css/global.scss
@@ -5,6 +5,14 @@ body {
     color: $default-text-color;
 }
 
+.address-headers {
+    color: $header-text-color;
+
+    p {
+        line-height: 2.2em;
+    }
+}
+
 .address {
     margin-left: 0.3em;
     color: $lightgrey-color;
@@ -12,4 +20,22 @@ body {
     padding: 0.25em 1em;
     border-radius: 1em;
     box-shadow: 1px 1px 0px $blue-box-shadow-color;
+}
+
+.btn-shadow {
+    &:hover {
+        box-shadow: 2px 2px 4px $blue-box-shadow-color;
+    }
+    &:active {
+        box-shadow: none;
+        margin-top: 0.2em;
+    }
+}
+
+.mail-text-body {
+    line-height: 1.5em;
+
+    p {
+        margin-bottom: 1em;
+    }
 }
\ No newline at end of file
diff --git a/src/css/read.scss b/src/css/read.scss
index 565653f..71ce5f1 100644
--- a/src/css/read.scss
+++ b/src/css/read.scss
@@ -14,14 +14,6 @@
         margin-bottom: 1.5em;
     }
 
-    .address-headers {
-        color: $header-text-color;
-
-        p {
-            line-height: 2.2em;
-        }
-    }
-
     .seperator-line {
         height: 1px;
         color: $grey-border-color;
@@ -29,14 +21,6 @@
         margin-top: 1em;
         margin-bottom: 1.5em;
     }
-
-    .body {
-        line-height: 1.5em;
-
-        p {
-            margin-bottom: 1em;
-        }
-    }
 }
 
 .buttons {
@@ -55,14 +39,6 @@
     border-radius: 50%;
     margin-left: 0.5em;
 
-    &:hover {
-        box-shadow: 2px 2px 4px $blue-box-shadow-color;
-    }
-    &:active {
-        box-shadow: none;
-        margin-top: 0.2em;
-    }
-
     div {
         margin: 0.5em;
     }
diff --git a/src/css/write.scss b/src/css/write.scss
index 595b3c3..83c2b42 100644
--- a/src/css/write.scss
+++ b/src/css/write.scss
@@ -1,2 +1,47 @@
 /* write view */
 
+.write-message {
+    padding: 10px 10px;
+
+    .title {
+        text-align: center;
+        font-size: 1.5em;
+        margin-bottom: 20px;
+    }
+
+    .subject-box {
+        margin: 20px 0;
+        width: inherit;
+        border: 1px;
+        border-style: solid;
+        border-color: $grey-border-color;
+        height: 2.625em;
+
+        .subject-line {
+            float: left;
+            padding: 0.813em;
+            color: $header-text-color;
+        }
+
+        .subject {
+            font-weight: bold;
+            color: $default-text-color;
+        }
+
+        .attachment-btn {
+            float: right;
+            padding: 0.5em;
+            margin: 0.3125em;
+            color: $lightgrey-color;
+            background-color: $blue-color;
+        }
+    }
+
+    .body {
+        line-height: 1.5em;
+
+        p {
+            margin-bottom: 1em;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/js/controller/message-list.js b/src/js/controller/message-list.js
index 73508ae..50a2e29 100644
--- a/src/js/controller/message-list.js
+++ b/src/js/controller/message-list.js
@@ -21,14 +21,14 @@ define(function(require) {
             if (window.chrome && chrome.app.window) {
                 chrome.app.window.create(url, {
                     'bounds': {
-                        'width': 800,
+                        'width': 700,
                         'height': 600
                     }
                 });
                 return;
             }
 
-            window.open(url, 'Compose Message', 'toolbar=no,width=800,height=600,left=500,top=200,status=no,scrollbars=no,resize=no');
+            window.open(url, 'Compose Message', 'toolbar=no,width=700,height=600,left=500,top=200,status=no,scrollbars=no,resize=no');
         };
 
         if (window.chrome && window.chrome.identity) {
diff --git a/src/tpl/read.html b/src/tpl/read.html
index 796e883..07fe7c2 100644
--- a/src/tpl/read.html
+++ b/src/tpl/read.html
@@ -1,13 +1,13 @@
 <div class="buttons">
-  <div ng-click="write()" class="circle">
+  <div ng-click="write()" class="circle btn-shadow">
     <div class="icon-new-mail"></div>
   </div>
 
-  <div class="circle">
+  <div class="circle btn-shadow">
     <div class="icon-reply"></div>
   </div>
 
-  <div class="circle">
+  <div class="circle btn-shadow">
     <div class="icon-delete"></div>
   </div>
 </div><!--/.buttons-->
@@ -28,7 +28,7 @@
 
   <div class="seperator-line"></div>
 
-  <div class="body">
+  <div class="mail-text-body">
     <p ng-repeat="part in selected.bodyDisplayParts">{{part}}</p>
   </div>
 </div><!--/.read-message-->
\ No newline at end of file
diff --git a/src/tpl/write.html b/src/tpl/write.html
index ed56825..47ece25 100644
--- a/src/tpl/write.html
+++ b/src/tpl/write.html
@@ -1 +1,24 @@
-<div>test</div>
\ No newline at end of file
+<div class="write-message">
+  <p class="title">New Mail</p>
+
+  <div class="address-headers">
+    <p>To: <span class="address">Max Musterman</span> <span class="address">Alice Example</span></p>
+    <p>CC: <span class="address">Hans Wurst</span></p>
+  </div><!--/.address-headers-->
+
+  <div class="subject-box">
+    <div class="subject-line">Subject: <span class="subject">Important Stuff!</span></div>
+    <div class="attachment-btn btn-shadow">
+      <div class="icon-attachment"></div>
+    </div>
+  </div>
+
+  <div class="mail-text-body">
+    <p>Hi Max,</p>
+    <p>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.</p>
+    <p>Frank</p>
+    <p>--</p>
+    <p>Sent securely from whiteout mail</p>
+  </div>
+
+</div>
\ No newline at end of file