(js) Improve handling of message flags

We now call the model's methods from the template. Uncluttered the
message controller. Fixed the synchronization of the flags with the
messages list.

UI/Templates/MailerUI/UIxMailViewTemplate.wox

@@ -14,9 +14,9 @@
     <header class="msg-header">
       <div class="msg-header-content">
         <div layout="row" layout-align="start center">
-          <md-button class="iconButton" aria-label="flagged" ng-click="markAsFlaggedOrUnflagged()">
-            <i ng-class="{'md-icon-star-outline' :
-                         !message.isflagged, 'md-icon-star': message.isflagged}"><!-- not flagged --></i>
+          <md-button class="iconButton" aria-label="flagged" ng-click="message.toggleFlag()">
+            <i class="md-icon-star"
+               ng-class="{'flagged': message.isflagged}"><!-- flag --></i>
           </md-button>
           <h3 class="sg-md-title-msg" ng-bind="message.subject"><!-- subject --></h3>
         </div>
@@ -42,12 +42,12 @@
           <md-chip-template>{{message.constructor.$tags[$chip][0]}}</md-chip-template>
           <button md-chip-remove="md-chip-remove"
                   class="md-chip-remove"
-                  ng-click="addOrRemoveTag('remove', $chip)">
+                  ng-click="message.removeTag($chip)">
             <i class="md-icon-close"><!-- delete tag --></i>
           </button>
           <md-autocomplete
               md-selected-item="tags.selected"
-              md-selected-item-change="addOrRemoveTag('add', tag)"
+              md-selected-item-change="message.addTag(tag)"
               md-search-text="tags.searchText"
               md-items="tag in message.constructor.filterTags(tags.searchText)"
               label:placeholder="Add a tag">

UI/WebServerResources/js/Mailer.app.js

@@ -189,7 +189,7 @@
    */
   stateMessage.$inject = ['encodeUriFilter', '$stateParams', '$state', 'stateMailbox', 'stateMessages'];
   function stateMessage(encodeUriFilter, $stateParams, $state, stateMailbox, stateMessages) {
-    var message = _.find(stateMessages, function(messageObject) {
+    var message = _.find(stateMailbox.$messages, function(messageObject) {
       return messageObject.uid == $stateParams.messageId;
     });
 

UI/WebServerResources/js/Mailer/Message.service.js

@@ -249,21 +249,46 @@
     return deferred.promise;
   };
 
+  /**
+   * @function addTag
+   * @memberof Message.prototype
+   * @desc Add a mail tag on the current message.
+   * @param {string} tag - the tag name
+   * @returns a promise of the HTTP operation
+   */
+  Message.prototype.addTag = function(tag) {
+    return this.$addOrRemoveTag('add', tag);
+  };
+
+  /**
+   * @function removeTag
+   * @memberof Message.prototype
+   * @desc Remove a mail tag from the current message.
+   * @param {string} tag - the tag name
+   * @returns a promise of the HTTP operation
+   */
+  Message.prototype.removeTag = function(tag) {
+    return this.$addOrRemoveTag('remove', tag);
+  };
+
   /**
    * @function $addOrRemoveTag
    * @memberof Message.prototype
    * @desc Add or remove a mail tag on the current message.
+   * @param {string} operation - the operation name to perform
+   * @param {string} tag - the tag name
    * @returns a promise of the HTTP operation
    */
   Message.prototype.$addOrRemoveTag = function(operation, tag) {
-    var data = {};
+    var data = {
+      operation: operation,
+      msgUIDs: [this.uid],
+      flags: tag
+    };
 
-    data['operation'] = operation;
-    data['msgUIDs'] = [ this.uid ];
-    data['flags'] = tag;
-
-    return Message.$$resource.post(this.$mailbox.$id(), 'addOrRemoveLabel', data);
-  }
+    if (tag)
+      return Message.$$resource.post(this.$mailbox.$id(), 'addOrRemoveLabel', data);
+  };
 
   /**
    * @function $markAsFlaggedOrUnflagged
@@ -271,14 +296,18 @@
    * @desc Add or remove a the \\Flagged flag on the current message.
    * @returns a promise of the HTTP operation
    */
-  Message.prototype.$markAsFlaggedOrUnflagged = function(operation) {
-    var data = {};
+  Message.prototype.toggleFlag = function() {
+    var _this = this,
+        action = 'markMessageFlagged';
 
-    if (operation == 'add') {
-      return Message.$$resource.post(this.id, 'markMessageFlagged', data);
-    }
+    if (this.isflagged)
+      action = 'markMessageUnflagged';
 
-    return Message.$$resource.post(this.id, 'markMessageUnflagged', data);
+    return Message.$$resource.post(this.id, action).then(function(data) {
+      Message.$timeout(function() {
+        _this.isflagged = !_this.isflagged;
+      });
+    });
   }
 
   /**

UI/WebServerResources/js/Mailer/MessageController.js

@@ -10,17 +10,6 @@
   function MessageController($scope, $rootScope, $stateParams, $state, stateAccount, stateMailbox, stateMessage, $timeout, encodeUriFilter, focus, Dialog, Account, Mailbox) {
     $rootScope.message = stateMessage;
     $scope.tags = {};
-    $scope.addOrRemoveTag = function(operation, tag) {
-      if (tag) {
-        stateMessage.$addOrRemoveTag(operation, tag);
-      }
-    };
-    $scope.markAsFlaggedOrUnflagged = function() {
-      var operation = (stateMessage.isflagged ? 'remove' : 'add');
-      stateMessage.$markAsFlaggedOrUnflagged(operation).then(function() {
-        stateMessage.isflagged = !stateMessage.isflagged;
-      });
-    };
     $scope.doDelete = function() {
       stateMailbox.$deleteMessages([stateMessage.uid]).then(function() {
         // Remove message from list of messages

UI/WebServerResources/scss/components/icon/icon.scss

@@ -1,4 +1,4 @@
-/// icon.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
+/// icon.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
 
 
 @import 'extends';
@@ -30,3 +30,14 @@ src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAjEMAAsAA
   font-weight: normal;
   font-style: normal;
 }
+
+.msg-header {
+  .iconButton {
+    .md-icon-star {
+      color: sg-color($sogoGreen, 50) !important;
+      &.flagged {
+        color: sg-color($sogoBlue, 600) !important;
+      }
+    }
+  }
+}