@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
Improve behavior of inline comment dialog
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
+39
-46
+4
-3
src/__celerity_resource_map__.php
+4
-3
src/__celerity_resource_map__.php
···
1891
1891
),
1892
1892
'javelin-behavior-pholio-mock-view' =>
1893
1893
array(
1894
-
'uri' => '/res/02f1a38f/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
1894
+
'uri' => '/res/c320fd85/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
1895
1895
'type' => 'js',
1896
1896
'requires' =>
1897
1897
array(
···
1903
1903
5 => 'javelin-magical-init',
1904
1904
6 => 'javelin-request',
1905
1905
7 => 'javelin-history',
1906
-
8 => 'phabricator-keyboard-shortcut',
1906
+
8 => 'javelin-workflow',
1907
+
9 => 'phabricator-keyboard-shortcut',
1907
1908
),
1908
1909
'disk' => '/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
1909
1910
),
···
3247
3248
),
3248
3249
'pholio-inline-comments-css' =>
3249
3250
array(
3250
-
'uri' => '/res/be86f544/rsrc/css/application/pholio/pholio-inline-comments.css',
3251
+
'uri' => '/res/a0f7ddc4/rsrc/css/application/pholio/pholio-inline-comments.css',
3251
3252
'type' => 'css',
3252
3253
'requires' =>
3253
3254
array(
+5
-6
src/applications/pholio/controller/PholioInlineSaveController.php
+5
-6
src/applications/pholio/controller/PholioInlineSaveController.php
···
24
24
return new Aphront404Response();
25
25
}
26
26
27
-
$this->operation = $request->getBool('op');
27
+
$this->operation = $request->getStr('op');
28
28
29
29
if ($this->getOperation() == 'save') {
30
-
$new_content = $request->getStr('comment');
30
+
$new_content = $request->getStr('text');
31
31
32
-
if (strlen(trim($new_content)) == 0) {
33
-
return id(new AphrontAjaxResponse())
34
-
->setContent(array('success' => false));
32
+
if (!strlen($new_content)) {
33
+
throw new Exception("Content must not be empty.");
35
34
}
36
35
37
36
$draft = id(new PholioTransactionComment());
···
78
77
$dialog->setUser($user);
79
78
$dialog->setSubmitURI($request->getRequestURI());
80
79
81
-
$dialog->setTitle(pht('Make inline comment'));
80
+
$dialog->setTitle(pht('Add Inline Comment'));
82
81
83
82
$dialog->addHiddenInput('op', 'save');
84
83
+2
-2
src/applications/pholio/view/PholioInlineCommentSaveView.php
+2
-2
src/applications/pholio/view/PholioInlineCommentSaveView.php
···
38
38
'action' => $this->uri,
39
39
'method' => 'POST',
40
40
'sigil' => 'inline-save-form',
41
+
'class' => 'pholio-new-inline-comment',
42
+
'id' => 'pholio-new-inline-comment-dialog'
41
43
),
42
44
$this->renderSingleView(
43
45
array(
···
117
119
return javelin_tag(
118
120
'div',
119
121
array(
120
-
'class' => 'pholio-new-inline-comment',
121
-
'id' => 'pholio-new-inline-comment-dialog'
122
122
),
123
123
$this->renderSingleView(
124
124
array(
+28
-35
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
+28
-35
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
···
8
8
* javelin-magical-init
9
9
* javelin-request
10
10
* javelin-history
11
+
* javelin-workflow
11
12
* phabricator-keyboard-shortcut
12
13
*/
13
14
JX.behavior('pholio-mock-view', function(config) {
···
288
289
return;
289
290
}
290
291
is_dragging = false;
291
-
292
292
drag_end = get_image_xy(JX.$V(e));
293
293
294
-
var create_inline = new JX.Request("/pholio/inline/save/", function(r) {
295
-
JX.DOM.appendContent(JX.$('pholio-mock-image-container'), JX.$H(r));
296
-
297
-
var dialog = JX.$('pholio-new-inline-comment-dialog');
298
-
299
-
var viewportVector = JX.$V(viewport);
300
-
var viewportDimensions = JX.Vector.getDim(viewport);
294
+
var data = {mockID: config.mockID};
295
+
var handler = function(r) {
296
+
var dialog = JX.$H(r).getFragment().firstChild;
297
+
JX.DOM.appendContent(viewport, dialog);
301
298
302
299
JX.$V(
303
-
// TODO: This is a little funky for now.
304
-
Math.max(drag_begin.x, drag_end.x),
305
-
Math.max(drag_begin.y, drag_end.y)
300
+
Math.min(drag_begin.x, drag_end.x),
301
+
Math.max(drag_begin.y, drag_end.y) + 4
306
302
).setPos(dialog);
307
303
308
-
});
309
-
create_inline.addData({mockID: config.mockID});
310
-
create_inline.send();
304
+
JX.DOM.focus(JX.DOM.find(dialog, 'textarea'));
305
+
}
311
306
307
+
new JX.Workflow('/pholio/inline/save/', data)
308
+
.setHandler(handler)
309
+
.start();
312
310
});
313
311
314
312
function redraw_inlines(id) {
···
508
506
function(e) {
509
507
e.kill();
510
508
511
-
var new_content = JX.DOM.find(
512
-
JX.$('pholio-new-inline-comment-dialog'),
513
-
'textarea').value;
514
-
515
-
if (new_content == null || new_content.length == 0) {
516
-
alert("Empty comment")
509
+
var form = JX.$('pholio-new-inline-comment-dialog');
510
+
var text = JX.DOM.find(form, 'textarea').value;
511
+
if (!text.length) {
512
+
interrupt_typing();
517
513
return;
518
514
}
519
515
520
-
var saveURI = "/pholio/inline/save/";
516
+
var data = {
517
+
mockID: config.mockID,
518
+
imageID: active_image.id,
519
+
startX: Math.min(drag_begin.x, drag_end.x),
520
+
startY: Math.min(drag_begin.y, drag_end.y),
521
+
endX: Math.max(drag_begin.x, drag_end.x),
522
+
endY: Math.max(drag_begin.y, drag_end.y)
523
+
};
521
524
522
-
var inlineComment = new JX.Request(saveURI, function(r) {
525
+
var handler = function(r) {
523
526
if (!inline_comments[active_image.id]) {
524
527
inline_comments[active_image.id] = [];
525
528
}
···
527
530
528
531
interrupt_typing();
529
532
redraw_inlines(active_image.id);
530
-
});
531
-
532
-
var commentToAdd = {
533
-
mockID: config.mockID,
534
-
op: 'save',
535
-
imageID: active_image.id,
536
-
startX: Math.min(drag_begin.x, drag_end.x),
537
-
startY: Math.min(drag_begin.y, drag_end.y),
538
-
endX: Math.max(drag_begin.x, drag_end.x),
539
-
endY: Math.max(drag_begin.y, drag_end.y),
540
-
comment: new_content
541
533
};
542
534
543
-
inlineComment.addData(commentToAdd);
544
-
inlineComment.send();
535
+
JX.Workflow.newFromForm(form, data)
536
+
.setHandler(handler)
537
+
.start();
545
538
}
546
539
);
547
540