Refactored icons in mail list view and bugfix in search input

src/sass/_variables.scss

@@ -20,7 +20,7 @@ $color-white:                       #fff;
 $color-grey:                        #666;
 $color-grey-input:                  #949494;
 $color-grey-dark:                   #333;
-$color-grey-medium:                 #aaa;
+$color-grey-medium:                 #999;
 $color-grey-light:                  #ccc;
 $color-grey-lighter:                #ddd;
 $color-grey-lighterer:              #f0eff5;

src/sass/components/_input.scss

@@ -20,7 +20,11 @@
     font-size: em(13);
 }
 
-.input-search {
-    width: 93%;
+// need to be more specific than normalize.css
+.input-search,
+input[type="search"].input-search {
+    box-sizing: border-box;
+    width: 100%;
+    border-radius: 0;
     -webkit-appearance: searchfield;
 }

src/sass/components/_mail-list.scss

@@ -6,11 +6,7 @@
     margin: 0;
     padding: 0;
 
-    &:last-child {
-        margin-bottom: 0;
-    }
-
-    li {
+    & > li {
         position: relative;
         display: block;
         margin-bottom: 7px;
@@ -19,6 +15,10 @@
         cursor: pointer;
         transition: background-color $time-li-fade, color $time-li-fade;
 
+        &:last-child {
+            margin-bottom: 0;
+        }
+
         &.ng-animate {
             transition: none;
         }
@@ -67,16 +67,31 @@
                 text-align: right;
                 line-height: 1.5em * ($font-size-small / $font-size-smaller);
             }
-            .flag {
-                width: 1em;
-                height: 1em;
-                border-radius: 50%;
-                box-shadow: inset 1px 1px 1px $color-grey-light;
-                position: absolute;
-                top: 0;
-                left: 0;
-                margin-top: 0.2em;
-                margin-left: -1.3em;
+        }
+        .flags {
+            position: absolute;
+            top: 0;
+            left: 0;
+            list-style: none;
+            margin: 0.8em 0 0;
+            padding: 0;
+            color: $color-grey-medium;
+            width: 30px;
+            line-height: 1.6em;
+            & > li {
+                font-size: 90%;
+                text-align: center;
+
+                &:nth-child(1) {
+                    &:after {
+                        display: inline-block;
+                        content: '';
+                        width: 1em;
+                        height: 1em;
+                        border-radius: 50%;
+                        background-color: $color-blue;
+                    }
+                }
             }
         }
 

src/sass/views/_mail-list.scss

@@ -25,7 +25,14 @@
             font-weight: normal;
             vertical-align: middle;
         }
+        button {
+            float: right;
+            margin-top: -0.05em; // for perfect vertical alignment with headline
 
+            @include respond-to(desktop) {
+                display: none;
+            }
+        }
     }
 
     .search {
@@ -38,10 +45,10 @@
         height: 100%;
         padding: 0 $padding-horizontal;
         overflow-y: hidden;
-    }
 
-    ul {
-        padding-bottom: 126px;
+        .mail-list {
+            padding-bottom: 126px;
+        }
     }
 
     footer {

src/tpl/mail-list.html

@@ -2,6 +2,7 @@
   <!-- nav controll and section headline -->
   <header data-icon="&#xe004;" ng-click="state.nav.toggle(true); $event.stopPropagation()">
     <h2>{{state.nav.currentFolder.type}}</h2>
+    <button ng-click="state.writer.write()" class="btn-icon" title="New mail"></button>
   </header>
 
   <div class="search">
@@ -10,15 +11,19 @@
 
   <div class="list-wrapper" ng-iscroll="filteredMessages">
     <ul class="mail-list">
-      <li ng-class="{'mail-list-active': email === state.mailList.selected, 'mail-list-attachment': email.attachments !== undefined && email.attachments.length > 0, 'mail-list-unread': email.unread, 'mail-list-replied': !email.unread && email.answered}" ng-click="select(email)" ng-repeat="email in (filteredMessages = (state.nav.currentFolder.messages | filter:searchText | orderBy:'uid':true | limitTo:100))">
+      <li ng-class="{'mail-list-active': email === state.mailList.selected}" ng-click="select(email)" ng-repeat="email in (filteredMessages = (state.nav.currentFolder.messages | filter:searchText | orderBy:'uid':true | limitTo:100))">
         <h3>{{email.from[0].name || email.from[0].address}}</h3>
         <div class="encrypted" data-icon="{{email.encrypted && email.decrypted ? '&#xe012;' : email.encrypted ? '&#xe009;' : ''}}"></div>
         <div class="head">
-          <div class="flag" data-icon="{{(!email.unread && email.answered) ? '&#xe002;' : ''}}" ng-click="toggleUnread(email); $event.stopPropagation()"></div>
           <p class="subject">{{email.subject || 'No subject'}}</p>
           <time>{{email.sentDate | date:'mediumDate'}}</time>
         </div>
         <p class="body">{{email.body}}</p>
+        <ul class="flags">
+          <li ng-show="email.unread"></li>
+          <li data-icon="&#xe002;" ng-show="!email.unread && email.answered"></li>
+          <li data-icon="&#xe003;" ng-show="email.attachments !== undefined && email.attachments.length > 0"></li>
+        </ul>
       </li>
     </ul><!--/.mail-list-->
   </div>