implement mark as unread

src/js/controller/mail-list.js

@@ -23,7 +23,7 @@ define(function(require) {
                 if (!email.subject) {
                     return;
                 }
-                
+
                 if (email.subject.indexOf(str.subjectPrefix) === -1 ||
                     email.subject === str.subjectPrefix + str.verificationSubject) {
                     return;
@@ -58,6 +58,9 @@ define(function(require) {
         // scope functions
         //
 
+        /**
+         * Called when clicking on an email list item
+         */
         $scope.select = function(email) {
             if (!email) {
                 $scope.state.mailList.selected = undefined;
@@ -77,6 +80,17 @@ define(function(require) {
             $scope.synchronize();
         };
 
+        /**
+         * Mark an email as unread
+         */
+        $scope.markUnread = function(email) {
+            email.unread = true;
+            $scope.synchronize();
+        };
+
+        /**
+         * Synchronize the selected imap folder to local storage
+         */
         $scope.synchronize = function(callback) {
             // if we're in the outbox, don't do an imap sync
             if (getFolder().type === 'Outbox') {
@@ -121,6 +135,9 @@ define(function(require) {
             });
         };
 
+        /**
+         * Delete an email by moving it to the trash folder or purging it.
+         */
         $scope.remove = function(email) {
             if (!email) {
                 return;

src/sass/components/_mail-list.scss

@@ -52,8 +52,7 @@
                 text-align: right;
                 line-height: 1.5em * ($font-size-small / $font-size-smaller);
             }
-            &:before {
-                content: "";
+            .flag {
                 width: 1em;
                 height: 1em;
                 border-radius: 50%;
@@ -63,7 +62,6 @@
                 left: 0;
                 margin-top: 0.2em;
                 margin-left: -1.3em;
-                transition: background-color $time-li-fade, box-shadow $time-li-fade;
             }
         }
         .body {
@@ -93,15 +91,14 @@
         }
 
         &.mail-list-unread {
-            .head:before {
+            .flag {
                 background-color: $color-blue;
                 box-shadow: inset 0.5px 1px 1px $color-grey-medium;
             }
         }
 
         &.mail-list-replied {
-            .head:before {
-                content: "\e002";
+            .flag {
                 color: $color-grey-medium;
                 font-family: $font-family-icons;
                 position: absolute;
@@ -136,7 +133,7 @@
             .body {
                 color: $color-white;
             }
-            .head:before {
+            .flag {
                 box-shadow: inset 1px 1px 1px $color-grey-light;
                 background-color: $color-white;
             }
@@ -146,13 +143,13 @@
                 }
             }
             &.mail-list-unread {
-                .head:before {
+                .flag {
                     box-shadow: inset 1px 1px 1px $color-grey-light;
                     background-color: $color-white;
                 }
             }
             &.mail-list-replied {
-                .head:before {
+                .flag {
                     color: $color-white;
                     background: transparent;
                     box-shadow: none;

src/tpl/mail-list.html

@@ -13,6 +13,7 @@
       <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 state.nav.currentFolder.messages | orderBy:'uid':true | filter:searchText">
         <h3>{{email.from[0].name || email.from[0].address}}</h3>
         <div class="head">
+          <div class="flag" data-icon="{{(!email.unread && email.answered) ? '&#xe002;' : ''}}" ng-click="markUnread(email); $event.stopPropagation()"></div>
           <p class="subject">{{email.subject || 'No subject'}}</p>
           <time>{{email.sentDate | date:'mediumDate'}}</time>
         </div>