From fca716d69969c1204bc6a6fdd46f01b8658b410c Mon Sep 17 00:00:00 2001 From: Chad Little Date: Sat, 15 Aug 2015 10:55:38 -0700 Subject: [PATCH] More Ponder Answer polish Summary: Fixes T9099, I think this is as much as I can come up with for unbeta. Cleans up the answer header (profile image, smaller font, smaller header). Cleans up voting (new, with color), and makes it a bit more readable. Test Plan: Review a number of answers in ponder with and without votes, comments. {F720189} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T9099 Differential Revision: https://secure.phabricator.com/D13907 --- resources/celerity/map.php | 4 +-- .../PonderQuestionViewController.php | 4 +++ .../ponder/view/PonderAnswerView.php | 35 ++++++++++++------- .../ponder/view/PonderFooterView.php | 12 ++++--- .../PhabricatorUSEnglishTranslation.php | 1 + .../css/application/ponder/ponder-view.css | 27 ++++++++++++-- 6 files changed, 63 insertions(+), 20 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 64d3ff99f3..cf7a8dfcb9 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -93,7 +93,7 @@ return array( 'rsrc/css/application/policy/policy-edit.css' => '815c66f7', 'rsrc/css/application/policy/policy-transaction-detail.css' => '82100a43', 'rsrc/css/application/policy/policy.css' => '957ea14c', - 'rsrc/css/application/ponder/ponder-view.css' => '6a399881', + 'rsrc/css/application/ponder/ponder-view.css' => '870153f4', 'rsrc/css/application/projects/project-icon.css' => '4e3eaa5a', 'rsrc/css/application/releeph/releeph-core.css' => '9b3c5733', 'rsrc/css/application/releeph/releeph-preview-branch.css' => 'b7a6f4a5', @@ -811,7 +811,7 @@ return array( 'policy-css' => '957ea14c', 'policy-edit-css' => '815c66f7', 'policy-transaction-detail-css' => '82100a43', - 'ponder-view-css' => '6a399881', + 'ponder-view-css' => '870153f4', 'project-icon-css' => '4e3eaa5a', 'raphael-core' => '51ee6b43', 'raphael-g' => '40dde778', diff --git a/src/applications/ponder/controller/PonderQuestionViewController.php b/src/applications/ponder/controller/PonderQuestionViewController.php index 06f924510f..94830f176d 100644 --- a/src/applications/ponder/controller/PonderQuestionViewController.php +++ b/src/applications/ponder/controller/PonderQuestionViewController.php @@ -223,16 +223,20 @@ final class PonderQuestionViewController extends PonderController { $engine->process(); $xaction_groups = mgroup($xactions, 'getObjectPHID'); + $author_phids = mpull($answers, 'getAuthorPHID'); + $handles = $this->loadViewerHandles($author_phids); $view = array(); foreach ($answers as $answer) { $xactions = idx($xaction_groups, $answer->getPHID(), array()); $id = $answer->getID(); + $handle = $handles[$answer->getAuthorPHID()]; $view[] = id(new PonderAnswerView()) ->setUser($viewer) ->setAnswer($answer) ->setTransactions($xactions) + ->setHandle($handle) ->setMarkupEngine($engine); } diff --git a/src/applications/ponder/view/PonderAnswerView.php b/src/applications/ponder/view/PonderAnswerView.php index 532bc9f2cd..5f2b1f5a70 100644 --- a/src/applications/ponder/view/PonderAnswerView.php +++ b/src/applications/ponder/view/PonderAnswerView.php @@ -5,6 +5,7 @@ final class PonderAnswerView extends AphrontTagView { private $answer; private $transactions; private $engine; + private $handle; public function setAnswer($answer) { $this->answer = $answer; @@ -21,6 +22,11 @@ final class PonderAnswerView extends AphrontTagView { return $this; } + public function setHandle($handle) { + $this->handle = $handle; + return $this; + } + protected function getTagAttributes() { return array( 'class' => 'ponder-answer-view', @@ -34,6 +40,7 @@ final class PonderAnswerView extends AphrontTagView { $status = $answer->getStatus(); $author_phid = $answer->getAuthorPHID(); $actions = $this->buildAnswerActions(); + $handle = $this->handle; $id = $answer->getID(); if ($status == PonderAnswerStatus::ANSWER_STATUS_HIDDEN) { @@ -73,8 +80,10 @@ final class PonderAnswerView extends AphrontTagView { $header = id(new PHUIHeaderView()) ->setUser($viewer) ->setEpoch($answer->getDateCreated()) - ->setHeader($viewer->renderHandle($author_phid)) - ->addActionLink($action_button); + ->setHeader($handle->getName()) + ->addActionLink($action_button) + ->setImage($handle->getImageURI()) + ->setImageURL($handle->getURI()); $content = phutil_tag( 'div', @@ -95,17 +104,19 @@ final class PonderAnswerView extends AphrontTagView { ->setCount(count($this->transactions)); $votes = $answer->getVoteCount(); - if ($votes) { - $icon = id(new PHUIIconView()) - ->setIconFont('fa-thumbs-up'); - $helpful = phutil_tag( - 'span', - array( - 'class' => 'ponder-footer-action', - ), - array($votes, $icon)); - $footer->addAction($helpful); + $vote_class = null; + if ($votes > 0) { + $vote_class = 'ponder-footer-action-helpful'; } + $icon = id(new PHUIIconView()) + ->setIconFont('fa-thumbs-up msr'); + $helpful = phutil_tag( + 'span', + array( + 'class' => 'ponder-footer-action '.$vote_class, + ), + array($icon, $votes)); + $footer->addAction($helpful); $answer_view = id(new PHUIObjectBoxView()) ->setHeader($header) diff --git a/src/applications/ponder/view/PonderFooterView.php b/src/applications/ponder/view/PonderFooterView.php index 8f55b86aeb..b1f346b147 100644 --- a/src/applications/ponder/view/PonderFooterView.php +++ b/src/applications/ponder/view/PonderFooterView.php @@ -36,9 +36,13 @@ final class PonderFooterView extends AphrontTagView { $content_id = $this->contentID; if ($this->count == 0) { + $icon = id(new PHUIIconView()) + ->setIconFont('fa-plus-circle msr'); $text = pht('Add a Comment'); } else { - $text = pht('Show %s Comments', new PhutilNumber($this->count)); + $icon = id(new PHUIIconView()) + ->setIconFont('fa-comments msr'); + $text = pht('Show %d Comment(s)', new PhutilNumber($this->count)); } $actions = array(); @@ -54,7 +58,7 @@ final class PonderFooterView extends AphrontTagView { 'hideIDs' => array($hide_action_id), ), ), - $text); + array($icon, $text)); $show_action = javelin_tag( 'a', @@ -69,12 +73,12 @@ final class PonderFooterView extends AphrontTagView { 'hideIDs' => array($content_id, $show_action_id), ), ), - pht('Hide Comments')); + array($icon, pht('Hide Comments'))); $actions[] = $hide_action; $actions[] = $show_action; - return array($actions, $this->actions); + return array($this->actions, $actions); } } diff --git a/src/infrastructure/internationalization/translation/PhabricatorUSEnglishTranslation.php b/src/infrastructure/internationalization/translation/PhabricatorUSEnglishTranslation.php index 76f2bab8ba..9ac0d0b591 100644 --- a/src/infrastructure/internationalization/translation/PhabricatorUSEnglishTranslation.php +++ b/src/infrastructure/internationalization/translation/PhabricatorUSEnglishTranslation.php @@ -33,6 +33,7 @@ final class PhabricatorUSEnglishTranslation '%d diff(s)' => array('%d diff', '%d diffs'), '%d Answer(s)' => array('%d Answer', '%d Answers'), + 'Show %d Comment(s)' => array('Show %d Comment', 'Show %d Comments'), '%s DIFF LINK(S)' => array('DIFF LINK', 'DIFF LINKS'), 'You successfully created %d diff(s).' => array( diff --git a/webroot/rsrc/css/application/ponder/ponder-view.css b/webroot/rsrc/css/application/ponder/ponder-view.css index 867009c4bb..d1b599d529 100644 --- a/webroot/rsrc/css/application/ponder/ponder-view.css +++ b/webroot/rsrc/css/application/ponder/ponder-view.css @@ -31,22 +31,45 @@ margin-left: 12px; } +.ponder-answer-view .phui-header-shell { + padding-bottom: 8px; +} + +.ponder-answer-view .phui-header-view .phui-header-header { + font-size: 16px; +} + +.ponder-answer-view .phui-header-col1 { + width: 45px; +} + +.ponder-answer-view .phui-header-image { + height: 35px; + width: 35px; + border-radius: 3px; +} + .ponder-footer-view { margin: 0 4px -4px; + text-align: right; } .ponder-footer-view .ponder-footer-action { padding: 4px 8px; - margin-right: 8px; + margin-left: 8px; color: {$bluetext}; display: inline-block; background-color: rgba(71, 87, 120, 0.06); font-size: {$smallerfontsize}; } +.ponder-footer-view .ponder-footer-action.ponder-footer-action-helpful { + background-color: {$lightyellow}; +} + .ponder-footer-view .ponder-footer-action .phui-icon-view { color: {$bluetext}; - margin-left: 4px; + font-size: {$smallerfontsize}; } .ponder-footer-view a:hover {