@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
Show drafts and inline comments
Summary:
Show drafts for users that made them.
Show inline comments beside image, highlights them when user mouseovers selection.
Allow users that can view mock to add inline comment instead of only allowing users that can edit mock to add inline comment.
Test Plan:
Verified that inline comments are shown beside image. Verified that only drafts for current user are shown. Verified that inline comment is
highlithed when user mouseovers their selection.
Reviewers: epriestley
CC: aran, Korvin
Maniphest Tasks: T2446
Differential Revision: https://secure.phabricator.com/D4929
authored by
Lauri-Henrik Jalonen
and committed by
epriestley
29d6180e
5a9e8346
+165
-9
+12
src/__celerity_resource_map__.php
+12
src/__celerity_resource_map__.php
···
1864
1864
),
1865
1865
'disk' => '/rsrc/js/application/phame/phame-post-preview.js',
1866
1866
),
1867
+
'javelin-behavior-pholio-edit-inline-comment' =>
1868
+
array(
1869
+
'uri' => '/res/61759cd8/rsrc/js/application/pholio/behavior-pholio-edit-inline-comment.js',
1870
+
'type' => 'js',
1871
+
'requires' =>
1872
+
array(
1873
+
0 => 'javelin-behavior',
1874
+
1 => 'javelin-stratcom',
1875
+
2 => 'javelin-dom',
1876
+
),
1877
+
'disk' => '/rsrc/js/application/pholio/behavior-pholio-edit-inline-comment.js',
1878
+
),
1867
1879
'javelin-behavior-pholio-mock-view' =>
1868
1880
array(
1869
1881
'uri' => '/res/e5f432ac/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
+17
src/applications/pholio/controller/PholioInlineController.php
+17
src/applications/pholio/controller/PholioInlineController.php
···
20
20
$this->id
21
21
);
22
22
23
+
$inline_comments = array_merge(
24
+
$inline_comments,
25
+
id(new PholioTransactionComment())->loadAllWhere(
26
+
'imageid = %d AND authorphid = %s AND transactionphid IS NULL',
27
+
$this->id,
28
+
$user->getPHID()));
29
+
23
30
$inlines = array();
24
31
foreach ($inline_comments as $inline_comment) {
32
+
$author = id(new PhabricatorUser())->loadOneWhere(
33
+
'phid = %s',
34
+
$inline_comment->getAuthorPHID()
35
+
);
25
36
$inlines[] = array(
26
37
'phid' => $inline_comment->getPHID(),
38
+
'userphid' => $author->getPHID(),
39
+
'username' => $author->getUserName(),
40
+
'canEdit' => ($inline_comment->
41
+
getEditPolicy(PhabricatorPolicyCapability::CAN_EDIT) ==
42
+
$user->getPHID()) ? true : false,
43
+
'transactionphid' => $inline_comment->getTransactionPHID(),
27
44
'imageID' => $inline_comment->getImageID(),
28
45
'x' => $inline_comment->getX(),
29
46
'y' => $inline_comment->getY(),
+1
-2
src/applications/pholio/controller/PholioInlineSaveController.php
+1
-2
src/applications/pholio/controller/PholioInlineSaveController.php
+11
-1
src/applications/pholio/view/PholioMockImagesView.php
+11
-1
src/applications/pholio/view/PholioMockImagesView.php
···
47
47
$main_image_tag
48
48
);
49
49
50
+
51
+
$inline_comments_holder = javelin_tag(
52
+
'div',
53
+
array(
54
+
'id' => 'mock-inline-comments',
55
+
'sigil' => 'mock-inline-comments',
56
+
'class' => 'pholio-mock-inline-comments'
57
+
),
58
+
"");
59
+
50
60
$mockview[] = phutil_tag(
51
61
'div',
52
62
array(
53
63
'class' => 'pholio-mock-image-container',
54
64
),
55
-
$main_image_tag);
65
+
array($main_image_tag, $inline_comments_holder));
56
66
57
67
if (count($this->mock->getImages()) > 1) {
58
68
$thumbnails = array();
+33
webroot/rsrc/css/application/pholio/pholio.css
+33
webroot/rsrc/css/application/pholio/pholio.css
···
4
4
.pholio-mock-image-container {
5
5
background-color: #282828;
6
6
text-align: center;
7
+
vertical-align: middle;
7
8
}
8
9
9
10
.pholio-mock-carousel {
···
43
44
margin: 10px 0px;
44
45
}
45
46
47
+
48
+
.pholio-mock-inline-comments {
49
+
display: inline-block;
50
+
margin-left: 10px;
51
+
text-align: left;
52
+
padding-bottom: 10px;
53
+
}
54
+
55
+
.pholio-inline-comment {
56
+
border: 1px solid #aa8;
57
+
background: #f9f9f1;
58
+
margin-bottom: 2px;
59
+
padding: 8px 10px;
60
+
}
61
+
62
+
.pholio-inline-comment-header {
63
+
border-bottom: 1px solid #cca;
64
+
color: #333;
65
+
font-weight: bold;
66
+
padding-bottom: 6px;
67
+
margin-bottom: 4px;
68
+
}
69
+
70
+
.pholio-mock-inline-comment-highlight {
71
+
background-color: #F0B160;
72
+
}
73
+
74
+
.pholio-inline-head-links a {
75
+
font-weight: normal;
76
+
margin-left: 5px;
77
+
}
78
+
+91
-6
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
+91
-6
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
···
139
139
endY: Math.max(startPos.y,endPos.y),
140
140
comment: comment};
141
141
142
-
143
142
inlineComment.addData(commentToAdd);
144
143
inlineComment.send();
144
+
load_inline_comments();
145
+
});
146
+
147
+
function forge_inline_comment(data) {
148
+
var comment_head = data.username;
149
+
if (data.transactionphid == null) comment_head += " (draft)";
145
150
146
-
});
151
+
var links = null;
152
+
if (data.canEdit && data.transactionphid == null) {
153
+
links = JX.$N(
154
+
'span',
155
+
{
156
+
className: 'pholio-inline-head-links'
157
+
},
158
+
[
159
+
JX.$N('a',{href: 'http://www.google.fi'},'Edit'),
160
+
JX.$N('a',{href: 'http://www.google.fi'},'Delete')
161
+
]);
162
+
163
+
}
164
+
165
+
var comment_header = JX.$N(
166
+
'div',
167
+
{
168
+
className: 'pholio-inline-comment-header'
169
+
},
170
+
[comment_head, links]);
171
+
172
+
var comment_body = JX.$N(
173
+
'div',
174
+
{},
175
+
data.content);
176
+
177
+
var inline_comment = JX.$N(
178
+
'div',
179
+
{
180
+
id: data.phid + "_comment",
181
+
className: 'pholio-inline-comment'
182
+
},
183
+
[comment_header, comment_body]);
184
+
185
+
return inline_comment;
186
+
}
147
187
148
188
function load_inline_comments() {
149
189
var data = JX.Stratcom.getData(JX.$(config.mainID));
190
+
var comment_holder = JX.$('mock-inline-comments');
191
+
JX.DOM.setContent(comment_holder, '');
150
192
151
193
var inline_comments_url = "/pholio/inline/" + data['imageID'] + "/";
152
194
var inline_comments = new JX.Request(inline_comments_url, function(r) {
···
156
198
var inlineSelection = JX.$N(
157
199
'div',
158
200
{
159
-
id: r[i].phid,
201
+
id: r[i].phid + "_selection",
160
202
className: 'pholio-mock-select-border',
161
203
title: r[i].content
162
204
});
163
205
206
+
JX.Stratcom.addData(
207
+
inlineSelection,
208
+
{phid: r[i].phid});
209
+
210
+
JX.Stratcom.addSigil(inlineSelection, "image_selection");
211
+
JX.DOM.appendContent(comment_holder, forge_inline_comment(r[i]));
212
+
164
213
JX.DOM.appendContent(wrapper, inlineSelection);
165
214
166
215
JX.$V(r[i].x, r[i].y).setPos(inlineSelection);
167
-
JX.$V(r[i].width, r[i].height)
168
-
.setDim(inlineSelection);
216
+
JX.$V(r[i].width, r[i].height).setDim(inlineSelection);
217
+
218
+
if (r[i].transactionphid == null) {
219
+
220
+
var inlineDraft = JX.$N(
221
+
'div',{className: 'pholio-mock-select-fill'});
222
+
223
+
JX.$V(r[i].x, r[i].y).setPos(inlineDraft);
224
+
JX.$V(r[i].width, r[i].height).setDim(inlineDraft);
225
+
226
+
JX.Stratcom.addData(
227
+
inlineDraft,
228
+
{phid: r[i].phid});
229
+
230
+
JX.Stratcom.addSigil(inlineDraft, "image_selection");
231
+
JX.DOM.appendContent(wrapper, inlineDraft);
232
+
}
169
233
}
170
234
}
235
+
236
+
JX.Stratcom.listen(
237
+
'mouseover',
238
+
'image_selection',
239
+
function(e) {
240
+
var data = e.getNodeData('image_selection');
241
+
242
+
var inline_comment = JX.$(data.phid + "_comment");
243
+
JX.DOM.alterClass(inline_comment,
244
+
'pholio-mock-inline-comment-highlight', true);
245
+
});
246
+
247
+
JX.Stratcom.listen(
248
+
'mouseout',
249
+
'image_selection',
250
+
function(e) {
251
+
var data = e.getNodeData('image_selection');
252
+
253
+
var inline_comment = JX.$(data.phid + "_comment");
254
+
JX.DOM.alterClass(inline_comment,
255
+
'pholio-mock-inline-comment-highlight', false);
256
+
});
171
257
});
172
258
173
259
inline_comments.send();
174
260
}
175
261
176
262
load_inline_comments();
177
-
178
263
});
179
264
180
265