@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
Collapse previous/forward by default, click to expand.
Summary: This is a lighter UI treatment for previous/forward comments, where the comment is just hidden behind a click. This mayyy be too hard to discover, but I'd rather wait and make it more obvious if actually needed. Once you understand the interaction, the cleaner UI is preferable. Ref T7447
Test Plan:
Test a lot of previous and forward comments.
{F389658}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T7447
Differential Revision: https://secure.phabricator.com/D12627
+86
-12
+2
-2
resources/celerity/map.php
+2
-2
resources/celerity/map.php
···
58
58
'rsrc/css/application/differential/add-comment.css' => 'c47f8c40',
59
59
'rsrc/css/application/differential/changeset-view.css' => 'e19cfd6e',
60
60
'rsrc/css/application/differential/core.css' => '7ac3cabc',
61
-
'rsrc/css/application/differential/phui-inline-comment.css' => '7adedadb',
61
+
'rsrc/css/application/differential/phui-inline-comment.css' => '03bb3528',
62
62
'rsrc/css/application/differential/results-table.css' => '181aa9d9',
63
63
'rsrc/css/application/differential/revision-comment.css' => '024dda6b',
64
64
'rsrc/css/application/differential/revision-history.css' => '0e8eb855',
···
795
795
'phui-image-mask-css' => '5a8b09c8',
796
796
'phui-info-panel-css' => '27ea50a1',
797
797
'phui-info-view-css' => 'c6f0aef8',
798
-
'phui-inline-comment-view-css' => '7adedadb',
798
+
'phui-inline-comment-view-css' => '03bb3528',
799
799
'phui-list-view-css' => '2e25ebfb',
800
800
'phui-object-box-css' => '7d160002',
801
801
'phui-object-item-list-view-css' => '9db65899',
+23
-10
src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php
+23
-10
src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php
···
124
124
125
125
$ghost_tag = null;
126
126
$ghost = $inline->getIsGhost();
127
+
$ghost_id = null;
127
128
if ($ghost) {
128
129
if ($ghost['new']) {
129
-
$ghost_text = pht('Newer Comment');
130
+
$ghosticon = 'fa-fast-forward';
131
+
$reason = pht('Click to view forward comment.');
130
132
} else {
131
-
$ghost_text = pht('Older Comment');
133
+
$ghosticon = 'fa-fast-backward';
134
+
$reason = pht('Click to view previous comment.');
132
135
}
136
+
$ghost_id = celerity_generate_unique_node_id();
133
137
134
-
$ghost_tag = id(new PHUITagView())
135
-
->setType(PHUITagView::TYPE_SHADE)
136
-
->setName($ghost_text)
137
-
->setSlimShady(true)
138
-
->setShade(PHUITagView::COLOR_BLUE)
138
+
$ghost_icon = id(new PHUIIconView())
139
+
->setIconFont($ghosticon)
139
140
->addSigil('has-tooltip')
140
141
->setMetadata(
141
142
array(
142
-
'tip' => $ghost['reason'],
143
+
'tip' => $reason,
143
144
'size' => 300,
144
-
))
145
-
->addClass('mml');
145
+
));
146
+
$ghost_tag = javelin_tag(
147
+
'a',
148
+
array(
149
+
'class' => 'ghost-icon',
150
+
'sigil' => 'jx-toggle-class',
151
+
'meta' => array(
152
+
'map' => array(
153
+
$ghost_id => 'ghost-is-expanded',
154
+
),
155
+
),
156
+
),
157
+
$ghost_icon);
146
158
$classes[] = 'inline-comment-ghost';
147
159
}
148
160
···
397
409
'class' => $classes,
398
410
'sigil' => $sigil,
399
411
'meta' => $metadata,
412
+
'id' => $ghost_id,
400
413
),
401
414
array(
402
415
phutil_tag_div('differential-inline-comment-head grouped', array(
+61
webroot/rsrc/css/application/differential/phui-inline-comment.css
+61
webroot/rsrc/css/application/differential/phui-inline-comment.css
···
405
405
.differential-inline-undo a {
406
406
font-weight: bold;
407
407
}
408
+
409
+
/* - Spooky Ghost UI -----------------------------------------------------------
410
+
411
+
Hide your codez.
412
+
413
+
*/
414
+
415
+
.inline-comment-ghost .differential-inline-comment-head {
416
+
padding-left: 40px;
417
+
padding-bottom: 0;
418
+
}
419
+
420
+
.inline-comment-ghost .inline-head-left {
421
+
padding: 4px 0;
422
+
}
423
+
424
+
.ghost-icon {
425
+
background: {$darkgreybackground};
426
+
float: left;
427
+
margin-right: 8px;
428
+
padding: 2px 4px 1px 2px;
429
+
position: absolute;
430
+
top: 0;
431
+
left: 0;
432
+
}
433
+
434
+
.ghost-icon .phui-icon-view {
435
+
padding: 7px;
436
+
font-size: 15px;
437
+
color: {$lightbluetext};
438
+
}
439
+
440
+
.device-desktop .ghost-icon .phui-icon-view:hover {
441
+
color: {$sky};
442
+
}
443
+
444
+
.inline-comment-ghost .differential-inline-comment-content {
445
+
display: none;
446
+
}
447
+
448
+
.inline-comment-ghost.ghost-is-expanded .differential-inline-comment-content {
449
+
display: block;
450
+
}
451
+
452
+
.differential-inline-comment.inline-comment-ghost
453
+
.differential-inline-comment-head {
454
+
border-bottom-color: transparent;
455
+
position: relative;
456
+
}
457
+
458
+
.differential-inline-comment.inline-comment-ghost.ghost-is-expanded
459
+
.differential-inline-comment-head {
460
+
border-bottom-color: {$thinblueborder};
461
+
position: relative;
462
+
}
463
+
464
+
.differential-inline-comment.inline-comment-ghost
465
+
.differential-inline-done-label {
466
+
border-color: {$lightgreyborder};
467
+
color: {$lightgreytext};
468
+
}