Mostly provide CSS for "done" states

Summary: Ref T7660. I'm not toggling "inline-state-is-draft" correctly in JS yet since it's a little tricky (you can reload to see it) but the main state should work.

Test Plan:
  - Clicked "done", saw comment opacity fade with placeholder style.

Reviewers: chad

Reviewed By: chad

Subscribers: epriestley

Maniphest Tasks: T7660

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

resources/celerity/map.php

@@ -10,8 +10,8 @@ return array(
     'core.pkg.css' => '404f1f98',
     'core.pkg.js' => '75599122',
     'darkconsole.pkg.js' => '8ab24e01',
-    'differential.pkg.css' => '686ac058',
+    'differential.pkg.css' => '865a69a4',
-    'differential.pkg.js' => 'a7a75fd2',
+    'differential.pkg.js' => 'e324301d',
     'diffusion.pkg.css' => '591664fa',
     'diffusion.pkg.js' => 'bfc0737b',
     'maniphest.pkg.css' => '68d4dd3d',
@@ -55,7 +55,7 @@ return array(
     'rsrc/css/application/dashboard/dashboard.css' => '17937d22',
     'rsrc/css/application/diff/inline-comment-summary.css' => 'eb5f8e8c',
     'rsrc/css/application/differential/add-comment.css' => 'c478bcaa',
-    'rsrc/css/application/differential/changeset-view.css' => '79c27a4c',
+    'rsrc/css/application/differential/changeset-view.css' => '9d89c9ce',
     'rsrc/css/application/differential/core.css' => '7ac3cabc',
     'rsrc/css/application/differential/results-table.css' => '181aa9d9',
     'rsrc/css/application/differential/revision-comment.css' => '48186045',
@@ -364,7 +364,7 @@ return array(
     'rsrc/js/application/dashboard/behavior-dashboard-query-panel-select.js' => '453c5375',
     'rsrc/js/application/dashboard/behavior-dashboard-tab-panel.js' => 'd4eecc63',
     'rsrc/js/application/differential/ChangesetViewManager.js' => '58562350',
-    'rsrc/js/application/differential/DifferentialInlineCommentEditor.js' => 'cbaf4413',
+    'rsrc/js/application/differential/DifferentialInlineCommentEditor.js' => 'b3412377',
     'rsrc/js/application/differential/behavior-add-reviewers-and-ccs.js' => 'e10f8e18',
     'rsrc/js/application/differential/behavior-comment-jump.js' => '4fdb476d',
     'rsrc/js/application/differential/behavior-comment-preview.js' => '8e1389b5',
@@ -520,9 +520,9 @@ return array(
     'conpherence-thread-manager' => '24561adb',
     'conpherence-update-css' => '1099a660',
     'conpherence-widget-pane-css' => '9199d87c',
-    'differential-changeset-view-css' => '79c27a4c',
+    'differential-changeset-view-css' => '9d89c9ce',
     'differential-core-view-css' => '7ac3cabc',
-    'differential-inline-comment-editor' => 'cbaf4413',
+    'differential-inline-comment-editor' => 'b3412377',
     'differential-results-table-css' => '181aa9d9',
     'differential-revision-add-comment-css' => 'c478bcaa',
     'differential-revision-comment-css' => '48186045',
@@ -1650,6 +1650,14 @@ return array(
       'javelin-uri',
       'javelin-request',
     ),
+    'b3412377' => array(
+      'javelin-dom',
+      'javelin-util',
+      'javelin-stratcom',
+      'javelin-install',
+      'javelin-request',
+      'javelin-workflow',
+    ),
     'b3a4b884' => array(
       'javelin-behavior',
       'phabricator-prefab',
@@ -1758,14 +1766,6 @@ return array(
       'javelin-stratcom',
       'phabricator-phtize',
     ),
-    'cbaf4413' => array(
-      'javelin-dom',
-      'javelin-util',
-      'javelin-stratcom',
-      'javelin-install',
-      'javelin-request',
-      'javelin-workflow',
-    ),
     'd19198c8' => array(
       'javelin-install',
       'javelin-dom',

src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php

@@ -91,6 +91,10 @@ final class PHUIDiffInlineCommentDetailView
       $sigil = $sigil.' differential-inline-comment-preview';
     }
 
+    $classes = array(
+      'differential-inline-comment',
+    );
+
     $content = $inline->getContent();
     $handles = $this->handles;
 
@@ -111,6 +115,7 @@ final class PHUIDiffInlineCommentDetailView
     // TODO: This stuff is nonfinal, just making it do something.
     if ($inline->getHasReplies()) {
       $links[] = pht('Has Reply');
+      $classes[] = 'inline-has-reply';
     }
     if ($inline->getReplyToCommentPHID()) {
       $links[] = pht('Is Reply');
@@ -197,12 +202,15 @@ final class PHUIDiffInlineCommentDetailView
     }
 
     if (!$is_synthetic) {
+      $draft_state = false;
       switch ($inline->getFixedState()) {
         case PhabricatorInlineCommentInterface::STATE_DRAFT:
           $is_done = ($this->getCanMarkDone());
+          $draft_state = true;
           break;
         case PhabricatorInlineCommentInterface::STATE_UNDRAFT:
           $is_done = !($this->getCanMarkDone());
+          $draft_state = true;
           break;
         case PhabricatorInlineCommentInterface::STATE_DONE:
           $is_done = true;
@@ -213,6 +221,14 @@ final class PHUIDiffInlineCommentDetailView
           break;
       }
 
+      if ($is_done) {
+        $classes[] = 'inline-is-done';
+      }
+
+      if ($draft_state) {
+        $classes[] = 'inline-state-is-draft';
+      }
+
       $links[] = javelin_tag(
         'input',
         array(
@@ -250,9 +266,6 @@ final class PHUIDiffInlineCommentDetailView
         '');
     }
 
-    $classes = array(
-      'differential-inline-comment',
-    );
     if ($is_draft) {
       $classes[] = 'differential-inline-comment-unsaved-draft';
     }

webroot/rsrc/css/application/differential/changeset-view.css

@@ -489,3 +489,11 @@ tr.differential-inline-loading {
 .device-phone .differential-file-icon-header .phui-icon-view {
   display: none;
 }
+
+.inline-is-done {
+  opacity: 0.75;
+}
+
+.inline-state-is-draft input.differential-inline-done[type="checkbox"] {
+  /* TODO: Possibly style this. */
+}

webroot/rsrc/js/application/differential/DifferentialInlineCommentEditor.js

@@ -303,6 +303,15 @@ JX.install('DifferentialInlineCommentEditor', {
       new JX.Workflow(this._uri, data)
         .setHandler(JX.bind(this, function() {
           checkbox.checked = !checkbox.checked;
+
+          var comment = JX.DOM.findAbove(
+            checkbox,
+            'div',
+            'differential-inline-comment');
+          JX.DOM.alterClass(comment, 'inline-is-done', !!checkbox.checked);
+
+          // TODO: Dynamically update the "inline-state-is-draft" class.
+
           this._didUpdate();
         }))
         .start();