@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
Mobile Differential Diff Review (2-up)
Summary:
This does two things
- Modernizes Table of Contents
- Makes Differential reasonable on mobile
I say resonable, as you still have to scroll horizontal to see the entire diff. This is minor as the rest of the page is 100x more useful. A 1-up view would be preferred, but this is still an improvement.
Test Plan: Used iOS simulator for browsing diffs.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: epriestley, Korvin, chad
Differential Revision: https://secure.phabricator.com/D8681
+122
-89
+5
-5
resources/celerity/map.php
+5
-5
resources/celerity/map.php
···
10
10
'core.pkg.css' => 'fb144113',
11
11
'core.pkg.js' => 'd3fecc57',
12
12
'darkconsole.pkg.js' => 'ca8671ce',
13
-
'differential.pkg.css' => '3ad9692c',
13
+
'differential.pkg.css' => 'cc216438',
14
14
'differential.pkg.js' => '11a5b750',
15
15
'diffusion.pkg.css' => '3783278d',
16
16
'diffusion.pkg.js' => '5b4010f4',
···
55
55
'rsrc/css/application/countdown/timer.css' => '86b7b0a0',
56
56
'rsrc/css/application/diff/inline-comment-summary.css' => '14a91639',
57
57
'rsrc/css/application/differential/add-comment.css' => 'c478bcaa',
58
-
'rsrc/css/application/differential/changeset-view.css' => 'e710a360',
58
+
'rsrc/css/application/differential/changeset-view.css' => 'd1951f43',
59
59
'rsrc/css/application/differential/core.css' => '7ac3cabc',
60
60
'rsrc/css/application/differential/results-table.css' => '239924f9',
61
61
'rsrc/css/application/differential/revision-comment.css' => '48186045',
62
62
'rsrc/css/application/differential/revision-history.css' => '0e8eb855',
63
63
'rsrc/css/application/differential/revision-list.css' => 'f3c47d33',
64
-
'rsrc/css/application/differential/table-of-contents.css' => '19566f76',
64
+
'rsrc/css/application/differential/table-of-contents.css' => '6bf8e1d2',
65
65
'rsrc/css/application/diffusion/commit-view.css' => '92d1e8f9',
66
66
'rsrc/css/application/diffusion/diffusion-icons.css' => '384a0f7d',
67
67
'rsrc/css/application/diffusion/diffusion-source.css' => '66fdf661',
···
505
505
'conpherence-notification-css' => '403cf598',
506
506
'conpherence-update-css' => '1099a660',
507
507
'conpherence-widget-pane-css' => '87b12e0c',
508
-
'differential-changeset-view-css' => 'e710a360',
508
+
'differential-changeset-view-css' => 'd1951f43',
509
509
'differential-core-view-css' => '7ac3cabc',
510
510
'differential-inline-comment-editor' => 'f2441746',
511
511
'differential-results-table-css' => '239924f9',
···
513
513
'differential-revision-comment-css' => '48186045',
514
514
'differential-revision-history-css' => '0e8eb855',
515
515
'differential-revision-list-css' => 'f3c47d33',
516
-
'differential-table-of-contents-css' => '19566f76',
516
+
'differential-table-of-contents-css' => '6bf8e1d2',
517
517
'diffusion-commit-view-css' => '92d1e8f9',
518
518
'diffusion-icons-css' => '384a0f7d',
519
519
'diffusion-source-css' => '66fdf661',
+1
src/applications/differential/controller/DifferentialDiffViewController.php
+1
src/applications/differential/controller/DifferentialDiffViewController.php
+1
src/applications/differential/controller/DifferentialRevisionViewController.php
+1
src/applications/differential/controller/DifferentialRevisionViewController.php
+62
-47
src/applications/differential/view/DifferentialDiffTableOfContentsView.php
+62
-47
src/applications/differential/view/DifferentialDiffTableOfContentsView.php
···
122
122
123
123
$line_count = $changeset->getAffectedLineCount();
124
124
if ($line_count == 0) {
125
-
$lines = null;
125
+
$lines = '';
126
126
} else {
127
127
$lines = ' '.pht('(%d line(s))', $line_count);
128
128
}
···
135
135
}
136
136
$pchar =
137
137
($changeset->getOldProperties() === $changeset->getNewProperties())
138
-
? null
138
+
? ''
139
139
: phutil_tag('span', array('title' => pht('Properties Changed')), 'M')
140
140
;
141
141
···
150
150
'id' => 'differential-mcoverage-'.md5($fname),
151
151
'class' => 'differential-mcoverage-loading',
152
152
),
153
-
(isset($this->visibleChangesets[$id]) ? 'Loading...' : '?'));
153
+
(isset($this->visibleChangesets[$id]) ?
154
+
pht('Loading...') : pht('?')));
154
155
}
155
156
156
-
$rows[] = phutil_tag('tr', array(), array(
157
-
phutil_tag(
158
-
'td',
159
-
array('class' => 'differential-toc-char', 'title' => $chartitle),
160
-
$char),
161
-
phutil_tag('td', array('class' => 'differential-toc-prop'), $pchar),
162
-
phutil_tag('td', array('class' => 'differential-toc-ftype'), $desc),
163
-
phutil_tag(
164
-
'td',
165
-
array('class' => 'differential-toc-file'),
166
-
array($link, $lines)),
167
-
phutil_tag('td', array('class' => 'differential-toc-cov'), $cov),
168
-
phutil_tag('td', array('class' => 'differential-toc-mcov'), $mcov),
169
-
));
170
157
if ($meta) {
171
-
$rows[] = phutil_tag('tr', array(), array(
172
-
phutil_tag('td', array('colspan' => 3)),
173
-
phutil_tag('td', array('class' => 'differential-toc-meta'), $meta),
174
-
));
158
+
$meta = phutil_tag(
159
+
'div',
160
+
array(
161
+
'class' => 'differential-toc-meta'
162
+
),
163
+
$meta);
175
164
}
165
+
176
166
if ($this->diff && $this->repository) {
177
167
$paths[] =
178
168
$changeset->getAbsoluteRepositoryPath($this->repository, $this->diff);
179
169
}
170
+
171
+
$rows[] = array(
172
+
$char,
173
+
$pchar,
174
+
$desc,
175
+
array($link, $lines, $meta),
176
+
$cov,
177
+
$mcov
178
+
);
180
179
}
181
180
182
181
$editor_link = null;
···
206
205
),
207
206
pht('Show All Context'));
208
207
209
-
$buttons = phutil_tag('tr', array(),
210
-
phutil_tag('td', array('colspan' => 7),
211
-
array($editor_link, $reveal_link)));
208
+
$buttons = phutil_tag(
209
+
'div',
210
+
array(
211
+
'class' => 'differential-toc-buttons grouped'
212
+
),
213
+
array(
214
+
$editor_link,
215
+
$reveal_link
216
+
));
212
217
213
-
$content = hsprintf(
214
-
'%s'.
215
-
'<div class="differential-toc differential-panel">'.
216
-
'<table>'.
217
-
'<tr>'.
218
-
'<th></th>'.
219
-
'<th></th>'.
220
-
'<th></th>'.
221
-
'<th>Path</th>'.
222
-
'<th class="differential-toc-cov">%s</th>'.
223
-
'<th class="differential-toc-mcov">%s</th>'.
224
-
'</tr>'.
225
-
'%s%s'.
226
-
'</table>'.
227
-
'</div>',
228
-
id(new PhabricatorAnchorView())
218
+
$table = id(new AphrontTableView($rows));
219
+
$table->setHeaders(
220
+
array(
221
+
'',
222
+
'',
223
+
'',
224
+
pht('Path'),
225
+
pht('Coverage (All)'),
226
+
pht('Coverage (Touched)'),
227
+
));
228
+
$table->setColumnClasses(
229
+
array(
230
+
'differential-toc-char center',
231
+
'differential-toc-prop center',
232
+
'differential-toc-ftype center',
233
+
'differential-toc-file wide',
234
+
'differential-toc-cov',
235
+
'differential-toc-cov',
236
+
));
237
+
$table->setDeviceVisibility(
238
+
array(
239
+
true,
240
+
true,
241
+
true,
242
+
true,
243
+
false,
244
+
false,
245
+
));
246
+
$anchor = id(new PhabricatorAnchorView())
229
247
->setAnchorName('toc')
230
-
->setNavigationMarker(true)
231
-
->render(),
232
-
pht('Coverage (All)'),
233
-
pht('Coverage (Touched)'),
234
-
phutil_implode_html("\n", $rows),
235
-
$buttons);
248
+
->setNavigationMarker(true);
236
249
237
250
return id(new PHUIObjectBoxView())
238
251
->setHeaderText(pht('Table of Contents'))
239
-
->appendChild($content);
252
+
->appendChild($anchor)
253
+
->appendChild($table)
254
+
->appendChild($buttons);
240
255
}
241
256
242
257
private function renderRename($display_file, $other_file, $arrow) {
+19
webroot/rsrc/css/application/differential/changeset-view.css
+19
webroot/rsrc/css/application/differential/changeset-view.css
···
9
9
overflow-x: auto;
10
10
}
11
11
12
+
.device-phone .differential-changeset {
13
+
overflow-x: scroll;
14
+
}
15
+
12
16
.differential-diff {
13
17
background: #fff;
14
18
width: 100%;
···
220
224
.differential-changeset h1 {
221
225
font-size: 15px;
222
226
padding: 2px 0 12px 12px;
227
+
line-height: 18px;
228
+
}
229
+
230
+
.device-phone .differential-changeset h1 {
231
+
word-break: break-word;
232
+
margin-right: 8px;
223
233
}
224
234
225
235
.differential-reticle {
···
301
311
margin-right: 16px;
302
312
}
303
313
314
+
.device-phone .differential-changeset-buttons {
315
+
float: none;
316
+
margin: 0 0 8px 4px;
317
+
}
318
+
304
319
.differential-changeset-buttons a.button {
305
320
margin-left: 8px;
306
321
}
···
455
470
margin: 0 4px 2px 0;
456
471
vertical-align: middle;
457
472
}
473
+
474
+
.device-phone .differential-file-icon-header .phui-icon-view {
475
+
display: none;
476
+
}
+34
-37
webroot/rsrc/css/application/differential/table-of-contents.css
+34
-37
webroot/rsrc/css/application/differential/table-of-contents.css
···
3
3
*/
4
4
5
5
.differential-toc-meta {
6
-
color: {$greytext};
7
-
padding-left: 12px;
6
+
color: {$lightgreytext};
7
+
padding-top: 2px;
8
8
}
9
9
10
-
.differential-toc-char,
11
-
.differential-toc-prop {
12
-
width: 16px;
13
-
text-align: center;
10
+
table.aphront-table-view td.differential-toc-char {
11
+
padding-right: 0;
14
12
font-weight: bold;
15
13
color: {$darkbluetext};
16
14
}
17
15
18
-
.differential-toc-ftype {
19
-
padding: 0 4px;
20
-
text-align: center;
21
-
color: {$greytext};
16
+
table.aphront-table-view td.differential-toc-prop {
17
+
padding-left: 0;
18
+
padding-right: 0;
19
+
font-weight: bold;
20
+
color: {$darkbluetext};
21
+
}
22
+
23
+
table.aphront-table-view td.differential-toc-ftype {
24
+
padding-left: 0;
25
+
font-weight: bold;
26
+
color: {$darkbluetext};
22
27
}
23
28
24
29
.differential-toc-file {
25
-
color: {$greytext};
30
+
color: {$lightgreytext};
31
+
}
32
+
33
+
.device-phone .differential-toc-file {
34
+
word-break: break-word;
35
+
}
36
+
37
+
.differential-toc-cov {
38
+
color: {$darkbluetext};
39
+
font-weight: bold;
26
40
}
27
41
28
42
.differential-toc-reveal-all,
···
36
50
}
37
51
38
52
.diff-star-okay {
39
-
color: #ff9700;
53
+
color: {$orange};
40
54
}
41
55
42
56
/* TODO: 'warn' and 'fail' are both red, but we can't make 'warn' yellow since
43
57
'okay' is a "gold star". */
44
58
.diff-star-warn {
45
-
color: #aa0000;
59
+
color: {$red};
46
60
}
47
61
48
62
.diff-star-fail {
49
-
color: #aa0000;
63
+
color: {$red};
50
64
}
51
65
52
66
.diff-star-skip {
53
-
color: #ff00aa;
54
-
}
55
-
56
-
.differential-toc table {
57
-
width: 100%;
58
-
}
59
-
60
-
.differential-toc table td.differential-toc-cov,
61
-
.differential-toc table td.differential-toc-mcov {
62
-
width: 120px;
63
-
text-align: right;
64
-
padding-right: 6px;
65
-
}
66
-
67
-
.differential-toc table th {
68
-
color: {$darkbluetext};
69
-
padding: 0 4px 4px 0;
70
-
white-space: nowrap;
71
-
}
72
-
73
-
.differential-toc table th.differential-toc-cov,
74
-
.differential-toc table th.differential-toc-mcov {
75
-
text-align: right;
67
+
color: {$indigo};
76
68
}
77
69
78
70
.differential-toc table td em {
···
86
78
.differential-mcoverage-loading {
87
79
color: {$lightgreytext};
88
80
}
81
+
82
+
.differential-toc-buttons {
83
+
border-top: 1px solid {$thinblueborder};
84
+
padding: 8px;
85
+
}