@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
Update InlineCommentSummary UI
Summary: Minor spring cleaning, improve the visual feel of the comments table, more consistent structure.
Test Plan:
Test multiple comments, long comments, short comments, and multiple lines.
{F282462}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: hach-que, Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D11666
+39
-42
+3
-3
resources/celerity/map.php
+3
-3
resources/celerity/map.php
···
10
10
'core.pkg.css' => 'e5d56a4a',
11
11
'core.pkg.js' => '65e04767',
12
12
'darkconsole.pkg.js' => '8ab24e01',
13
-
'differential.pkg.css' => '8af45893',
13
+
'differential.pkg.css' => '380f07e5',
14
14
'differential.pkg.js' => '7b5a4aa4',
15
15
'diffusion.pkg.css' => '591664fa',
16
16
'diffusion.pkg.js' => 'bfc0737b',
···
53
53
'rsrc/css/application/contentsource/content-source-view.css' => '4b8b05d4',
54
54
'rsrc/css/application/countdown/timer.css' => '86b7b0a0',
55
55
'rsrc/css/application/dashboard/dashboard.css' => 'ec324e2a',
56
-
'rsrc/css/application/diff/inline-comment-summary.css' => '8cfd34e8',
56
+
'rsrc/css/application/diff/inline-comment-summary.css' => 'eb5f8e8c',
57
57
'rsrc/css/application/differential/add-comment.css' => 'c478bcaa',
58
58
'rsrc/css/application/differential/changeset-view.css' => 'b2b71e76',
59
59
'rsrc/css/application/differential/core.css' => '7ac3cabc',
···
540
540
'herald-rule-editor' => '6e2de6f2',
541
541
'herald-test-css' => '778b008e',
542
542
'homepage-panel-css' => 'e34bf140',
543
-
'inline-comment-summary-css' => '8cfd34e8',
543
+
'inline-comment-summary-css' => 'eb5f8e8c',
544
544
'javelin-aphlict' => '2be71d56',
545
545
'javelin-behavior' => '61cbc29a',
546
546
'javelin-behavior-aphlict-dropdown' => '335470d7',
+13
-19
src/infrastructure/diff/view/PhabricatorInlineSummaryView.php
+13
-19
src/infrastructure/diff/view/PhabricatorInlineSummaryView.php
···
15
15
16
16
public function render() {
17
17
require_celerity_resource('inline-comment-summary-css');
18
-
return hsprintf('%s%s', $this->renderHeader(), $this->renderTable());
19
-
}
20
-
21
-
private function renderHeader() {
22
-
$icon = id(new PHUIIconView())
23
-
->setIconFont('fa-comment bluegrey msr');
24
-
25
-
$header = phutil_tag_div(
26
-
'phabricator-inline-summary',
27
-
array(
28
-
$icon,
29
-
pht('Inline Comments'),
30
-
));
31
-
return $header;
18
+
return hsprintf('%s', $this->renderTable());
32
19
}
33
20
34
21
private function renderTable() {
···
43
30
}
44
31
}
45
32
46
-
$rows[] = phutil_tag(
47
-
'tr',
48
-
array(),
49
-
phutil_tag('th', array('colspan' => 3), $group));
33
+
$icon = id(new PHUIIconView())
34
+
->setIconFont('fa-file-code-o darkbluetext mmr');
35
+
$header = phutil_tag(
36
+
'th',
37
+
array(
38
+
'colspan' => 3,
39
+
),
40
+
array(
41
+
$icon,
42
+
$group,));
43
+
$rows[] = phutil_tag('tr', array(), $header);
50
44
51
45
foreach ($items as $item) {
52
46
$line = $item['line'];
···
69
63
70
64
if ($href) {
71
65
$icon = id(new PHUIIconView())
72
-
->setIconFont('fa-share white msr');
66
+
->setIconFont('fa-share darkbluetext mmr');
73
67
74
68
$lines = phutil_tag(
75
69
'a',
+23
-20
webroot/rsrc/css/application/diff/inline-comment-summary.css
+23
-20
webroot/rsrc/css/application/diff/inline-comment-summary.css
···
2
2
* @provides inline-comment-summary-css
3
3
*/
4
4
5
-
.phabricator-inline-summary {
6
-
color: {$bluetext};
7
-
padding-top: 12px;
8
-
margin-top: 12px;
9
-
border-top: 1px solid {$thinblueborder};
10
-
}
11
-
12
-
.phabricator-remarkup + .phabricator-inline-summary {
13
-
padding-top: 16px;
5
+
.transaction-comment + .phabricator-inline-summary-table {
6
+
margin-top: 8px;
14
7
}
15
8
16
9
.phabricator-inline-summary-table {
10
+
border-collapse: collapse;
11
+
border-style: hidden;
17
12
width: 100%;
13
+
margin-top: -16px;
18
14
}
19
15
20
16
.phabricator-inline-summary-table th {
21
-
padding: 6px 0px;
22
-
color: {$lightgreytext};
17
+
font-weight: bold;
18
+
padding: 16px 1px 8px;
19
+
background: #fff;
20
+
color: #000;
21
+
border-bottom: 1px solid {$thinblueborder};
23
22
}
24
23
25
24
.phabricator-inline-summary-table td {
26
-
padding: 0px 4px 6px;
25
+
padding: 4px 8px;
27
26
white-space: nowrap;
28
27
color: {$darkbluetext};
28
+
background: white;
29
29
}
30
30
31
31
.phabricator-inline-summary-table td.inline-line-number {
32
-
padding-left: 0px;
32
+
padding: 0;
33
33
width: 100px;
34
34
white-space: nowrap;
35
+
background: #F8F9FC;
36
+
font-family: "Menlo", "Consolas", monospace;
37
+
font-size: 11px;
38
+
color: {$bluetext};
39
+
border-right: 1px solid {$thinblueborder};
35
40
}
36
41
37
42
.phabricator-inline-summary-table td.inline-which-diff {
···
49
54
target (by highlighting the entire cell). */
50
55
51
56
.phabricator-inline-summary-table td.inline-line-number a.num {
52
-
padding-left: 4px;
57
+
padding: 4px 8px;
53
58
display: block;
54
-
font-weight: bold;
55
-
color: {$blue};
59
+
color: {$bluetext};
56
60
}
57
61
58
-
.phabricator-inline-summary-table td.inline-line-number a.num:hover {
59
-
background: {$blue};
60
-
border-radius: 3px;
61
-
color: white;
62
+
.phabricator-inline-summary-table td.inline-line-number:hover a.num {
63
+
background: rgba(150,150,150,.1);
62
64
text-decoration: none;
65
+
color: {$darkbluetext};
63
66
}
64
67
65
68
.phui-timeline-core-content .phabricator-inline-summary:first-child {