feat(issues): format list items and add material icons

refs #9

app/issues/views/issues.less

@@ -1,17 +1,39 @@
+.issues {
+
+  md-list,
+  md-list-item {
+    padding: 0;
+  }
+}
+
 .colored-item {
-  position: relative;
-  padding: 0 0 0 20px;
-
-  &:before {
-    content: '';
-    width: 20px;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
+
+  md-icon {
+    color: #fff;
+  }
+
+  //immediate
+  &-\-priority-7 {
+    background: darkred;
   }
 
-  &-\-state-1:before {
+  //urgent
+  &-\-priority-6 {
     background: red;
   }
+
+  //high
+  &-\-priority-5 {
+    background: yellow;
+  }
+
+  //normal
+  &-\-priority-4 {
+    background: cornflowerblue;
+  }
+
+  //low
+  &-\-priority-3 {
+    background: green;
+  }
 }

app/issues/views/issues.tpl.html

@@ -1,7 +1,18 @@
-<div ng-cloak>
+<div class="issues" ng-cloak>
   <md-list>
-    <md-list-item class="md-3-line colored-item colored-item--state-{{:: issue.status.id }}" ng-repeat-start="issue in issues.getIssues()">
-      <div class="md-list-item-text" layout="column">
+    <md-list-item class="md-3-line colored-item"
+                  ng-repeat-start="issue in issues.getIssues()"
+                  layout="row">
+      <div class="colored-item--priority-{{:: issue.priority.id }}"
+           flex="10"
+           layout-fill>
+        <md-icon md-font-icon="zmdi zmdi-lock-open"></md-icon>
+      </div>
+      <div class="md-list-item-text"
+           style="padding: 0;"
+           flex="90"
+           layout-fill
+           layout="column">
         <h3>#{{:: issue.id}} {{:: issue.subject }}</h3>
       </div>
     </md-list-item>

bower.json

@@ -20,7 +20,8 @@
     "angular-material": "~0.10.0",
     "lodash": "3.10.1",
     "visor": "~0.1.2",
-    "angular-local-storage": "~0.2.3"
+    "angular-local-storage": "~0.2.3",
+    "material-design-iconic-font": "~2.2.0"
   },
   "devDependencies": {
     "angular-mocks": "~1.4.*"