feat(issues): add icons to statuses

refs #9

app/issues/filters/issue-status-icon-filter.es6

@@ -0,0 +1,45 @@
+(function () {
+  'use strict';
+
+  /**
+   * @ngdoc filter
+   * @name issues.filter:issueStatusIcon
+   *
+   * @description
+   *
+   * @param {Array} input The array to filter
+   * @returns {Array} The filtered array
+   *
+   */
+  angular
+    .module('issues')
+    .filter('issueStatusIcon', issueStatusIcon);
+
+  function issueStatusIcon() {
+    return (status) => {
+      switch (status) {
+        case 1:
+          return 'fire';
+          break;
+        case 2:
+          return 'hourglass-alt';
+          break;
+        case 3:
+          return 'flag';
+          break;
+        case 4:
+          return 'thumb-up';
+          break;
+        case 5:
+          return 'spinner';
+          break;
+        case 6:
+          return 'check';
+          break;
+        case 7:
+          return 'thumb-down';
+          break;
+      }
+    };
+  }
+}());

app/issues/filters/issue-status-icon-filter_test.es6

@@ -0,0 +1,10 @@
+/* global describe, beforeEach, it, expect, inject, module */
+'use strict';
+
+describe.skip('issueStatusIcon', () => {
+  beforeEach(module('issues'));
+
+  it('should filter our numbers not greater than 3', inject(($filter) => {
+    expect($filter('issueStatusIcon')([1, 2, 3, 4])).to.include.members([4]);
+  }));
+});

app/issues/views/issues.less

@@ -15,25 +15,45 @@
   //immediate
   &-\-priority-7 {
     background: darkred;
+
+    .indicator {
+      background: darken(#8B0000, 20%);
+    }
   }
 
   //urgent
   &-\-priority-6 {
     background: red;
+
+    .indicator {
+      background: darken(#FF0000, 20%);
+    }
   }
 
   //high
   &-\-priority-5 {
     background: yellow;
+
+    .indicator {
+      background: darken(#FFFF00, 20%);
+    }
   }
 
   //normal
   &-\-priority-4 {
     background: cornflowerblue;
+
+    .indicator {
+      background: darken(#6495ED, 20%);
+    }
   }
 
   //low
   &-\-priority-3 {
     background: green;
+
+    .indicator {
+      background: darken(#008000, 20%);
+    }
   }
 }

app/issues/views/issues.tpl.html

@@ -1,15 +1,16 @@
 <div class="issues" ng-cloak>
   <md-list>
-    <md-list-item class="md-3-line colored-item"
+    <md-list-item class="md-3-line colored-item colored-item--priority-{{:: issue.priority.id }}"
                   ng-repeat-start="issue in issues.getIssues()"
+                  layout-fill
                   layout="row">
-      <div class="colored-item--priority-{{:: issue.priority.id }}"
-           flex="10"
+      <div class="indicator"
+           style="width: 40px;padding: 16px 0;text-align: center;"
            layout-fill>
-        <md-icon md-font-icon="zmdi zmdi-lock-open"></md-icon>
+        <md-icon class="zmdi zmdi-{{::issue.status.id | issueStatusIcon}}"></md-icon>
       </div>
       <div class="md-list-item-text"
-           style="padding: 0;"
+           style="padding-left: 15px;"
            flex="90"
            layout-fill
            layout="column">