Polish up Done Button UI States

Summary:
Improves the UI quite a bit.

 - `dashed` borders //everywhere// to denote **Unsubmitted**
 - `$sky` sprinkled everywhere to denote **Done**
 - Consilidate `inline-state-is-draft` to simply styles.

Test Plan:
Sent myself test comments, logged out, read comments on new account. Marked as done, submitted.

{F352240}

{F352242}

{F352245}

{F352246}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

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

resources/celerity/map.php

@@ -57,7 +57,7 @@ return array(
     'rsrc/css/application/differential/add-comment.css' => 'c47f8c40',
     'rsrc/css/application/differential/changeset-view.css' => 'f36406b1',
     'rsrc/css/application/differential/core.css' => '7ac3cabc',
-    'rsrc/css/application/differential/phui-inline-comment.css' => 'a96c315d',
+    'rsrc/css/application/differential/phui-inline-comment.css' => '0cdae426',
     'rsrc/css/application/differential/results-table.css' => '181aa9d9',
     'rsrc/css/application/differential/revision-comment.css' => '024dda6b',
     'rsrc/css/application/differential/revision-history.css' => '0e8eb855',
@@ -790,7 +790,7 @@ return array(
     'phui-image-mask-css' => '5a8b09c8',
     'phui-info-panel-css' => '27ea50a1',
     'phui-info-view-css' => 'c6f0aef8',
-    'phui-inline-comment-view-css' => 'a96c315d',
+    'phui-inline-comment-view-css' => '0cdae426',
     'phui-list-view-css' => '2e25ebfb',
     'phui-object-box-css' => 'd68ce5dc',
     'phui-object-item-list-view-css' => '9db65899',

src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php

@@ -260,25 +260,40 @@ final class PHUIDiffInlineCommentDetailView
         $classes[] = 'inline-state-is-draft';
       }
 
-      $done_input = javelin_tag(
+      if ($this->getCanMarkDone()) {
-        'input',
+        $done_input = javelin_tag(
-        array(
+          'input',
-          'type' => 'checkbox',
+          array(
-          'checked' => ($is_done ? 'checked' : null),
+            'type' => 'checkbox',
-          'disabled' => ($this->getCanMarkDone() ? null : 'disabled'),
+            'checked' => ($is_done ? 'checked' : null),
-          'class' => 'differential-inline-done',
+            'disabled' => ($this->getCanMarkDone() ? null : 'disabled'),
-          'sigil' => 'differential-inline-done',
+            'class' => 'differential-inline-done',
-        ));
+            'sigil' => 'differential-inline-done',
-      $done_button = phutil_tag(
+          ));
-        'label',
+        $done_button = phutil_tag(
-        array(
+          'label',
-          'class' => 'differential-inline-done-label '.
+          array(
-                      ($this->getCanMarkDone() ? null : 'done-is-disabled'),
+            'class' => 'differential-inline-done-label '.
-        ),
+                        ($this->getCanMarkDone() ? null : 'done-is-disabled'),
-        array(
+          ),
-          $done_input,
+          array(
-          pht('Done'),
+            $done_input,
-        ));
+            pht('Done'),
+          ));
+      } else {
+        $done_button = id(new PHUIButtonView())
+          ->setTag('a')
+          ->setColor(PHUIButtonView::SIMPLE)
+          ->addClass('mml');
+        if ($is_done) {
+          $done_button->setIconFont('fa-check');
+          $done_button->setText(pht('Done'));
+          $done_button->addClass('button-done');
+        } else {
+          $done_button->addClass('button-not-done');
+          $done_button->setText(pht('Not Done'));
+        }
+      }
     }
 
     $content = $this->markupEngine->getOutput(
@@ -299,7 +314,7 @@ final class PHUIDiffInlineCommentDetailView
     }
 
     if ($inline->isDraft() && !$is_synthetic) {
-      $classes[] = 'differential-inline-comment-unsaved-draft';
+      $classes[] = 'inline-state-is-draft';
     }
     if ($is_synthetic) {
       $classes[] = 'differential-inline-comment-synthetic';

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

@@ -39,8 +39,8 @@
   border-radius: 3px;
 }
 
-.differential-inline-comment-unsaved-draft {
+.inline-state-is-draft {
-  border: 1px solid {$lightgreyborder};
+  border: 1px dashed {$greyborder};
 }
 
 .differential-inline-comment-head {
@@ -61,8 +61,8 @@
   padding: 12px;
 }
 
-.differential-inline-comment-unsaved-draft .differential-inline-comment-head {
+.inline-state-is-draft .differential-inline-comment-head {
-  border-bottom: 1px solid {$lightgreyborder};
+  border-bottom: 1px dashed {$lightgreyborder};
   background-color: {$lightgreybackground};
 }
 
@@ -164,11 +164,11 @@
   font-size: 14px;
 }
 
-.differential-inline-comment-unsaved-draft .phui-button-bar .button {
+.inline-state-is-draft .phui-button-bar .button {
   border-color: {$lightgreyborder};
 }
 
-.differential-inline-comment-unsaved-draft .phui-button-bar .phui-icon-view {
+.inline-state-is-draft .phui-button-bar .phui-icon-view {
   color: {$lightgreytext};
 }
 
@@ -210,20 +210,20 @@
   color: {$sh-yellowicon};
 }
 
-.differential-inline-comment.differential-inline-comment-unsaved-draft
+.differential-inline-comment.inline-state-is-draft
   .differential-inline-done-label,
-.differential-inline-comment.differential-inline-comment-unsaved-draft
+.differential-inline-comment.inline-state-is-draft
   .button.simple {
   border-color: {$lightgreyborder};
   color: {$lightgreytext};
 }
 
-.differential-inline-comment.differential-inline-comment-unsaved-draft
+.differential-inline-comment.inline-state-is-draft
   .button.simple .phui-icon-view {
   color: {$lightgreytext};
 }
 
-.device-desktop .differential-inline-comment-unsaved-draft
+.device-desktop .inline-state-is-draft
   a.button.simple:hover {
     border-color: {$lightgreyborder};
 }
@@ -244,21 +244,12 @@
   cursor: pointer;
 }
 
-.inline-state-is-draft .differential-inline-done-label {
-  /* TODO: Placeholder style. */
-  border-style: dashed;
-}
-
 .differential-inline-done-label .differential-inline-done {
   margin: 0 6px 0 0;
   display: inline;
   cursor: pointer;
 }
 
-input.differential-inline-done[disabled="disabled"] {
-  cursor: auto;
-}
-
 .device-desktop .differential-inline-comment.inline-is-done
   .differential-inline-done-label:hover,
 .device-desktop .differential-inline-comment
@@ -268,44 +259,11 @@ input.differential-inline-done[disabled="disabled"] {
     border-color: {$lightblueborder};
 }
 
-.differential-inline-comment .differential-inline-comment-head
-  .differential-inline-done-label.done-is-disabled {
-  color: {$sh-yellowtext};
-  border-color: {$sh-yellowborder};
-  opacity: .5;
-}
-
-.differential-inline-comment.differential-inline-comment-unsaved-draft
-  .differential-inline-done-label.done-is-disabled {
-  color: {$lightgreytext};
-  border-color: {$lightgreyborder};
-  opacity: .5;
-}
-
-.device-desktop
-  .differential-inline-comment.differential-inline-comment-unsaved-draft
-  .differential-inline-done-label.done-is-disabled:hover {
-    background-color: transparent;
-    cursor: auto;
-}
-
-.differential-inline-comment
-  .differential-inline-done-label.done-is-disabled {
-    border-color: {$sh-lightyellowborder};
-    color: {$sh-yellowtext};
-}
-
-.device-desktop .differential-inline-comment
-  .differential-inline-done-label.done-is-disabled:hover {
-    background-color: transparent;
-    cursor: auto;
-}
-
 .differential-inline-comment.inline-is-done
   .differential-inline-done-label {
     background-color: #fff;
     border-color: {$lightblueborder};
-    color: {$sky} !important;
+    color: {$sky};
     opacity: 1;
 }
 
@@ -315,6 +273,26 @@ input.differential-inline-done[disabled="disabled"] {
     color: {$sky};
 }
 
+.differential-inline-comment.inline-state-is-draft
+  .button-not-done:hover {
+  color: {$lightgreytext} !important;
+  background-color: transparent;
+  border-color: {$lightgreyborder};
+  cursor: auto;
+}
+
+.differential-inline-comment.inline-is-done .differential-inline-comment-head
+  .button.simple.button-done {
+    background-color: #fff;
+    color: {$sky};
+    border-color: {$sky};
+}
+
+.differential-inline-comment.inline-is-done .differential-inline-comment-head
+  .button.simple.button-done .phui-icon-view {
+    color: {$sky};
+}
+
 
 /* - Inline Is Done -----------------------------------------------------------
 
@@ -333,13 +311,18 @@ input.differential-inline-done[disabled="disabled"] {
 }
 
 .differential-inline-comment.inline-is-done .differential-inline-comment-head
-  .button.simple,
+  .button.simple {
-.differential-inline-comment.inline-is-done .differential-inline-comment-head
-  .differential-inline-done-label {
     border-color: {$lightgreyborder};
     color: {$lightgreytext};
 }
 
+.differential-inline-comment.inline-is-done .differential-inline-comment-head
+  .differential-inline-done-label {
+    color: {$sky};
+    background-color: #fff;
+    border-color: {$sky};
+}
+
 .differential-inline-comment.inline-is-done
   .button.simple .phui-icon-view {
     color: {$lightgreytext};
@@ -347,7 +330,7 @@ input.differential-inline-done[disabled="disabled"] {
 
 
 
-/* - Unsaved Draft ------------------------------------------------------------
+/* - Inline State is Draft ----------------------------------------------------
 
   The Unsubmitted state of the comment / done checkbox styles.
 
@@ -357,11 +340,14 @@ input.differential-inline-done[disabled="disabled"] {
   display: none;
 }
 
-.differential-inline-comment.differential-inline-comment-unsaved-draft
+.differential-inline-comment.inline-state-is-draft .inline-draft-text {
-  .inline-draft-text {
     display: inline-block;
 }
 
+.inline-state-is-draft .differential-inline-done-label {
+  border-style: dashed;
+}
+
 
 /* - Undo ---------------------------------------------------------------------