fix formatting for html fields in the work items side list #12

app.css

@@ -142,20 +142,31 @@ hr.split {
     left: 0px; 
 }
 
-.workItems .workItem h4 {
+.workItem-title {
   line-height: 14px;
   margin-bottom: 8px; 
 }
-.workItems .workItem ul {
+
+.workItem-fields-list {
   margin-left: 0px;
   color: #7b7b7b; 
 }
 
-.workItems .workItem ul li {
+.workItem-field-item {
+  padding-top: 8px;
   line-height: 18px; 
 }
 
-.workItems h3 {
+.workItem-field-name {
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.workItem-field-name-icon {
+  opacity: 0.5;
+}
+ 
+.workItems-header {
   font-size: 13px;
   line-height: 13px;
   border-bottom: 1px solid #dedede;

app.js

@@ -841,7 +841,6 @@
     },
 
     drawWorkItems: function (data) {
-
       var workItems = _.map(data || this.vmLocal.workItems, function (workItem) {
         var tmp = this.attachRestrictedFieldsToWorkItem(workItem, 'summary');
         return tmp;
@@ -984,7 +983,8 @@
             return {
               refName: key,
               name: _.find(this.vm.fields, function (f) { return f.refName == key; }).name,
-              value: workItem.fields[key]
+              value: workItem.fields[key],
+              isHtml: this.isHtmlContentField(key)
             };
           }
         }
@@ -1097,12 +1097,8 @@
 
     buildPatchToAddWorkItemField: function (fieldName, value) {
       // Check if the field type is html to replace newlines by br
-      var field = this.getFieldByFieldRefName(fieldName);
-      if (field && field.type && value) {
-        var fieldType = field.type.toLowerCase();
-        if (fieldType === "html" || fieldType === "history") {
+      if (this.isHtmlContentField(fieldName)) {
           value = value.replace(/\n/g, "<br>");
-        }
       }
       
       return {
@@ -1111,6 +1107,16 @@
         value: value
       };
     },
+    
+    isHtmlContentField: function (fieldName) {
+      var field = this.getFieldByFieldRefName(fieldName);
+      if (field && field.type) {
+        var fieldType = field.type.toLowerCase();
+        return (fieldType === "html" || fieldType === "history");
+      } else {
+        return false;
+      }
+    },
 
     buildPatchToAddWorkItemHyperlink: function (url, name, comment) {
       return {

manifest.json

@@ -10,7 +10,7 @@
   "singleInstall": true,
   "private": true,
   "frameworkVersion": "1.0",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "parameters": [
     {
       "name": "vso_account",

templates/details.hdbs

@@ -2,7 +2,13 @@
     {{#each restricted_fields}}
     <tr>
     <td><strong>{{name}}</strong></td>
-        <td>{{{value}}}</td>
+        <td>
+            {{#if isHtml}}
+              {{{value}}}
+            {{else}}
+              {{value}}
+            {{/if}}
+        </td>
     </tr>
     {{/each}}
 </table>

templates/workItems.hdbs

@@ -1,8 +1,8 @@
 {{#if workItems.length}}
-  <h3>{{t "workItems.title" count=workItems.length}}</h3>
+  <h3 class='workItems-header'>{{t "workItems.title" count=workItems.length}}</h3>
   {{#each workItems}}
     <div class='workItem' data-id='{{id}}'>
-      <h4>
+      <h4 class='workItem-title'>
         <a href="{{_links.html.href}}" target="_blank">{{title}}</a>
         <a class='action showDetails' title='{{t "workItems.showDetails"}}'>
           <i class='icon-eye-open'></i>
@@ -11,11 +11,16 @@
           <i class='icon-remove'></i>
         </a>
       </h4>
-      <ul>
+      <ul class='workItem-fields-list'>
         {{#each restricted_fields}}
-          <li>
-            <strong>{{name}}</strong>
-            {{value}}
+          <li class='workItem-field-item'>
+            <i class='workItem-field-name-icon icon-circle-arrow-right'></i>
+            <span class='workItem-field-name'>{{name}}</span>
+            {{#if isHtml}}
+              <div>{{{value}}}</div>
+            {{else}}
+              <span>{{value}}</span>
+            {{/if}}
           </li>
         {{/each}}
       </ul>