1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-23 14:00:56 +01:00

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
This commit is contained in:
Chad Little 2016-11-21 20:12:51 -08:00
parent ac66522c2e
commit 88a966993b
5 changed files with 134 additions and 33 deletions

View file

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

View file

@ -6,6 +6,7 @@ final class PhabricatorFileLightboxController
public function handleRequest(AphrontRequest $request) { public function handleRequest(AphrontRequest $request) {
$viewer = $request->getViewer(); $viewer = $request->getViewer();
$phid = $request->getURIData('phid'); $phid = $request->getURIData('phid');
$comment = $request->getStr('comment');
$file = id(new PhabricatorFileQuery()) $file = id(new PhabricatorFileQuery())
->setViewer($viewer) ->setViewer($viewer)
@ -15,18 +16,30 @@ final class PhabricatorFileLightboxController
return new Aphront404Response(); 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()) $transactions = id(new PhabricatorFileTransactionQuery())
->withTransactionTypes(array(PhabricatorTransactions::TYPE_COMMENT)); ->withTransactionTypes(array(PhabricatorTransactions::TYPE_COMMENT));
$timeline = $this->buildTransactionTimeline($file, $transactions); $timeline = $this->buildTransactionTimeline($file, $transactions);
if ($timeline->isTimelineEmpty()) { 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'); require_celerity_resource('phui-comment-panel-css');
$content = phutil_tag( $content = phutil_tag(
@ -34,10 +47,54 @@ final class PhabricatorFileLightboxController
array( array(
'class' => 'phui-comment-panel', 'class' => 'phui-comment-panel',
), ),
$timeline); array(
$timeline,
$comment_form,
));
return id(new AphrontAjaxResponse()) return id(new AphrontAjaxResponse())
->setContent($content); ->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;
}
} }

View file

@ -17,11 +17,14 @@
} }
.phui-comment-panel .phui-timeline-view .phui-timeline-event-view { .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 { .phui-comment-panel .phui-timeline-view .phui-timeline-wedge {
@ -58,3 +61,31 @@
padding: 4px 0; padding: 4px 0;
background: transparent; 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;
}

View file

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

View file

@ -335,4 +335,17 @@ JX.behavior('lightbox-attachments', function (config) {
'lightbox-comment', 'lightbox-comment',
_toggleComment); _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);
}); });