@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
Make ApplicationTransactions preview -> submit flow less janky
Summary: ...also make it so in Pholio when you add an inline comment the preview refreshes. Fixes T2649.
Test Plan: played around in pholio leaving commentary. noted that a new inline comment would refresh the preview.
Reviewers: epriestley, chad
Reviewed By: epriestley
CC: aran, Korvin
Maniphest Tasks: T2649
Differential Revision: https://secure.phabricator.com/D6267
+52
-10
+6
-4
src/__celerity_resource_map__.php
+6
-4
src/__celerity_resource_map__.php
···
2100
2100
),
2101
2101
'javelin-behavior-phabricator-transaction-comment-form' =>
2102
2102
array(
2103
-
'uri' => '/res/7591a57f/rsrc/js/application/transactions/behavior-transaction-comment-form.js',
2103
+
'uri' => '/res/dddc07e9/rsrc/js/application/transactions/behavior-transaction-comment-form.js',
2104
2104
'type' => 'js',
2105
2105
'requires' =>
2106
2106
array(
2107
2107
0 => 'javelin-behavior',
2108
2108
1 => 'javelin-dom',
2109
2109
2 => 'javelin-util',
2110
-
3 => 'phabricator-shaped-request',
2110
+
3 => 'javelin-fx',
2111
+
4 => 'javelin-request',
2112
+
5 => 'phabricator-shaped-request',
2111
2113
),
2112
2114
'disk' => '/rsrc/js/application/transactions/behavior-transaction-comment-form.js',
2113
2115
),
2114
2116
'javelin-behavior-phabricator-transaction-list' =>
2115
2117
array(
2116
-
'uri' => '/res/f1fbb474/rsrc/js/application/transactions/behavior-transaction-list.js',
2118
+
'uri' => '/res/e7a015a7/rsrc/js/application/transactions/behavior-transaction-list.js',
2117
2119
'type' => 'js',
2118
2120
'requires' =>
2119
2121
array(
···
2153
2155
),
2154
2156
'javelin-behavior-pholio-mock-view' =>
2155
2157
array(
2156
-
'uri' => '/res/0632e7d9/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
2158
+
'uri' => '/res/983e2e81/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
2157
2159
'type' => 'js',
2158
2160
'requires' =>
2159
2161
array(
+5
-2
src/applications/pholio/controller/PholioMockViewController.php
+5
-2
src/applications/pholio/controller/PholioMockViewController.php
···
71
71
require_celerity_resource('pholio-css');
72
72
require_celerity_resource('pholio-inline-comments-css');
73
73
74
+
$comment_form_id = celerity_generate_unique_node_id();
74
75
$output = id(new PholioMockImagesView())
75
76
->setRequestURI($request->getRequestURI())
77
+
->setCommentFormID($comment_form_id)
76
78
->setUser($user)
77
79
->setMock($mock)
78
80
->setImageID($this->imageID);
···
82
84
->setTransactions($xactions)
83
85
->setMarkupEngine($engine);
84
86
85
-
$add_comment = $this->buildAddCommentView($mock);
87
+
$add_comment = $this->buildAddCommentView($mock, $comment_form_id);
86
88
87
89
$crumbs = $this->buildApplicationCrumbs($this->buildSideNav());
88
90
$crumbs->setActionList($actions);
···
182
184
return $properties;
183
185
}
184
186
185
-
private function buildAddCommentView(PholioMock $mock) {
187
+
private function buildAddCommentView(PholioMock $mock, $comment_form_id) {
186
188
$user = $this->getRequest()->getUser();
187
189
188
190
$draft = PhabricatorDraft::newFromUserAndKey($user, $mock->getPHID());
···
202
204
203
205
$form = id(new PhabricatorApplicationTransactionCommentView())
204
206
->setUser($user)
207
+
->setFormID($comment_form_id)
205
208
->setDraft($draft)
206
209
->setSubmitButtonName($button_name)
207
210
->setAction($this->getApplicationURI('/comment/'.$mock->getID().'/'))
+10
src/applications/pholio/view/PholioMockImagesView.php
+10
src/applications/pholio/view/PholioMockImagesView.php
···
5
5
private $mock;
6
6
private $imageID;
7
7
private $requestURI;
8
+
private $commentFormID;
9
+
10
+
public function setCommentFormID($comment_form_id) {
11
+
$this->commentFormID = $comment_form_id;
12
+
return $this;
13
+
}
14
+
public function getCommentFormID() {
15
+
return $this->commentFormID;
16
+
}
8
17
9
18
public function setRequestURI(PhutilURI $request_uri) {
10
19
$this->requestURI = $request_uri;
···
72
81
'mockID' => $mock->getID(),
73
82
'panelID' => $panel_id,
74
83
'viewportID' => $viewport_id,
84
+
'commentFormID' => $this->getCommentFormID(),
75
85
'images' => $images,
76
86
'selectedID' => $selected_id,
77
87
'loggedIn' => $this->getUser()->isLoggedIn(),
+5
src/applications/transactions/view/PhabricatorApplicationTransactionCommentView.php
+5
src/applications/transactions/view/PhabricatorApplicationTransactionCommentView.php
+3
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
+3
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
···
551
551
552
552
var edit = new JX.Request(editURI, function(r) {
553
553
load_inline_comment(data.id);
554
+
JX.DOM.invoke(JX.$(config.commentFormID), 'shouldRefresh');
554
555
});
555
556
edit.addData({
556
557
op: 'update',
···
598
599
599
600
interrupt_typing();
600
601
redraw_inlines(active_image.id);
602
+
JX.DOM.invoke(JX.$(config.commentFormID), 'shouldRefresh');
601
603
};
602
604
603
605
JX.Workflow.newFromForm(form, data)
···
627
629
}
628
630
629
631
load_inline_comments();
632
+
JX.DOM.invoke(JX.$(config.commentFormID), 'shouldRefresh');
630
633
631
634
JX.Stratcom.listen('resize', null, redraw_image);
632
635
redraw_image();
+20
-2
webroot/rsrc/js/application/transactions/behavior-transaction-comment-form.js
+20
-2
webroot/rsrc/js/application/transactions/behavior-transaction-comment-form.js
···
3
3
* @requires javelin-behavior
4
4
* javelin-dom
5
5
* javelin-util
6
+
* javelin-fx
7
+
* javelin-request
6
8
* phabricator-shaped-request
7
9
*/
8
10
···
10
12
11
13
var form = JX.$(config.formID);
12
14
13
-
JX.DOM.listen(form, 'willClear', null, function(e) {
15
+
JX.DOM.listen(form, 'willSubmit', null, function (e) {
14
16
e.kill();
17
+
var preview = JX.$(config.panelID);
18
+
preview.style.opacity = 0.5;
19
+
});
20
+
JX.DOM.listen(form, 'willClear', null, function(e) {
15
21
JX.$(config.commentID).value = '';
22
+
var preview = JX.$(config.panelID);
23
+
new JX.FX(preview)
24
+
.setDuration(500)
25
+
.then(function () {
26
+
new JX.FX(preview).setDuration(1000).start({opacity: [0, 1]});
27
+
})
28
+
.start({opacity: [0.5, 0]});
16
29
});
17
30
18
31
var getdata = function() {
···
47
60
onresponse,
48
61
getdata);
49
62
var trigger = JX.bind(request, request.trigger);
50
-
51
63
JX.DOM.listen(form, 'keydown', null, trigger);
64
+
var always_trigger = function() {
65
+
new JX.Request(config.actionURI, onresponse)
66
+
.setData(getdata())
67
+
.send();
68
+
};
69
+
JX.DOM.listen(form, 'shouldRefresh', null, always_trigger);
52
70
53
71
request.start();
54
72
});
+3
-2
webroot/rsrc/js/application/transactions/behavior-transaction-list.js
+3
-2
webroot/rsrc/js/application/transactions/behavior-transaction-list.js
···
79
79
['submit', 'didSyntheticSubmit'],
80
80
'transaction-append',
81
81
function(e) {
82
+
e.kill();
82
83
var form = e.getTarget();
84
+
JX.DOM.invoke(form, 'willSubmit');
83
85
84
-
JX.Workflow.newFromForm(form, {anchor: next_anchor})
86
+
JX.Workflow.newFromForm(form, { anchor : next_anchor })
85
87
.setHandler(function(response) {
86
88
ontransactions(response);
87
89
···
92
94
})
93
95
.start();
94
96
95
-
e.kill();
96
97
});
97
98
98
99
});