[Redesgin] Misc Inline Comment tweaks

Summary: Ref T8099. Better alignment with TODO and Ghost Icons.

Test Plan: Test more states of inline comments, ghosts, todos, unsubmitted, etc.

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Maniphest Tasks: T8099

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

resources/celerity/map.php

@@ -10,7 +10,7 @@ return array(
     'core.pkg.css' => '92a58b45',
     'core.pkg.js' => 'a590b451',
     'darkconsole.pkg.js' => 'e7393ebb',
-    'differential.pkg.css' => 'cf384ffa',
+    'differential.pkg.css' => '73f1d1bc',
     'differential.pkg.js' => 'ebef29b1',
     'diffusion.pkg.css' => '385e85b3',
     'diffusion.pkg.js' => '0115b37c',
@@ -61,7 +61,7 @@ return array(
     'rsrc/css/application/differential/add-comment.css' => 'c47f8c40',
     'rsrc/css/application/differential/changeset-view.css' => 'b6b0d1bb',
     'rsrc/css/application/differential/core.css' => '7ac3cabc',
-    'rsrc/css/application/differential/phui-inline-comment.css' => 'e862e60b',
+    'rsrc/css/application/differential/phui-inline-comment.css' => '9fadd6b8',
     'rsrc/css/application/differential/revision-comment.css' => '14b8565a',
     'rsrc/css/application/differential/revision-history.css' => '0e8eb855',
     'rsrc/css/application/differential/revision-list.css' => 'f3c47d33',
@@ -782,7 +782,7 @@ return array(
     'phui-image-mask-css' => '5a8b09c8',
     'phui-info-panel-css' => '27ea50a1',
     'phui-info-view-css' => '5b16bac6',
-    'phui-inline-comment-view-css' => 'e862e60b',
+    'phui-inline-comment-view-css' => '9fadd6b8',
     'phui-list-view-css' => '02ab3534',
     'phui-object-box-css' => '3db9f358',
     'phui-object-item-list-view-css' => '0053b016',

src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php

@@ -190,9 +190,6 @@ final class PHUIDiffInlineCommentDetailView
       }
     }
 
-    $action_buttons = new PHUIButtonBarView();
-    $action_buttons->setBorderless(true);
-    $action_buttons->addClass('inline-button-divider');
     $nextprev = null;
     if (!$this->preview) {
       $nextprev = new PHUIButtonBarView();
@@ -228,6 +225,7 @@ final class PHUIDiffInlineCommentDetailView
       $nextprev->addButton($up);
       $nextprev->addButton($down);
 
+      $action_buttons = array();
       if ($this->allowReply) {
 
         if (!$is_synthetic) {
@@ -237,13 +235,12 @@ final class PHUIDiffInlineCommentDetailView
           // file/line information, and synthetic comments don't have an inline
           // comment ID.
 
-          $reply_button = id(new PHUIButtonView())
+          $action_buttons[] = id(new PHUIButtonView())
             ->setTag('a')
             ->setIconFont('fa-reply')
             ->setTooltip(pht('Reply'))
             ->addSigil('differential-inline-reply')
             ->setMustCapture(true);
-          $action_buttons->addButton($reply_button);
         }
 
       }
@@ -252,21 +249,19 @@ final class PHUIDiffInlineCommentDetailView
     $anchor_name = $this->getAnchorName();
 
     if ($this->editable && !$this->preview) {
-      $edit_button = id(new PHUIButtonView())
+      $action_buttons[] = id(new PHUIButtonView())
         ->setTag('a')
         ->setIconFont('fa-pencil')
         ->setTooltip(pht('Edit'))
         ->addSigil('differential-inline-edit')
         ->setMustCapture(true);
-      $action_buttons->addButton($edit_button);
 
-      $delete_button = id(new PHUIButtonView())
+      $action_buttons[] = id(new PHUIButtonView())
         ->setTag('a')
         ->setIconFont('fa-trash-o')
         ->setTooltip(pht('Delete'))
         ->addSigil('differential-inline-delete')
         ->setMustCapture(true);
-      $action_buttons->addButton($delete_button);
 
     } else if ($this->preview) {
       $links[] = javelin_tag(
@@ -280,13 +275,12 @@ final class PHUIDiffInlineCommentDetailView
         ),
         pht('Not Visible'));
 
-      $delete_button = id(new PHUIButtonView())
+      $action_buttons[] = id(new PHUIButtonView())
         ->setTag('a')
         ->setTooltip(pht('Delete'))
         ->setIconFont('fa-trash-o')
         ->addSigil('differential-inline-delete')
         ->setMustCapture(true);
-      $action_buttons->addButton($delete_button);
     }
 
     $done_button = null;
@@ -407,6 +401,16 @@ final class PHUIDiffInlineCommentDetailView
       }
     }
 
+    $actions = null;
+    if ($action_buttons) {
+      $actions = new PHUIButtonBarView();
+      $actions->setBorderless(true);
+      $actions->addClass('inline-button-divider');
+      foreach ($action_buttons as $button) {
+        $actions->addButton($button);
+      }
+    }
+
     $group_left = phutil_tag(
       'div',
       array(
@@ -428,7 +432,7 @@ final class PHUIDiffInlineCommentDetailView
         $anchor,
         $done_button,
         $links,
-        $action_buttons,
+        $actions,
         $nextprev,
       ));
 

webroot/rsrc/css/application/differential/phui-inline-comment.css

@@ -46,7 +46,7 @@
   font-weight:  bold;
   color: {$darkbluetext};
   border-bottom: 1px solid {$sh-lightyellowborder};
-  padding: 4px 5px 4px 12px;
+  padding: 4px 5px 4px 8px;
   background-color: {$sh-yellowbackground};
 }
 
@@ -75,7 +75,7 @@
 
 .differential-inline-comment .inline-head-left {
   float: left;
-  padding: 5px 0;
+  padding: 4px;
 }
 
 .device-phone .differential-inline-comment .inline-head-left {
@@ -344,9 +344,8 @@
 }
 
 .ghost-icon {
-  background: {$darkgreybackground};
+  background: rgba(55,55,55,.07);
   float: left;
-  margin-right: 8px;
   padding: 2px 4px 2px 2px;
   position: absolute;
   top: 0;
@@ -355,12 +354,12 @@
 
 .ghost-icon .phui-icon-view {
   padding: 8px 7px;
-  font-size: 15px;
+  font-size: 16px;
   color: {$lightbluetext};
 }
 
 .device-desktop .ghost-icon .phui-icon-view:hover {
-  color: {$sky};
+  color: {$fire};
 }
 
 .differential-inline-comment.inline-comment-ghost
@@ -397,3 +396,7 @@
   border-left: 1px solid rgba(55,55,55,.25);
   margin-left: 8px;
 }
+
+.differential-inline-comment-synthetic .inline-button-divider {
+  border: none;
+}