@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
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
+134
-33
+20
-20
resources/celerity/map.php
+20
-20
resources/celerity/map.php
···
9
9
'names' => array(
10
10
'conpherence.pkg.css' => '0b64e988',
11
11
'conpherence.pkg.js' => '6249a1cf',
12
-
'core.pkg.css' => '347113ea',
13
-
'core.pkg.js' => '40e98735',
12
+
'core.pkg.css' => '3aeb7eb6',
13
+
'core.pkg.js' => 'f9083b80',
14
14
'darkconsole.pkg.js' => 'e7393ebb',
15
15
'differential.pkg.css' => 'a4ba74b5',
16
16
'differential.pkg.js' => '634399e9',
···
132
132
'rsrc/css/phui/phui-chart.css' => '6bf6f78e',
133
133
'rsrc/css/phui/phui-cms.css' => 'be43c8a8',
134
134
'rsrc/css/phui/phui-comment-form.css' => '4ecc56ef',
135
-
'rsrc/css/phui/phui-comment-panel.css' => '85113e6a',
135
+
'rsrc/css/phui/phui-comment-panel.css' => '20ab1e5b',
136
136
'rsrc/css/phui/phui-crumbs-view.css' => '195ac419',
137
137
'rsrc/css/phui/phui-curtain-view.css' => '947bf1a4',
138
138
'rsrc/css/phui/phui-document-pro.css' => 'c354e312',
···
151
151
'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
152
152
'rsrc/css/phui/phui-info-view.css' => 'ec92802a',
153
153
'rsrc/css/phui/phui-invisible-character-view.css' => '6993d9f0',
154
-
'rsrc/css/phui/phui-lightbox.css' => 'e17ce2bd',
154
+
'rsrc/css/phui/phui-lightbox.css' => 'e01994f2',
155
155
'rsrc/css/phui/phui-list.css' => '9da2aa00',
156
156
'rsrc/css/phui/phui-object-box.css' => '6b487c57',
157
157
'rsrc/css/phui/phui-object-item-list-view.css' => '87278fa0',
···
505
505
'rsrc/js/core/behavior-hovercard.js' => 'bcaccd64',
506
506
'rsrc/js/core/behavior-keyboard-pager.js' => 'a8da01f0',
507
507
'rsrc/js/core/behavior-keyboard-shortcuts.js' => '01fca1f0',
508
-
'rsrc/js/core/behavior-lightbox-attachments.js' => 'ec949017',
508
+
'rsrc/js/core/behavior-lightbox-attachments.js' => '35da14ae',
509
509
'rsrc/js/core/behavior-line-linker.js' => '1499a8cb',
510
510
'rsrc/js/core/behavior-more.js' => 'a80d0378',
511
511
'rsrc/js/core/behavior-object-selector.js' => 'e0ec7f2f',
···
651
651
'javelin-behavior-history-install' => '7ee2b591',
652
652
'javelin-behavior-icon-composer' => '8499b6ab',
653
653
'javelin-behavior-launch-icon-composer' => '48086888',
654
-
'javelin-behavior-lightbox-attachments' => 'ec949017',
654
+
'javelin-behavior-lightbox-attachments' => '35da14ae',
655
655
'javelin-behavior-line-chart' => 'e4232876',
656
656
'javelin-behavior-load-blame' => '42126667',
657
657
'javelin-behavior-maniphest-batch-editor' => '782ab6e7',
···
847
847
'phui-chart-css' => '6bf6f78e',
848
848
'phui-cms-css' => 'be43c8a8',
849
849
'phui-comment-form-css' => '4ecc56ef',
850
-
'phui-comment-panel-css' => '85113e6a',
850
+
'phui-comment-panel-css' => '20ab1e5b',
851
851
'phui-crumbs-view-css' => '195ac419',
852
852
'phui-curtain-view-css' => '947bf1a4',
853
853
'phui-document-summary-view-css' => '9ca48bdf',
···
869
869
'phui-info-view-css' => 'ec92802a',
870
870
'phui-inline-comment-view-css' => '5953c28e',
871
871
'phui-invisible-character-view-css' => '6993d9f0',
872
-
'phui-lightbox-css' => 'e17ce2bd',
872
+
'phui-lightbox-css' => 'e01994f2',
873
873
'phui-list-view-css' => '9da2aa00',
874
874
'phui-object-box-css' => '6b487c57',
875
875
'phui-object-item-list-view-css' => '87278fa0',
···
1095
1095
'javelin-install',
1096
1096
'javelin-dom',
1097
1097
),
1098
+
'20ab1e5b' => array(
1099
+
'phui-timeline-view-css',
1100
+
),
1098
1101
'21df4ff5' => array(
1099
1102
'javelin-install',
1100
1103
'javelin-workboard-card',
···
1168
1171
'javelin-behavior-device',
1169
1172
'javelin-vector',
1170
1173
),
1174
+
'35da14ae' => array(
1175
+
'javelin-behavior',
1176
+
'javelin-stratcom',
1177
+
'javelin-dom',
1178
+
'javelin-mask',
1179
+
'javelin-util',
1180
+
'phuix-icon-view',
1181
+
'phabricator-busy',
1182
+
),
1171
1183
'3ab51e2c' => array(
1172
1184
'javelin-behavior',
1173
1185
'javelin-behavior-device',
···
1580
1592
'javelin-behavior',
1581
1593
'javelin-dom',
1582
1594
'javelin-stratcom',
1583
-
),
1584
-
'85113e6a' => array(
1585
-
'phui-timeline-view-css',
1586
1595
),
1587
1596
'85ee8ce6' => array(
1588
1597
'aphront-dialog-view-css',
···
2126
2135
'javelin-workflow',
2127
2136
'javelin-dom',
2128
2137
'phabricator-draggable-list',
2129
-
),
2130
-
'ec949017' => array(
2131
-
'javelin-behavior',
2132
-
'javelin-stratcom',
2133
-
'javelin-dom',
2134
-
'javelin-mask',
2135
-
'javelin-util',
2136
-
'phuix-icon-view',
2137
-
'phabricator-busy',
2138
2138
),
2139
2139
'edd1ba66' => array(
2140
2140
'javelin-behavior',
+64
-7
src/applications/files/controller/PhabricatorFileLightboxController.php
+64
-7
src/applications/files/controller/PhabricatorFileLightboxController.php
···
6
6
public function handleRequest(AphrontRequest $request) {
7
7
$viewer = $request->getViewer();
8
8
$phid = $request->getURIData('phid');
9
+
$comment = $request->getStr('comment');
9
10
10
11
$file = id(new PhabricatorFileQuery())
11
12
->setViewer($viewer)
···
15
16
return new Aphront404Response();
16
17
}
17
18
19
+
if (strlen($comment)) {
20
+
$xactions = array();
21
+
$xactions[] = id(new PhabricatorFileTransaction())
22
+
->setTransactionType(PhabricatorTransactions::TYPE_COMMENT)
23
+
->attachComment(
24
+
id(new PhabricatorFileTransactionComment())
25
+
->setContent($comment));
26
+
27
+
$editor = id(new PhabricatorFileEditor())
28
+
->setActor($viewer)
29
+
->setContinueOnNoEffect(true)
30
+
->setContentSourceFromRequest($request);
31
+
32
+
$editor->applyTransactions($file, $xactions);
33
+
}
34
+
18
35
$transactions = id(new PhabricatorFileTransactionQuery())
19
36
->withTransactionTypes(array(PhabricatorTransactions::TYPE_COMMENT));
20
37
$timeline = $this->buildTransactionTimeline($file, $transactions);
21
38
22
39
if ($timeline->isTimelineEmpty()) {
23
-
$timeline = phutil_tag(
24
-
'div',
25
-
array(
26
-
'class' => 'phui-comment-panel-empty',
27
-
),
28
-
pht('No comments.'));
40
+
//
29
41
}
42
+
$comment_form = $this->renderCommentForm($file);
30
43
31
44
require_celerity_resource('phui-comment-panel-css');
32
45
$content = phutil_tag(
···
34
47
array(
35
48
'class' => 'phui-comment-panel',
36
49
),
37
-
$timeline);
50
+
array(
51
+
$timeline,
52
+
$comment_form,
53
+
));
38
54
39
55
return id(new AphrontAjaxResponse())
40
56
->setContent($content);
57
+
}
58
+
59
+
private function renderCommentForm(PhabricatorFile $file) {
60
+
$viewer = $this->getViewer();
61
+
62
+
if (!$viewer->isLoggedIn()) {
63
+
$login_href = id(new PhutilURI('/auth/start/'))
64
+
->setQueryParam('next', '/'.$file->getMonogram());
65
+
return id(new PHUIFormLayoutView())
66
+
->addClass('phui-comment-panel-empty')
67
+
->appendChild(
68
+
id(new PHUIButtonView())
69
+
->setTag('a')
70
+
->setText(pht('Login to Comment'))
71
+
->setHref((string)$login_href));
72
+
}
73
+
74
+
$draft = PhabricatorDraft::newFromUserAndKey(
75
+
$viewer,
76
+
$file->getPHID());
77
+
$post_uri = $this->getApplicationURI('thread/'.$file->getPHID().'/');
78
+
79
+
$form = id(new AphrontFormView())
80
+
->setUser($viewer)
81
+
->setAction($post_uri)
82
+
->addSigil('lightbox-comment-form')
83
+
->addClass('lightbox-comment-form')
84
+
->setWorkflow(true)
85
+
->appendChild(
86
+
id(new PhabricatorRemarkupControl())
87
+
->setUser($viewer)
88
+
->setName('comment')
89
+
->setValue($draft->getDraft()))
90
+
->appendChild(
91
+
id(new AphrontFormSubmitControl())
92
+
->setValue(pht('Comment')));
93
+
94
+
$view = phutil_tag_div('phui-comment-panel', $form);
95
+
96
+
return $view;
97
+
41
98
}
42
99
43
100
}
+34
-3
webroot/rsrc/css/phui/phui-comment-panel.css
+34
-3
webroot/rsrc/css/phui/phui-comment-panel.css
···
17
17
}
18
18
19
19
.phui-comment-panel .phui-timeline-view .phui-timeline-event-view {
20
-
margin: 0;
20
+
margin-left: 40px;
21
21
}
22
22
23
-
.phui-comment-panel .phui-timeline-view .phui-timeline-image {
24
-
display: none;
23
+
.device-desktop .phui-comment-panel .phui-timeline-view .phui-timeline-image {
24
+
width: 30px;
25
+
height: 30px;
26
+
top: 4px;
27
+
left: -40px;
25
28
}
26
29
27
30
.phui-comment-panel .phui-timeline-view .phui-timeline-wedge {
···
58
61
padding: 4px 0;
59
62
background: transparent;
60
63
}
64
+
65
+
.phui-comment-panel .phui-timeline-older-transactions-are-hidden {
66
+
background-color: {$lightgreybackground};
67
+
border: none;
68
+
}
69
+
70
+
.lightbox-comment-form .phui-form-view {
71
+
padding-top: 0;
72
+
}
73
+
74
+
.lightbox-comment-form .aphront-form-control {
75
+
padding: 0;
76
+
}
77
+
78
+
.lightbox-comment-form .aphront-form-input {
79
+
margin: 0;
80
+
width: auto;
81
+
}
82
+
83
+
.lightbox-comment-form .remarkup-assist-bar {
84
+
display: none;
85
+
}
86
+
87
+
.lightbox-comment-form .aphront-form-input .remarkup-assist-textarea {
88
+
border-radius: 3px;
89
+
border: 1px solid {$lightgreyborder};
90
+
height: 6em;
91
+
}
+3
-3
webroot/rsrc/css/phui/phui-lightbox.css
+3
-3
webroot/rsrc/css/phui/phui-lightbox.css
···
25
25
}
26
26
27
27
.lightbox-attachment.comment-panel-open .lightbox-image-frame {
28
-
right: 320px;
28
+
right: 360px;
29
29
}
30
30
31
31
.lightbox-attachment .lightbox-image-frame img {
···
52
52
top: 44px;
53
53
bottom: 0;
54
54
right: 0;
55
-
width: 320px;
55
+
width: 360px;
56
56
overflow-y: auto;
57
57
background: #fff;
58
58
opacity: 1;
···
143
143
}
144
144
145
145
.lightbox-attachment.comment-panel-open .lightbox-right .phui-icon-view {
146
-
right: 322px;
146
+
right: 362px;
147
147
}
148
148
149
149
.lightbox-attachment .lightbox-right .phui-icon-view {
+13
webroot/rsrc/js/core/behavior-lightbox-attachments.js
+13
webroot/rsrc/js/core/behavior-lightbox-attachments.js
···
335
335
'lightbox-comment',
336
336
_toggleComment);
337
337
338
+
var _sendMessage = function(e) {
339
+
e.kill();
340
+
var form = e.getNode('tag:form');
341
+
JX.Workflow.newFromForm(form)
342
+
.setHandler(onLoadCommentsResponse)
343
+
.start();
344
+
};
345
+
346
+
JX.Stratcom.listen(
347
+
['submit', 'didSyntheticSubmit'],
348
+
'lightbox-comment-form',
349
+
_sendMessage);
350
+
338
351
});