Show drafts and inline comments

Summary:
Show drafts for users that made them.
Show inline comments beside image, highlights them when user mouseovers selection.
Allow users that can view mock to add inline comment instead of only allowing users that can edit mock to add inline comment.

Test Plan:
Verified that inline comments are shown beside image. Verified that only drafts for current user are shown. Verified that inline comment is
highlithed when user mouseovers their selection.

Reviewers: epriestley

CC: aran, Korvin

Maniphest Tasks: T2446

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

src/__celerity_resource_map__.php

@@ -1864,6 +1864,18 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/js/application/phame/phame-post-preview.js',
   ),
+  'javelin-behavior-pholio-edit-inline-comment' =>
+  array(
+    'uri' => '/res/61759cd8/rsrc/js/application/pholio/behavior-pholio-edit-inline-comment.js',
+    'type' => 'js',
+    'requires' =>
+    array(
+      0 => 'javelin-behavior',
+      1 => 'javelin-stratcom',
+      2 => 'javelin-dom',
+    ),
+    'disk' => '/rsrc/js/application/pholio/behavior-pholio-edit-inline-comment.js',
+  ),
   'javelin-behavior-pholio-mock-view' =>
   array(
     'uri' => '/res/e5f432ac/rsrc/js/application/pholio/behavior-pholio-mock-view.js',

src/applications/pholio/controller/PholioInlineController.php

@@ -20,10 +20,27 @@ final class PholioInlineController extends PholioController {
       $this->id
     );
 
+    $inline_comments = array_merge(
+      $inline_comments,
+      id(new PholioTransactionComment())->loadAllWhere(
+        'imageid = %d AND authorphid = %s AND transactionphid IS NULL',
+        $this->id,
+        $user->getPHID()));
+
     $inlines = array();
     foreach ($inline_comments as $inline_comment) {
+      $author = id(new PhabricatorUser())->loadOneWhere(
+        'phid = %s',
+        $inline_comment->getAuthorPHID()
+      );
       $inlines[] = array(
         'phid' => $inline_comment->getPHID(),
+        'userphid' => $author->getPHID(),
+        'username' => $author->getUserName(),
+        'canEdit' => ($inline_comment->
+          getEditPolicy(PhabricatorPolicyCapability::CAN_EDIT) ==
+          $user->getPHID()) ? true : false,
+        'transactionphid' => $inline_comment->getTransactionPHID(),
         'imageID' => $inline_comment->getImageID(),
         'x' => $inline_comment->getX(),
         'y' => $inline_comment->getY(),

src/applications/pholio/controller/PholioInlineSaveController.php

@@ -13,8 +13,7 @@ final class PholioInlineSaveController extends PholioController {
       ->setViewer($user)
       ->requireCapabilities(
         array(
-          PhabricatorPolicyCapability::CAN_VIEW,
-          PhabricatorPolicyCapability::CAN_EDIT,
+          PhabricatorPolicyCapability::CAN_VIEW
         ))
       ->withIDs(array($request->getInt('mockID')))
       ->executeOne();

src/applications/pholio/view/PholioMockImagesView.php

@@ -47,12 +47,22 @@ final class PholioMockImagesView extends AphrontView {
       $main_image_tag
     );
 
+
+    $inline_comments_holder = javelin_tag(
+      'div',
+      array(
+        'id' => 'mock-inline-comments',
+        'sigil' => 'mock-inline-comments',
+        'class' => 'pholio-mock-inline-comments'
+      ),
+      "");
+
     $mockview[] = phutil_tag(
       'div',
         array(
           'class' => 'pholio-mock-image-container',
         ),
-      $main_image_tag);
+      array($main_image_tag, $inline_comments_holder));
 
     if (count($this->mock->getImages()) > 1) {
       $thumbnails = array();

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

@@ -4,6 +4,7 @@
 .pholio-mock-image-container {
   background-color: #282828;
   text-align: center;
+  vertical-align: middle;
 }
 
 .pholio-mock-carousel {
@@ -43,3 +44,35 @@
   margin: 10px 0px;
 }
 
+
+.pholio-mock-inline-comments {
+  display: inline-block;
+  margin-left: 10px;
+  text-align: left;
+  padding-bottom: 10px;
+}
+
+.pholio-inline-comment {
+  border: 1px solid #aa8;
+  background: #f9f9f1;
+  margin-bottom: 2px;
+  padding: 8px 10px;
+}
+
+.pholio-inline-comment-header {
+  border-bottom: 1px solid #cca;
+  color: #333;
+  font-weight: bold;
+  padding-bottom: 6px;
+  margin-bottom: 4px;
+}
+
+.pholio-mock-inline-comment-highlight {
+  background-color: #F0B160;
+}
+
+.pholio-inline-head-links a {
+  font-weight: normal;
+  margin-left: 5px;
+}
+

webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js

@@ -139,14 +139,56 @@ JX.behavior('pholio-mock-view', function(config) {
         endY: Math.max(startPos.y,endPos.y),
         comment: comment};
 
-
       inlineComment.addData(commentToAdd);
       inlineComment.send();
-
+      load_inline_comments();
     });
 
+    function forge_inline_comment(data) {
+      var comment_head = data.username;
+      if (data.transactionphid == null) comment_head += " (draft)";
+
+      var links = null;
+      if (data.canEdit && data.transactionphid == null) {
+        links = JX.$N(
+          'span',
+          {
+            className: 'pholio-inline-head-links'
+          },
+          [
+            JX.$N('a',{href: 'http://www.google.fi'},'Edit'),
+            JX.$N('a',{href: 'http://www.google.fi'},'Delete')
+          ]);
+
+      }
+
+      var comment_header = JX.$N(
+        'div',
+        {
+          className: 'pholio-inline-comment-header'
+        },
+        [comment_head, links]);
+
+      var comment_body = JX.$N(
+        'div',
+        {},
+        data.content);
+
+      var inline_comment = JX.$N(
+        'div',
+        {
+          id: data.phid + "_comment",
+          className: 'pholio-inline-comment'
+        },
+        [comment_header, comment_body]);
+
+      return inline_comment;
+    }
+
     function load_inline_comments() {
       var data = JX.Stratcom.getData(JX.$(config.mainID));
+      var comment_holder = JX.$('mock-inline-comments');
+      JX.DOM.setContent(comment_holder, '');
 
       var inline_comments_url = "/pholio/inline/" + data['imageID'] + "/";
       var inline_comments = new JX.Request(inline_comments_url, function(r) {
@@ -156,25 +198,68 @@ JX.behavior('pholio-mock-view', function(config) {
             var inlineSelection = JX.$N(
               'div',
               {
-                id: r[i].phid,
+                id: r[i].phid + "_selection",
                 className: 'pholio-mock-select-border',
                 title: r[i].content
               });
 
+            JX.Stratcom.addData(
+              inlineSelection,
+              {phid: r[i].phid});
+
+            JX.Stratcom.addSigil(inlineSelection, "image_selection");
+            JX.DOM.appendContent(comment_holder, forge_inline_comment(r[i]));
+
             JX.DOM.appendContent(wrapper, inlineSelection);
 
             JX.$V(r[i].x, r[i].y).setPos(inlineSelection);
-            JX.$V(r[i].width, r[i].height)
-              .setDim(inlineSelection);
+            JX.$V(r[i].width, r[i].height).setDim(inlineSelection);
+
+            if (r[i].transactionphid == null) {
+
+              var inlineDraft = JX.$N(
+                'div',{className: 'pholio-mock-select-fill'});
+
+              JX.$V(r[i].x, r[i].y).setPos(inlineDraft);
+              JX.$V(r[i].width, r[i].height).setDim(inlineDraft);
+
+              JX.Stratcom.addData(
+                inlineDraft,
+                {phid: r[i].phid});
+
+              JX.Stratcom.addSigil(inlineDraft, "image_selection");
+              JX.DOM.appendContent(wrapper, inlineDraft);
             }
           }
+        }
+
+        JX.Stratcom.listen(
+          'mouseover',
+          'image_selection',
+          function(e) {
+            var data = e.getNodeData('image_selection');
+
+            var inline_comment = JX.$(data.phid + "_comment");
+            JX.DOM.alterClass(inline_comment,
+              'pholio-mock-inline-comment-highlight', true);
+        });
+
+        JX.Stratcom.listen(
+          'mouseout',
+          'image_selection',
+          function(e) {
+          var data = e.getNodeData('image_selection');
+
+          var inline_comment = JX.$(data.phid + "_comment");
+            JX.DOM.alterClass(inline_comment,
+              'pholio-mock-inline-comment-highlight', false);
+        });
       });
 
       inline_comments.send();
     }
 
     load_inline_comments();
-
 });