Add colors to Maniphest transactions

Summary:
Add colors to Maniphest transactions. The precedence of the css
classes is determined by their occurrences in the css file. The class
shows up latter overrides the ones above it.

Test Plan:
set a task to different statuses to verify that the colors
are set.

Reviewed By: epriestley
Reviewers: epriestley
CC: jungejason, epriestley
Differential Revision: 55

src/applications/maniphest/view/transactiondetail/ManiphestTransactionDetailView.php

@@ -98,7 +98,7 @@ class ManiphestTransactionDetailView extends AphrontView {
     }
     $descs = implode('<br />', $descs);
 
-    $more_classes = implode(' ', $classes);
+    $more_classes = implode(' ', $more_classes);
 
     if ($comment_transaction && $comment_transaction->hasComments()) {
       $comments = $comment_transaction->getCache();
@@ -167,18 +167,22 @@ class ManiphestTransactionDetailView extends AphrontView {
         if ($transaction->getAuthorPHID() == $new) {
           $verb = 'Claimed';
           $desc = 'claimed this task';
+          $classes[] = 'claimed';
         } else if (!$new) {
           $verb = 'Up For Grabs';
           $desc = 'placed this task up for grabs';
+          $classes[] = 'upforgrab';
         } else if (!$old) {
           $verb = 'Assigned';
           $desc = 'assigned this task to '.$this->renderHandles(array($new));
+          $classes[] = 'assigned';
         } else {
           $verb = 'Reassigned';
           $desc = 'reassigned this task from '.
                   $this->renderHandles(array($old)).
                   ' to '.
                   $this->renderHandles(array($new));
+          $classes[] = 'reassigned';
         }
         break;
       case ManiphestTransactionType::TYPE_CCS:
@@ -232,17 +236,21 @@ class ManiphestTransactionDetailView extends AphrontView {
           if ($old) {
             $verb = 'Reopened';
             $desc = 'reopened this task';
+            $classes[] = 'reopened';
           } else {
             $verb = 'Created';
             $desc = 'created this task';
+            $classes[] = 'created';
           }
         } else if ($new == ManiphestTaskStatus::STATUS_CLOSED_SPITE) {
           $verb = 'Spited';
           $desc = 'closed this task out of spite';
+          $classes[] = 'spited';
         } else {
           $verb = 'Closed';
           $full = idx(ManiphestTaskStatus::getTaskStatusMap(), $new, '???');
           $desc = 'closed this task as "'.$full.'"';
+          $classes[] = 'closed';
         }
         break;
       case ManiphestTransactionType::TYPE_PRIORITY:
@@ -261,6 +269,9 @@ class ManiphestTransactionDetailView extends AphrontView {
           $desc = 'raised the priority of this task from "'.$old_name.'" to '.
                   '"'.$new_name.'"';
         }
+        if ($new == ManiphestTaskPriority::PRIORITY_UNBREAK_NOW) {
+          $classes[] = 'unbreaknow';
+        }
         break;
       case ManiphestTransactionType::TYPE_ATTACH:
         $old_raw = nonempty($old, array());

webroot/rsrc/css/application/maniphest/transaction-detail.css

@@ -8,6 +8,42 @@
   min-height: 50px;
 }
 
+.maniphest-transaction-detail-container .upforgrab {
+  border-color: #cc9966;
+}
+
+.maniphest-transaction-detail-container .reassigned {
+  border-color: #0099aa;
+}
+
+.maniphest-transaction-detail-container .assigned {
+  border-color: #0099aa;
+}
+
+.maniphest-transaction-detail-container .claimed {
+  border-color: #0099aa;
+}
+
+.maniphest-transaction-detail-container .created {
+  border-color: #660099;
+}
+
+.maniphest-transaction-detail-container .closed {
+  border-color: #006699;
+}
+
+.maniphest-transaction-detail-container .spited {
+  border-color: #006699;
+}
+
+.maniphest-transaction-detail-container .reopened {
+  border-color: #660099;
+}
+
+.maniphest-transaction-detail-container .unbreaknow {
+  border-color: #aa0000;
+}
+
 .maniphest-transaction-header {
   background: #e6e6e6;
   padding: 4px 1em;
@@ -19,8 +55,9 @@
 
 .maniphest-transaction-detail-view {
   margin-left: 54px;
-  border: 1px solid #bbbbbb;
+  border-color: #bbbbbb;
-  border-width: 1px 0 0;
+  border-width: 1px 10px;
+  border-style: solid;
   min-height: 40px;
 }