@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
Allow commenting on non-viewable lightbox files
Summary: Removes the viewable restriction on embedded files. Builds a basic lightbox UI for commenting.
Test Plan:
Add psd, pdf to Maniphest task, clicked on download, comment, left comment. Closed box.
{F1943726}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Maniphest Tasks: T3612
Differential Revision: https://secure.phabricator.com/D16917
+94
-64
+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' => '3aeb7eb6',
13
-
'core.pkg.js' => 'f9083b80',
12
+
'core.pkg.css' => '92233377',
13
+
'core.pkg.js' => '519f84e8',
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' => '20ab1e5b',
135
+
'rsrc/css/phui/phui-comment-panel.css' => '5659325f',
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' => 'e01994f2',
154
+
'rsrc/css/phui/phui-lightbox.css' => '04367b4f',
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' => '35da14ae',
508
+
'rsrc/js/core/behavior-lightbox-attachments.js' => '2674e4fa',
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' => '35da14ae',
654
+
'javelin-behavior-lightbox-attachments' => '2674e4fa',
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' => '20ab1e5b',
850
+
'phui-comment-panel-css' => '5659325f',
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' => 'e01994f2',
872
+
'phui-lightbox-css' => '04367b4f',
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
-
),
1101
1098
'21df4ff5' => array(
1102
1099
'javelin-install',
1103
1100
'javelin-workboard-card',
···
1109
1106
'javelin-workflow',
1110
1107
'javelin-util',
1111
1108
),
1109
+
'2674e4fa' => array(
1110
+
'javelin-behavior',
1111
+
'javelin-stratcom',
1112
+
'javelin-dom',
1113
+
'javelin-mask',
1114
+
'javelin-util',
1115
+
'phuix-icon-view',
1116
+
'phabricator-busy',
1117
+
),
1112
1118
'2926fff2' => array(
1113
1119
'javelin-behavior',
1114
1120
'javelin-dom',
···
1170
1176
'javelin-router',
1171
1177
'javelin-behavior-device',
1172
1178
'javelin-vector',
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
1179
),
1183
1180
'3ab51e2c' => array(
1184
1181
'javelin-behavior',
···
1363
1360
'javelin-workflow',
1364
1361
'phabricator-drag-and-drop-file-upload',
1365
1362
'javelin-workboard-board',
1363
+
),
1364
+
'5659325f' => array(
1365
+
'phui-timeline-view-css',
1366
1366
),
1367
1367
'58dea2fa' => array(
1368
1368
'javelin-install',
+8
-3
src/applications/files/controller/PhabricatorFileLightboxController.php
+8
-3
src/applications/files/controller/PhabricatorFileLightboxController.php
···
36
36
->withTransactionTypes(array(PhabricatorTransactions::TYPE_COMMENT));
37
37
$timeline = $this->buildTransactionTimeline($file, $transactions);
38
38
39
-
if ($timeline->isTimelineEmpty()) {
40
-
//
41
-
}
42
39
$comment_form = $this->renderCommentForm($file);
43
40
41
+
$info = phutil_tag(
42
+
'div',
43
+
array(
44
+
'class' => 'phui-comment-panel-header',
45
+
),
46
+
$file->getName());
47
+
44
48
require_celerity_resource('phui-comment-panel-css');
45
49
$content = phutil_tag(
46
50
'div',
···
48
52
'class' => 'phui-comment-panel',
49
53
),
50
54
array(
55
+
$info,
51
56
$timeline,
52
57
$comment_form,
53
58
));
+3
-8
src/view/layout/PhabricatorFileLinkView.php
+3
-8
src/view/layout/PhabricatorFileLinkView.php
···
88
88
require_celerity_resource('phabricator-remarkup-css');
89
89
require_celerity_resource('phui-lightbox-css');
90
90
91
-
$sigil = null;
92
-
$meta = null;
93
-
$mustcapture = false;
94
-
if ($this->getFileViewable()) {
95
-
$mustcapture = true;
96
-
$sigil = 'lightboxable';
97
-
$meta = $this->getMetadata();
98
-
}
91
+
$mustcapture = true;
92
+
$sigil = 'lightboxable';
93
+
$meta = $this->getMetadata();
99
94
100
95
$class = 'phabricator-remarkup-embed-layout-link';
101
96
if ($this->getCustomClass()) {
-4
src/view/page/PhabricatorStandardPageView.php
-4
src/view/page/PhabricatorStandardPageView.php
···
268
268
}
269
269
}
270
270
271
-
$default_img_uri =
272
-
celerity_get_resource_uri(
273
-
'rsrc/image/icon/fatcow/document_black.png');
274
271
$icon = id(new PHUIIconView())
275
272
->setIcon('fa-download');
276
273
$lightbox_id = celerity_generate_unique_node_id();
···
296
293
'lightbox-attachments',
297
294
array(
298
295
'lightbox_id' => $lightbox_id,
299
-
'defaultImageUri' => $default_img_uri,
300
296
'downloadForm' => $download_form,
301
297
));
302
298
}
+6
webroot/rsrc/css/phui/phui-comment-panel.css
+6
webroot/rsrc/css/phui/phui-comment-panel.css
+24
-4
webroot/rsrc/css/phui/phui-lightbox.css
+24
-4
webroot/rsrc/css/phui/phui-lightbox.css
···
22
22
right: 0;
23
23
bottom: 0;
24
24
left: 0;
25
+
text-align: center;
25
26
}
26
27
27
28
.lightbox-attachment.comment-panel-open .lightbox-image-frame {
···
42
43
.lightbox-comment-frame {
43
44
position: absolute;
44
45
top: -19999px;
45
-
bottom: -19999px;
46
+
bottom: 0;
47
+
right: 0;
46
48
opacity: 0;
47
-
transition: all 0.2s;
49
+
transition: all 0.3s;
50
+
}
51
+
52
+
.lightbox-attachment .lightbox-icon-frame {
53
+
top: 44%;
54
+
left: calc(50% - 160px);
55
+
position: fixed;
56
+
display: block;
57
+
height: 120px;
58
+
width: 320px;
59
+
}
60
+
61
+
.lightbox-attachment.comment-panel-open .lightbox-icon-frame {
62
+
left: calc(50% - 340px);
63
+
}
64
+
65
+
.lightbox-attachment .phui-lightbox-file-icon {
66
+
font-size: 64px;
67
+
color: {$darkbluetext};
48
68
}
49
69
50
70
.comment-panel-open .lightbox-comment-frame {
···
63
83
}
64
84
65
85
.lightbox-attachment .attachment-name {
66
-
width: 100%;
67
-
line-height: 30px;
86
+
line-height: 32px;
87
+
font-size: {$biggerfontsize};
68
88
text-align: center;
69
89
}
70
90
+33
-25
webroot/rsrc/js/core/behavior-lightbox-attachments.js
+33
-25
webroot/rsrc/js/core/behavior-lightbox-attachments.js
···
79
79
}
80
80
81
81
var img_uri = '';
82
+
var img = '';
82
83
var extra_status = '';
83
-
var name_element = '';
84
84
// for now, this conditional is always true
85
85
// revisit if / when we decide to add non-images to lightbox view
86
86
if (target_data.viewable) {
87
87
img_uri = target_data.uri;
88
+
var alt_name = '';
89
+
if (typeof target_data.name != 'undefined') {
90
+
alt_name = target_data.name;
91
+
}
92
+
93
+
img =
94
+
JX.$N('img',
95
+
{
96
+
className : 'loading',
97
+
alt : alt_name
98
+
}
99
+
);
88
100
} else {
89
-
img_uri = config.defaultImageUri;
90
-
extra_status = ' Image may not be representative of actual attachment.';
91
-
name_element =
101
+
var imgIcon = new JX.PHUIXIconView()
102
+
.setIcon('fa-file-text-o phui-lightbox-file-icon')
103
+
.getNode();
104
+
var nameElement =
92
105
JX.$N('div',
93
106
{
94
107
className : 'attachment-name'
95
108
},
96
109
target_data.name
97
110
);
98
-
}
99
-
100
-
var alt_name = '';
101
-
if (typeof target_data.name != 'undefined') {
102
-
alt_name = target_data.name;
111
+
img =
112
+
JX.$N('div',
113
+
{
114
+
className : 'lightbox-icon-frame',
115
+
},
116
+
[ imgIcon, nameElement ]
117
+
);
103
118
}
104
119
105
-
var img =
106
-
JX.$N('img',
107
-
{
108
-
className : 'loading',
109
-
alt : alt_name
110
-
}
111
-
);
112
-
113
120
var imgFrame =
114
121
JX.$N('div',
115
122
{
···
146
153
},
147
154
[
148
155
m_url,
149
-
' Image ' + current + ' of ' + total + '.' + extra_status
156
+
' Image ' + current + ' of ' + total + '.'
150
157
]
151
158
);
152
159
···
184
191
[statusSpan, closeButton, commentButton, downloadSpan]
185
192
);
186
193
JX.DOM.appendContent(lightbox, statusHTML);
187
-
JX.DOM.appendContent(lightbox, name_element);
188
194
JX.DOM.listen(closeButton, 'click', null, closeLightBox);
189
195
190
196
var leftIcon = '';
···
238
244
239
245
document.body.appendChild(lightbox);
240
246
241
-
JX.Busy.start();
242
-
img.onload = function() {
243
-
JX.DOM.alterClass(img, 'loading', false);
244
-
JX.Busy.done();
245
-
};
247
+
if (img_uri) {
248
+
JX.Busy.start();
249
+
img.onload = function() {
250
+
JX.DOM.alterClass(img, 'loading', false);
251
+
JX.Busy.done();
252
+
};
246
253
247
-
img.src = img_uri;
254
+
img.src = img_uri;
255
+
}
248
256
loadComments(target_data.phid);
249
257
}
250
258