From 2b1ac4fcec820c56decbfdd3228f0a39a03b5bd9 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Fri, 4 Mar 2016 15:44:24 -0800 Subject: [PATCH] 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 --- resources/celerity/map.php | 18 +-- .../constants/DifferentialRevisionStatus.php | 39 ++--- .../PhabricatorManiphestConfigOptions.php | 3 + .../constants/ManiphestTaskStatus.php | 31 ++-- .../ManiphestTaskDetailController.php | 139 ++++++++++-------- src/view/phui/PHUIHeaderView.php | 38 ++--- webroot/rsrc/css/font/phui-font-icon-base.css | 2 +- webroot/rsrc/css/phui/phui-header-view.css | 34 ++--- webroot/rsrc/css/phui/phui-tag-view.css | 20 +++ .../rsrc/css/phui/phui-two-column-view.css | 20 ++- 10 files changed, 180 insertions(+), 164 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index be8d5b9d1c..927c5d1eff 100644 --- 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', diff --git a/src/applications/differential/constants/DifferentialRevisionStatus.php b/src/applications/differential/constants/DifferentialRevisionStatus.php index 50bc903c40..4f332838ac 100644 --- 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; } diff --git a/src/applications/maniphest/config/PhabricatorManiphestConfigOptions.php b/src/applications/maniphest/config/PhabricatorManiphestConfigOptions.php index 724309175d..dc140d380a 100644 --- 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( diff --git a/src/applications/maniphest/constants/ManiphestTaskStatus.php b/src/applications/maniphest/constants/ManiphestTaskStatus.php index 3a839d8fac..eeeb4cf165 100644 --- 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; } diff --git a/src/applications/maniphest/controller/ManiphestTaskDetailController.php b/src/applications/maniphest/controller/ManiphestTaskDetailController.php index a15b8f4594..cbb55413ad 100644 --- 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', diff --git a/src/view/phui/PHUIHeaderView.php b/src/view/phui/PHUIHeaderView.php index 0e12bc9abe..0e76aafcd7 100644 --- 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( diff --git a/webroot/rsrc/css/font/phui-font-icon-base.css b/webroot/rsrc/css/font/phui-font-icon-base.css index 2ddd423d3c..23194b3bda 100644 --- 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 */ diff --git a/webroot/rsrc/css/phui/phui-header-view.css b/webroot/rsrc/css/phui/phui-header-view.css index cd4b7b1238..ddfda01173 100644 --- 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; } diff --git a/webroot/rsrc/css/phui/phui-tag-view.css b/webroot/rsrc/css/phui/phui-tag-view.css index a68ed19484..729c4719e5 100644 --- 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, diff --git a/webroot/rsrc/css/phui/phui-two-column-view.css b/webroot/rsrc/css/phui/phui-two-column-view.css index 6c36aa8bd1..bf1f9a76e4 100644 --- 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; }