@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 collapsed inlines more useful and anchor target highlights more accurate
Summary:
Ref T12616. Fixes T11648. Currently, we snug up replies with a negative margin (from T10563) but this throws off the anchor highlighting.
Instead:
- Remove padding from these dolumns.
- Use margins on the stuff inside them instead.
- Less margins for replies.
- Less margins for collapsed comments.
- Show some text for collapsed comments.
Test Plan:
{F4960890}
{F4960891}
Reviewers: chad
Reviewed By: chad
Maniphest Tasks: T12616, T11648
Differential Revision: https://secure.phabricator.com/D17913
+38
-23
+8
-8
resources/celerity/map.php
+8
-8
resources/celerity/map.php
···
12
12
'core.pkg.css' => 'ee5f28cd',
13
13
'core.pkg.js' => '8c5f913d',
14
14
'darkconsole.pkg.js' => '1f9a31bc',
15
-
'differential.pkg.css' => '58712637',
15
+
'differential.pkg.css' => '7b1c772c',
16
16
'differential.pkg.js' => 'f1b636fb',
17
17
'diffusion.pkg.css' => 'b93d9b8c',
18
18
'diffusion.pkg.js' => '84c8f8fd',
···
64
64
'rsrc/css/application/dashboard/dashboard.css' => 'fe5b1869',
65
65
'rsrc/css/application/diff/inline-comment-summary.css' => '51efda3a',
66
66
'rsrc/css/application/differential/add-comment.css' => 'c47f8c40',
67
-
'rsrc/css/application/differential/changeset-view.css' => '41af6d25',
67
+
'rsrc/css/application/differential/changeset-view.css' => '69a3c268',
68
68
'rsrc/css/application/differential/core.css' => '5b7b8ff4',
69
-
'rsrc/css/application/differential/phui-inline-comment.css' => '3fd8ca64',
69
+
'rsrc/css/application/differential/phui-inline-comment.css' => 'e0a2b52e',
70
70
'rsrc/css/application/differential/revision-comment.css' => '14b8565a',
71
71
'rsrc/css/application/differential/revision-history.css' => '0e8eb855',
72
72
'rsrc/css/application/differential/revision-list.css' => 'f3c47d33',
···
567
567
'conpherence-thread-manager' => '4d863052',
568
568
'conpherence-transaction-css' => '85129c68',
569
569
'd3' => 'a11a5ff2',
570
-
'differential-changeset-view-css' => '41af6d25',
570
+
'differential-changeset-view-css' => '69a3c268',
571
571
'differential-core-view-css' => '5b7b8ff4',
572
572
'differential-revision-add-comment-css' => 'c47f8c40',
573
573
'differential-revision-comment-css' => '14b8565a',
···
864
864
'phui-image-mask-css' => 'a8498f9c',
865
865
'phui-info-panel-css' => '27ea50a1',
866
866
'phui-info-view-css' => '6e217679',
867
-
'phui-inline-comment-view-css' => '3fd8ca64',
867
+
'phui-inline-comment-view-css' => 'e0a2b52e',
868
868
'phui-invisible-character-view-css' => '6993d9f0',
869
869
'phui-lightbox-css' => '0a035e40',
870
870
'phui-list-view-css' => '12eb8ce6',
···
1182
1182
'javelin-dom',
1183
1183
'javelin-reactor-dom',
1184
1184
),
1185
-
'41af6d25' => array(
1186
-
'phui-inline-comment-view-css',
1187
-
),
1188
1185
42126667 => array(
1189
1186
'javelin-behavior',
1190
1187
'javelin-dom',
···
1400
1397
),
1401
1398
'6882e80a' => array(
1402
1399
'javelin-dom',
1400
+
),
1401
+
'69a3c268' => array(
1402
+
'phui-inline-comment-view-css',
1403
1403
),
1404
1404
'69adf288' => array(
1405
1405
'javelin-install',
+9
-4
src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php
+9
-4
src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php
···
433
433
phutil_tag_div('phabricator-remarkup', $content)),
434
434
));
435
435
436
+
$snippet = id(new PhutilUTF8StringTruncator())
437
+
->setMaximumGlyphs(96)
438
+
->truncateString($inline->getContent());
439
+
436
440
$summary = phutil_tag(
437
441
'div',
438
442
array(
439
443
'class' => 'differential-inline-summary',
440
444
),
441
-
442
-
// TODO: Render something a little more useful here as a hint about the
443
-
// inline content, like "alincoln: first line of text...".
444
-
pht('...'));
445
+
array(
446
+
phutil_tag('strong', array(), pht('%s:', $author)),
447
+
' ',
448
+
$snippet,
449
+
));
445
450
446
451
return array(
447
452
$anchor,
+1
-5
webroot/rsrc/css/application/differential/changeset-view.css
+1
-5
webroot/rsrc/css/application/differential/changeset-view.css
···
67
67
padding: 1px 4px;
68
68
}
69
69
70
-
.device .differential-diff .inline > td {
71
-
padding: 4px;
72
-
}
73
-
74
70
.differential-diff td .zwsp {
75
71
position: absolute;
76
72
width: 0;
···
315
311
}
316
312
317
313
.differential-diff .inline > td {
318
-
padding: 8px 12px;
314
+
padding: 0;
319
315
}
320
316
321
317
.differential-loading {
+20
-6
webroot/rsrc/css/application/differential/phui-inline-comment.css
+20
-6
webroot/rsrc/css/application/differential/phui-inline-comment.css
···
28
28
background: #fff;
29
29
border: 1px solid {$sh-yellowborder};
30
30
font: {$basefont};
31
-
margin: 0;
32
-
width: 100%;
33
31
-moz-box-sizing: border-box;
34
32
-webkit-box-sizing: border-box;
35
33
box-sizing: border-box;
36
34
overflow: hidden;
37
35
white-space: normal;
38
36
border-radius: 3px;
37
+
margin: 8px 12px;
38
+
}
39
+
40
+
.device .differential-inline-comment {
41
+
margin: 4px;
39
42
}
40
43
41
44
.inline-state-is-draft {
···
61
64
62
65
/* Tighten up spacing on replies */
63
66
.differential-inline-comment.inline-comment-is-reply {
64
-
margin-top: -12px;
67
+
margin-top: 0;
65
68
}
66
69
67
70
.differential-inline-comment .inline-head-right {
···
315
318
316
319
.differential-inline-undo {
317
320
padding: 8px;
321
+
margin: 8px 12px;
318
322
text-align: center;
319
323
background: {$sh-yellowbackground};
320
324
border: 1px solid {$sh-yellowborder};
···
389
393
}
390
394
391
395
.differential-inline-summary {
392
-
background: {$greybackground};
393
-
padding: 0 4px;
394
-
color: {$greytext};
396
+
background: {$lightgreybackground};
397
+
padding: 2px 16px;
398
+
color: {$lightgreytext};
399
+
font-size: {$smallerfontsize};
395
400
display: none;
401
+
font: {$basefont};
402
+
white-space: nowrap;
403
+
overflow: hidden;
404
+
text-overflow: ellipsis;
405
+
}
406
+
407
+
.device .differential-inline-summary {
408
+
padding-left: 4px;
409
+
padding-right: 4px;
396
410
}
397
411
398
412
.inline-hidden .differential-inline-summary {