Minor tweaks to inline comments

Summary: Ref T7447, Ref T1460. Moves "done" state to left, and no longer is a button (simpler CSS). Also feels a little nicer. Clean up some spacing issue with Ghosties.

Test Plan:
Test new and old comments, as author and reviewer.

{F389986}

{F389987}

{F389988}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: aik099, Korvin, epriestley

Maniphest Tasks: T1460, T7447

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

resources/celerity/map.php

@@ -46,7 +46,7 @@ return array(
     'rsrc/css/application/config/unhandled-exception.css' => '37d4f9a2',
     'rsrc/css/application/conpherence/durable-column.css' => '2e68a92f',
     'rsrc/css/application/conpherence/menu.css' => 'f389e048',
-    'rsrc/css/application/conpherence/message-pane.css' => 'e7c09fda',
+    'rsrc/css/application/conpherence/message-pane.css' => '3150e2a2',
     'rsrc/css/application/conpherence/notification.css' => 'd208f806',
     'rsrc/css/application/conpherence/transaction.css' => '25138b7f',
     'rsrc/css/application/conpherence/update.css' => '1099a660',
@@ -58,7 +58,7 @@ return array(
     'rsrc/css/application/differential/add-comment.css' => 'c47f8c40',
     'rsrc/css/application/differential/changeset-view.css' => 'e19cfd6e',
     'rsrc/css/application/differential/core.css' => '7ac3cabc',
-    'rsrc/css/application/differential/phui-inline-comment.css' => '03bb3528',
+    'rsrc/css/application/differential/phui-inline-comment.css' => 'ebe46529',
     'rsrc/css/application/differential/results-table.css' => '181aa9d9',
     'rsrc/css/application/differential/revision-comment.css' => '024dda6b',
     'rsrc/css/application/differential/revision-history.css' => '0e8eb855',
@@ -355,9 +355,9 @@ return array(
     'rsrc/js/application/aphlict/behavior-aphlict-status.js' => 'ea681761',
     'rsrc/js/application/auth/behavior-persona-login.js' => '9414ff18',
     'rsrc/js/application/config/behavior-reorder-fields.js' => '14a827de',
-    'rsrc/js/application/conpherence/ConpherenceThreadManager.js' => '0a5192c4',
+    'rsrc/js/application/conpherence/ConpherenceThreadManager.js' => '6709c934',
     'rsrc/js/application/conpherence/behavior-durable-column.js' => '657c2b50',
-    'rsrc/js/application/conpherence/behavior-menu.js' => '077a1dab',
+    'rsrc/js/application/conpherence/behavior-menu.js' => '804b0773',
     'rsrc/js/application/conpherence/behavior-pontificate.js' => '21ba5861',
     'rsrc/js/application/conpherence/behavior-quicksand-blacklist.js' => '7927a7d3',
     'rsrc/js/application/conpherence/behavior-widget-pane.js' => '93568464',
@@ -519,9 +519,9 @@ return array(
     'config-welcome-css' => '6abd79be',
     'conpherence-durable-column-view' => '2e68a92f',
     'conpherence-menu-css' => 'f389e048',
-    'conpherence-message-pane-css' => 'e7c09fda',
+    'conpherence-message-pane-css' => '3150e2a2',
     'conpherence-notification-css' => 'd208f806',
-    'conpherence-thread-manager' => '0a5192c4',
+    'conpherence-thread-manager' => '6709c934',
     'conpherence-transaction-css' => '25138b7f',
     'conpherence-update-css' => '1099a660',
     'conpherence-widget-pane-css' => '2af42ebe',
@@ -561,7 +561,7 @@ return array(
     'javelin-behavior-audit-preview' => 'd835b03a',
     'javelin-behavior-choose-control' => '6153c708',
     'javelin-behavior-config-reorder-fields' => '14a827de',
-    'javelin-behavior-conpherence-menu' => '077a1dab',
+    'javelin-behavior-conpherence-menu' => '804b0773',
     'javelin-behavior-conpherence-pontificate' => '21ba5861',
     'javelin-behavior-conpherence-widget-pane' => '93568464',
     'javelin-behavior-countdown-timer' => 'e4cc26b3',
@@ -795,7 +795,7 @@ return array(
     'phui-image-mask-css' => '5a8b09c8',
     'phui-info-panel-css' => '27ea50a1',
     'phui-info-view-css' => 'c6f0aef8',
-    'phui-inline-comment-view-css' => '03bb3528',
+    'phui-inline-comment-view-css' => 'ebe46529',
     'phui-list-view-css' => '2e25ebfb',
     'phui-object-box-css' => '7d160002',
     'phui-object-item-list-view-css' => '9db65899',
@@ -873,20 +873,6 @@ return array(
       'javelin-stratcom',
       'javelin-workflow',
     ),
-    '077a1dab' => array(
-      'javelin-behavior',
-      'javelin-dom',
-      'javelin-util',
-      'javelin-stratcom',
-      'javelin-workflow',
-      'javelin-behavior-device',
-      'javelin-history',
-      'javelin-vector',
-      'javelin-scrollbar',
-      'phabricator-title',
-      'phabricator-shaped-request',
-      'conpherence-thread-manager',
-    ),
     '07de8873' => array(
       'javelin-install',
       'javelin-util',
@@ -902,16 +888,6 @@ return array(
       'javelin-dom',
       'javelin-router',
     ),
-    '0a5192c4' => array(
-      'javelin-dom',
-      'javelin-util',
-      'javelin-stratcom',
-      'javelin-install',
-      'javelin-workflow',
-      'javelin-router',
-      'javelin-behavior-device',
-      'javelin-vector',
-    ),
     '0c6946e7' => array(
       'javelin-install',
       'javelin-dom',
@@ -1311,6 +1287,16 @@ return array(
       'phabricator-keyboard-shortcut',
       'conpherence-thread-manager',
     ),
+    '6709c934' => array(
+      'javelin-dom',
+      'javelin-util',
+      'javelin-stratcom',
+      'javelin-install',
+      'javelin-workflow',
+      'javelin-router',
+      'javelin-behavior-device',
+      'javelin-vector',
+    ),
     '6882e80a' => array(
       'javelin-dom',
     ),
@@ -1440,6 +1426,20 @@ return array(
       'javelin-behavior',
       'javelin-history',
     ),
+    '804b0773' => array(
+      'javelin-behavior',
+      'javelin-dom',
+      'javelin-util',
+      'javelin-stratcom',
+      'javelin-workflow',
+      'javelin-behavior-device',
+      'javelin-history',
+      'javelin-vector',
+      'javelin-scrollbar',
+      'phabricator-title',
+      'phabricator-shaped-request',
+      'conpherence-thread-manager',
+    ),
     82439934 => array(
       'javelin-behavior',
       'javelin-dom',

src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php

@@ -128,10 +128,10 @@ final class PHUIDiffInlineCommentDetailView
     if ($ghost) {
       if ($ghost['new']) {
         $ghosticon = 'fa-fast-forward';
-        $reason = pht('Click to view forward comment.');
+        $reason = pht('View forward comment');
       } else {
         $ghosticon = 'fa-fast-backward';
-        $reason = pht('Click to view previous comment.');
+        $reason = pht('View previous comment');
       }
       $ghost_id = celerity_generate_unique_node_id();
 
@@ -248,7 +248,7 @@ final class PHUIDiffInlineCommentDetailView
       $links[] = javelin_tag(
         'a',
         array(
-          'class' => 'button simple',
+          'class' => 'button simple msl',
           'meta'        => array(
             'anchor' => $anchor_name,
           ),
@@ -323,18 +323,24 @@ final class PHUIDiffInlineCommentDetailView
             pht('Done'),
           ));
       } else {
-        $done_button = id(new PHUIButtonView())
-          ->setTag('a')
-          ->setColor(PHUIButtonView::SIMPLE)
-          ->addClass('mml');
         if ($is_done) {
-          $done_button->setIconFont('fa-check');
+          $icon = id(new PHUIIconView())->setIconFont('fa-check sky msr');
-          $done_button->setText(pht('Done'));
+          $label = pht('Done');
-          $done_button->addClass('button-done');
+          $class = 'button-done';
         } else {
-          $done_button->addClass('button-not-done');
+          $icon = null;
-          $done_button->setText(pht('Not Done'));
+          $label = pht('Not Done');
+          $class = 'button-not-done';
         }
+        $done_button = phutil_tag(
+          'div',
+          array(
+            'class' => 'done-label '.$class,
+          ),
+          array(
+            $icon,
+            $label,
+          ));
       }
     }
 
@@ -397,10 +403,10 @@ final class PHUIDiffInlineCommentDetailView
       ),
       array(
         $anchor,
-        $links,
-        $nextprev,
-        $action_buttons,
         $done_button,
+        $links,
+        $action_buttons,
+        $nextprev,
       ));
 
     $markup = javelin_tag(

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

@@ -150,12 +150,24 @@
 }
 
 .differential-inline-comment.inline-comment-ghost
-  .button.simple {
+  .button.simple .phui-icon-view {
-  border-color: {$lightgreyborder};
+  color: {$lightgreytext};
 }
 
-.differential-inline-comment.inline-comment-ghost
+/* - New/Edit Inline Comment --------------------------------------------------
-  .button.simple .phui-icon-view {
+
+  Styles for when you are creating or editing an inline comment.
+
+*/
+
+.differential-inline-comment .done-label {
+  display: inline-block;
+  color: {$sh-yellowicon};
+  padding: 4px;
+}
+
+.differential-inline-comment.inline-state-is-draft .done-label,
+.differential-inline-comment.inline-comment-ghost .done-label {
   color: {$lightgreytext};
 }
 
@@ -239,6 +251,8 @@
 .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};
@@ -264,8 +278,6 @@
   border: 1px solid {$sh-yellowborder};
   border-radius: 3px;
   display: inline-block;
-  overflow: hidden;
-  margin-left: 8px;
   padding: 3px 8px 4px;
   cursor: pointer;
 }
@@ -299,32 +311,8 @@
     color: {$sky};
 }
 
-.device-desktop .differential-inline-comment.inline-state-is-draft
-  .differential-inline-comment-head .button.simple.button-not-done:hover {
-  color: {$lightgreytext};
-  background-color: transparent;
-  border-color: {$lightgreyborder};
-  cursor: auto;
-}
-
-.device-desktop .differential-inline-comment .differential-inline-comment-head
-  .simple.button.button-not-done:hover {
-    color: {$sh-yellowicon};
-    background-color: transparent;
-    border-color: {$sh-yellowborder};
-    cursor: auto;
-}
-
 .differential-inline-comment.inline-is-done .differential-inline-comment-head
-  .button.simple.button-done {
+  .button-done {
-    background-color: #fff;
-    color: {$sky};
-    border-color: {$sky};
-    cursor: auto;
-}
-
-.differential-inline-comment.inline-is-done .differential-inline-comment-head
-  .button.simple.button-done .phui-icon-view {
     color: {$sky};
 }
 
@@ -414,18 +402,13 @@
 
 .inline-comment-ghost .differential-inline-comment-head {
   padding-left: 40px;
-  padding-bottom: 0;
-}
-
-.inline-comment-ghost .inline-head-left {
-  padding: 4px 0;
 }
 
 .ghost-icon {
   background: {$darkgreybackground};
   float: left;
   margin-right: 8px;
-  padding: 2px 4px 1px 2px;
+  padding: 2px 4px 2px 2px;
   position: absolute;
   top: 0;
   left: 0;
@@ -462,7 +445,8 @@
 }
 
 .differential-inline-comment.inline-comment-ghost
-  .differential-inline-done-label {
+  .differential-inline-done-label,
+.differential-inline-comment.inline-comment-ghost {
     border-color: {$lightgreyborder};
     color: {$lightgreytext};
 }