Ajax commenting on lightbox images

Summary: Adds a comment box, you can put text into it, hit enter, and see it come back.

Test Plan: Put text into box, see it come back.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Maniphest Tasks: T3612

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

resources/celerity/map.php

@@ -9,8 +9,8 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => '0b64e988',
     'conpherence.pkg.js' => '6249a1cf',
-    'core.pkg.css' => '347113ea',
+    'core.pkg.css' => '3aeb7eb6',
-    'core.pkg.js' => '40e98735',
+    'core.pkg.js' => 'f9083b80',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => 'a4ba74b5',
     'differential.pkg.js' => '634399e9',
@@ -132,7 +132,7 @@ return array(
     'rsrc/css/phui/phui-chart.css' => '6bf6f78e',
     'rsrc/css/phui/phui-cms.css' => 'be43c8a8',
     'rsrc/css/phui/phui-comment-form.css' => '4ecc56ef',
-    'rsrc/css/phui/phui-comment-panel.css' => '85113e6a',
+    'rsrc/css/phui/phui-comment-panel.css' => '20ab1e5b',
     'rsrc/css/phui/phui-crumbs-view.css' => '195ac419',
     'rsrc/css/phui/phui-curtain-view.css' => '947bf1a4',
     'rsrc/css/phui/phui-document-pro.css' => 'c354e312',
@@ -151,7 +151,7 @@ return array(
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-info-view.css' => 'ec92802a',
     'rsrc/css/phui/phui-invisible-character-view.css' => '6993d9f0',
-    'rsrc/css/phui/phui-lightbox.css' => 'e17ce2bd',
+    'rsrc/css/phui/phui-lightbox.css' => 'e01994f2',
     'rsrc/css/phui/phui-list.css' => '9da2aa00',
     'rsrc/css/phui/phui-object-box.css' => '6b487c57',
     'rsrc/css/phui/phui-object-item-list-view.css' => '87278fa0',
@@ -505,7 +505,7 @@ return array(
     'rsrc/js/core/behavior-hovercard.js' => 'bcaccd64',
     'rsrc/js/core/behavior-keyboard-pager.js' => 'a8da01f0',
     'rsrc/js/core/behavior-keyboard-shortcuts.js' => '01fca1f0',
-    'rsrc/js/core/behavior-lightbox-attachments.js' => 'ec949017',
+    'rsrc/js/core/behavior-lightbox-attachments.js' => '35da14ae',
     'rsrc/js/core/behavior-line-linker.js' => '1499a8cb',
     'rsrc/js/core/behavior-more.js' => 'a80d0378',
     'rsrc/js/core/behavior-object-selector.js' => 'e0ec7f2f',
@@ -651,7 +651,7 @@ return array(
     'javelin-behavior-history-install' => '7ee2b591',
     'javelin-behavior-icon-composer' => '8499b6ab',
     'javelin-behavior-launch-icon-composer' => '48086888',
-    'javelin-behavior-lightbox-attachments' => 'ec949017',
+    'javelin-behavior-lightbox-attachments' => '35da14ae',
     'javelin-behavior-line-chart' => 'e4232876',
     'javelin-behavior-load-blame' => '42126667',
     'javelin-behavior-maniphest-batch-editor' => '782ab6e7',
@@ -847,7 +847,7 @@ return array(
     'phui-chart-css' => '6bf6f78e',
     'phui-cms-css' => 'be43c8a8',
     'phui-comment-form-css' => '4ecc56ef',
-    'phui-comment-panel-css' => '85113e6a',
+    'phui-comment-panel-css' => '20ab1e5b',
     'phui-crumbs-view-css' => '195ac419',
     'phui-curtain-view-css' => '947bf1a4',
     'phui-document-summary-view-css' => '9ca48bdf',
@@ -869,7 +869,7 @@ return array(
     'phui-info-view-css' => 'ec92802a',
     'phui-inline-comment-view-css' => '5953c28e',
     'phui-invisible-character-view-css' => '6993d9f0',
-    'phui-lightbox-css' => 'e17ce2bd',
+    'phui-lightbox-css' => 'e01994f2',
     'phui-list-view-css' => '9da2aa00',
     'phui-object-box-css' => '6b487c57',
     'phui-object-item-list-view-css' => '87278fa0',
@@ -1095,6 +1095,9 @@ return array(
       'javelin-install',
       'javelin-dom',
     ),
+    '20ab1e5b' => array(
+      'phui-timeline-view-css',
+    ),
     '21df4ff5' => array(
       'javelin-install',
       'javelin-workboard-card',
@@ -1168,6 +1171,15 @@ return array(
       'javelin-behavior-device',
       'javelin-vector',
     ),
+    '35da14ae' => array(
+      'javelin-behavior',
+      'javelin-stratcom',
+      'javelin-dom',
+      'javelin-mask',
+      'javelin-util',
+      'phuix-icon-view',
+      'phabricator-busy',
+    ),
     '3ab51e2c' => array(
       'javelin-behavior',
       'javelin-behavior-device',
@@ -1581,9 +1593,6 @@ return array(
       'javelin-dom',
       'javelin-stratcom',
     ),
-    '85113e6a' => array(
-      'phui-timeline-view-css',
-    ),
     '85ee8ce6' => array(
       'aphront-dialog-view-css',
     ),
@@ -2127,15 +2136,6 @@ return array(
       'javelin-dom',
       'phabricator-draggable-list',
     ),
-    'ec949017' => array(
-      'javelin-behavior',
-      'javelin-stratcom',
-      'javelin-dom',
-      'javelin-mask',
-      'javelin-util',
-      'phuix-icon-view',
-      'phabricator-busy',
-    ),
     'edd1ba66' => array(
       'javelin-behavior',
       'javelin-stratcom',

src/applications/files/controller/PhabricatorFileLightboxController.php

@@ -6,6 +6,7 @@ final class PhabricatorFileLightboxController
   public function handleRequest(AphrontRequest $request) {
     $viewer = $request->getViewer();
     $phid = $request->getURIData('phid');
+    $comment = $request->getStr('comment');
 
     $file = id(new PhabricatorFileQuery())
       ->setViewer($viewer)
@@ -15,18 +16,30 @@ final class PhabricatorFileLightboxController
       return new Aphront404Response();
     }
 
+    if (strlen($comment)) {
+      $xactions = array();
+      $xactions[] = id(new PhabricatorFileTransaction())
+        ->setTransactionType(PhabricatorTransactions::TYPE_COMMENT)
+        ->attachComment(
+          id(new PhabricatorFileTransactionComment())
+            ->setContent($comment));
+
+      $editor = id(new PhabricatorFileEditor())
+        ->setActor($viewer)
+        ->setContinueOnNoEffect(true)
+        ->setContentSourceFromRequest($request);
+
+      $editor->applyTransactions($file, $xactions);
+    }
+
     $transactions = id(new PhabricatorFileTransactionQuery())
       ->withTransactionTypes(array(PhabricatorTransactions::TYPE_COMMENT));
     $timeline = $this->buildTransactionTimeline($file, $transactions);
 
     if ($timeline->isTimelineEmpty()) {
-      $timeline = phutil_tag(
+      //
-        'div',
-        array(
-          'class' => 'phui-comment-panel-empty',
-        ),
-        pht('No comments.'));
     }
+    $comment_form = $this->renderCommentForm($file);
 
     require_celerity_resource('phui-comment-panel-css');
     $content = phutil_tag(
@@ -34,10 +47,54 @@ final class PhabricatorFileLightboxController
       array(
         'class' => 'phui-comment-panel',
       ),
-      $timeline);
+      array(
+        $timeline,
+        $comment_form,
+      ));
 
     return id(new AphrontAjaxResponse())
       ->setContent($content);
   }
 
+  private function renderCommentForm(PhabricatorFile $file) {
+    $viewer = $this->getViewer();
+
+    if (!$viewer->isLoggedIn()) {
+      $login_href = id(new PhutilURI('/auth/start/'))
+        ->setQueryParam('next', '/'.$file->getMonogram());
+      return id(new PHUIFormLayoutView())
+        ->addClass('phui-comment-panel-empty')
+        ->appendChild(
+          id(new PHUIButtonView())
+          ->setTag('a')
+          ->setText(pht('Login to Comment'))
+          ->setHref((string)$login_href));
+    }
+
+    $draft = PhabricatorDraft::newFromUserAndKey(
+      $viewer,
+      $file->getPHID());
+    $post_uri = $this->getApplicationURI('thread/'.$file->getPHID().'/');
+
+    $form = id(new AphrontFormView())
+      ->setUser($viewer)
+      ->setAction($post_uri)
+      ->addSigil('lightbox-comment-form')
+      ->addClass('lightbox-comment-form')
+      ->setWorkflow(true)
+      ->appendChild(
+        id(new PhabricatorRemarkupControl())
+        ->setUser($viewer)
+        ->setName('comment')
+        ->setValue($draft->getDraft()))
+      ->appendChild(
+        id(new AphrontFormSubmitControl())
+          ->setValue(pht('Comment')));
+
+    $view = phutil_tag_div('phui-comment-panel', $form);
+
+    return $view;
+
+  }
+
 }

webroot/rsrc/css/phui/phui-comment-panel.css

@@ -17,11 +17,14 @@
 }
 
 .phui-comment-panel .phui-timeline-view .phui-timeline-event-view {
-  margin: 0;
+  margin-left: 40px;
 }
 
-.phui-comment-panel .phui-timeline-view .phui-timeline-image {
+.device-desktop .phui-comment-panel .phui-timeline-view .phui-timeline-image {
-  display: none;
+  width: 30px;
+  height: 30px;
+  top: 4px;
+  left: -40px;
 }
 
 .phui-comment-panel .phui-timeline-view .phui-timeline-wedge {
@@ -58,3 +61,31 @@
     padding: 4px 0;
     background: transparent;
 }
+
+.phui-comment-panel .phui-timeline-older-transactions-are-hidden {
+  background-color: {$lightgreybackground};
+  border: none;
+}
+
+.lightbox-comment-form .phui-form-view {
+  padding-top: 0;
+}
+
+.lightbox-comment-form .aphront-form-control {
+  padding: 0;
+}
+
+.lightbox-comment-form .aphront-form-input {
+  margin: 0;
+  width: auto;
+}
+
+.lightbox-comment-form .remarkup-assist-bar {
+  display: none;
+}
+
+.lightbox-comment-form .aphront-form-input .remarkup-assist-textarea {
+  border-radius: 3px;
+  border: 1px solid {$lightgreyborder};
+  height: 6em;
+}

webroot/rsrc/css/phui/phui-lightbox.css

@@ -25,7 +25,7 @@
 }
 
 .lightbox-attachment.comment-panel-open .lightbox-image-frame {
-  right: 320px;
+  right: 360px;
 }
 
 .lightbox-attachment .lightbox-image-frame img {
@@ -52,7 +52,7 @@
   top: 44px;
   bottom: 0;
   right: 0;
-  width: 320px;
+  width: 360px;
   overflow-y: auto;
   background: #fff;
   opacity: 1;
@@ -143,7 +143,7 @@
 }
 
 .lightbox-attachment.comment-panel-open .lightbox-right .phui-icon-view {
-  right: 322px;
+  right: 362px;
 }
 
 .lightbox-attachment .lightbox-right .phui-icon-view {

webroot/rsrc/js/core/behavior-lightbox-attachments.js

@@ -335,4 +335,17 @@ JX.behavior('lightbox-attachments', function (config) {
     'lightbox-comment',
   _toggleComment);
 
+  var _sendMessage = function(e) {
+    e.kill();
+    var form = e.getNode('tag:form');
+    JX.Workflow.newFromForm(form)
+      .setHandler(onLoadCommentsResponse)
+      .start();
+  };
+
+  JX.Stratcom.listen(
+    ['submit', 'didSyntheticSubmit'],
+    'lightbox-comment-form',
+    _sendMessage);
+
 });