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

@@ -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',

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);
 
     }

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))
+      ->setHeader($handle->getName())
-      ->addActionLink($action_button);
+      ->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) {
+    $vote_class = null;
-      $icon = id(new PHUIIconView())
+    if ($votes > 0) {
-        ->setIconFont('fa-thumbs-up');
+      $vote_class = 'ponder-footer-action-helpful';
-      $helpful = phutil_tag(
-        'span',
-        array(
-          'class' => 'ponder-footer-action',
-        ),
-        array($votes, $icon));
-      $footer->addAction($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)

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);
   }
 
 }

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(

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 {