[Redesign] Update Inline Comment UI

Summary: Ref T8099, Simplifies the button bar with a `borderless` option and implements in Differential Inline Commenting.

Test Plan:
Review new and old comments, submitted, unsubmitted, ghosts, done.

{F562765}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Maniphest Tasks: T8099

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

resources/celerity/map.php

@@ -7,10 +7,10 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '49de1b2f',
+    'core.pkg.css' => '699e02b0',
     'core.pkg.js' => 'a590b451',
     'darkconsole.pkg.js' => 'e7393ebb',
-    'differential.pkg.css' => '1b36e899',
+    'differential.pkg.css' => 'cf384ffa',
     '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' => 'fa5b8d1f',
+    'rsrc/css/application/differential/phui-inline-comment.css' => 'e862e60b',
     'rsrc/css/application/differential/revision-comment.css' => '14b8565a',
     'rsrc/css/application/differential/revision-history.css' => '0e8eb855',
     'rsrc/css/application/differential/revision-list.css' => 'f3c47d33',
@@ -127,7 +127,7 @@ return array(
     'rsrc/css/phui/phui-action-list.css' => '32c388b3',
     'rsrc/css/phui/phui-action-panel.css' => '3ee9afd5',
     'rsrc/css/phui/phui-box.css' => 'a5bb366d',
-    'rsrc/css/phui/phui-button.css' => 'cf7ca639',
+    'rsrc/css/phui/phui-button.css' => 'e9ea9260',
     'rsrc/css/phui/phui-crumbs-view.css' => 'ce840ec2',
     'rsrc/css/phui/phui-document.css' => '3eb3b3e3',
     'rsrc/css/phui/phui-feed-story.css' => 'c70d2dd9',
@@ -765,7 +765,7 @@ return array(
     'phriction-document-css' => 'd1861e06',
     'phui-action-panel-css' => '3ee9afd5',
     'phui-box-css' => 'a5bb366d',
-    'phui-button-css' => 'cf7ca639',
+    'phui-button-css' => 'e9ea9260',
     'phui-calendar-css' => 'ccabe893',
     'phui-calendar-day-css' => 'd1cf6f93',
     'phui-calendar-list-css' => 'c1c7f338',
@@ -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' => 'fa5b8d1f',
+    'phui-inline-comment-view-css' => 'e862e60b',
     'phui-list-view-css' => '02ab3534',
     'phui-object-box-css' => '3db9f358',
     'phui-object-item-list-view-css' => '2b126bca',

src/applications/uiexample/examples/PHUIButtonBarExample.php

@@ -61,6 +61,20 @@ final class PHUIButtonBarExample extends PhabricatorUIExample {
       $button_bar3->addButton($button);
     }
 
+    $button_bar4 = new PHUIButtonBarView();
+    $button_bar4->setBorderless(true);
+    foreach ($icons as $text => $icon) {
+      $image = id(new PHUIIconView())
+          ->setIconFont($icon);
+      $button = id(new PHUIButtonView())
+        ->setTag('a')
+        ->setTitle($text)
+        ->setTooltip($text)
+        ->setIcon($image);
+
+      $button_bar4->addButton($button);
+    }
+
     $layout1 = id(new PHUIBoxView())
       ->appendChild($button_bar1)
       ->addClass('ml');
@@ -73,11 +87,16 @@ final class PHUIButtonBarExample extends PhabricatorUIExample {
       ->appendChild($button_bar3)
       ->addClass('mlr mll mlb');
 
+    $layout4 = id(new PHUIBoxView())
+      ->appendChild($button_bar4)
+      ->addClass('mlr mll mlb');
+
     $wrap1 = id(new PHUIObjectBoxView())
       ->setHeaderText(pht('Button Bar Example'))
       ->appendChild($layout1)
       ->appendChild($layout2)
-      ->appendChild($layout3);
+      ->appendChild($layout3)
+      ->appendChild($layout4);
 
     return array($wrap1);
   }

src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php

@@ -191,16 +191,17 @@ final class PHUIDiffInlineCommentDetailView
     }
 
     $action_buttons = new PHUIButtonBarView();
-    $action_buttons->addClass('mml');
+    $action_buttons->setBorderless(true);
+    $action_buttons->addClass('inline-button-divider');
     $nextprev = null;
     if (!$this->preview) {
       $nextprev = new PHUIButtonBarView();
-      $nextprev->addClass('mml');
+      $nextprev->setBorderless(true);
+      $nextprev->addClass('inline-button-divider');
 
 
       $up = id(new PHUIButtonView())
         ->setTag('a')
-        ->setColor(PHUIButtonView::SIMPLE)
         ->setTooltip(pht('Previous'))
         ->setIconFont('fa-chevron-up')
         ->addSigil('differential-inline-prev')
@@ -208,7 +209,6 @@ final class PHUIDiffInlineCommentDetailView
 
       $down = id(new PHUIButtonView())
         ->setTag('a')
-        ->setColor(PHUIButtonView::SIMPLE)
         ->setTooltip(pht('Next'))
         ->setIconFont('fa-chevron-down')
         ->addSigil('differential-inline-next')
@@ -216,7 +216,6 @@ final class PHUIDiffInlineCommentDetailView
 
       $hide = id(new PHUIButtonView())
         ->setTag('a')
-        ->setColor(PHUIButtonView::SIMPLE)
         ->setTooltip(pht('Hide Comment'))
         ->setIconFont('fa-times')
         ->addSigil('hide-inline')
@@ -240,7 +239,6 @@ final class PHUIDiffInlineCommentDetailView
 
           $reply_button = id(new PHUIButtonView())
             ->setTag('a')
-            ->setColor(PHUIButtonView::SIMPLE)
             ->setIconFont('fa-reply')
             ->setTooltip(pht('Reply'))
             ->addSigil('differential-inline-reply')
@@ -256,7 +254,6 @@ final class PHUIDiffInlineCommentDetailView
     if ($this->editable && !$this->preview) {
       $edit_button = id(new PHUIButtonView())
         ->setTag('a')
-        ->setColor(PHUIButtonView::SIMPLE)
         ->setIconFont('fa-pencil')
         ->setTooltip(pht('Edit'))
         ->addSigil('differential-inline-edit')
@@ -265,7 +262,6 @@ final class PHUIDiffInlineCommentDetailView
 
       $delete_button = id(new PHUIButtonView())
         ->setTag('a')
-        ->setColor(PHUIButtonView::SIMPLE)
         ->setIconFont('fa-trash-o')
         ->setTooltip(pht('Delete'))
         ->addSigil('differential-inline-delete')
@@ -276,7 +272,7 @@ final class PHUIDiffInlineCommentDetailView
       $links[] = javelin_tag(
         'a',
         array(
-          'class' => 'button simple msl',
+          'class' => 'inline-button-divider pml msl',
           'meta'        => array(
             'anchor' => $anchor_name,
           ),
@@ -286,7 +282,6 @@ final class PHUIDiffInlineCommentDetailView
 
       $delete_button = id(new PHUIButtonView())
         ->setTag('a')
-        ->setColor(PHUIButtonView::SIMPLE)
         ->setTooltip(pht('Delete'))
         ->setIconFont('fa-trash-o')
         ->addSigil('differential-inline-delete')

src/view/phui/PHUIButtonBarView.php

@@ -3,14 +3,25 @@
 final class PHUIButtonBarView extends AphrontTagView {
 
   private $buttons = array();
+  private $borderless;
 
   public function addButton($button) {
     $this->buttons[] = $button;
     return $this;
   }
 
+  public function setBorderless($borderless) {
+    $this->borderless = $borderless;
+    return $this;
+  }
+
   protected function getTagAttributes() {
-    return array('class' => 'phui-button-bar');
+    $classes = array();
+    $classes[] = 'phui-button-bar';
+    if ($this->borderless) {
+      $classes[] = 'phui-button-bar-borderless';
+    }
+    return array('class' => implode(' ', $classes));
   }
 
   protected function getTagName() {

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

@@ -50,12 +50,6 @@
   background-color: {$sh-yellowbackground};
 }
 
-.device-desktop .differential-inline-comment .button.simple:hover
-  .phui-icon-view,
-.device-desktop .differential-inline-comment .button.simple:hover {
-  color: {$sky};
-}
-
 .differential-inline-comment-content {
   padding: 12px;
 }
@@ -72,6 +66,7 @@
 
 .differential-inline-comment .inline-head-right {
   float: right;
+  padding-right: 4px;
 }
 
 .differential-inline-comment .inline-head-right .button {
@@ -116,16 +111,6 @@
     background-color: {$lightblue};
 }
 
-.differential-inline-comment.differential-inline-comment-synthetic
-  .button.simple {
-  border-color: {$blue};
-}
-
-.differential-inline-comment.differential-inline-comment-synthetic
-  .button.simple .phui-icon-view {
-  color: {$blue};
-}
-
 .differential-inline-comment.differential-inline-comment-synthetic
   .differential-inline-comment-head {
     padding-bottom: 4px;
@@ -148,11 +133,6 @@
     background-color: {$lightgreybackground};
 }
 
-.differential-inline-comment.inline-comment-ghost
-  .button.simple .phui-icon-view {
-  color: {$lightgreytext};
-}
-
 /* - New/Edit Inline Comment --------------------------------------------------
 
   Styles for when you are creating or editing an inline comment.
@@ -201,14 +181,6 @@
   font-size: {$biggerfontsize};
 }
 
-.inline-state-is-draft .phui-button-bar .button {
-  border-color: {$lightgreyborder};
-}
-
-.inline-state-is-draft .phui-button-bar .phui-icon-view {
-  color: {$lightgreytext};
-}
-
 .differential-inline-comment-edit {
   background-color: {$lightgreybackground};
   border: 1px solid {$lightgreyborder};
@@ -237,36 +209,20 @@
 
 */
 
-.differential-inline-comment .differential-inline-done-label,
+.differential-inline-comment .differential-inline-done-label {
-.differential-inline-comment .button.simple {
   border-color: {$sh-yellowborder};
   color: {$sh-yellowicon};
 }
 
-.differential-inline-comment .button.simple .phui-icon-view {
-  color: {$sh-yellowicon};
-}
-
 .differential-inline-comment.inline-state-is-draft
   .differential-inline-done-label,
 .differential-inline-comment.inline-state-is-draft
   .button.simple,
 .differential-inline-comment.inline-comment-ghost
   .button.simple {
-  border-color: {$lightgreyborder};
   color: {$lightgreytext};
 }
 
-.differential-inline-comment.inline-state-is-draft
-  .button.simple .phui-icon-view {
-  color: {$lightgreytext};
-}
-
-.device-desktop .inline-state-is-draft
-  a.button.simple:hover {
-    border-color: {$lightgreyborder};
-}
-
 /* - Done Button --------------------------------------------------------------
 
   Default colors, hovers, checked styles for the Done Button.
@@ -277,7 +233,7 @@
   border: 1px solid {$sh-yellowborder};
   border-radius: 3px;
   display: inline-block;
-  padding: 4px 8px 5px;
+  padding: 3px 8px 4px;
   cursor: pointer;
 }
 
@@ -287,15 +243,6 @@
   cursor: pointer;
 }
 
-.device-desktop .differential-inline-comment.inline-is-done
-  .differential-inline-done-label:hover,
-.device-desktop .differential-inline-comment
-  .differential-inline-done-label:hover {
-    background-color: #fff;
-    color: {$sky};
-    border-color: {$lightblueborder};
-}
-
 .differential-inline-comment.inline-is-done
   .differential-inline-done-label {
     background-color: #fff;
@@ -345,13 +292,6 @@
     border-color: {$sky};
 }
 
-.differential-inline-comment.inline-is-done
-  .button.simple .phui-icon-view {
-    color: {$lightgreytext};
-}
-
-
-
 /* - Inline State is Draft ----------------------------------------------------
 
   The Unsubmitted state of the comment / done checkbox styles.
@@ -452,3 +392,8 @@
 .reveal-inlines:hover span.phui-icon-view {
   color: {$darkbluetext};
 }
+
+.inline-button-divider {
+  border-left: 1px solid rgba(55,55,55,.25);
+  margin-left: 8px;
+}

webroot/rsrc/css/phui/phui-button.css

@@ -264,7 +264,7 @@ a.policy-control .caret {
 }
 
 .phui-button-bar .button .phui-icon-view {
-  left: 11px;
+  left: 9px;
 }
 
 .button.has-icon .phui-button-text {
@@ -298,9 +298,34 @@ a.policy-control .caret {
 
 /* PHUI Button Bar */
 
+.phui-button-bar-borderless .button {
+  border: 0;
+  background-color: transparent;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.phui-button-bar-borderless .button .phui-icon-view {
+  font-size: 15px;
+  color: rgba(55,55,55,.4);
+}
+
+.phui-button-bar-borderless .button:hover {
+  background-color: transparent;
+  border-radius: 3px;
+}
+
+.phui-button-bar-borderless .button:hover .phui-icon-view {
+  color: rgba(55,55,55,.9);
+}
+
+.phui-button-bar-borderless .button {
+  border: 0;
+}
+
 .phui-button-bar a.button.has-icon {
   display: inline-block;
-  height: 16px;
+  height: 18px;
   width: 6px;
 }