revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-10 00:42:41 +01:00
Code Issues Releases Wiki Activity

Improve behavior of inline comment dialog

Browse source 
Summary:
Fixes T2669.

  - Currently, making an inline comment does not focus the textarea. Instead, focus the textarea.
  - Currently, the positioning is kind of buggy. Make it viewport-relative and put the dialog slightly below the inline reticle.
  - Use `JX.Workflow` more and simplify some of the ajax stuff.

Test Plan: Created inline comments.

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T2669

Differential Revision: https://secure.phabricator.com/D5229
This commit is contained in:
epriestley 2013-03-05 12:30:05 -08:00
parent bd4ce3580c
commit ec6f566bc1
4 changed files with 39 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/__celerity_resource_map__.php
View file

@ -1891,7 +1891,7 @@ celerity_register_resource_map(array(
),
'javelin-behavior-pholio-mock-view' =>
array(
'uri' => '/res/02f1a38f/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
'uri' => '/res/c320fd85/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
'type' => 'js',
'requires' =>
array(
@ -1903,7 +1903,8 @@ celerity_register_resource_map(array(
5 => 'javelin-magical-init',
6 => 'javelin-request',
7 => 'javelin-history',
8 => 'phabricator-keyboard-shortcut',
8 => 'javelin-workflow',
9 => 'phabricator-keyboard-shortcut',
),
'disk' => '/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
),
@ -3247,7 +3248,7 @@ celerity_register_resource_map(array(
),
'pholio-inline-comments-css' =>
array(
'uri' => '/res/be86f544/rsrc/css/application/pholio/pholio-inline-comments.css',
'uri' => '/res/a0f7ddc4/rsrc/css/application/pholio/pholio-inline-comments.css',
'type' => 'css',
'requires' =>
array(

11
src/applications/pholio/controller/PholioInlineSaveController.php
View file

@ -24,14 +24,13 @@ final class PholioInlineSaveController extends PholioController {
return new Aphront404Response();
}
$this->operation = $request->getBool('op');
$this->operation = $request->getStr('op');
if ($this->getOperation() == 'save') {
$new_content = $request->getStr('comment');
$new_content = $request->getStr('text');
if (strlen(trim($new_content)) == 0) {
return id(new AphrontAjaxResponse())
->setContent(array('success' => false));
if (!strlen($new_content)) {
throw new Exception("Content must not be empty.");
}
$draft = id(new PholioTransactionComment());
@ -78,7 +77,7 @@ final class PholioInlineSaveController extends PholioController {
$dialog->setUser($user);
$dialog->setSubmitURI($request->getRequestURI());
$dialog->setTitle(pht('Make inline comment'));
$dialog->setTitle(pht('Add Inline Comment'));
$dialog->addHiddenInput('op', 'save');

4
src/applications/pholio/view/PholioInlineCommentSaveView.php
View file

@ -38,6 +38,8 @@ final class PholioInlineCommentSaveView extends AphrontView {
'action' => $this->uri,
'method' => 'POST',
'sigil' => 'inline-save-form',
'class' => 'pholio-new-inline-comment',
'id' => 'pholio-new-inline-comment-dialog'
),
$this->renderSingleView(
array(
@ -117,8 +119,6 @@ final class PholioInlineCommentSaveView extends AphrontView {
return javelin_tag(
'div',
array(
'class' => 'pholio-new-inline-comment',
'id' => 'pholio-new-inline-comment-dialog'
),
$this->renderSingleView(
array(

63
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
View file

@ -8,6 +8,7 @@
* javelin-magical-init
* javelin-request
* javelin-history
* javelin-workflow
* phabricator-keyboard-shortcut
*/
JX.behavior('pholio-mock-view', function(config) {
@ -288,27 +289,24 @@ JX.behavior('pholio-mock-view', function(config) {
return;
}
is_dragging = false;
drag_end = get_image_xy(JX.$V(e));
var create_inline = new JX.Request("/pholio/inline/save/", function(r) {
JX.DOM.appendContent(JX.$('pholio-mock-image-container'), JX.$H(r));
var dialog = JX.$('pholio-new-inline-comment-dialog');
var viewportVector = JX.$V(viewport);
var viewportDimensions = JX.Vector.getDim(viewport);
var data = {mockID: config.mockID};
var handler = function(r) {
var dialog = JX.$H(r).getFragment().firstChild;
JX.DOM.appendContent(viewport, dialog);
JX.$V(
// TODO: This is a little funky for now.
Math.max(drag_begin.x, drag_end.x),
Math.max(drag_begin.y, drag_end.y)
Math.min(drag_begin.x, drag_end.x),
Math.max(drag_begin.y, drag_end.y) + 4
).setPos(dialog);
});
create_inline.addData({mockID: config.mockID});
create_inline.send();
JX.DOM.focus(JX.DOM.find(dialog, 'textarea'));
}
new JX.Workflow('/pholio/inline/save/', data)
.setHandler(handler)
.start();
});
function redraw_inlines(id) {
@ -508,18 +506,23 @@ JX.behavior('pholio-mock-view', function(config) {
function(e) {
e.kill();
var new_content = JX.DOM.find(
JX.$('pholio-new-inline-comment-dialog'),
'textarea').value;
if (new_content == null || new_content.length == 0) {
alert("Empty comment")
var form = JX.$('pholio-new-inline-comment-dialog');
var text = JX.DOM.find(form, 'textarea').value;
if (!text.length) {
interrupt_typing();
return;
}
var saveURI = "/pholio/inline/save/";
var data = {
mockID: config.mockID,
imageID: active_image.id,
startX: Math.min(drag_begin.x, drag_end.x),
startY: Math.min(drag_begin.y, drag_end.y),
endX: Math.max(drag_begin.x, drag_end.x),
endY: Math.max(drag_begin.y, drag_end.y)
};
var inlineComment = new JX.Request(saveURI, function(r) {
var handler = function(r) {
if (!inline_comments[active_image.id]) {
inline_comments[active_image.id] = [];
}
@ -527,21 +530,11 @@ JX.behavior('pholio-mock-view', function(config) {
interrupt_typing();
redraw_inlines(active_image.id);
});
var commentToAdd = {
mockID: config.mockID,
op: 'save',
imageID: active_image.id,
startX: Math.min(drag_begin.x, drag_end.x),
startY: Math.min(drag_begin.y, drag_end.y),
endX: Math.max(drag_begin.x, drag_end.x),
endY: Math.max(drag_begin.y, drag_end.y),
comment: new_content
};
inlineComment.addData(commentToAdd);
inlineComment.send();
JX.Workflow.newFromForm(form, data)
.setHandler(handler)
.start();
}
);