ObjectHeader Status icons

Summary: Adds status icons and colors to Maniphest and Differential. Also minor tweaks to them in hovercards. Probably some other stuff too.

Test Plan: Test many diff and task states.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: Korvin, aran

Differential Revision: https://secure.phabricator.com/D7098

resources/sprite/manifest/status.json

@@ -154,12 +154,27 @@
     "status-oh-closed"      : {
       "name" : "status-oh-closed",
       "rule" : ".status-oh-closed",
-      "hash" : "cbc6a0959ebad3e88cc3ac67743a7f3a"
+      "hash" : "53dc3a09dc2fbd3a546e5f5619a03b30"
+    },
+    "status-oh-closed-dark" : {
+      "name" : "status-oh-closed-dark",
+      "rule" : ".status-oh-closed-dark",
+      "hash" : "fbe32ade82b9b23352bd81c1735371a5"
     },
     "status-oh-open"        : {
       "name" : "status-oh-open",
       "rule" : ".status-oh-open",
-      "hash" : "e86f83bc40e77664c91c834b27816576"
+      "hash" : "6ed5dd19324018203085c68155fae53a"
+    },
+    "status-oh-open-green"  : {
+      "name" : "status-oh-open-green",
+      "rule" : ".status-oh-open-green",
+      "hash" : "01215f7ed2b6802049ac5c259231bbe7"
+    },
+    "status-oh-open-red"    : {
+      "name" : "status-oh-open-red",
+      "rule" : ".status-oh-open-red",
+      "hash" : "fbac435cfbf49d05e7734fd6c786b0b7"
     },
     "status-open-blue"      : {
       "name" : "status-open-blue",

src/__celerity_resource_map__.php

@@ -702,15 +702,15 @@ celerity_register_resource_map(array(
   ),
   '/rsrc/image/sprite-status-X2.png' =>
   array(
-    'hash' => 'b26f204c1b5ff01e3facbf78ccdc358b',
-    'uri' => '/res/b26f204c/rsrc/image/sprite-status-X2.png',
+    'hash' => 'a537049b4500a47af3fc27c626bbe865',
+    'uri' => '/res/a537049b/rsrc/image/sprite-status-X2.png',
     'disk' => '/rsrc/image/sprite-status-X2.png',
     'type' => 'png',
   ),
   '/rsrc/image/sprite-status.png' =>
   array(
-    'hash' => 'c1f9c28f3ab24a0f2d758331bb0f8a09',
-    'uri' => '/res/c1f9c28f/rsrc/image/sprite-status.png',
+    'hash' => '438db33426faa98f938b1ebabd196763',
+    'uri' => '/res/438db334/rsrc/image/sprite-status.png',
     'disk' => '/rsrc/image/sprite-status.png',
     'type' => 'png',
   ),
@@ -2996,7 +2996,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-action-header-view-css' =>
   array(
-    'uri' => '/res/f7861fb7/rsrc/css/layout/phabricator-action-header-view.css',
+    'uri' => '/res/cd8b4a61/rsrc/css/layout/phabricator-action-header-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3461,7 +3461,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-timeline-view-css' =>
   array(
-    'uri' => '/res/ae611a10/rsrc/css/layout/phabricator-timeline-view.css',
+    'uri' => '/res/725f6b17/rsrc/css/layout/phabricator-timeline-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3765,7 +3765,7 @@ celerity_register_resource_map(array(
   ),
   'phui-header-view-css' =>
   array(
-    'uri' => '/res/7ce53631/rsrc/css/phui/phui-header-view.css',
+    'uri' => '/res/2a60156a/rsrc/css/phui/phui-header-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -4125,7 +4125,7 @@ celerity_register_resource_map(array(
   ),
   'sprite-status-css' =>
   array(
-    'uri' => '/res/d61bb845/rsrc/css/sprite-status.css',
+    'uri' => '/res/26c51270/rsrc/css/sprite-status.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -4162,7 +4162,7 @@ celerity_register_resource_map(array(
 ), array(
   'packages' =>
   array(
-    'b1d5e69b' =>
+    'c0b41cc6' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -4209,7 +4209,7 @@ celerity_register_resource_map(array(
         39 => 'phabricator-property-list-view-css',
         40 => 'phabricator-tag-view-css',
       ),
-      'uri' => '/res/pkg/b1d5e69b/core.pkg.css',
+      'uri' => '/res/pkg/c0b41cc6/core.pkg.css',
       'type' => 'css',
     ),
     '8977e356' =>
@@ -4399,15 +4399,15 @@ celerity_register_resource_map(array(
   ),
   'reverse' =>
   array(
-    'aphront-dialog-view-css' => 'b1d5e69b',
-    'aphront-error-view-css' => 'b1d5e69b',
-    'aphront-list-filter-view-css' => 'b1d5e69b',
-    'aphront-pager-view-css' => 'b1d5e69b',
-    'aphront-panel-view-css' => 'b1d5e69b',
-    'aphront-table-view-css' => 'b1d5e69b',
-    'aphront-tokenizer-control-css' => 'b1d5e69b',
-    'aphront-tooltip-css' => 'b1d5e69b',
-    'aphront-typeahead-control-css' => 'b1d5e69b',
+    'aphront-dialog-view-css' => 'c0b41cc6',
+    'aphront-error-view-css' => 'c0b41cc6',
+    'aphront-list-filter-view-css' => 'c0b41cc6',
+    'aphront-pager-view-css' => 'c0b41cc6',
+    'aphront-panel-view-css' => 'c0b41cc6',
+    'aphront-table-view-css' => 'c0b41cc6',
+    'aphront-tokenizer-control-css' => 'c0b41cc6',
+    'aphront-tooltip-css' => 'c0b41cc6',
+    'aphront-typeahead-control-css' => 'c0b41cc6',
     'differential-changeset-view-css' => '44bfe40c',
     'differential-core-view-css' => '44bfe40c',
     'differential-inline-comment-editor' => '5e9e5c4e',
@@ -4421,7 +4421,7 @@ celerity_register_resource_map(array(
     'differential-table-of-contents-css' => '44bfe40c',
     'diffusion-commit-view-css' => 'c8ce2d88',
     'diffusion-icons-css' => 'c8ce2d88',
-    'global-drag-and-drop-css' => 'b1d5e69b',
+    'global-drag-and-drop-css' => 'c0b41cc6',
     'inline-comment-summary-css' => '44bfe40c',
     'javelin-aphlict' => '8977e356',
     'javelin-behavior' => '9564fa17',
@@ -4494,54 +4494,54 @@ celerity_register_resource_map(array(
     'javelin-util' => '9564fa17',
     'javelin-vector' => '9564fa17',
     'javelin-workflow' => '9564fa17',
-    'lightbox-attachment-css' => 'b1d5e69b',
+    'lightbox-attachment-css' => 'c0b41cc6',
     'maniphest-task-summary-css' => '49898640',
-    'phabricator-action-list-view-css' => 'b1d5e69b',
-    'phabricator-application-launch-view-css' => 'b1d5e69b',
+    'phabricator-action-list-view-css' => 'c0b41cc6',
+    'phabricator-application-launch-view-css' => 'c0b41cc6',
     'phabricator-busy' => '8977e356',
     'phabricator-content-source-view-css' => '44bfe40c',
-    'phabricator-core-css' => 'b1d5e69b',
-    'phabricator-crumbs-view-css' => 'b1d5e69b',
+    'phabricator-core-css' => 'c0b41cc6',
+    'phabricator-crumbs-view-css' => 'c0b41cc6',
     'phabricator-drag-and-drop-file-upload' => '5e9e5c4e',
     'phabricator-dropdown-menu' => '8977e356',
     'phabricator-file-upload' => '8977e356',
-    'phabricator-filetree-view-css' => 'b1d5e69b',
-    'phabricator-flag-css' => 'b1d5e69b',
+    'phabricator-filetree-view-css' => 'c0b41cc6',
+    'phabricator-flag-css' => 'c0b41cc6',
     'phabricator-hovercard' => '8977e356',
-    'phabricator-jump-nav' => 'b1d5e69b',
+    'phabricator-jump-nav' => 'c0b41cc6',
     'phabricator-keyboard-shortcut' => '8977e356',
     'phabricator-keyboard-shortcut-manager' => '8977e356',
-    'phabricator-main-menu-view' => 'b1d5e69b',
+    'phabricator-main-menu-view' => 'c0b41cc6',
     'phabricator-menu-item' => '8977e356',
-    'phabricator-nav-view-css' => 'b1d5e69b',
+    'phabricator-nav-view-css' => 'c0b41cc6',
     'phabricator-notification' => '8977e356',
-    'phabricator-notification-css' => 'b1d5e69b',
-    'phabricator-notification-menu-css' => 'b1d5e69b',
+    'phabricator-notification-css' => 'c0b41cc6',
+    'phabricator-notification-menu-css' => 'c0b41cc6',
     'phabricator-object-selector-css' => '44bfe40c',
     'phabricator-phtize' => '8977e356',
     'phabricator-prefab' => '8977e356',
     'phabricator-project-tag-css' => '49898640',
-    'phabricator-property-list-view-css' => 'b1d5e69b',
-    'phabricator-remarkup-css' => 'b1d5e69b',
+    'phabricator-property-list-view-css' => 'c0b41cc6',
+    'phabricator-remarkup-css' => 'c0b41cc6',
     'phabricator-shaped-request' => '5e9e5c4e',
-    'phabricator-side-menu-view-css' => 'b1d5e69b',
-    'phabricator-standard-page-view' => 'b1d5e69b',
-    'phabricator-tag-view-css' => 'b1d5e69b',
+    'phabricator-side-menu-view-css' => 'c0b41cc6',
+    'phabricator-standard-page-view' => 'c0b41cc6',
+    'phabricator-tag-view-css' => 'c0b41cc6',
     'phabricator-textareautils' => '8977e356',
     'phabricator-tooltip' => '8977e356',
-    'phabricator-transaction-view-css' => 'b1d5e69b',
-    'phabricator-zindex-css' => 'b1d5e69b',
-    'phui-button-css' => 'b1d5e69b',
-    'phui-form-css' => 'b1d5e69b',
-    'phui-form-view-css' => 'b1d5e69b',
-    'phui-header-view-css' => 'b1d5e69b',
-    'phui-icon-view-css' => 'b1d5e69b',
-    'phui-object-item-list-view-css' => 'b1d5e69b',
-    'phui-spacing-css' => 'b1d5e69b',
-    'sprite-apps-large-css' => 'b1d5e69b',
-    'sprite-gradient-css' => 'b1d5e69b',
-    'sprite-icons-css' => 'b1d5e69b',
-    'sprite-menu-css' => 'b1d5e69b',
-    'syntax-highlighting-css' => 'b1d5e69b',
+    'phabricator-transaction-view-css' => 'c0b41cc6',
+    'phabricator-zindex-css' => 'c0b41cc6',
+    'phui-button-css' => 'c0b41cc6',
+    'phui-form-css' => 'c0b41cc6',
+    'phui-form-view-css' => 'c0b41cc6',
+    'phui-header-view-css' => 'c0b41cc6',
+    'phui-icon-view-css' => 'c0b41cc6',
+    'phui-object-item-list-view-css' => 'c0b41cc6',
+    'phui-spacing-css' => 'c0b41cc6',
+    'sprite-apps-large-css' => 'c0b41cc6',
+    'sprite-gradient-css' => 'c0b41cc6',
+    'sprite-icons-css' => 'c0b41cc6',
+    'sprite-menu-css' => 'c0b41cc6',
+    'syntax-highlighting-css' => 'c0b41cc6',
   ),
 ));

src/applications/differential/constants/DifferentialRevisionStatus.php

@@ -8,21 +8,66 @@
 
 final class DifferentialRevisionStatus {
 
-  public static function getRevisionStatusTagColor($status) {
-    $default = PhabricatorTagView::COLOR_GREY;
+  const COLOR_STATUS_DEFAULT = 'status';
+  const COLOR_STATUS_DARK = 'status-dark';
+  const COLOR_STATUS_GREEN = 'status-green';
+  const COLOR_STATUS_RED = 'status-red';
+
+  public static function getRevisionStatusColor($status) {
+    $default = self::COLOR_STATUS_DEFAULT;
 
     $map = array(
       ArcanistDifferentialRevisionStatus::NEEDS_REVIEW   =>
-        PhabricatorTagView::COLOR_ORANGE,
+        self::COLOR_STATUS_DEFAULT,
       ArcanistDifferentialRevisionStatus::NEEDS_REVISION =>
-        PhabricatorTagView::COLOR_RED,
+        self::COLOR_STATUS_RED,
       ArcanistDifferentialRevisionStatus::ACCEPTED       =>
-        PhabricatorTagView::COLOR_GREEN,
+        self::COLOR_STATUS_GREEN,
       ArcanistDifferentialRevisionStatus::CLOSED         =>
-        PhabricatorTagView::COLOR_BLUE,
+        self::COLOR_STATUS_DARK,
       ArcanistDifferentialRevisionStatus::ABANDONED      =>
-        PhabricatorTagView::COLOR_BLACK,
+        self::COLOR_STATUS_DARK,
     );
     return idx($map, $status, $default);
   }
+
+  public static function getRevisionStatusIcon($status) {
+    $default = 'oh-open';
+
+    $map = array(
+      ArcanistDifferentialRevisionStatus::NEEDS_REVIEW   =>
+        'oh-open',
+      ArcanistDifferentialRevisionStatus::NEEDS_REVISION =>
+        'oh-open-red',
+      ArcanistDifferentialRevisionStatus::ACCEPTED       =>
+        'oh-open-green',
+      ArcanistDifferentialRevisionStatus::CLOSED         =>
+        'oh-closed-dark',
+      ArcanistDifferentialRevisionStatus::ABANDONED      =>
+        'oh-closed-dark',
+    );
+    return idx($map, $status, $default);
+  }
+
+  public static function renderFullDescription($status) {
+    $color = self::getRevisionStatusColor($status);
+    $status_name =
+      ArcanistDifferentialRevisionStatus::getNameForRevisionStatus($status);
+
+    $img = id(new PHUIIconView())
+      ->setSpriteSheet(PHUIIconView::SPRITE_STATUS)
+      ->setSpriteIcon(self::getRevisionStatusIcon($status));
+
+    $tag = phutil_tag(
+      'span',
+      array(
+        'class' => 'phui-header-'.$color,
+      ),
+      array(
+        $img,
+        $status_name,
+      ));
+
+    return $tag;
+  }
 }

src/applications/differential/events/DifferentialHovercardEventListener.php

@@ -78,4 +78,3 @@ final class DifferentialHovercardEventListener extends PhutilEventListener {
   }
 
 }
-

src/applications/differential/field/specification/DifferentialReviewersFieldSpecification.php

@@ -70,7 +70,7 @@ final class DifferentialReviewersFieldSpecification
       $reviewer_map[$phid] = $this->getHandle($phid)->getFullName();
     }
     return id(new AphrontFormTokenizerControl())
-      ->setLabel('Reviewers')
+      ->setLabel(pht('Reviewers'))
       ->setName('reviewers')
       ->setUser($this->getUser())
       ->setDatasource('/typeahead/common/users/')

src/applications/differential/field/specification/DifferentialSummaryFieldSpecification.php

@@ -21,7 +21,7 @@ final class DifferentialSummaryFieldSpecification
 
   public function renderEditControl() {
     return id(new PhabricatorRemarkupControl())
-      ->setLabel('Summary')
+      ->setLabel(pht('Summary'))
       ->setName('summary')
       ->setID($this->getControlID())
       ->setValue($this->summary);

src/applications/differential/view/DifferentialRevisionDetailView.php

@@ -122,7 +122,11 @@ final class DifferentialRevisionDetailView extends AphrontView {
     $view = id(new PHUIHeaderView())
       ->setHeader($revision->getTitle($revision));
 
-    $view->addTag(self::renderTagForRevision($revision));
+    $status = $revision->getStatus();
+    $status_name =
+      DifferentialRevisionStatus::renderFullDescription($status);
+
+    $view->addProperty(PHUIHeaderView::PROPERTY_STATUS, $status_name);
 
     return $view;
   }
@@ -133,12 +137,10 @@ final class DifferentialRevisionDetailView extends AphrontView {
     $status = $revision->getStatus();
     $status_name =
       ArcanistDifferentialRevisionStatus::getNameForRevisionStatus($status);
-    $status_color =
-      DifferentialRevisionStatus::getRevisionStatusTagColor($status);
 
     return id(new PhabricatorTagView())
       ->setType(PhabricatorTagView::TYPE_STATE)
-      ->setName($status_name)
-      ->setBackgroundColor($status_color);
+      ->setName($status_name);
   }
+
 }

src/applications/maniphest/constants/ManiphestTaskStatus.php

@@ -12,42 +12,90 @@ final class ManiphestTaskStatus extends ManiphestConstants {
   const STATUS_CLOSED_DUPLICATE   = 4;
   const STATUS_CLOSED_SPITE       = 5;
 
+  const COLOR_STATUS_OPEN = 'status';
+  const COLOR_STATUS_CLOSED = 'status-dark';
+
   public static function getTaskStatusMap() {
+    $open = pht('Open');
+    $resolved = pht('Resolved');
+    $wontfix = pht('Wontfix');
+    $invalid = pht('Invalid');
+    $duplicate = pht('Duplicate');
+    $spite = pht('Spite');
+
     return array(
-      self::STATUS_OPEN                 => 'Open',
-      self::STATUS_CLOSED_RESOLVED      => 'Resolved',
-      self::STATUS_CLOSED_WONTFIX       => 'Wontfix',
-      self::STATUS_CLOSED_INVALID       => 'Invalid',
-      self::STATUS_CLOSED_DUPLICATE     => 'Duplicate',
-      self::STATUS_CLOSED_SPITE         => 'Spite',
+      self::STATUS_OPEN                 => $open,
+      self::STATUS_CLOSED_RESOLVED      => $resolved,
+      self::STATUS_CLOSED_WONTFIX       => $wontfix,
+      self::STATUS_CLOSED_INVALID       => $invalid,
+      self::STATUS_CLOSED_DUPLICATE     => $duplicate,
+      self::STATUS_CLOSED_SPITE         => $spite,
     );
   }
 
   public static function getTaskStatusFullName($status) {
+    $open = pht('Open');
+    $resolved = pht('Closed, Resolved');
+    $wontfix = pht('Closed, Wontfix');
+    $invalid = pht('Closed, Invalid');
+    $duplicate = pht('Closed, Duplicate');
+    $spite = pht('Closed, Spite');
+
     $map = array(
-      self::STATUS_OPEN                 => 'Open',
-      self::STATUS_CLOSED_RESOLVED      => 'Closed, Resolved',
-      self::STATUS_CLOSED_WONTFIX       => 'Closed, Wontfix',
-      self::STATUS_CLOSED_INVALID       => 'Closed, Invalid',
-      self::STATUS_CLOSED_DUPLICATE     => 'Closed, Duplicate',
-      self::STATUS_CLOSED_SPITE         => 'Closed out of Spite',
+      self::STATUS_OPEN                 => $open,
+      self::STATUS_CLOSED_RESOLVED      => $resolved,
+      self::STATUS_CLOSED_WONTFIX       => $wontfix,
+      self::STATUS_CLOSED_INVALID       => $invalid,
+      self::STATUS_CLOSED_DUPLICATE     => $duplicate,
+      self::STATUS_CLOSED_SPITE         => $spite,
     );
     return idx($map, $status, '???');
   }
 
-  public static function getTaskStatusTagColor($status) {
-    $default = PhabricatorTagView::COLOR_GREY;
+  public static function getTaskStatusColor($status) {
+    $default = self::COLOR_STATUS_OPEN;
 
     $map = array(
-      self::STATUS_OPEN                 => PhabricatorTagView::COLOR_ORANGE,
-      self::STATUS_CLOSED_RESOLVED      => PhabricatorTagView::COLOR_BLUE,
-      self::STATUS_CLOSED_WONTFIX       => PhabricatorTagView::COLOR_BLACK,
-      self::STATUS_CLOSED_INVALID       => PhabricatorTagView::COLOR_BLACK,
-      self::STATUS_CLOSED_DUPLICATE     => PhabricatorTagView::COLOR_BLACK,
-      self::STATUS_CLOSED_SPITE         => PhabricatorTagView::COLOR_INDIGO,
+      self::STATUS_OPEN             => self::COLOR_STATUS_OPEN,
+      self::STATUS_CLOSED_RESOLVED  => self::COLOR_STATUS_CLOSED,
+      self::STATUS_CLOSED_WONTFIX   => self::COLOR_STATUS_CLOSED,
+      self::STATUS_CLOSED_INVALID   => self::COLOR_STATUS_CLOSED,
+      self::STATUS_CLOSED_DUPLICATE => self::COLOR_STATUS_CLOSED,
+      self::STATUS_CLOSED_SPITE     => self::COLOR_STATUS_CLOSED,
     );
     return idx($map, $status, $default);
   }
 
-
+  public static function getIcon($status) {
+    $default = 'oh-open';
+    $map = array(
+      self::STATUS_OPEN             => 'oh-open',
+      self::STATUS_CLOSED_RESOLVED  => 'oh-closed-dark',
+      self::STATUS_CLOSED_WONTFIX   => 'oh-closed-dark',
+      self::STATUS_CLOSED_INVALID   => 'oh-closed-dark',
+      self::STATUS_CLOSED_DUPLICATE => 'oh-closed-dark',
+      self::STATUS_CLOSED_SPITE     => 'oh-closed-dark',
+    );
+    return idx($map, $status, $default);
+  }
+
+  public static function renderFullDescription($status) {
+    $color = self::getTaskStatusColor($status);
+
+    $img = id(new PHUIIconView())
+      ->setSpriteSheet(PHUIIconView::SPRITE_STATUS)
+      ->setSpriteIcon(self::getIcon($status));
+
+    $tag = phutil_tag(
+      'span',
+      array(
+        'class' => 'phui-header-'.$color,
+      ),
+      array(
+        $img,
+        self::getTaskStatusFullName($status),
+      ));
+
+    return $tag;
+  }
 }

src/applications/maniphest/controller/ManiphestTaskDetailController.php

@@ -359,7 +359,10 @@ final class ManiphestTaskDetailController extends ManiphestController {
     $view = id(new PHUIHeaderView())
       ->setHeader($task->getTitle());
 
-    $view->addTag(ManiphestView::renderTagForTask($task));
+    $status = $task->getStatus();
+    $status_name = ManiphestTaskStatus::renderFullDescription($status);
+
+    $view->addProperty(PHUIHeaderView::PROPERTY_STATUS, $status_name);
 
     return $view;
   }

src/applications/maniphest/view/ManiphestView.php

@@ -8,12 +8,10 @@ abstract class ManiphestView extends AphrontView {
   public static function renderTagForTask(ManiphestTask $task) {
     $status = $task->getStatus();
     $status_name = ManiphestTaskStatus::getTaskStatusFullName($status);
-    $status_color = ManiphestTaskStatus::getTaskStatusTagColor($status);
 
     return id(new PhabricatorTagView())
         ->setType(PhabricatorTagView::TYPE_STATE)
-        ->setName($status_name)
-        ->setBackgroundColor($status_color);
+        ->setName($status_name);
   }
 
 }

src/applications/people/event/PhabricatorPeopleHovercardEventListener.php

@@ -33,30 +33,26 @@ final class PhabricatorPeopleHovercardEventListener
       nonempty($profile->getTitle(),
         pht('No title was found befitting of this rare specimen'))));
 
-    $hovercard->addField(pht('User since'),
-      phabricator_date($user->getDateCreated(), $user));
-
     if ($user->getIsDisabled()) {
-      $hovercard->addTag(id(new PhabricatorTagView())
-        ->setBackgroundColor(PhabricatorTagView::COLOR_BLACK)
-        ->setName(pht('Disabled'))
-        ->setType(PhabricatorTagView::TYPE_STATE));
+      $hovercard->addField(pht('Account'), pht('Disabled'));
     } else {
       $statuses = id(new PhabricatorUserStatus())->loadCurrentStatuses(
         array($user->getPHID()));
       if ($statuses) {
         $current_status = reset($statuses);
+        $dateto = phabricator_datetime($current_status->getDateTo(), $user);
         $hovercard->addField(pht('Status'),
           $current_status->getDescription());
-        $hovercard->addTag(id(new PhabricatorTagView())
-          ->setName($current_status->getHumanStatus())
-          ->setBackgroundColor(PhabricatorTagView::COLOR_BLUE)
-          ->setType(PhabricatorTagView::TYPE_STATE));
+        $hovercard->addField(pht('Until'),
+          $dateto);
       } else {
         $hovercard->addField(pht('Status'), pht('Available'));
       }
     }
 
+    $hovercard->addField(pht('User since'),
+      phabricator_date($user->getDateCreated(), $user));
+
     if ($profile->getBlurb()) {
       $hovercard->addField(pht('Blurb'),
         phutil_utf8_shorten($profile->getBlurb(), 120));

src/applications/uiexample/examples/PhabricatorHovercardExample.php

@@ -38,8 +38,7 @@ final class PhabricatorHovercardExample extends PhabricatorUIExample {
 
     $tag = id(new PhabricatorTagView())
       ->setType(PhabricatorTagView::TYPE_STATE)
-      ->setBackgroundColor(PhabricatorTagView::COLOR_BLACK)
-      ->setName('Abandoned (Really)');
+      ->setName('Closed, Resolved');
     $panel = $this->createPanel("Maniphest Hovercard");
     $panel->appendChild(id(new PhabricatorHovercardView())
       ->setObjectHandle($task_handle)

src/view/phui/PHUIHeaderView.php

@@ -2,7 +2,7 @@
 
 final class PHUIHeaderView extends AphrontView {
 
-  const PROPERTY_STATE = 1;
+  const PROPERTY_STATUS = 1;
 
   private $objectName;
   private $header;
@@ -138,7 +138,7 @@ final class PHUIHeaderView extends AphrontView {
       $property_list = array();
       foreach ($this->properties as $type => $property) {
         switch ($type) {
-          case self::PROPERTY_STATE:
+          case self::PROPERTY_STATUS:
             $property_list[] = $property;
           break;
           default:

webroot/rsrc/css/layout/phabricator-action-header-view.css

@@ -52,6 +52,10 @@
   text-shadow: 0 -1px 1px rgba(0,0,0,.7);
 }
 
+.phabricator-action-header-icon-list .phabricator-tag-view {
+  font-weight: normal;
+}
+
 .phabricator-action-header-title span {
   float: left;
   height: 16px;

webroot/rsrc/css/layout/phabricator-timeline-view.css

@@ -137,7 +137,7 @@
 
 .phabricator-timeline-icon {
   position: absolute;
-  left: 8px;
+  left: 9px;
   top: 8px;
   height: 14px;
   width: 14px;

webroot/rsrc/css/phui/phui-header-view.css

@@ -82,6 +82,23 @@ body.device-phone .phui-header-view {
   margin: -2px 4px -2px 0;
 }
 
+.phui-header-subheader {
+  color: {$bluetext};
+}
+
 .phui-header-subheader .policy-link {
   color: {$darkbluetext};
 }
+
+.phui-header-subheader .phui-header-status-dark {
+  color: #111;
+  text-shadow: 0 1px #fff;
+}
+
+.phui-header-subheader .phui-header-status-red {
+  color: {$red};
+}
+
+.phui-header-subheader .phui-header-status-green {
+  color: {$green};
+}

webroot/rsrc/css/sprite-status.css

@@ -87,69 +87,81 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
 }
 
 .status-info-green {
-  background-position: 0px -30px;
+  background-position: -120px -15px;
 }
 
 .status-info-red {
-  background-position: -15px -30px;
+  background-position: 0px -30px;
 }
 
 .status-info-white {
-  background-position: -30px -30px;
+  background-position: -15px -30px;
 }
 
 .status-left-blue {
-  background-position: -45px -30px;
+  background-position: -30px -30px;
 }
 
 .status-left-dark {
-  background-position: -60px -30px;
+  background-position: -45px -30px;
 }
 
 .status-left-green {
-  background-position: -75px -30px;
+  background-position: -60px -30px;
 }
 
 .status-left-red {
-  background-position: -90px -30px;
+  background-position: -75px -30px;
 }
 
 .status-left-white {
-  background-position: -105px -30px;
+  background-position: -90px -30px;
 }
 
 .status-minus-blue {
-  background-position: 0px -45px;
+  background-position: -105px -30px;
 }
 
 .status-minus-dark {
-  background-position: -15px -45px;
+  background-position: -120px -30px;
 }
 
 .status-minus-green {
-  background-position: -30px -45px;
+  background-position: 0px -45px;
 }
 
 .status-minus-red {
-  background-position: -45px -45px;
+  background-position: -15px -45px;
 }
 
 .status-minus-white {
-  background-position: -60px -45px;
+  background-position: -30px -45px;
+}
+
+.status-oh-closed-dark {
+  background-position: -45px -45px;
 }
 
 .status-oh-closed {
+  background-position: -60px -45px;
+}
+
+.status-oh-open-green {
   background-position: -75px -45px;
 }
 
-.status-oh-open {
+.status-oh-open-red {
   background-position: -90px -45px;
 }
 
-.status-open-blue {
+.status-oh-open {
   background-position: -105px -45px;
 }
 
+.status-open-blue {
+  background-position: -120px -45px;
+}
+
 .status-open-dark {
   background-position: 0px -60px;
 }