Update Maniphest for PHUITwoColumnView

Summary: Reworks Maniphest into a two column view. Moves priority and color to header, assignee to sidebar. quest points to header, and author to gutter. may be some confusion since priority only displays on open tickets. Test Plan: with and without description, custom fields, points, tablet, mobile and desktop. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15396
2024-11-10 00:42:41 +01:00 · 2016-03-04 15:44:24 -08:00 · 2016-03-04 15:44:24 -08:00 · 2b1ac4fcec
commit 2b1ac4fcec
parent 2f14a59b1d
10 changed files with 180 additions and 164 deletions
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@ -7,7 +7,7 @@
 */
 return array(
  'names' => array(
-    'core.pkg.css' => 'dd1447be',
+    'core.pkg.css' => 'db1cd0bd',
    'core.pkg.js' => '7d8faf57',
    'darkconsole.pkg.js' => 'e7393ebb',
    'differential.pkg.css' => '2de124c9',
@ -111,7 +111,7 @@ return array(
    'rsrc/css/font/font-aleo.css' => '8bdb2835',
    'rsrc/css/font/font-awesome.css' => 'c43323c5',
    'rsrc/css/font/font-lato.css' => 'c7ccd872',
-    'rsrc/css/font/phui-font-icon-base.css' => 'ecbbb4c2',
+    'rsrc/css/font/phui-font-icon-base.css' => '6449bce8',
    'rsrc/css/layout/phabricator-filetree-view.css' => 'fccf9f82',
    'rsrc/css/layout/phabricator-side-menu-view.css' => '3a3d9f41',
    'rsrc/css/layout/phabricator-source-code-view.css' => 'cbeef983',
@ -135,7 +135,7 @@ return array(
    'rsrc/css/phui/phui-form-view.css' => '4a1a0f5e',
    'rsrc/css/phui/phui-form.css' => 'aac1d51d',
    'rsrc/css/phui/phui-head-thing.css' => '11731da0',
-    'rsrc/css/phui/phui-header-view.css' => 'fc4acf14',
+    'rsrc/css/phui/phui-header-view.css' => 'bfb9fed3',
    'rsrc/css/phui/phui-hovercard.css' => 'de1a2119',
    'rsrc/css/phui/phui-icon-set-selector.css' => '1ab67aad',
    'rsrc/css/phui/phui-icon.css' => '3f33ab57',
@ -153,9 +153,9 @@ return array(
    'rsrc/css/phui/phui-segment-bar-view.css' => '46342871',
    'rsrc/css/phui/phui-spacing.css' => '042804d6',
    'rsrc/css/phui/phui-status.css' => '37309046',
-    'rsrc/css/phui/phui-tag-view.css' => '9d5d4400',
+    'rsrc/css/phui/phui-tag-view.css' => '6bbd83e2',
    'rsrc/css/phui/phui-timeline-view.css' => '2efceff8',
-    'rsrc/css/phui/phui-two-column-view.css' => 'd0ad8c10',
+    'rsrc/css/phui/phui-two-column-view.css' => '097630a3',
    'rsrc/css/phui/workboards/phui-workboard-color.css' => 'ac6fe6a7',
    'rsrc/css/phui/workboards/phui-workboard.css' => 'e6d89647',
    'rsrc/css/phui/workboards/phui-workcard.css' => '3646fb96',
@ -815,12 +815,12 @@ return array(
    'phui-document-view-css' => '9c71d2bf',
    'phui-document-view-pro-css' => '92d5b648',
    'phui-feed-story-css' => '04aec08f',
-    'phui-font-icon-base-css' => 'ecbbb4c2',
+    'phui-font-icon-base-css' => '6449bce8',
    'phui-fontkit-css' => '9cda225e',
    'phui-form-css' => 'aac1d51d',
    'phui-form-view-css' => '4a1a0f5e',
    'phui-head-thing-view-css' => '11731da0',
-    'phui-header-view-css' => 'fc4acf14',
+    'phui-header-view-css' => 'bfb9fed3',
    'phui-hovercard' => '1bd28176',
    'phui-hovercard-view-css' => 'de1a2119',
    'phui-icon-set-selector-css' => '1ab67aad',
@ -840,10 +840,10 @@ return array(
    'phui-segment-bar-view-css' => '46342871',
    'phui-spacing-css' => '042804d6',
    'phui-status-list-view-css' => '37309046',
-    'phui-tag-view-css' => '9d5d4400',
+    'phui-tag-view-css' => '6bbd83e2',
    'phui-theme-css' => '027ba77e',
    'phui-timeline-view-css' => '2efceff8',
-    'phui-two-column-view-css' => 'd0ad8c10',
+    'phui-two-column-view-css' => '097630a3',
    'phui-workboard-color-css' => 'ac6fe6a7',
    'phui-workboard-view-css' => 'e6d89647',
    'phui-workcard-view-css' => '3646fb96',
--- a/src/applications/differential/constants/DifferentialRevisionStatus.php
+++ b/src/applications/differential/constants/DifferentialRevisionStatus.php
@ -8,10 +8,11 @@

 final class DifferentialRevisionStatus extends Phobject {

-  const COLOR_STATUS_DEFAULT = 'status';
-  const COLOR_STATUS_DARK = 'status-dark';
-  const COLOR_STATUS_GREEN = 'status-green';
-  const COLOR_STATUS_RED = 'status-red';
+  const COLOR_STATUS_DEFAULT = 'bluegrey';
+  const COLOR_STATUS_DARK = 'indigo';
+  const COLOR_STATUS_BLUE = 'blue';
+  const COLOR_STATUS_GREEN = 'green';
+  const COLOR_STATUS_RED = 'red';

  public static function getRevisionStatusColor($status) {
    $default = self::COLOR_STATUS_DEFAULT;
@ -30,7 +31,7 @@ final class DifferentialRevisionStatus extends Phobject {
      ArcanistDifferentialRevisionStatus::ABANDONED      =>
        self::COLOR_STATUS_DARK,
      ArcanistDifferentialRevisionStatus::IN_PREPARATION =>
-        self::COLOR_STATUS_DARK,
+        self::COLOR_STATUS_BLUE,
    );
    return idx($map, $status, $default);
  }
@ -42,38 +43,30 @@ final class DifferentialRevisionStatus extends Phobject {
      ArcanistDifferentialRevisionStatus::NEEDS_REVIEW   =>
        'fa-square-o bluegrey',
      ArcanistDifferentialRevisionStatus::NEEDS_REVISION =>
-        'fa-refresh red',
+        'fa-refresh',
      ArcanistDifferentialRevisionStatus::CHANGES_PLANNED =>
-        'fa-headphones red',
+        'fa-headphones',
      ArcanistDifferentialRevisionStatus::ACCEPTED       =>
-        'fa-check green',
+        'fa-check',
      ArcanistDifferentialRevisionStatus::CLOSED         =>
        'fa-check-square-o',
      ArcanistDifferentialRevisionStatus::ABANDONED      =>
-        'fa-check-square-o',
+        'fa-plane',
      ArcanistDifferentialRevisionStatus::IN_PREPARATION =>
-        'fa-question-circle blue',
+        'fa-question-circle',
    );
    return idx($map, $status, $default);
  }

  public static function renderFullDescription($status) {
-    $color = self::getRevisionStatusColor($status);
    $status_name =
      ArcanistDifferentialRevisionStatus::getNameForRevisionStatus($status);

-    $img = id(new PHUIIconView())
-      ->setIcon(self::getRevisionStatusIcon($status));
-
-    $tag = phutil_tag(
-      'span',
-      array(
-        'class' => 'phui-header-status phui-header-'.$color,
-      ),
-      array(
-        $img,
-        $status_name,
-      ));
+    $tag = id(new PHUITagView())
+      ->setName($status_name)
+      ->setIcon(self::getRevisionStatusIcon($status))
+      ->setShade(self::getRevisionStatusColor($status))
+      ->setType(PHUITagView::TYPE_SHADE);

    return $tag;
  }
--- a/src/applications/maniphest/config/PhabricatorManiphestConfigOptions.php
+++ b/src/applications/maniphest/config/PhabricatorManiphestConfigOptions.php
@ -77,6 +77,7 @@ final class PhabricatorManiphestConfigOptions
        'name.full' => pht('Closed, Resolved'),
        'closed' => true,
        'special' => ManiphestTaskStatus::SPECIAL_CLOSED,
+        'transaction.icon' => 'fa-check-circle',
        'prefixes' => array(
          'closed',
          'closes',
@ -97,6 +98,7 @@ final class PhabricatorManiphestConfigOptions
      'wontfix' => array(
        'name' => pht('Wontfix'),
        'name.full' => pht('Closed, Wontfix'),
+        'transaction.icon' => 'fa-ban',
        'closed' => true,
        'prefixes' => array(
          'wontfix',
@ -110,6 +112,7 @@ final class PhabricatorManiphestConfigOptions
      'invalid' => array(
        'name' => pht('Invalid'),
        'name.full' => pht('Closed, Invalid'),
+        'transaction.icon' => 'fa-minus-circle',
        'closed' => true,
        'claim' => false,
        'prefixes' => array(
--- a/src/applications/maniphest/constants/ManiphestTaskStatus.php
+++ b/src/applications/maniphest/constants/ManiphestTaskStatus.php
@ -82,29 +82,22 @@ final class ManiphestTaskStatus extends ManiphestConstants {
    return self::getStatusAttribute($status, 'name', pht('Unknown Status'));
  }

-  public static function renderFullDescription($status) {
+  public static function renderFullDescription($status, $priority) {
    if (self::isOpenStatus($status)) {
-      $color = 'status';
-      $icon_color = 'bluegrey';
+      $name = pht('%s, %s', self::getTaskStatusFullName($status), $priority);
+      $color = 'grey';
+      $icon = 'fa-square-o';
    } else {
-      $color = 'status-dark';
-      $icon_color = '';
+      $name = self::getTaskStatusFullName($status);
+      $color = 'indigo';
+      $icon = 'fa-check-square-o';
    }

-    $icon = self::getStatusIcon($status);
-
-    $img = id(new PHUIIconView())
-      ->setIcon($icon.' '.$icon_color);
-
-    $tag = phutil_tag(
-      'span',
-      array(
-        'class' => 'phui-header-status phui-header-'.$color,
-      ),
-      array(
-        $img,
-        self::getTaskStatusFullName($status),
-      ));
+    $tag = id(new PHUITagView())
+      ->setName($name)
+      ->setIcon($icon)
+      ->setType(PHUITagView::TYPE_SHADE)
+      ->setShade($color);

    return $tag;
  }
--- a/src/applications/maniphest/controller/ManiphestTaskDetailController.php
+++ b/src/applications/maniphest/controller/ManiphestTaskDetailController.php
@ -65,24 +65,16 @@ final class ManiphestTaskDetailController extends ManiphestController {
      new ManiphestTransactionQuery(),
      $engine);

-    $actions = $this->buildActionView($task);
-
    $monogram = $task->getMonogram();
    $crumbs = $this->buildApplicationCrumbs()
-      ->addTextCrumb($monogram, '/'.$monogram);
+      ->addTextCrumb($monogram)
+      ->setBorder(true);

    $header = $this->buildHeaderView($task);
-    $properties = $this->buildPropertyView(
-      $task, $field_list, $edges, $actions, $handles);
+    $details = $this->buildPropertyView($task, $field_list, $edges, $handles);
    $description = $this->buildDescriptionView($task, $engine);
-
-    $object_box = id(new PHUIObjectBoxView())
-      ->setHeader($header)
-      ->addPropertyList($properties);
-
-    if ($description) {
-      $object_box->addPropertyList($description);
-    }
+    $actions = $this->buildActionView($task);
+    $properties = $this->buildPropertyListView($task, $handles);

    $title = pht('%s %s', $monogram, $task->getTitle());

@ -93,6 +85,17 @@ final class ManiphestTaskDetailController extends ManiphestController {
    $timeline->setQuoteRef($monogram);
    $comment_view->setTransactionTimeline($timeline);

+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setMainColumn(array(
+        $timeline,
+        $comment_view,
+      ))
+      ->addPropertySection(pht('DETAILS'), $details)
+      ->addPropertySection(pht('DESCRIPTION'), $description)
+      ->setPropertyList($properties)
+      ->setActionList($actions);
+
    return $this->newPage()
      ->setTitle($title)
      ->setCrumbs($crumbs)
@ -102,10 +105,9 @@ final class ManiphestTaskDetailController extends ManiphestController {
        ))
      ->appendChild(
        array(
-          $object_box,
-          $timeline,
-          $comment_view,
-        ));
+          $view,
+      ));
+
  }

  private function buildHeaderView(ManiphestTask $task) {
@ -114,11 +116,34 @@ final class ManiphestTaskDetailController extends ManiphestController {
      ->setUser($this->getRequest()->getUser())
      ->setPolicyObject($task);

-    $status = $task->getStatus();
-    $status_name = ManiphestTaskStatus::renderFullDescription($status);
+    $priority_name = ManiphestTaskPriority::getTaskPriorityName(
+      $task->getPriority());
+    $priority_color = ManiphestTaskPriority::getTaskPriorityColor(
+      $task->getPriority());

+    $status = $task->getStatus();
+    $status_name = ManiphestTaskStatus::renderFullDescription(
+      $status, $priority_name, $priority_color);
    $view->addProperty(PHUIHeaderView::PROPERTY_STATUS, $status_name);

+    $view->setHeaderIcon(ManiphestTaskStatus::getStatusIcon(
+      $task->getStatus()).' '.$priority_color);
+
+    if (ManiphestTaskPoints::getIsEnabled()) {
+      $points = $task->getPoints();
+      if ($points !== null) {
+        $points_name = pht('%s %s',
+          $task->getPoints(),
+          ManiphestTaskPoints::getPointsLabel());
+        $tag = id(new PHUITagView())
+          ->setName($points_name)
+          ->setShade('blue')
+          ->setType(PHUITagView::TYPE_SHADE);
+
+        $view->addTag($tag);
+      }
+    }
+
    return $view;
  }

@ -198,45 +223,11 @@ final class ManiphestTaskDetailController extends ManiphestController {
    ManiphestTask $task,
    PhabricatorCustomFieldList $field_list,
    array $edges,
-    PhabricatorActionListView $actions,
    $handles) {

    $viewer = $this->getRequest()->getUser();
-
    $view = id(new PHUIPropertyListView())
-      ->setUser($viewer)
-      ->setObject($task)
-      ->setActionList($actions);
-
-    $owner_phid = $task->getOwnerPHID();
-    if ($owner_phid) {
-      $assigned_to = $handles
-        ->renderHandle($owner_phid)
-        ->setShowHovercard(true);
-    } else {
-      $assigned_to = phutil_tag('em', array(), pht('None'));
-    }
-
-    $view->addProperty(pht('Assigned To'), $assigned_to);
-
-    $view->addProperty(
-      pht('Priority'),
-      ManiphestTaskPriority::getTaskPriorityName($task->getPriority()));
-
-    $author = $handles
-      ->renderHandle($task->getAuthorPHID())
-      ->setShowHovercard(true);
-
-    $view->addProperty(pht('Author'), $author);
-
-    if (ManiphestTaskPoints::getIsEnabled()) {
-      $points = $task->getPoints();
-      if ($points !== null) {
-        $view->addProperty(
-          ManiphestTaskPoints::getPointsLabel(),
-          $task->getPoints());
-      }
-    }
+      ->setUser($viewer);

    $source = $task->getOriginalEmailSource();
    if ($source) {
@ -304,13 +295,46 @@ final class ManiphestTaskDetailController extends ManiphestController {
        phutil_implode_html(phutil_tag('br'), $revisions_commits));
    }

-    $view->invokeWillRenderEvent();
-
    $field_list->appendFieldsToPropertyList(
      $task,
      $viewer,
      $view);

+    if ($view->hasAnyProperties()) {
+      return $view;
+    }
+
+    return null;
+  }
+
+  private function buildPropertyListView(ManiphestTask $task, $handles) {
+    $viewer = $this->getRequest()->getUser();
+    $view =  id(new PHUIPropertyListView())
+      ->setUser($viewer)
+      ->setObject($task);
+
+    $view->invokeWillRenderEvent();
+
+    $owner_phid = $task->getOwnerPHID();
+    if ($owner_phid) {
+      $assigned_to = $handles
+        ->renderHandle($owner_phid)
+        ->setShowHovercard(true);
+    } else {
+      $assigned_to = phutil_tag('em', array(), pht('None'));
+    }
+
+    $view->addProperty(pht('Assigned To'), $assigned_to);
+
+    $author_phid = $task->getAuthorPHID();
+    $author = $handles
+      ->renderHandle($author_phid)
+      ->setShowHovercard(true);
+
+    $date = phabricator_datetime($task->getDateCreated(), $viewer);
+
+    $view->addProperty(pht('Author'), $author);
+
    return $view;
  }

@ -321,9 +345,6 @@ final class ManiphestTaskDetailController extends ManiphestController {
    $section = null;
    if (strlen($task->getDescription())) {
      $section = new PHUIPropertyListView();
-      $section->addSectionHeader(
-        pht('Description'),
-        PHUIPropertyListView::ICON_SUMMARY);
      $section->addTextContent(
        phutil_tag(
          'div',
--- a/src/view/phui/PHUIHeaderView.php
+++ b/src/view/phui/PHUIHeaderView.php
@ -116,25 +116,17 @@ final class PHUIHeaderView extends AphrontTagView {
  }

  public function setStatus($icon, $color, $name) {
-    $header_class = 'phui-header-status';

-    if ($color) {
-      $icon = $icon.' '.$color;
-      $header_class = $header_class.'-'.$color;
+    // TODO: Normalize "closed/archived" to constants.
+    if ($color == 'dark') {
+      $color = PHUITagView::COLOR_INDIGO;
    }

-    $img = id(new PHUIIconView())
-      ->setIcon($icon);
-
-    $tag = phutil_tag(
-      'span',
-      array(
-        'class' => "phui-header-status {$header_class}",
-      ),
-      array(
-        $img,
-        $name,
-      ));
+    $tag = id(new PHUITagView())
+      ->setName($name)
+      ->setIcon($icon)
+      ->setShade($color)
+      ->setType(PHUITagView::TYPE_SHADE);

    return $this->addProperty(self::PROPERTY_STATUS, $tag);
  }
@ -285,7 +277,7 @@ final class PHUIHeaderView extends AphrontTagView {
        $this->buttonBar);
    }

-    if ($this->actionIcons || $this->tags) {
+    if ($this->actionIcons) {
      $action_list = array();
      if ($this->actionIcons) {
        foreach ($this->actionIcons as $icon) {
@ -297,14 +289,6 @@ final class PHUIHeaderView extends AphrontTagView {
            $icon);
        }
      }
-      if ($this->tags) {
-        $action_list[] = phutil_tag(
-          'li',
-          array(
-            'class' => 'phui-header-action-tag',
-          ),
-          array_interleave(' ', $this->tags));
-      }
      $right[] = phutil_tag(
        'ul',
          array(
@ -379,6 +363,10 @@ final class PHUIHeaderView extends AphrontTagView {
        $property_list[] = $this->renderPolicyProperty($this->policyObject);
      }

+      if ($this->tags) {
+        $property_list[] = $this->tags;
+      }
+
      $left[] = phutil_tag(
        'div',
        array(
--- a/webroot/rsrc/css/font/phui-font-icon-base.css
+++ b/webroot/rsrc/css/font/phui-font-icon-base.css
@ -148,7 +148,7 @@
 }
 .phui-icon-view.lightgreytext,
 .phui-icon-view.grey {
-  color: {$lightgreytext};
+  color: rgba({$alphagrey},0.3);
 }

 /* Hovers */
--- a/webroot/rsrc/css/phui/phui-header-view.css
+++ b/webroot/rsrc/css/phui/phui-header-view.css
@ -175,7 +175,8 @@ body .phui-header-shell.phui-bleed-header
  margin-top: 8px;
 }

-.phui-header-subheader .phui-icon-view {
+.phui-header-subheader .phui-tag-view .phui-icon-view,
+.phui-header-subheader .policy-header-callout .phui-icon-view {
  display: inline-block;
  margin: -2px 4px -2px 0;
  font-size: 15px;
@ -187,11 +188,18 @@ body .phui-header-shell.phui-bleed-header
 }

 .policy-header-callout,
-.phui-header-subheader .phui-header-status {
+.phui-header-subheader .phui-tag-core {
  padding: 3px 9px;
  border-radius: 3px;
-  background: rgba({$alphablue}, 0.08);
+  background: rgba({$alphablue}, 0.1);
  margin-right: 8px;
+  -webkit-font-smoothing: auto;
+  border-color: transparent;
+}
+
+.phui-header-subheader .phui-tag-type-shade .phui-tag-core {
+  border: none;
+  -webkit-font-smoothing: auto;
 }

 .policy-header-callout.policy-adjusted-weaker {
@ -221,26 +229,6 @@ body .phui-header-shell.phui-bleed-header
  color: {$sh-orangetext};
 }

-.phui-header-subheader .phui-header-status-dark {
-  color: {$sh-indigotext};
-  background: {$sh-indigobackground};
-  margin-right: 8px;
-}
-
-.phui-header-subheader .phui-header-status-dark .phui-icon-view {
-  color: {$sh-indigotext};
-}
-
-.phui-header-subheader .phui-header-status-red {
-  color: {$sh-redtext};
-  background: {$sh-redbackground};
-}
-
-.phui-header-subheader .phui-header-status-green {
-  color: {$sh-greentext};
-  background: {$sh-greenbackground};
-}
-
 .phui-header-action-links .phui-mobile-menu {
  display: none;
 }
--- a/webroot/rsrc/css/phui/phui-tag-view.css
+++ b/webroot/rsrc/css/phui/phui-tag-view.css
@ -257,6 +257,26 @@ a.phui-tag-view:hover.phui-tag-shade-blue .phui-tag-core,
  border-color: {$sh-blueborder};
 }

+/* - Sky ------------------------------------------------------------------- */
+
+.phui-tag-shade-sky .phui-tag-core,
+.jx-tokenizer-token.sky {
+  background: #E0F0FA;
+  border-color: {$sh-lightblueborder};
+  color: {$sh-bluetext};
+}
+
+.phui-tag-shade-sky .phui-icon-view,
+.jx-tokenizer-token.sky .phui-icon-view,
+.jx-tokenizer-token.sky .jx-tokenizer-x {
+  color: {$sh-blueicon};
+}
+
+a.phui-tag-view:hover.phui-tag-shade-sky .phui-tag-core,
+.jx-tokenizer-token.sky:hover {
+  border-color: {$sh-blueborder};
+}
+
 /* - Indigo ----------------------------------------------------------------- */

 .phui-tag-shade-indigo .phui-tag-core,
--- a/webroot/rsrc/css/phui/phui-two-column-view.css
+++ b/webroot/rsrc/css/phui/phui-two-column-view.css
@ -8,6 +8,10 @@
  margin-bottom: 24px;
 }

+.device .phui-two-column-view .phui-two-column-header {
+  margin-bottom: 12px;
+}
+
 .phui-two-column-view.with-subheader .phui-two-column-header {
  margin-bottom: 0;
 }
@ -99,6 +103,10 @@
  margin: 0;
 }

+.phui-main-column > .phui-timeline-view {
+  border-top: 1px solid {$thinblueborder};
+}
+
 /* Main Column Properties */

 .device-desktop .phui-main-column .phui-property-list-key {
@ -144,7 +152,13 @@
    padding: 0 4px;
 }

-.device-desktop .phui-two-column-properties .phui-property-list-container {
+.device .phui-two-column-properties .phui-property-list-stacked
+  .phui-property-list-properties .phui-property-list-value {
+  margin-bottom: 12px;
+}
+
+.device-desktop .phui-two-column-properties .phui-property-list-container,
+.device .phui-two-column-properties .phui-property-list-container {
  padding: 0;
 }

@ -155,10 +169,6 @@
    border: none;
 }

-.device .phui-two-column-properties .phui-property-list-container {
-  padding: 0 0 12px 0;
-}
-
 .device .phui-two-column-content .phui-two-column-properties.phui-object-box {
  padding: 0 12px;
 }