Clearly show draft vs nondraft inline comments

Summary: Fixes T2638; mark draft inlines in Pholio in a way similar to Differential.

Test Plan: {F34553}

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T2638

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

Author: epriestley

src/__celerity_resource_map__.php

@@ -3236,7 +3236,7 @@
   ),
   'pholio-css' =>
   array(
-    'uri' => '/res/5bbb9e67/rsrc/css/application/pholio/pholio.css',
+    'uri' => '/res/b74040b8/rsrc/css/application/pholio/pholio.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3245,7 +3245,7 @@
   ),
   'pholio-inline-comments-css' =>
   array(
-    'uri' => '/res/647d658d/rsrc/css/application/pholio/pholio-inline-comments.css',
+    'uri' => '/res/241b121c/rsrc/css/application/pholio/pholio-inline-comments.css',
     'type' => 'css',
     'requires' =>
     array(

src/applications/pholio/view/PholioInlineCommentView.php

@@ -40,42 +40,57 @@ public function render() {
     }
 
     $actions = null;
-
-    if ($this->inlineComment->getTransactionPHID() === null &&
-      $this->inlineComment->getEditPolicy(
-        PhabricatorPolicyCapability::CAN_EDIT) == $this->user->getPHID()) {
+    $inline = $this->inlineComment;
+    $phid = $inline->getPHID();
+    $id = $inline->getID();
+    $user = $this->user;
+
+    $is_draft = ($inline->getTransactionPHID() === null);
+    $can_edit = PhabricatorPolicyFilter::hasCapability(
+      $user,
+      $inline,
+      PhabricatorPolicyCapability::CAN_EDIT);
+
+    if ($is_draft && $can_edit) {
+      $draft = phutil_tag(
+        'span',
+        array(
+          'class' => 'pholio-inline-status',
+        ),
+        pht('Not Submitted Yet'));
 
       $edit_action = javelin_tag(
         'a',
         array(
-          'href' => '/pholio/inline/edit/'.$this->inlineComment->getID(),
+          'href' => '/pholio/inline/edit/'.$id.'/',
           'sigil' => 'inline-edit',
           'meta' => array(
-            'phid' => $this->inlineComment->getPHID(),
-            'id' => $this->inlineComment->getID()
+            'phid' => $phid,
+            'id' => $id,
           )
         ),
         pht('Edit'));
 
       $delete_action = javelin_tag(
         'a',
         array(
-          'href' => '/pholio/inline/delete/'.$this->inlineComment->getID(),
+          'href' => '/pholio/inline/delete/'.$id.'/',
           'sigil' => 'inline-delete',
           'meta' => array(
-              'phid' => $this->inlineComment->getPHID(),
-              'id' => $this->inlineComment->getID()
+            'phid' => $phid,
+            'id' => $id,
           )
         ),
         pht('Delete'));
 
-
       $actions = phutil_tag(
         'span',
         array(
           'class' => 'pholio-inline-head-links'
         ),
-        array($edit_action, $delete_action));
+        phutil_implode_html(
+          " \xC2\xB7 ",
+          array($draft, $edit_action, $delete_action)));
     }
 
     $comment_header = phutil_tag(
@@ -87,7 +102,7 @@ public function render() {
 
 
     $comment = $this->engine->renderOneObject(
-      $this->inlineComment,
+      $inline,
       PholioTransactionComment::MARKUP_FIELD_COMMENT,
       $this->user);
 
@@ -96,14 +111,21 @@ public function render() {
       array(),
       $comment);
 
+    $classes = array();
+    $classes[] = 'pholio-inline-comment';
+
+    if ($is_draft) {
+      $classes[] = 'pholio-inline-comment-draft';
+    }
+
     $comment_block = javelin_tag(
       'div',
       array(
-        'id' => $this->inlineComment->getPHID()."_comment",
-        'class' => 'pholio-inline-comment',
+        'id' => "{$phid}_comment",
+        'class' => implode(' ', $classes),
         'sigil' => 'inline_comment',
         'meta' => array(
-          'phid' => $this->inlineComment->getPHID()
+          'phid' => $phid,
         )
       ),
       array($comment_header, $comment_body));

webroot/rsrc/css/application/pholio/pholio-inline-comments.css

@@ -1,6 +1,32 @@
 /**
  * @provides pholio-inline-comments-css
  */
+
+.pholio-inline-comment {
+  border: 1px solid #555555;
+  background: #353535;
+  margin: 0 0 5px 0;
+  padding: 8px 10px;
+  color: #ccc;
+
+  font-family: Verdana;
+  font-size: 11px;
+}
+
+.pholio-mock-inline-comments {
+  width: 300px;
+  border-left: 1px solid #101010;
+  border-top: 1px solid #333;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  padding: 10px;
+  background: #282828;
+  overflow-x: auto;
+  text-align: left;
+}
+
 .pholio-inline-comment-dialog-title {
   font-weight: bold;
   color: #fff;
@@ -37,3 +63,20 @@
 .pholio-inline-comment-dialog-buttons a {
   display: none;
 }
+
+.pholio-inline-comment-draft {
+  border-style: dashed;
+  border-color: #777777;
+  background: #464646;
+}
+
+.pholio-inline-head-links {
+  float: right;
+  font-weight: normal;
+  color: #777777;
+}
+
+.pholio-inline-head-links a {
+  font-weight: normal;
+  color: #2178db;
+}

webroot/rsrc/css/application/pholio/pholio.css

@@ -72,29 +72,6 @@
   display: inline-block;
 }
 
-.pholio-mock-inline-comments {
-  width: 300px;
-  border-left: 1px solid #101010;
-  border-top: 1px solid #333;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  padding: 10px;
-  background: #282828;
-  overflow-x: auto;
-  text-align: left;
-}
-
-.pholio-inline-comment {
-  border: 1px solid #333;
-  border-bottom: 1px solid #555;
-  background: #353535;
-  margin: 0 0 5px 0;
-  padding: 8px 10px;
-  color: #ccc;
-}
-
 .pholio-inline-comment-header {
   color: #fff;
   border-bottom: 1px solid #555;
@@ -107,8 +84,3 @@
   background-color: #222;
   border-color: #555;
 }
-
-.pholio-inline-head-links a {
-  font-weight: normal;
-  margin-left: 5px;
-}