(css,html) Colorize tags of messages

UI/Templates/MailerUI/UIxMailFolderTemplate.wox

@@ -231,6 +231,9 @@
               <div class="md-avatar sg-avatar-selected"
                    ng-switch-when="true"><!-- selected avatar --></div>
             </div>
+            <div class="sg-category"
+                 ng-repeat="tag in currentMessage.flags | limitTo:5"
+                 ng-style="{ 'background-color': currentMessage.constructor.$tags[tag][1], left: ($index * 3) + 'px' }"><!-- calendar color --></div>
             <div class="sg-tile-content">
               <div class="sg-md-subhead">
                 <div>

UI/Templates/MailerUI/UIxMailViewTemplate.wox

@@ -146,7 +146,12 @@
                       ng-model="viewer.message.flags"
                       md-transform-chip="$chip.name"
                       md-on-remove="viewer.message.removeTag($chip)">
-              <md-chip-template>{{viewer.service.$tags[$chip][0]}}</md-chip-template>
+              <md-chip-template>
+                <span class="sg-chip-color" style="z-index: 1">
+                  <span ng-style="{ 'background-color': viewer.service.$tags[$chip][1] }"><!-- color --></span>
+                </span>
+                <span>{{viewer.service.$tags[$chip][0]}}</span>
+              </md-chip-template>
               <md-autocomplete
                   md-selected-item="viewer.tags.selected"
                   md-selected-item-change="viewer.message.addTag(viewer.tags.selected.name)"
@@ -156,8 +161,12 @@
                   md-autoselect="true"
                   label:placeholder="Add a tag">
                 <md-item-template>
-                  <span md-highlight-text="viewer.tags.searchText"
-                        md-highlight-flags="^i">{{tag.description}}</span>
+                  <div layout="row" layout-align="start center">
+                  <div class="sg-color-chip"
+                       ng-style="{'background-color': tag.color}"><!-- color --></div>
+                  <div md-highlight-text="viewer.tags.searchText"
+                       md-highlight-flags="^i">{{tag.description}}</div>
+                  </div>
                 </md-item-template>
               </md-autocomplete>
             </md-chips>

UI/WebServerResources/scss/components/chips/chips.scss

@@ -45,6 +45,12 @@ md-chips {
       width: 0;
     }
   }
+  .sg-chip-color {
+    @extend .sg-chip-progress;
+    span {
+      width: 100%;
+    }
+  }
 }
 
 // Enlarge the default autocompletion menu

UI/WebServerResources/scss/components/list/list.scss

@@ -123,7 +123,7 @@ div.md-tile-left {
   &-color-chip {
     display: block;
     border-radius: 50%;
-    margin-left: $bl;
+    margin: 0 $bl;
     border-color: white;
     border-style: solid;
     width: $sg-color-chip-width;