implement attachment ui for writer

src/js/controller/write.js

@@ -183,6 +183,14 @@ define(function(require) {
             }
         };
 
+        //
+        // Editing attachments
+        //
+
+        $scope.remove = function(attachment) {
+            $scope.attachments.splice($scope.attachments.indexOf(attachment), 1);
+        };
+
         //
         // Editing email body
         //
@@ -446,9 +454,9 @@ define(function(require) {
         };
     });
 
-    ngModule.directive('attachment', function() {
+    ngModule.directive('attachmentInput', function() {
         return function(scope, elm) {
-            elm.bind('change', function(e) {
+            elm.on('change', function(e) {
                 for (var i = 0; i < e.target.files.length; i++) {
                     addAttachment(e.target.files.item(i));
                 }
@@ -469,5 +477,13 @@ define(function(require) {
         };
     });
 
+    ngModule.directive('attachmentBtn', function() {
+        return function(scope, elm) {
+            elm.on('click', function() {
+                document.querySelector('#attachment-input').click();
+            });
+        };
+    });
+
     return WriteCtrl;
 });

src/sass/views/_write.scss

@@ -38,7 +38,7 @@
     }
 
     .subject-box {
-        margin: 20px 0;
+        margin: 20px 0 7px 0;
         width: inherit;
         border: 1px;
         border-style: solid;
@@ -56,17 +56,76 @@
             font-weight: bold;
             width: 100%;
         }
+    }
+
+    .attachments-box {
+        position: relative;
+        margin: 0 0 5px 0;
+        width: inherit;
+        border: 1px;
+        border-style: solid;
+        border-color: $color-grey-lighter;
+        min-height: em(44);
+
+        .attachment {
+            line-height: 41px;
+            border-radius: 15px;
+            vertical-align: middle;
+            margin: 5px 0 5px 5px;
+            padding: 5px 5px 5px 10px;
+            border: 1px;
+            border-style: solid;
+            border-color: $color-grey-lighter;
+            cursor: default;
+
+            span {
+                font-size: 14px;
+                color: $color-grey-input;
+                vertical-align: middle;
+            }
+
+            .close {
+                margin-left: 5px;
+
+                &:hover,
+                &:focus {
+                    color: darken($color-grey, 10%);
+                    cursor: pointer;
+                }
+            }
+
+            &:hover,
+            &:focus {
+                background-color: darken($color-white, 2%);
+            }
+        }
+
+        input[type=file] {
+            visibility: hidden;
+            width: 0;
+            height: 0;
+        }
 
         .btn-attachment {
-            float: right;
+            position: absolute;
+            top: 0;
+            right: 0;
             padding: em(7.5) em(7.5) em(4) em(7.5);
             margin: em(5);
             outline: none;
-            //color: $color-grey-lightest;
+            color: $color-grey-lightest;
-            //background-color: $color-blue;
+            background-color: $color-blue;
-            color: $btn-disabled-color;
+
-            background-color: $btn-disabled-back-color;
+            &:hover,
-            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAJUlEQVQIW2NkQABJIPM5lCvJCGMgC4LYIAkUlTAFMB0gjRQaBQCw8go5lVnl5wAAAABJRU5ErkJggg==);
+            &:focus {
+                background-color: lighten($color-blue, 10%);
+            }
+
+            &:active,
+            &.active {
+                top: 1px;
+                right: -1px;
+            }
         }
     }
 

src/tpl/write.html

@@ -25,13 +25,18 @@
         <div class="subject-line">
           <input ng-model="subject" class="subject" spellcheck="true" tabindex="2" placeholder="Subject" ng-change="updatePreview()">
         </div>
-        <button class="btn-attachment">
-          <div data-icon="&#xe003;"></div>
-        </button>
       </div><!--/.subject-box-->
 
       <div class="attachments-box">
-        <input type="file" attachment multiple>
+        <span ng-repeat="attachment in attachments" class="attachment">
+          <span data-icon="&#xe003;"></span>
+          {{attachment.fileName}}
+          <span class="close" data-icon="&#xe000;" ng-click="remove(attachment)"></span>
+        </span><!--/.attachment-->
+        <input id="attachment-input" type="file" multiple attachment-input>
+        <button class="btn-attachment" attachment-btn>
+          <div data-icon="&#xe003;"></div>
+        </button>
       </div><!--/.attachments-box-->
 
       <div class="body" focus-child>