@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
[Redesign] PHUIHeaderView goes to table layout
Summary: Ref T8099. This changes makes flexible layouts easier, and aligns icons, buttons better vertically.
Test Plan: Test various header locations, Phriction, Conpherence, Dashboards, Workboards etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D12961
+123
-90
+18
-18
resources/celerity/map.php
+18
-18
resources/celerity/map.php
···
7
7
*/
8
8
return array(
9
9
'names' => array(
10
-
'core.pkg.css' => 'ce2c805f',
10
+
'core.pkg.css' => '6bad4591',
11
11
'core.pkg.js' => 'f3e08b38',
12
12
'darkconsole.pkg.js' => 'e7393ebb',
13
13
'differential.pkg.css' => 'bb338e4b',
14
14
'differential.pkg.js' => '895b8d62',
15
-
'diffusion.pkg.css' => '591664fa',
15
+
'diffusion.pkg.css' => '385e85b3',
16
16
'diffusion.pkg.js' => '0115b37c',
17
17
'maniphest.pkg.css' => 'ddf93c68',
18
18
'maniphest.pkg.js' => 'df4aa49f',
···
51
51
'rsrc/css/application/conpherence/notification.css' => '919974b6',
52
52
'rsrc/css/application/conpherence/transaction.css' => '42a457f6',
53
53
'rsrc/css/application/conpherence/update.css' => '1099a660',
54
-
'rsrc/css/application/conpherence/widget-pane.css' => '93938744',
54
+
'rsrc/css/application/conpherence/widget-pane.css' => '77096740',
55
55
'rsrc/css/application/contentsource/content-source-view.css' => '4b8b05d4',
56
56
'rsrc/css/application/countdown/timer.css' => '86b7b0a0',
57
57
'rsrc/css/application/dashboard/dashboard.css' => 'eb458607',
···
65
65
'rsrc/css/application/differential/revision-history.css' => '0e8eb855',
66
66
'rsrc/css/application/differential/revision-list.css' => 'f3c47d33',
67
67
'rsrc/css/application/differential/table-of-contents.css' => '63f3ef4a',
68
-
'rsrc/css/application/diffusion/diffusion-icons.css' => '9c5828da',
68
+
'rsrc/css/application/diffusion/diffusion-icons.css' => '4ba18923',
69
69
'rsrc/css/application/diffusion/diffusion-readme.css' => '2106ea08',
70
70
'rsrc/css/application/diffusion/diffusion-source.css' => '66fdf661',
71
71
'rsrc/css/application/feed/feed.css' => 'b490a135',
···
116
116
'rsrc/css/font/font-source-sans-pro.css' => '8906c07b',
117
117
'rsrc/css/font/phui-font-icon-base.css' => '3dad2ae3',
118
118
'rsrc/css/layout/phabricator-filetree-view.css' => 'fccf9f82',
119
-
'rsrc/css/layout/phabricator-hovercard-view.css' => 'b7a82459',
119
+
'rsrc/css/layout/phabricator-hovercard-view.css' => 'd2a28ca5',
120
120
'rsrc/css/layout/phabricator-side-menu-view.css' => 'a440478a',
121
121
'rsrc/css/layout/phabricator-source-code-view.css' => '2ceee894',
122
122
'rsrc/css/phui/calendar/phui-calendar-day.css' => '38891735',
···
128
128
'rsrc/css/phui/phui-box.css' => 'a5bb366d',
129
129
'rsrc/css/phui/phui-button.css' => 'b995182d',
130
130
'rsrc/css/phui/phui-crumbs-view.css' => 'aeff7a21',
131
-
'rsrc/css/phui/phui-document.css' => '27a9bb7e',
131
+
'rsrc/css/phui/phui-document.css' => '8be7a5e3',
132
132
'rsrc/css/phui/phui-feed-story.css' => 'c9f3a0b5',
133
133
'rsrc/css/phui/phui-fontkit.css' => 'b664ac96',
134
134
'rsrc/css/phui/phui-form-view.css' => 'e1abbe8e',
135
135
'rsrc/css/phui/phui-form.css' => 'f535f938',
136
-
'rsrc/css/phui/phui-header-view.css' => '3c91963d',
136
+
'rsrc/css/phui/phui-header-view.css' => '99066800',
137
137
'rsrc/css/phui/phui-icon.css' => '88ba9081',
138
138
'rsrc/css/phui/phui-image-mask.css' => '5a8b09c8',
139
139
'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
140
140
'rsrc/css/phui/phui-info-view.css' => '33595731',
141
141
'rsrc/css/phui/phui-list.css' => 'e448b6ba',
142
-
'rsrc/css/phui/phui-object-box.css' => 'c8d82bfe',
142
+
'rsrc/css/phui/phui-object-box.css' => '70285ee9',
143
143
'rsrc/css/phui/phui-object-item-list-view.css' => '4be0645f',
144
144
'rsrc/css/phui/phui-pinboard-view.css' => '22891c15',
145
145
'rsrc/css/phui/phui-property-list-view.css' => 'd2d143ea',
···
149
149
'rsrc/css/phui/phui-tag-view.css' => '402691cc',
150
150
'rsrc/css/phui/phui-text.css' => 'cf019f54',
151
151
'rsrc/css/phui/phui-timeline-view.css' => 'a85542c8',
152
-
'rsrc/css/phui/phui-workboard-view.css' => '38446bc3',
153
-
'rsrc/css/phui/phui-workpanel-view.css' => 'e6435408',
152
+
'rsrc/css/phui/phui-workboard-view.css' => 'bc3e2e76',
153
+
'rsrc/css/phui/phui-workpanel-view.css' => '015a0cab',
154
154
'rsrc/css/sprite-login.css' => 'a3526809',
155
155
'rsrc/css/sprite-main-header.css' => '28d01b0b',
156
156
'rsrc/css/sprite-menu.css' => '02aa815a',
···
499
499
'conpherence-thread-manager' => 'b7342ddb',
500
500
'conpherence-transaction-css' => '42a457f6',
501
501
'conpherence-update-css' => '1099a660',
502
-
'conpherence-widget-pane-css' => '93938744',
502
+
'conpherence-widget-pane-css' => '77096740',
503
503
'differential-changeset-view-css' => 'e19cfd6e',
504
504
'differential-core-view-css' => '7ac3cabc',
505
505
'differential-inline-comment-editor' => 'd4c87bf4',
···
509
509
'differential-revision-history-css' => '0e8eb855',
510
510
'differential-revision-list-css' => 'f3c47d33',
511
511
'differential-table-of-contents-css' => '63f3ef4a',
512
-
'diffusion-icons-css' => '9c5828da',
512
+
'diffusion-icons-css' => '4ba18923',
513
513
'diffusion-readme-css' => '2106ea08',
514
514
'diffusion-source-css' => '66fdf661',
515
515
'diviner-shared-css' => '38813222',
···
708
708
'phabricator-filetree-view-css' => 'fccf9f82',
709
709
'phabricator-flag-css' => '5337623f',
710
710
'phabricator-hovercard' => '14ac66f5',
711
-
'phabricator-hovercard-view-css' => 'b7a82459',
711
+
'phabricator-hovercard-view-css' => 'd2a28ca5',
712
712
'phabricator-keyboard-shortcut' => '1ae869f2',
713
713
'phabricator-keyboard-shortcut-manager' => 'c1700f6f',
714
714
'phabricator-main-menu-view' => '680360ea',
···
759
759
'phui-calendar-list-css' => 'c1d0ca59',
760
760
'phui-calendar-month-css' => '75e6a2ee',
761
761
'phui-crumbs-view-css' => 'aeff7a21',
762
-
'phui-document-view-css' => '27a9bb7e',
762
+
'phui-document-view-css' => '8be7a5e3',
763
763
'phui-feed-story-css' => 'c9f3a0b5',
764
764
'phui-font-icon-base-css' => '3dad2ae3',
765
765
'phui-fontkit-css' => 'b664ac96',
766
766
'phui-form-css' => 'f535f938',
767
767
'phui-form-view-css' => 'e1abbe8e',
768
-
'phui-header-view-css' => '3c91963d',
768
+
'phui-header-view-css' => '99066800',
769
769
'phui-icon-view-css' => '88ba9081',
770
770
'phui-image-mask-css' => '5a8b09c8',
771
771
'phui-info-panel-css' => '27ea50a1',
772
772
'phui-info-view-css' => '33595731',
773
773
'phui-inline-comment-view-css' => '2174771a',
774
774
'phui-list-view-css' => 'e448b6ba',
775
-
'phui-object-box-css' => 'c8d82bfe',
775
+
'phui-object-box-css' => '70285ee9',
776
776
'phui-object-item-list-view-css' => '4be0645f',
777
777
'phui-pinboard-view-css' => '22891c15',
778
778
'phui-property-list-view-css' => 'd2d143ea',
···
782
782
'phui-tag-view-css' => '402691cc',
783
783
'phui-text-css' => 'cf019f54',
784
784
'phui-timeline-view-css' => 'a85542c8',
785
-
'phui-workboard-view-css' => '38446bc3',
786
-
'phui-workpanel-view-css' => 'e6435408',
785
+
'phui-workboard-view-css' => 'bc3e2e76',
786
+
'phui-workpanel-view-css' => '015a0cab',
787
787
'phuix-action-list-view' => 'b5c256b8',
788
788
'phuix-action-view' => '8cf6d262',
789
789
'phuix-dropdown-menu' => 'bd4c8dca',
+4
src/applications/diffusion/controller/DiffusionBrowseController.php
+4
src/applications/diffusion/controller/DiffusionBrowseController.php
+5
-4
src/applications/diffusion/controller/DiffusionRepositoryController.php
+5
-4
src/applications/diffusion/controller/DiffusionRepositoryController.php
···
470
470
$header->addActionLink($button);
471
471
472
472
$panel->setHeader($header);
473
-
$panel->appendChild($view);
473
+
$panel->setTable($view);
474
474
475
475
return $panel;
476
476
}
···
653
653
->setID('locate-input')
654
654
->setLabel(pht('Locate File')));
655
655
$form_box = id(new PHUIBoxView())
656
-
->addClass('diffusion-locate-file-view')
657
656
->appendChild($form->buildLayoutView());
658
-
$browse_panel->appendChild($form_box);
657
+
$locate_panel = id(new PHUIObjectBoxView())
658
+
->setHeaderText('Locate File')
659
+
->appendChild($form_box);
659
660
}
660
661
661
662
$browse_panel->setTable($browse_table);
662
663
663
-
return $browse_panel;
664
+
return array($locate_panel, $browse_panel);
664
665
}
665
666
666
667
private function renderCloneCommand(
+54
-22
src/view/phui/PHUIHeaderView.php
+54
-22
src/view/phui/PHUIHeaderView.php
···
151
151
$classes[] = 'phui-header-tall';
152
152
}
153
153
154
-
if ($this->image) {
155
-
$classes[] = 'phui-header-has-image';
156
-
}
157
-
158
154
return array(
159
155
'class' => $classes,
160
156
);
···
173
169
' ');
174
170
}
175
171
176
-
$header = array();
172
+
$left = array();
173
+
$right = array();
177
174
178
175
if ($this->actionLinks) {
179
176
$actions = array();
···
183
180
$button->addClass('phui-header-action-link');
184
181
$actions[] = $button;
185
182
}
186
-
$header[] = phutil_tag(
183
+
$right[] = phutil_tag(
187
184
'div',
188
185
array(
189
186
'class' => 'phui-header-action-links',
···
192
189
}
193
190
194
191
if ($this->buttonBar) {
195
-
$header[] = phutil_tag(
192
+
$right[] = phutil_tag(
196
193
'div',
197
194
array(
198
195
'class' => 'phui-header-action-links',
···
220
217
),
221
218
array_interleave(' ', $this->tags));
222
219
}
223
-
$header[] = phutil_tag(
220
+
$right[] = phutil_tag(
224
221
'ul',
225
222
array(
226
223
'class' => 'phui-header-icon-list',
···
231
228
if ($this->headerIcon) {
232
229
$icon = id(new PHUIIconView())
233
230
->setIconFont($this->headerIcon);
234
-
$header[] = $icon;
231
+
$left[] = $icon;
235
232
}
236
-
$header[] = $this->header;
233
+
$left[] = $this->header;
237
234
238
235
if ($this->objectName) {
239
236
array_unshift(
240
-
$header,
237
+
$left,
241
238
phutil_tag(
242
239
'a',
243
240
array(
···
248
245
}
249
246
250
247
if ($this->subheader) {
251
-
$header[] = phutil_tag(
248
+
$left[] = phutil_tag(
252
249
'div',
253
250
array(
254
251
'class' => 'phui-header-subheader',
···
273
270
$property_list[] = $this->renderPolicyProperty($this->policyObject);
274
271
}
275
272
276
-
$header[] = phutil_tag(
273
+
$left[] = phutil_tag(
277
274
'div',
278
275
array(
279
276
'class' => 'phui-header-subheader',
···
281
278
$property_list);
282
279
}
283
280
284
-
return array(
285
-
$image,
286
-
phutil_tag(
287
-
'h1',
288
-
array(
289
-
'class' => 'phui-header-view grouped',
290
-
),
291
-
$header),
292
-
);
281
+
// We here at @phabricator
282
+
$header_image = null;
283
+
if ($image) {
284
+
$header_image = phutil_tag(
285
+
'div',
286
+
array(
287
+
'class' => 'phui-header-col1',
288
+
),
289
+
$image);
290
+
}
291
+
292
+
// All really love
293
+
$header_left = phutil_tag(
294
+
'div',
295
+
array(
296
+
'class' => 'phui-header-col2',
297
+
),
298
+
$left);
299
+
300
+
// Tables and Pokemon.
301
+
$header_right = phutil_tag(
302
+
'div',
303
+
array(
304
+
'class' => 'phui-header-col3',
305
+
),
306
+
$right);
307
+
308
+
$header_row = phutil_tag(
309
+
'div',
310
+
array(
311
+
'class' => 'phui-header-row',
312
+
),
313
+
array(
314
+
$header_image,
315
+
$header_left,
316
+
$header_right,
317
+
));
318
+
319
+
return phutil_tag(
320
+
'h1',
321
+
array(
322
+
'class' => 'phui-header-view',
323
+
),
324
+
$header_row);
293
325
}
294
326
295
327
private function renderPolicyProperty(PhabricatorPolicyInterface $object) {
+2
-2
webroot/rsrc/css/application/conpherence/widget-pane.css
+2
-2
webroot/rsrc/css/application/conpherence/widget-pane.css
···
46
46
border: 0;
47
47
}
48
48
49
-
.conpherence-widget-pane .widgets-header .phui-header-view {
49
+
.conpherence-widget-pane .widgets-header .phui-header-shell {
50
50
padding: 8px;
51
51
font-size: 14px;
52
52
}
···
84
84
}
85
85
86
86
.device-desktop .conpherence-widget-pane .widgets-body {
87
-
top: 108px;
87
+
top: 111px;
88
88
width: 240px;
89
89
}
90
90
-7
webroot/rsrc/css/application/diffusion/diffusion-icons.css
-7
webroot/rsrc/css/application/diffusion/diffusion-icons.css
···
30
30
input.diffusion-clone-uri {
31
31
display: block;
32
32
width: 100%;
33
-
border: 1px solid #efefef;
34
-
box-shadow: none;
35
-
height: 24px;
36
33
}
37
34
38
35
.diffusion-clone-extras {
···
40
37
text-align: right;
41
38
color: {$lightgreytext};
42
39
}
43
-
44
-
.diffusion-locate-file-view {
45
-
border-bottom: 1px solid {$thinblueborder};
46
-
}
+3
-7
webroot/rsrc/css/layout/phabricator-hovercard-view.css
+3
-7
webroot/rsrc/css/layout/phabricator-hovercard-view.css
···
20
20
float: left;
21
21
width: 100%;
22
22
box-shadow: {$dropshadow};
23
-
border: 1px solid {$blueborder};
23
+
border: 1px solid {$lightblueborder};
24
24
border-radius: 3px;
25
25
background-color: #fff;
26
26
}
27
27
28
-
.phabricator-hovercard-head {
29
-
border-bottom: 1px solid {$thinblueborder};
30
-
}
31
-
32
-
.phabricator-hovercard-head .phui-header-view {
33
-
padding: 8px;
28
+
.phabricator-hovercard-head .phui-header-shell {
29
+
padding: 8px 8px 8px 12px;
34
30
}
35
31
36
32
.phabricator-hovercard-head .phui-tag-type-state {
+1
-1
webroot/rsrc/css/phui/phui-document.css
+1
-1
webroot/rsrc/css/phui/phui-document.css
+32
-11
webroot/rsrc/css/phui/phui-header-view.css
+32
-11
webroot/rsrc/css/phui/phui-header-view.css
···
5
5
.phui-header-shell {
6
6
border-bottom: 1px solid {$thinblueborder};
7
7
overflow: hidden;
8
+
padding: 0 4px 12px;
9
+
}
10
+
11
+
.phui-header-view {
12
+
display: table;
13
+
width: 100%
14
+
}
15
+
16
+
.phui-header-row {
17
+
display: table-row;
18
+
}
19
+
20
+
.phui-header-col1 {
21
+
display: table-cell;
22
+
vertical-align: middle;
23
+
width: 62px;
24
+
}
25
+
26
+
.phui-header-col2 {
27
+
display: table-cell;
28
+
vertical-align: middle;
29
+
}
30
+
31
+
.phui-header-col3 {
32
+
display: table-cell;
33
+
vertical-align: middle;
8
34
}
9
35
10
36
body .phui-header-shell.phui-header-no-backgound {
···
34
60
}
35
61
36
62
.phui-header-view {
37
-
padding: 12px 4px 16px;
38
63
font-size: 15px;
39
-
color: {$darkbluetext};
64
+
color: #000;
40
65
font-weight: 500;
41
66
position: relative;
42
67
}
···
47
72
font-weight: 500;
48
73
}
49
74
50
-
.phui-header-view > a {
51
-
color: {$darkbluetext};
75
+
.phui-header-view .phui-header-col2 > a {
76
+
color: #000;
52
77
}
53
78
54
79
.phui-header-view .phui-header-action-links {
···
56
81
}
57
82
58
83
.phui-object-box .phui-header-view .phui-header-action-links {
59
-
margin-right: 12px;
60
-
margin-top: 4px;
84
+
margin-right: 4px;
61
85
}
62
86
63
87
.device-phone .phui-object-box .phui-header-view .phui-header-action-links {
···
94
118
display: inline-block;
95
119
background-repeat: no-repeat;
96
120
background-size: 100%;
97
-
border: 2px solid white;
121
+
border: 1px solid {$lightblueborder};
98
122
width: 50px;
99
123
height: 50px;
100
-
margin: 12px;
101
-
float: left;
102
-
border-radius: 2px;
103
124
}
104
125
105
126
.phui-header-subheader {
106
127
font-weight: normal;
107
128
font-size: 14px;
108
-
margin-top: 6px;
129
+
margin-top: 8px;
109
130
}
110
131
111
132
.phui-header-subheader .phui-icon-view {
+1
-15
webroot/rsrc/css/phui/phui-object-box.css
+1
-15
webroot/rsrc/css/phui/phui-object-box.css
···
12
12
}
13
13
14
14
.phui-object-box.phui-object-box-collapsed .phui-header-shell {
15
-
padding: 0 4px 4px 16px;
15
+
padding: 0 8px 12px 16px;
16
16
}
17
17
18
18
div.phui-object-box.phui-object-box-flush {
19
19
margin-top: 0;
20
-
}
21
-
22
-
.phui-object-box .phui-header-shell {
23
-
padding: 0 5px 4px 4px;
24
-
border-bottom: 1px solid {$thinblueborder};
25
-
border-top: none;
26
-
}
27
-
28
-
.phui-object-box .phui-header-image {
29
-
margin: 1px 8px -7px -7px;
30
-
}
31
-
32
-
.phui-object-box .phui-header-shell h1 {
33
-
padding: 0 0 8px 0;
34
20
}
35
21
36
22
.phui-object-box .phui-header-shell + .phui-info-view {
+2
-2
webroot/rsrc/css/phui/phui-workboard-view.css
+2
-2
webroot/rsrc/css/phui/phui-workboard-view.css