@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
Add ReallyMajorEvent to PHUITimelineView
Summary: For actions like "Close" that are in theory stopping the timeline, we should display some disruption to the line itself.
Test Plan:
Tested in UIExamples
{F236077}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D10884
+55
-26
+3
-3
resources/celerity/map.php
+3
-3
resources/celerity/map.php
···
7
7
*/
8
8
return array(
9
9
'names' => array(
10
-
'core.pkg.css' => '0784ef1d',
10
+
'core.pkg.css' => '673d0a25',
11
11
'core.pkg.js' => 'e5f7f2ba',
12
12
'darkconsole.pkg.js' => 'df001cab',
13
13
'differential.pkg.css' => '8af45893',
···
142
142
'rsrc/css/phui/phui-status.css' => '888cedb8',
143
143
'rsrc/css/phui/phui-tag-view.css' => 'b0c282e0',
144
144
'rsrc/css/phui/phui-text.css' => 'cf019f54',
145
-
'rsrc/css/phui/phui-timeline-view.css' => '8c6fefe7',
145
+
'rsrc/css/phui/phui-timeline-view.css' => '26bb3fd4',
146
146
'rsrc/css/phui/phui-workboard-view.css' => '2bf82d00',
147
147
'rsrc/css/phui/phui-workpanel-view.css' => '198c7e6c',
148
148
'rsrc/css/sprite-apps-large.css' => '20ec0cc0',
···
791
791
'phui-status-list-view-css' => '888cedb8',
792
792
'phui-tag-view-css' => 'b0c282e0',
793
793
'phui-text-css' => 'cf019f54',
794
-
'phui-timeline-view-css' => '8c6fefe7',
794
+
'phui-timeline-view-css' => '26bb3fd4',
795
795
'phui-workboard-view-css' => '2bf82d00',
796
796
'phui-workpanel-view-css' => '198c7e6c',
797
797
'phuix-action-list-view' => 'b5c256b8',
+13
-12
src/applications/uiexample/examples/PHUITimelineExample.php
+13
-12
src/applications/uiexample/examples/PHUITimelineExample.php
···
79
79
80
80
$events[] = id(new PHUITimelineEventView())
81
81
->setUserHandle($handle)
82
-
->setIcon('fa-random')
83
-
->setTitle('Minor Not-Red Event')
84
-
->setColor(PhabricatorTransactions::COLOR_BLACK);
82
+
->setIcon('fa-check')
83
+
->setTitle('Historically Important Action')
84
+
->setColor(PhabricatorTransactions::COLOR_BLACK)
85
+
->setReallyMajorEvent(true);
85
86
86
87
87
88
$events[] = id(new PHUITimelineEventView())
88
89
->setUserHandle($handle)
89
-
->setIcon('tag')
90
-
->setTitle('Major Green Event')
90
+
->setIcon('fa-circle-o')
91
+
->setTitle('Major Green Disagreement Action')
91
92
->appendChild('This event is green!')
92
93
->setColor(PhabricatorTransactions::COLOR_GREEN);
93
94
94
95
$events[] = id(new PHUITimelineEventView())
95
96
->setUserHandle($handle)
96
-
->setIcon('tag')
97
+
->setIcon('fa-tag')
97
98
->setTitle(str_repeat('Long Text Title ', 64))
98
99
->appendChild(str_repeat('Long Text Body ', 64))
99
100
->setColor(PhabricatorTransactions::COLOR_ORANGE);
···
120
121
$events[] = id(new PHUITimelineEventView())
121
122
->setUserHandle($handle)
122
123
->setTitle('Colorless')
123
-
->setIcon('lock');
124
+
->setIcon('fa-lock');
124
125
125
126
foreach ($colors as $color) {
126
127
$events[] = id(new PHUITimelineEventView())
127
128
->setUserHandle($handle)
128
129
->setTitle("Color '{$color}'")
129
-
->setIcon('lock')
130
+
->setIcon('fa-paw')
130
131
->setColor($color);
131
132
}
132
133
···
141
142
->setUserHandle($handle)
142
143
->setTitle(pht('%s bought an apple.', $vhandle))
143
144
->setColor('green')
144
-
->setIcon('check'));
145
+
->setIcon('fa-apple'));
145
146
146
147
$group_event->addEventToGroup(
147
148
id(new PHUITimelineEventView())
148
149
->setUserHandle($handle)
149
150
->setTitle(pht('%s bought a banana.', $vhandle))
150
151
->setColor('yellow')
151
-
->setIcon('check'));
152
+
->setIcon('fa-check'));
152
153
153
154
$group_event->addEventToGroup(
154
155
id(new PHUITimelineEventView())
155
156
->setUserHandle($handle)
156
157
->setTitle(pht('%s bought a cherry.', $vhandle))
157
158
->setColor('red')
158
-
->setIcon('check'));
159
+
->setIcon('fa-check'));
159
160
160
161
$group_event->addEventToGroup(
161
162
id(new PHUITimelineEventView())
···
166
167
id(new PHUITimelineEventView())
167
168
->setUserHandle($handle)
168
169
->setTitle(pht('%s returned home.', $vhandle))
169
-
->setIcon('home')
170
+
->setIcon('fa-home')
170
171
->setColor('blue'));
171
172
172
173
$group_event->addEventToGroup(
+30
-11
src/view/phui/PHUITimelineEventView.php
+30
-11
src/view/phui/PHUITimelineEventView.php
···
23
23
private $tokenRemoved;
24
24
private $quoteTargetID;
25
25
private $quoteRef;
26
+
private $reallyMajorEvent;
26
27
27
28
public function setQuoteRef($quote_ref) {
28
29
$this->quoteRef = $quote_ref;
···
145
146
146
147
public function setColor($color) {
147
148
$this->color = $color;
149
+
return $this;
150
+
}
151
+
152
+
public function setReallyMajorEvent($me) {
153
+
$this->reallyMajorEvent = $me;
148
154
return $this;
149
155
}
150
156
···
401
407
);
402
408
}
403
409
404
-
return javelin_tag(
405
-
'div',
406
-
array(
407
-
'class' => implode(' ', $outer_classes),
408
-
'id' => $this->anchor ? 'anchor-'.$this->anchor : null,
409
-
'sigil' => $sigil,
410
-
'meta' => $meta,
411
-
),
412
-
phutil_tag(
410
+
$major_event = null;
411
+
if ($this->reallyMajorEvent) {
412
+
$major_event = phutil_tag(
413
+
'div',
414
+
array(
415
+
'class' => 'phui-timeline-event-view '.
416
+
'phui-timeline-spacer '.
417
+
'phui-timeline-spacer-bold',
418
+
'',));
419
+
}
420
+
421
+
return array(
422
+
javelin_tag(
413
423
'div',
414
424
array(
415
-
'class' => implode(' ', $classes),
425
+
'class' => implode(' ', $outer_classes),
426
+
'id' => $this->anchor ? 'anchor-'.$this->anchor : null,
427
+
'sigil' => $sigil,
428
+
'meta' => $meta,
416
429
),
417
-
$content));
430
+
phutil_tag(
431
+
'div',
432
+
array(
433
+
'class' => implode(' ', $classes),
434
+
),
435
+
$content)),
436
+
$major_event,);
418
437
}
419
438
420
439
private function renderExtra(array $events) {
+9
webroot/rsrc/css/phui/phui-timeline-view.css
+9
webroot/rsrc/css/phui/phui-timeline-view.css
···
187
187
border-width: 0;
188
188
}
189
189
190
+
.phui-timeline-spacer.phui-timeline-spacer-bold {
191
+
border-bottom: 4px solid {$lightblueborder};
192
+
margin: 0;
193
+
}
194
+
195
+
.phui-timeline-spacer-bold + .phui-timeline-spacer {
196
+
background-color: #ebecee;
197
+
}
198
+
190
199
.phui-timeline-icon-fill {
191
200
position: absolute;
192
201
width: 30px;