@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 tables to table-kit view.
Summary: Reskinning tables to table-kit mocks, which includes new textures, spacing, slightly larger fonts. Looking for early feedback before adding in new row colors and other items into the class.
Test Plan: http://phab1.pushlabs.net/uiexample/view/PhabricatorSortTableExample/
Reviewers: btrahan, epriestley
Reviewed By: epriestley
CC: aran, Korvin
Differential Revision: https://secure.phabricator.com/D4396
+134
-109
+62
-48
src/__celerity_resource_map__.php
+62
-48
src/__celerity_resource_map__.php
···
546
546
'disk' => '/rsrc/image/texture/dark-menu.png',
547
547
'type' => 'png',
548
548
),
549
+
'/rsrc/image/texture/table_header.png' =>
550
+
array(
551
+
'hash' => '4ed3f56a30d3749e8f62052b9735a316',
552
+
'uri' => '/res/4ed3f56a/rsrc/image/texture/table_header.png',
553
+
'disk' => '/rsrc/image/texture/table_header.png',
554
+
'type' => 'png',
555
+
),
556
+
'/rsrc/image/texture/table_header_hover.png' =>
557
+
array(
558
+
'hash' => 'ea1f71a604e9b4859de1e25751540437',
559
+
'uri' => '/res/ea1f71a6/rsrc/image/texture/table_header_hover.png',
560
+
'disk' => '/rsrc/image/texture/table_header_hover.png',
561
+
'type' => 'png',
562
+
),
549
563
'/rsrc/swf/aphlict.swf' =>
550
564
array(
551
565
'hash' => '4b9a9d83bebaf254f3790e87b45c1f92',
···
681
695
),
682
696
'aphront-table-view-css' =>
683
697
array(
684
-
'uri' => '/res/94d76d56/rsrc/css/aphront/table-view.css',
698
+
'uri' => '/res/fa7af0ad/rsrc/css/aphront/table-view.css',
685
699
'type' => 'css',
686
700
'requires' =>
687
701
array(
···
1289
1303
),
1290
1304
'javelin-behavior-diffusion-commit-graph' =>
1291
1305
array(
1292
-
'uri' => '/res/cfe336e8/rsrc/js/application/diffusion/behavior-commit-graph.js',
1306
+
'uri' => '/res/62bd2035/rsrc/js/application/diffusion/behavior-commit-graph.js',
1293
1307
'type' => 'js',
1294
1308
'requires' =>
1295
1309
array(
···
3232
3246
), array(
3233
3247
'packages' =>
3234
3248
array(
3235
-
'e4a42bf7' =>
3249
+
'6e748adf' =>
3236
3250
array(
3237
3251
'name' => 'core.pkg.css',
3238
3252
'symbols' =>
···
3277
3291
37 => 'phabricator-object-item-list-view-css',
3278
3292
38 => 'global-drag-and-drop-css',
3279
3293
),
3280
-
'uri' => '/res/pkg/e4a42bf7/core.pkg.css',
3294
+
'uri' => '/res/pkg/6e748adf/core.pkg.css',
3281
3295
'type' => 'css',
3282
3296
),
3283
3297
'2921e259' =>
···
3395
3409
'uri' => '/res/pkg/c8ce2d88/diffusion.pkg.css',
3396
3410
'type' => 'css',
3397
3411
),
3398
-
'5e68be89' =>
3412
+
'f96657b8' =>
3399
3413
array(
3400
3414
'name' => 'diffusion.pkg.js',
3401
3415
'symbols' =>
···
3404
3418
1 => 'javelin-behavior-diffusion-commit-graph',
3405
3419
2 => 'javelin-behavior-audit-preview',
3406
3420
),
3407
-
'uri' => '/res/pkg/5e68be89/diffusion.pkg.js',
3421
+
'uri' => '/res/pkg/f96657b8/diffusion.pkg.js',
3408
3422
'type' => 'js',
3409
3423
),
3410
3424
'fbeded59' =>
···
3466
3480
'reverse' =>
3467
3481
array(
3468
3482
'aphront-attached-file-view-css' => 'ac211174',
3469
-
'aphront-crumbs-view-css' => 'e4a42bf7',
3470
-
'aphront-dialog-view-css' => 'e4a42bf7',
3471
-
'aphront-error-view-css' => 'e4a42bf7',
3472
-
'aphront-form-view-css' => 'e4a42bf7',
3483
+
'aphront-crumbs-view-css' => '6e748adf',
3484
+
'aphront-dialog-view-css' => '6e748adf',
3485
+
'aphront-error-view-css' => '6e748adf',
3486
+
'aphront-form-view-css' => '6e748adf',
3473
3487
'aphront-headsup-action-list-view-css' => '20933a11',
3474
-
'aphront-headsup-view-css' => 'e4a42bf7',
3475
-
'aphront-list-filter-view-css' => 'e4a42bf7',
3476
-
'aphront-pager-view-css' => 'e4a42bf7',
3477
-
'aphront-panel-view-css' => 'e4a42bf7',
3478
-
'aphront-table-view-css' => 'e4a42bf7',
3479
-
'aphront-tokenizer-control-css' => 'e4a42bf7',
3480
-
'aphront-tooltip-css' => 'e4a42bf7',
3481
-
'aphront-typeahead-control-css' => 'e4a42bf7',
3488
+
'aphront-headsup-view-css' => '6e748adf',
3489
+
'aphront-list-filter-view-css' => '6e748adf',
3490
+
'aphront-pager-view-css' => '6e748adf',
3491
+
'aphront-panel-view-css' => '6e748adf',
3492
+
'aphront-table-view-css' => '6e748adf',
3493
+
'aphront-tokenizer-control-css' => '6e748adf',
3494
+
'aphront-tooltip-css' => '6e748adf',
3495
+
'aphront-typeahead-control-css' => '6e748adf',
3482
3496
'differential-changeset-view-css' => '20933a11',
3483
3497
'differential-core-view-css' => '20933a11',
3484
3498
'differential-inline-comment-editor' => '76556a8f',
···
3492
3506
'differential-table-of-contents-css' => '20933a11',
3493
3507
'diffusion-commit-view-css' => 'c8ce2d88',
3494
3508
'diffusion-icons-css' => 'c8ce2d88',
3495
-
'global-drag-and-drop-css' => 'e4a42bf7',
3509
+
'global-drag-and-drop-css' => '6e748adf',
3496
3510
'inline-comment-summary-css' => '20933a11',
3497
3511
'javelin-aphlict' => '2921e259',
3498
3512
'javelin-behavior' => 'fbeded59',
···
3502
3516
'javelin-behavior-aphront-drag-and-drop' => '76556a8f',
3503
3517
'javelin-behavior-aphront-drag-and-drop-textarea' => '76556a8f',
3504
3518
'javelin-behavior-aphront-form-disable-on-submit' => '2921e259',
3505
-
'javelin-behavior-audit-preview' => '5e68be89',
3519
+
'javelin-behavior-audit-preview' => 'f96657b8',
3506
3520
'javelin-behavior-dark-console' => '8edbada5',
3507
3521
'javelin-behavior-dark-console-ajax' => '8edbada5',
3508
3522
'javelin-behavior-device' => '2921e259',
···
3518
3532
'javelin-behavior-differential-show-more' => '76556a8f',
3519
3533
'javelin-behavior-differential-toggle-files' => '76556a8f',
3520
3534
'javelin-behavior-differential-user-select' => '76556a8f',
3521
-
'javelin-behavior-diffusion-commit-graph' => '5e68be89',
3522
-
'javelin-behavior-diffusion-pull-lastmodified' => '5e68be89',
3535
+
'javelin-behavior-diffusion-commit-graph' => 'f96657b8',
3536
+
'javelin-behavior-diffusion-pull-lastmodified' => 'f96657b8',
3523
3537
'javelin-behavior-error-log' => '8edbada5',
3524
3538
'javelin-behavior-global-drag-and-drop' => '2921e259',
3525
3539
'javelin-behavior-konami' => '2921e259',
···
3561
3575
'javelin-util' => 'fbeded59',
3562
3576
'javelin-vector' => 'fbeded59',
3563
3577
'javelin-workflow' => 'fbeded59',
3564
-
'lightbox-attachment-css' => 'e4a42bf7',
3578
+
'lightbox-attachment-css' => '6e748adf',
3565
3579
'maniphest-task-summary-css' => 'ac211174',
3566
3580
'maniphest-transaction-detail-css' => 'ac211174',
3567
-
'phabricator-app-buttons-css' => 'e4a42bf7',
3581
+
'phabricator-app-buttons-css' => '6e748adf',
3568
3582
'phabricator-busy' => '2921e259',
3569
3583
'phabricator-content-source-view-css' => '20933a11',
3570
-
'phabricator-core-buttons-css' => 'e4a42bf7',
3571
-
'phabricator-core-css' => 'e4a42bf7',
3572
-
'phabricator-crumbs-view-css' => 'e4a42bf7',
3573
-
'phabricator-directory-css' => 'e4a42bf7',
3584
+
'phabricator-core-buttons-css' => '6e748adf',
3585
+
'phabricator-core-css' => '6e748adf',
3586
+
'phabricator-crumbs-view-css' => '6e748adf',
3587
+
'phabricator-directory-css' => '6e748adf',
3574
3588
'phabricator-drag-and-drop-file-upload' => '76556a8f',
3575
3589
'phabricator-dropdown-menu' => '2921e259',
3576
3590
'phabricator-file-upload' => '2921e259',
3577
-
'phabricator-filetree-view-css' => 'e4a42bf7',
3578
-
'phabricator-flag-css' => 'e4a42bf7',
3579
-
'phabricator-form-view-css' => 'e4a42bf7',
3580
-
'phabricator-header-view-css' => 'e4a42bf7',
3581
-
'phabricator-jump-nav' => 'e4a42bf7',
3591
+
'phabricator-filetree-view-css' => '6e748adf',
3592
+
'phabricator-flag-css' => '6e748adf',
3593
+
'phabricator-form-view-css' => '6e748adf',
3594
+
'phabricator-header-view-css' => '6e748adf',
3595
+
'phabricator-jump-nav' => '6e748adf',
3582
3596
'phabricator-keyboard-shortcut' => '2921e259',
3583
3597
'phabricator-keyboard-shortcut-manager' => '2921e259',
3584
-
'phabricator-main-menu-view' => 'e4a42bf7',
3598
+
'phabricator-main-menu-view' => '6e748adf',
3585
3599
'phabricator-menu-item' => '2921e259',
3586
-
'phabricator-nav-view-css' => 'e4a42bf7',
3600
+
'phabricator-nav-view-css' => '6e748adf',
3587
3601
'phabricator-notification' => '2921e259',
3588
-
'phabricator-notification-css' => 'e4a42bf7',
3589
-
'phabricator-notification-menu-css' => 'e4a42bf7',
3590
-
'phabricator-object-item-list-view-css' => 'e4a42bf7',
3602
+
'phabricator-notification-css' => '6e748adf',
3603
+
'phabricator-notification-menu-css' => '6e748adf',
3604
+
'phabricator-object-item-list-view-css' => '6e748adf',
3591
3605
'phabricator-object-selector-css' => '20933a11',
3592
3606
'phabricator-paste-file-upload' => '2921e259',
3593
3607
'phabricator-prefab' => '2921e259',
3594
3608
'phabricator-project-tag-css' => 'ac211174',
3595
-
'phabricator-remarkup-css' => 'e4a42bf7',
3609
+
'phabricator-remarkup-css' => '6e748adf',
3596
3610
'phabricator-shaped-request' => '76556a8f',
3597
-
'phabricator-side-menu-view-css' => 'e4a42bf7',
3598
-
'phabricator-standard-page-view' => 'e4a42bf7',
3611
+
'phabricator-side-menu-view-css' => '6e748adf',
3612
+
'phabricator-standard-page-view' => '6e748adf',
3599
3613
'phabricator-textareautils' => '2921e259',
3600
3614
'phabricator-tooltip' => '2921e259',
3601
-
'phabricator-transaction-view-css' => 'e4a42bf7',
3602
-
'phabricator-zindex-css' => 'e4a42bf7',
3603
-
'sprite-apps-large-css' => 'e4a42bf7',
3604
-
'sprite-gradient-css' => 'e4a42bf7',
3605
-
'sprite-icon-css' => 'e4a42bf7',
3606
-
'sprite-menu-css' => 'e4a42bf7',
3607
-
'syntax-highlighting-css' => 'e4a42bf7',
3615
+
'phabricator-transaction-view-css' => '6e748adf',
3616
+
'phabricator-zindex-css' => '6e748adf',
3617
+
'sprite-apps-large-css' => '6e748adf',
3618
+
'sprite-gradient-css' => '6e748adf',
3619
+
'sprite-icon-css' => '6e748adf',
3620
+
'sprite-menu-css' => '6e748adf',
3621
+
'syntax-highlighting-css' => '6e748adf',
3608
3622
),
3609
3623
));
+5
-5
src/view/control/AphrontTableView.php
+5
-5
src/view/control/AphrontTableView.php
···
171
171
$classes[] = 'aphront-table-view-sortable';
172
172
173
173
$sort_value = $sort_values[$col_num];
174
-
$sort_glyph = "\xE2\x86\x93";
174
+
$sort_glyph_class = 'aphront-table-down-sort';
175
175
if ($sort_value == $this->sortSelected) {
176
176
if ($this->sortReverse) {
177
-
$sort_glyph = "\xE2\x86\x91";
177
+
$sort_glyph_class = 'aphront-table-up-sort';
178
178
} else if (!$this->sortReverse) {
179
179
$sort_value = '-'.$sort_value;
180
180
}
···
184
184
$sort_glyph = phutil_render_tag(
185
185
'span',
186
186
array(
187
-
'class' => 'aphront-table-view-sort-glyph',
187
+
'class' => $sort_glyph_class,
188
188
),
189
-
$sort_glyph);
189
+
'');
190
190
191
191
$header = phutil_render_tag(
192
192
'a',
···
194
194
'href' => $this->sortURI->alter($this->sortParam, $sort_value),
195
195
'class' => 'aphront-table-view-sort-link',
196
196
),
197
-
$sort_glyph.' '.$header);
197
+
$header.' '.$sort_glyph);
198
198
}
199
199
200
200
if ($classes) {
+66
-55
webroot/rsrc/css/aphront/table-view.css
+66
-55
webroot/rsrc/css/aphront/table-view.css
···
3
3
*/
4
4
5
5
.aphront-table-view {
6
-
width: 100%;
6
+
width: 100%;
7
7
border-collapse: collapse;
8
-
background: #fdfdfd;
9
-
border: 1px solid #003366;
8
+
background: #fff;
9
+
border: 1px solid #d5dae0;
10
10
}
11
11
12
12
.aphront-table-view tr.alt {
13
-
background: #efefef;
13
+
background: #f1f3f8;
14
14
}
15
15
16
16
.aphront-table-view th {
17
-
font-size: 12px;
18
17
font-weight: bold;
19
-
background: #003366;
20
-
color: white;
21
18
white-space: nowrap;
19
+
color: #525252;
20
+
text-shadow: 0 1px 0 white;
21
+
font-weight: bold;
22
+
background-image: url(/rsrc/image/texture/table_header.png);
23
+
background-repeat: repeat-x;
24
+
}
25
+
26
+
th.aphront-table-view-sortable-selected {
27
+
background-image: url(/rsrc/image/texture/table_header_hover.png);
22
28
}
23
29
24
30
.aphront-table-view th a,
25
31
.aphront-table-view th a:hover,
26
32
.aphront-table-view th a:link {
27
-
padding: 4px 8px;
28
-
color: white;
33
+
color: #525252;
34
+
text-shadow: 0 1px 0 white;
29
35
display: block;
30
36
text-decoration: none;
31
37
}
32
38
33
39
.aphront-table-view th a:hover {
34
-
background: #3366aa;
40
+
text-decoration: underline;
35
41
}
36
42
37
43
.aphront-table-view td.header {
38
-
padding: 4px 8px;
39
-
background: #3b5998;
40
-
color: white;
41
-
white-space: nowrap;
42
-
text-align: right;
44
+
padding: 4px 8px;
45
+
white-space: nowrap;
46
+
text-align: right;
47
+
color: #525252;
48
+
font-weight: bold;
43
49
}
44
50
45
51
.aphront-table-view td {
46
-
font-size: 11px;
47
-
white-space: nowrap;
48
-
vertical-align: middle;
52
+
white-space: nowrap;
53
+
vertical-align: middle;
54
+
}
55
+
56
+
.aphront-table-down-sort {
57
+
display: inline-block;
58
+
margin-top: 5px;
59
+
width: 0;
60
+
height: 0;
61
+
vertical-align: top;
62
+
border-top: 4px solid black;
63
+
border-right: 4px solid transparent;
64
+
border-left: 4px solid transparent;
65
+
content: "";
66
+
}
67
+
68
+
.aphront-table-up-sort {
69
+
display: inline-block;
70
+
margin-top: 5px;
71
+
width: 0;
72
+
height: 0;
73
+
vertical-align: top;
74
+
border-bottom: 4px solid black;
75
+
border-right: 4px solid transparent;
76
+
border-left: 4px solid transparent;
77
+
content: "";
49
78
}
50
79
51
80
/* - Padding -------------------------------------------------------------------
···
58
87
*/
59
88
60
89
.aphront-table-view th {
61
-
padding: 4px 8px;
90
+
padding: 8px 10px;
91
+
font-size: 12px;
62
92
}
63
93
64
94
.aphront-table-view td {
65
-
padding: 4px 8px;
95
+
padding: 6px 10px;
96
+
font-size: 12px;
66
97
}
67
98
68
99
.device-tablet .aphront-table-view td,
···
87
118
}
88
119
89
120
.aphront-table-view td.sorted-column {
90
-
background: #f6f6fd;
121
+
background: #f1f3f8;
91
122
}
92
123
93
124
.aphront-table-view tr.alt td.sorted-column {
94
-
background: #e0e0ef;
125
+
background: #e4e6eb;
95
126
}
96
127
97
128
.aphront-table-view td.action {
···
100
131
}
101
132
102
133
.aphront-table-view td.larger {
103
-
font-size: 14px;
134
+
font-size: 14px;
104
135
}
105
136
106
137
.aphront-table-view td.pri {
107
-
font-weight: bold;
138
+
font-weight: bold;
108
139
}
109
140
110
141
.aphront-table-view td.wide {
111
-
white-space: normal;
112
-
width: 100%;
142
+
white-space: normal;
143
+
width: 100%;
113
144
}
114
145
115
146
.aphront-table-view td.right {
116
-
text-align: right;
147
+
text-align: right;
117
148
}
118
149
119
150
.aphront-table-view td.mono {
120
-
font-family: "Monaco", monospace;
121
-
font-size: 10px;
151
+
font-family: "Monaco", monospace;
152
+
font-size: 11px;
122
153
}
123
154
124
155
.aphront-table-view td.n {
125
-
font-family: "Monaco", monospace;
126
-
font-size: 10px;
127
-
text-align: right;
156
+
font-family: "Monaco", monospace;
157
+
font-size: 11px;
158
+
text-align: right;
128
159
}
129
160
130
161
.aphront-table-view td.wrap {
···
147
178
}
148
179
149
180
.aphront-table-view tr.highlighted {
150
-
background: #ffff99;
181
+
background: #fcf8e2;
151
182
}
152
183
153
184
.aphront-table-view tr.alt-highlighted {
154
-
background: #f3f399;
185
+
background: #fcf2bb;
155
186
}
156
187
157
-
158
188
.aphront-table-view tr.no-data td {
159
189
padding: 1em;
160
190
text-align: center;
···
182
212
padding: 2px 4px 0px;
183
213
}
184
214
185
-
.aphront-table-view th.aphront-table-view-sortable {
186
-
padding: 0;
187
-
}
188
-
189
-
.aphront-table-view-sort-glyph {
190
-
float: right;
191
-
padding-left: 8px;
192
-
color: #6677bb;
193
-
}
194
-
195
-
th a:hover .aphront-table-view-sort-glyph {
196
-
color: #ffffff;
197
-
}
198
-
199
-
.aphront-table-view-sortable-selected .aphront-table-view-sort-glyph {
200
-
display: block;
201
-
color: white;
202
-
}
203
-
204
215
.device-desktop .aphront-table-view-device {
205
216
display: none;
206
217
}
···
221
232
222
233
.aphront-table-view td.link a {
223
234
display: block;
224
-
padding: 6px;
235
+
padding: 6px 8px;
225
236
font-weight: bold;
226
237
}
webroot/rsrc/image/texture/table_header.png
webroot/rsrc/image/texture/table_header.png
This is a binary file and will not be displayed.
webroot/rsrc/image/texture/table_header_hover.png
webroot/rsrc/image/texture/table_header_hover.png
This is a binary file and will not be displayed.