Add a masked image to Pholio Inline Comment Dialog

Summary: n/a

Test Plan:
Tested both ajax and regular pages, test various comments, images.

{F168592}

{F168593}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

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

resources/celerity/map.php

@@ -80,7 +80,7 @@ return array(
     'rsrc/css/application/people/people-profile.css' => 'ba7b2762',
     'rsrc/css/application/phame/phame.css' => '19ecc703',
     'rsrc/css/application/pholio/pholio-edit.css' => '3ad9d1ee',
-    'rsrc/css/application/pholio/pholio-inline-comments.css' => '95004a57',
+    'rsrc/css/application/pholio/pholio-inline-comments.css' => '286e6be7',
     'rsrc/css/application/pholio/pholio.css' => 'd0502625',
     'rsrc/css/application/phortune/phortune-credit-card-form.css' => 'b25b4beb',
     'rsrc/css/application/phrequent/phrequent.css' => 'ffc185ad',
@@ -754,7 +754,7 @@ return array(
     'phame-css' => '19ecc703',
     'pholio-css' => 'd0502625',
     'pholio-edit-css' => '3ad9d1ee',
-    'pholio-inline-comments-css' => '95004a57',
+    'pholio-inline-comments-css' => '286e6be7',
     'phortune-credit-card-form' => '2290aeef',
     'phortune-credit-card-form-css' => 'b25b4beb',
     'phrequent-css' => 'ffc185ad',

src/applications/pholio/controller/PholioInlineController.php

@@ -14,6 +14,7 @@ final class PholioInlineController extends PholioController {
 
     if ($this->id) {
       $inline = id(new PholioTransactionComment())->load($this->id);
+
       if (!$inline) {
         return new Aphront404Response();
       }
@@ -58,23 +59,55 @@ final class PholioInlineController extends PholioController {
     $mock_uri = '/';
 
     if ($mode == 'view') {
+      require_celerity_resource('pholio-inline-comments-css');
+      $image = id(new PholioImageQuery())
+        ->setViewer($viewer)
+        ->withIDs(array($inline->getImageID()))
+        ->executeOne();
 
       $handles = $this->loadViewerHandles(array($inline->getAuthorPHID()));
       $author_handle = $handles[$inline->getAuthorPHID()];
 
-      return $this->newDialog()
-        ->setTitle(pht('Inline Comment'))
-        ->appendParagraph(
-          phutil_tag(
-            'em',
-            array(),
-            pht('%s comments:', $author_handle->getName())))
-        ->appendParagraph(
-          PhabricatorMarkupEngine::renderOneObject(
+      $file = $image->getFile();
+      if (!$file->isViewableImage()) {
+        throw new Exception('File is not viewable.');
+      }
+
+      $image_uri = $file->getBestURI();
+
+      $thumb = id(new PHUIImageMaskView())
+        ->addClass('mrl')
+        ->setImage($image_uri)
+        ->setDisplayHeight(200)
+        ->setDisplayWidth(498)
+        ->withMask(true)
+        ->centerViewOnPoint(
+          $inline->getX(), $inline->getY(),
+          $inline->getHeight(), $inline->getWidth());
+
+      $comment_head = phutil_tag(
+        'div',
+        array(
+          'class' => 'pholio-inline-comment-head',
+        ),
+        $author_handle->renderLink());
+
+      $comment_body = phutil_tag(
+        'div',
+        array(
+          'class' => 'pholio-inline-comment-body',
+        ),
+        PhabricatorMarkupEngine::renderOneObject(
             id(new PhabricatorMarkupOneOff())
               ->setContent($inline->getContent()),
             'default',
-            $viewer))
+            $viewer));
+
+      return $this->newDialog()
+        ->setTitle(pht('Inline Comment'))
+        ->appendChild($thumb)
+        ->appendChild($comment_head)
+        ->appendChild($comment_body)
         ->addCancelButton($mock_uri, pht('Close'));
     }
 

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

@@ -2,4 +2,12 @@
  * @provides pholio-inline-comments-css
  */
 
+.pholio-inline-comment-head {
+  padding: 8px 0;
+  color: {$greytext};
+}
+
+.pholio-inline-comment-head a {
+  font-weight: bold;
+}