@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
Polish up timeline for PHIUTwoColumnView
Summary: This inverts colors and icons a bit, so they're not as harsh. So instead of a dark green item with white icon, its now light green with a dark green icon. I've also changed all text and comment boxes to be "grey" visually to separate out the UI from converation/actions. Give it a spin and let me know how this feels. I still need to update the comment UI.
Test Plan:
UIExamples, lots of various tasks and diffs.
{F1163837}
{F1163839}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D15442
+95
-65
+8
-7
resources/celerity/map.php
+8
-7
resources/celerity/map.php
···
7
7
*/
8
8
return array(
9
9
'names' => array(
10
-
'core.pkg.css' => 'd3b3a609',
10
+
'core.pkg.css' => '9c8e888d',
11
11
'core.pkg.js' => '7d8faf57',
12
12
'darkconsole.pkg.js' => 'e7393ebb',
13
13
'differential.pkg.css' => '2de124c9',
···
149
149
'rsrc/css/phui/phui-pager.css' => 'bea33d23',
150
150
'rsrc/css/phui/phui-pinboard-view.css' => '2495140e',
151
151
'rsrc/css/phui/phui-profile-menu.css' => '7e92a89a',
152
-
'rsrc/css/phui/phui-property-list-view.css' => '27b2849e',
152
+
'rsrc/css/phui/phui-property-list-view.css' => 'b12e801c',
153
153
'rsrc/css/phui/phui-remarkup-preview.css' => '1a8f2591',
154
154
'rsrc/css/phui/phui-segment-bar-view.css' => '46342871',
155
155
'rsrc/css/phui/phui-spacing.css' => '042804d6',
156
156
'rsrc/css/phui/phui-status.css' => '37309046',
157
157
'rsrc/css/phui/phui-tag-view.css' => '6bbd83e2',
158
-
'rsrc/css/phui/phui-timeline-view.css' => '2efceff8',
159
-
'rsrc/css/phui/phui-two-column-view.css' => '38871c98',
158
+
'rsrc/css/phui/phui-timeline-view.css' => 'a0173eba',
159
+
'rsrc/css/phui/phui-two-column-view.css' => 'e6bf86b6',
160
160
'rsrc/css/phui/workboards/phui-workboard-color.css' => 'ac6fe6a7',
161
161
'rsrc/css/phui/workboards/phui-workboard.css' => 'e6d89647',
162
162
'rsrc/css/phui/workboards/phui-workcard.css' => '3646fb96',
···
273
273
'rsrc/image/checker_dark.png' => 'd8e65881',
274
274
'rsrc/image/checker_light.png' => 'a0155918',
275
275
'rsrc/image/checker_lighter.png' => 'd5da91b6',
276
+
'rsrc/image/d5d8e1.png' => '0c2a1497',
276
277
'rsrc/image/darkload.gif' => '1ffd3ec6',
277
278
'rsrc/image/divot.png' => '94dded62',
278
279
'rsrc/image/examples/hero.png' => '979a86ae',
···
837
838
'phui-pager-css' => 'bea33d23',
838
839
'phui-pinboard-view-css' => '2495140e',
839
840
'phui-profile-menu-css' => '7e92a89a',
840
-
'phui-property-list-view-css' => '27b2849e',
841
+
'phui-property-list-view-css' => 'b12e801c',
841
842
'phui-remarkup-preview-css' => '1a8f2591',
842
843
'phui-segment-bar-view-css' => '46342871',
843
844
'phui-spacing-css' => '042804d6',
844
845
'phui-status-list-view-css' => '37309046',
845
846
'phui-tag-view-css' => '6bbd83e2',
846
847
'phui-theme-css' => '027ba77e',
847
-
'phui-timeline-view-css' => '2efceff8',
848
-
'phui-two-column-view-css' => '38871c98',
848
+
'phui-timeline-view-css' => 'a0173eba',
849
+
'phui-two-column-view-css' => 'e6bf86b6',
849
850
'phui-workboard-color-css' => 'ac6fe6a7',
850
851
'phui-workboard-view-css' => 'e6d89647',
851
852
'phui-workcard-view-css' => '3646fb96',
+1
src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php
+1
src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php
+7
src/applications/metamta/contentsource/PhabricatorContentSourceView.php
+7
src/applications/metamta/contentsource/PhabricatorContentSourceView.php
···
9
9
return $this;
10
10
}
11
11
12
+
public function getSourceName() {
13
+
$map = PhabricatorContentSource::getSourceNameMap();
14
+
$source = $this->contentSource->getSource();
15
+
return idx($map, $source, null);
16
+
17
+
}
18
+
12
19
public function render() {
13
20
require_celerity_resource('phabricator-content-source-view-css');
14
21
+12
-5
src/view/phui/PHUITimelineEventView.php
+12
-5
src/view/phui/PHUITimelineEventView.php
···
232
232
$fill_classes = array();
233
233
$fill_classes[] = 'phui-timeline-icon-fill';
234
234
if ($this->color) {
235
+
$fill_classes[] = 'fill-has-color';
235
236
$fill_classes[] = 'phui-timeline-icon-fill-'.$this->color;
236
237
}
237
238
238
239
$icon = id(new PHUIIconView())
239
-
->setIcon($this->icon.' white')
240
+
->setIcon($this->icon)
240
241
->addClass('phui-timeline-icon');
241
242
242
243
$icon = phutil_tag(
···
504
505
}
505
506
506
507
$source = $this->getContentSource();
508
+
$content_source = null;
507
509
if ($source) {
508
-
$extra[] = id(new PhabricatorContentSourceView())
510
+
$content_source = id(new PhabricatorContentSourceView())
509
511
->setContentSource($source)
510
-
->setUser($this->getUser())
511
-
->render();
512
+
->setUser($this->getUser());
513
+
$content_source = pht('Via %s', $content_source->getSourceName());
512
514
}
513
515
514
516
$date_created = null;
···
528
530
$this->getUser());
529
531
if ($this->anchor) {
530
532
Javelin::initBehavior('phabricator-watch-anchor');
533
+
Javelin::initBehavior('phabricator-tooltips');
531
534
532
535
$anchor = id(new PhabricatorAnchorView())
533
536
->setAnchorName($this->anchor)
···
535
538
536
539
$date = array(
537
540
$anchor,
538
-
phutil_tag(
541
+
javelin_tag(
539
542
'a',
540
543
array(
541
544
'href' => '#'.$this->anchor,
545
+
'sigil' => 'has-tooltip',
546
+
'meta' => array(
547
+
'tip' => $content_source,
548
+
),
542
549
),
543
550
$date),
544
551
);
+1
-1
webroot/rsrc/css/phui/phui-property-list-view.css
+1
-1
webroot/rsrc/css/phui/phui-property-list-view.css
+61
-51
webroot/rsrc/css/phui/phui-timeline-view.css
+61
-51
webroot/rsrc/css/phui/phui-timeline-view.css
···
4
4
5
5
.phui-timeline-view {
6
6
padding: 0 16px;
7
-
background-image: url('/rsrc/image/BFCFDA.png');
7
+
background-image: url('/rsrc/image/d5d8e1.png');
8
8
background-repeat: repeat-y;
9
-
background-position: 94px;
9
+
background-position: 96px;
10
10
}
11
11
12
12
.device .phui-timeline-view {
···
23
23
}
24
24
25
25
.phui-timeline-major-event .phui-timeline-group {
26
-
border-left: 1px solid {$lightblueborder};
27
-
border-right: 1px solid {$lightblueborder};
26
+
border-left: 1px solid {$timeline};
27
+
border-right: 1px solid {$timeline};
28
28
border-radius: 3px;
29
29
}
30
30
···
34
34
}
35
35
36
36
.device-desktop .phui-timeline-event-view.phui-timeline-minor-event {
37
-
margin-left: 65px;
37
+
margin-left: 67px;
38
38
}
39
39
40
40
.device-desktop .phui-timeline-spacer {
···
50
50
}
51
51
52
52
.device-desktop .phui-timeline-wedge {
53
-
border-bottom: 1px solid {$lightblueborder};
53
+
border-bottom: 1px solid {$timeline};
54
54
position: absolute;
55
55
width: 12px;
56
56
}
···
61
61
}
62
62
63
63
.phui-timeline-major-event .phui-timeline-content {
64
-
border-top: 1px solid {$lightblueborder};
65
-
border-bottom: 1px solid {$lightblueborder};
64
+
border-top: 1px solid {$timeline};
65
+
border-bottom: 1px solid {$timeline};
66
66
border-radius: 3px;
67
67
}
68
68
69
69
.phui-timeline-title {
70
-
line-height: 22px;
70
+
line-height: 24px;
71
71
min-height: 19px;
72
72
position: relative;
73
-
color: {$bluetext};
73
+
color: {$greytext};
74
74
}
75
75
76
76
.phui-timeline-minor-event .phui-timeline-title {
77
-
padding: 4px 8px 4px 33px;
77
+
padding: 1px 8px 4px 33px;
78
78
}
79
79
80
80
.phui-timeline-title a {
81
81
font-weight: bold;
82
-
color: {$darkbluetext};
82
+
color: {$darkgreytext};
83
83
}
84
84
85
85
.device-desktop .phui-timeline-wedge {
···
91
91
}
92
92
93
93
.device-desktop .phui-timeline-minor-event .phui-timeline-wedge {
94
-
top: 13px;
94
+
top: 12px;
95
95
left: -18px;
96
96
width: 20px;
97
97
}
···
100
100
background-repeat: no-repeat;
101
101
position: absolute;
102
102
border-radius: 3px;
103
-
box-shadow: {$borderinset};
104
103
background-size: 100%;
105
104
display: block;
106
105
}
···
113
112
}
114
113
115
114
.device-desktop .phui-timeline-minor-event .phui-timeline-image {
116
-
width: 28px;
117
-
height: 28px;
118
-
background-size: 28px auto;
115
+
width: 26px;
116
+
height: 26px;
117
+
background-size: 26px auto;
119
118
left: -41px;
120
119
}
121
120
122
121
.phui-timeline-major-event .phui-timeline-title {
123
-
background: {$lightbluebackground};
122
+
background: {$lightgreybackground};
124
123
min-height: 22px;
125
124
border-top-right-radius: 3px;
125
+
border-top-left-radius: 3px;
126
126
}
127
127
128
-
.phui-timeline-title + .phui-timeline-title {
128
+
.phui-timeline-major-event .phui-timeline-title + .phui-timeline-title {
129
129
border-radius: 0;
130
+
padding-top: 0;
130
131
}
131
132
133
+
.phui-timeline-major-event .phui-timeline-title + .phui-timeline-title
134
+
.phui-timeline-icon-fill {
135
+
margin-top: 0;
136
+
}
137
+
132
138
.phui-timeline-title {
133
139
padding: 5px 8px;
134
140
overflow-x: auto;
···
136
142
}
137
143
138
144
.phui-timeline-title-with-icon {
139
-
padding-left: 38px;
145
+
padding-left: 36px;
140
146
}
141
147
142
148
.phui-timeline-title-with-menu {
···
170
176
171
177
.phui-timeline-major-event .phui-timeline-content
172
178
.phui-timeline-core-content {
173
-
padding: 16px 12px;
179
+
padding: 16px;
174
180
line-height: 18px;
175
181
background: #fff;
182
+
border-top: 1px solid rgba({$alphablue},.1);
176
183
border-bottom-left-radius: 3px;
177
184
border-bottom-right-radius: 3px;
178
185
}
···
203
210
border-width: 0;
204
211
}
205
212
206
-
.phui-timeline-spacer.phui-timeline-spacer-bold {
207
-
border-bottom: 4px solid {$lightblueborder};
208
-
margin: 0;
209
-
}
210
-
211
-
.phui-timeline-spacer-bold + .phui-timeline-spacer {
212
-
background-color: #ebecee;
213
-
}
214
-
215
213
.phui-timeline-icon-fill {
216
214
position: absolute;
217
-
width: 32px;
218
-
height: 32px;
219
-
background-color: {$lightblueborder};
215
+
width: 34px;
216
+
height: 34px;
220
217
top: 0;
221
218
left: 0;
222
219
text-align: center;
223
220
}
224
221
225
-
.phui-icon-view.phui-timeline-icon:before {
226
-
font-size: 15px;
222
+
.phui-timeline-icon {
223
+
color: {$sh-blueicon};
227
224
}
228
225
229
-
.phui-timeline-minor-event .phui-timeline-icon-fill {
230
-
height: 28px;
231
-
width: 28px;
226
+
.phui-icon-view.phui-timeline-icon {
227
+
font-size: 14px;
228
+
}
229
+
230
+
.phui-timeline-icon-fill {
231
+
height: 26px;
232
+
width: 26px;
232
233
border-radius: 3px;
234
+
background-color: #E6E9F1;
233
235
}
234
236
235
-
.phui-timeline-icon-fill .phui-timeline-icon {
236
-
margin-top: 8px;
237
+
.phui-timeline-major-event .phui-timeline-icon-fill {
238
+
margin: 4px;
237
239
}
238
240
239
-
.phui-timeline-minor-event .phui-timeline-icon-fill .phui-timeline-icon {
240
-
margin-top: 7px;
241
+
.phui-timeline-icon-fill .phui-timeline-icon {
242
+
margin-top: 6px;
241
243
}
242
244
243
245
.phui-timeline-extra,
244
246
.phui-timeline-extra .phabricator-content-source-view {
245
-
font-size: {$smallestfontsize};
247
+
font-size: {$smallerfontsize};
246
248
font-weight: normal;
247
-
color: {$lightbluetext};
249
+
color: {$lightgreytext};
250
+
margin-left: 8px;
248
251
}
249
252
250
253
.phui-timeline-title .phui-timeline-extra a {
251
254
font-weight: normal;
255
+
color: {$lightgreytext};
252
256
}
253
257
254
258
.device-desktop .phui-timeline-extra {
···
265
269
.device-phone .phui-timeline-extra {
266
270
display: block;
267
271
margin: 0;
272
+
}
273
+
274
+
.phui-timeline-icon-fill.fill-has-color .phui-icon-view {
275
+
color: #fff;
268
276
}
269
277
270
278
.phui-timeline-icon-fill-red {
···
304
312
}
305
313
306
314
.phui-timeline-icon-fill-black {
307
-
background-color: #333;
315
+
background-color: #000;
308
316
}
309
317
310
318
.phui-timeline-shell.anchor-target {
···
343
351
344
352
.phui-timeline-title .phui-timeline-extra-information a {
345
353
font-weight: normal;
346
-
color: {$bluetext};
354
+
color: {$greytext};
347
355
}
348
356
349
357
.phui-timeline-comment-actions .phui-icon-view {
···
359
367
right: 3px;
360
368
top: 6px;
361
369
width: 28px;
362
-
height: 22px;
370
+
height: 24px;
363
371
text-align: center;
364
372
line-height: 22px;
365
-
font-size: 15px;
366
-
border-left: 1px solid {$lightblueborder};
373
+
font-size: 16px;
374
+
border-left: 1px solid {$thinblueborder};
367
375
}
368
376
369
377
.phui-timeline-menu:focus {
···
379
387
}
380
388
381
389
.device-desktop a.phui-timeline-menu:hover .phui-icon-view {
382
-
color: {$darkgreytext};
390
+
color: {$sky};
383
391
}
384
392
385
393
.phui-timeline-menu.phuix-dropdown-open {
386
-
background: {$hovergrey};
394
+
background: rgba({$alphablue},0.1);
395
+
border: none;
396
+
border-radius: 3px;
387
397
}
388
398
389
399
.phui-timeline-view + .phui-object-box {
+5
-1
webroot/rsrc/css/phui/phui-two-column-view.css
+5
-1
webroot/rsrc/css/phui/phui-two-column-view.css
···
87
87
88
88
.phui-two-column-view .phui-timeline-view {
89
89
padding: 0;
90
-
background-position: 78px;
90
+
background-position: 80px;
91
91
}
92
92
93
93
.phui-two-column-view .phui-main-column .phui-object-box + .phui-timeline-view {
···
105
105
106
106
.phui-main-column > .phui-timeline-view:first-child {
107
107
border-top: 1px solid {$thinblueborder};
108
+
}
109
+
110
+
.device-phone .phui-main-column .phui-timeline-older-transactions-are-hidden {
111
+
margin: 0;
108
112
}
109
113
110
114
/* Main Column Properties */
webroot/rsrc/image/d5d8e1.png
webroot/rsrc/image/d5d8e1.png
This is a binary file and will not be displayed.