@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
Make Calendar month view events render a little more consistently
Summary:
Ref T11326. This just inches things forward a little bit:
- Make it easier to see current day.
- Line-through cancelled events.
- Don't colorize the whole event title, just use an Attending/Invited/Custom icon.
- Slightly subtler treatment for all-day events.
Test Plan: See screenshot in T11326.
Reviewers: chad
Reviewed By: chad
Maniphest Tasks: T11326
Differential Revision: https://secure.phabricator.com/D16306
+156
-85
+4
-4
resources/celerity/map.php
+4
-4
resources/celerity/map.php
···
117
117
'rsrc/css/layout/phabricator-source-code-view.css' => 'cbeef983',
118
118
'rsrc/css/phui/calendar/phui-calendar-day.css' => 'd1cf6f93',
119
119
'rsrc/css/phui/calendar/phui-calendar-list.css' => '56e6381a',
120
-
'rsrc/css/phui/calendar/phui-calendar-month.css' => '476be7e0',
121
-
'rsrc/css/phui/calendar/phui-calendar.css' => 'ccabe893',
120
+
'rsrc/css/phui/calendar/phui-calendar-month.css' => 'f3bb2030',
121
+
'rsrc/css/phui/calendar/phui-calendar.css' => '3354bbd6',
122
122
'rsrc/css/phui/phui-action-list.css' => 'c5eba19d',
123
123
'rsrc/css/phui/phui-action-panel.css' => '91c7b835',
124
124
'rsrc/css/phui/phui-badge.css' => '3baef8db',
···
825
825
'phui-big-info-view-css' => 'bd903741',
826
826
'phui-box-css' => '5c8387cf',
827
827
'phui-button-css' => '4a5fbe3d',
828
-
'phui-calendar-css' => 'ccabe893',
828
+
'phui-calendar-css' => '3354bbd6',
829
829
'phui-calendar-day-css' => 'd1cf6f93',
830
830
'phui-calendar-list-css' => '56e6381a',
831
-
'phui-calendar-month-css' => '476be7e0',
831
+
'phui-calendar-month-css' => 'f3bb2030',
832
832
'phui-chart-css' => '6bf6f78e',
833
833
'phui-crumbs-view-css' => '6b813619',
834
834
'phui-curtain-view-css' => '7148ae25',
+25
-49
src/applications/calendar/query/PhabricatorCalendarEventSearchEngine.php
+25
-49
src/applications/calendar/query/PhabricatorCalendarEventSearchEngine.php
···
255
255
array $handles) {
256
256
257
257
if ($this->isMonthView($query)) {
258
-
return $this->buildCalendarView($events, $query, $handles);
258
+
return $this->buildCalendarView($events, $query);
259
259
} else if ($this->isDayView($query)) {
260
260
return $this->buildCalendarDayView($events, $query, $handles);
261
261
}
···
283
283
$item->addAttribute($event->renderEventDate($viewer, false));
284
284
285
285
if ($event->isCancelledEvent()) {
286
-
$status_icon = 'fa-times red';
287
-
$status_label = pht('Cancelled');
288
286
$item->setDisabled(true);
289
-
} else if ($viewer->isLoggedIn()) {
290
-
$status = $event->getUserInviteStatus($viewer->getPHID());
291
-
switch ($status) {
292
-
case PhabricatorCalendarEventInvitee::STATUS_ATTENDING:
293
-
$status_icon = 'fa-check-circle green';
294
-
$status_label = pht('Attending');
295
-
break;
296
-
case PhabricatorCalendarEventInvitee::STATUS_INVITED:
297
-
$status_icon = 'fa-user-plus green';
298
-
$status_label = pht('Invited');
299
-
break;
300
-
case PhabricatorCalendarEventInvitee::STATUS_DECLINED:
301
-
$status_icon = 'fa-times grey';
302
-
$status_label = pht('Declined');
303
-
break;
304
-
default:
305
-
$status_icon = $event->getIcon().' grey';
306
-
$status_label = null;
307
-
break;
308
-
}
309
287
}
310
288
311
-
$item->setStatusIcon($status_icon, $status_label);
289
+
$status_icon = $event->getDisplayIcon($viewer);
290
+
$status_color = $event->getDisplayIconColor($viewer);
291
+
$status_label = $event->getDisplayIconLabel($viewer);
292
+
293
+
$item->setStatusIcon("{$status_icon} {$status_color}", $status_label);
312
294
313
295
$host = pht(
314
296
'Hosted by %s',
···
326
308
}
327
309
328
310
private function buildCalendarView(
329
-
array $statuses,
330
-
PhabricatorSavedQuery $query,
331
-
array $handles) {
311
+
array $events,
312
+
PhabricatorSavedQuery $query) {
313
+
assert_instances_of($events, 'PhabricatorCalendarEvent');
332
314
333
315
$viewer = $this->requireViewer();
334
-
$now = time();
316
+
$now = PhabricatorTime::getNow();
335
317
336
318
list($start_year, $start_month) =
337
319
$this->getDisplayYearAndMonthAndDay(
···
339
321
$this->getQueryDateTo($query)->getEpoch(),
340
322
$query->getParameter('display'));
341
323
342
-
$now_year = phabricator_format_local_time($now, $viewer, 'Y');
324
+
$now_year = phabricator_format_local_time($now, $viewer, 'Y');
343
325
$now_month = phabricator_format_local_time($now, $viewer, 'm');
344
-
$now_day = phabricator_format_local_time($now, $viewer, 'j');
326
+
$now_day = phabricator_format_local_time($now, $viewer, 'j');
345
327
346
328
if ($start_month == $now_month && $start_year == $now_year) {
347
329
$month_view = new PHUICalendarMonthView(
···
360
342
361
343
$month_view->setUser($viewer);
362
344
363
-
$phids = mpull($statuses, 'getHostPHID');
364
-
$handles = $viewer->loadHandles($phids);
345
+
foreach ($events as $event) {
346
+
$epoch_min = $event->getViewerDateFrom();
347
+
$epoch_max = $event->getViewerDateTo();
365
348
366
-
foreach ($statuses as $status) {
367
-
$viewer_is_invited = $status->getIsUserInvited($viewer->getPHID());
368
-
369
-
$event = new AphrontCalendarEventView();
370
-
$event->setEpochRange(
371
-
$status->getViewerDateFrom(),
372
-
$status->getViewerDateTo());
373
-
$event->setIsAllDay($status->getIsAllDay());
374
-
$event->setIcon($status->getIcon());
349
+
$event_view = id(new AphrontCalendarEventView())
350
+
->setHostPHID($event->getHostPHID())
351
+
->setEpochRange($epoch_min, $epoch_max)
352
+
->setIsCancelled($event->isCancelledEvent())
353
+
->setName($event->getName())
354
+
->setURI($event->getURI())
355
+
->setIsAllDay($event->getIsAllDay())
356
+
->setIcon($event->getDisplayIcon($viewer))
357
+
->setIconColor($event->getDisplayIconColor($viewer));
375
358
376
-
$name_text = $handles[$status->getHostPHID()]->getName();
377
-
$status_text = $status->getName();
378
-
$event->setHostPHID($status->getHostPHID());
379
-
$event->setDescription(pht('%s (%s)', $name_text, $status_text));
380
-
$event->setName($status_text);
381
-
$event->setURI($status->getURI());
382
-
$event->setViewerIsInvited($viewer_is_invited);
383
-
$month_view->addEvent($event);
359
+
$month_view->addEvent($event_view);
384
360
}
385
361
386
362
$month_view->setBrowseURI(
+60
src/applications/calendar/storage/PhabricatorCalendarEvent.php
+60
src/applications/calendar/storage/PhabricatorCalendarEvent.php
···
531
531
}
532
532
533
533
534
+
public function getDisplayIcon(PhabricatorUser $viewer) {
535
+
if ($this->isCancelledEvent()) {
536
+
return 'fa-times';
537
+
}
538
+
539
+
if ($viewer->isLoggedIn()) {
540
+
$status = $this->getUserInviteStatus($viewer->getPHID());
541
+
switch ($status) {
542
+
case PhabricatorCalendarEventInvitee::STATUS_ATTENDING:
543
+
return 'fa-check-circle';
544
+
case PhabricatorCalendarEventInvitee::STATUS_INVITED:
545
+
return 'fa-user-plus';
546
+
case PhabricatorCalendarEventInvitee::STATUS_DECLINED:
547
+
return 'fa-times';
548
+
}
549
+
}
550
+
551
+
return $this->getIcon();
552
+
}
553
+
554
+
public function getDisplayIconColor(PhabricatorUser $viewer) {
555
+
if ($this->isCancelledEvent()) {
556
+
return 'red';
557
+
}
558
+
559
+
if ($viewer->isLoggedIn()) {
560
+
$status = $this->getUserInviteStatus($viewer->getPHID());
561
+
switch ($status) {
562
+
case PhabricatorCalendarEventInvitee::STATUS_ATTENDING:
563
+
return 'green';
564
+
case PhabricatorCalendarEventInvitee::STATUS_INVITED:
565
+
return 'green';
566
+
case PhabricatorCalendarEventInvitee::STATUS_DECLINED:
567
+
return 'grey';
568
+
}
569
+
}
570
+
571
+
return 'bluegrey';
572
+
}
573
+
574
+
public function getDisplayIconLabel(PhabricatorUser $viewer) {
575
+
if ($this->isCancelledEvent()) {
576
+
return pht('Cancelled');
577
+
}
578
+
579
+
if ($viewer->isLoggedIn()) {
580
+
$status = $this->getUserInviteStatus($viewer->getPHID());
581
+
switch ($status) {
582
+
case PhabricatorCalendarEventInvitee::STATUS_ATTENDING:
583
+
return pht('Attending');
584
+
case PhabricatorCalendarEventInvitee::STATUS_INVITED:
585
+
return pht('Invited');
586
+
case PhabricatorCalendarEventInvitee::STATUS_DECLINED:
587
+
return pht('Declined');
588
+
}
589
+
}
590
+
591
+
return null;
592
+
}
593
+
534
594
535
595
/* -( Markup Interface )--------------------------------------------------- */
536
596
+20
src/applications/calendar/view/AphrontCalendarEventView.php
+20
src/applications/calendar/view/AphrontCalendarEventView.php
···
12
12
private $uri;
13
13
private $isAllDay;
14
14
private $icon;
15
+
private $iconColor;
15
16
private $canEdit;
17
+
private $isCancelled;
18
+
19
+
public function setIconColor($icon_color) {
20
+
$this->iconColor = $icon_color;
21
+
return $this;
22
+
}
23
+
24
+
public function getIconColor() {
25
+
return $this->iconColor;
26
+
}
27
+
28
+
public function setIsCancelled($is_cancelled) {
29
+
$this->isCancelled = $is_cancelled;
30
+
return $this;
31
+
}
32
+
33
+
public function getIsCancelled() {
34
+
return $this->isCancelled;
35
+
}
16
36
17
37
public function setURI($uri) {
18
38
$this->uri = $uri;
+12
-12
src/view/phui/calendar/PHUICalendarListView.php
+12
-12
src/view/phui/calendar/PHUICalendarListView.php
···
53
53
$this->getUser());
54
54
}
55
55
56
-
if ($event->getViewerIsInvited()) {
57
-
$icon_color = 'green';
58
-
} else {
59
-
$icon_color = null;
60
-
}
56
+
$icon_icon = $event->getIcon();
57
+
$icon_color = $event->getIconColor();
61
58
62
59
$dot = id(new PHUIIconView())
63
-
->setIcon($event->getIcon(), $icon_color)
60
+
->setIcon($icon_icon, $icon_color)
64
61
->addClass('phui-calendar-list-item-icon');
65
62
66
63
$title = phutil_tag(
···
76
73
),
77
74
$timelabel);
78
75
79
-
$class = 'phui-calendar-list-item';
80
-
if ($event->getViewerIsInvited()) {
81
-
$class = $class.' phui-calendar-viewer-invited';
76
+
$event_classes = array();
77
+
$event_classes[] = 'phui-calendar-list-item';
78
+
if ($event->getIsAllDay()) {
79
+
$event_classes[] = 'all-day';
82
80
}
83
-
if ($event->getIsAllDay()) {
84
-
$class = $class.' all-day';
81
+
82
+
if ($event->getIsCancelled()) {
83
+
$event_classes[] = 'event-cancelled';
85
84
}
86
85
87
86
$tip = $this->getEventTooltip($event);
···
92
91
} else {
93
92
$tip_align = 'W';
94
93
}
94
+
95
95
$content = javelin_tag(
96
96
'a',
97
97
array(
···
112
112
$singletons[] = phutil_tag(
113
113
'li',
114
114
array(
115
-
'class' => $class,
115
+
'class' => implode(' ', $event_classes),
116
116
),
117
117
$content);
118
118
}
+17
-11
src/view/phui/calendar/PHUICalendarMonthView.php
+17
-11
src/view/phui/calendar/PHUICalendarMonthView.php
···
236
236
$cell_day = null;
237
237
}
238
238
239
-
if ($date && $date->format('j') == $this->day &&
240
-
$date->format('m') == $this->month) {
241
-
$today_class = 'phui-calendar-today-slot phui-calendar-today';
242
-
} else {
243
-
$today_class = 'phui-calendar-today-slot';
244
-
}
245
-
246
-
if ($this->isDateInCurrentWeek($date)) {
247
-
$today_class .= ' phui-calendar-this-week';
248
-
}
239
+
$today_class = 'phui-calendar-today-slot';
249
240
250
241
$last_week_day = 6;
251
242
if ($date->format('w') == $last_week_day) {
···
271
262
$today_slot,
272
263
));
273
264
265
+
$classes = array();
266
+
$classes[] = 'phui-calendar-date-number-container';
267
+
268
+
if ($date) {
269
+
if ($this->isDateInCurrentWeek($date)) {
270
+
$classes[] = 'phui-calendar-this-week';
271
+
}
272
+
273
+
if ($date->format('j') == $this->day) {
274
+
if ($date->format('m') == $this->month) {
275
+
$classes[] = 'phui-calendar-today';
276
+
}
277
+
}
278
+
}
279
+
274
280
return phutil_tag(
275
281
'td',
276
282
array(
277
-
'class' => 'phui-calendar-date-number-container '.$class,
283
+
'class' => implode(' ', $classes),
278
284
),
279
285
$cell_div);
280
286
}
+11
-6
webroot/rsrc/css/phui/calendar/phui-calendar-month.css
+11
-6
webroot/rsrc/css/phui/calendar/phui-calendar-month.css
···
133
133
right: 0px;
134
134
}
135
135
136
-
.phui-calendar-today-slot.phui-calendar-this-week {
137
-
background-color: {$blueborder};
136
+
.phui-calendar-this-week .phui-calendar-today-slot {
137
+
background-color: {$blue};
138
+
}
139
+
140
+
.phui-calendar-today .phui-calendar-today-slot,
141
+
.phui-calendar-today .phui-calendar-date-number {
142
+
background-color: {$sky};
138
143
}
139
144
140
-
.phui-calendar-today-slot.phui-calendar-today {
141
-
background-color: {$lightblueborder};
145
+
table.phui-calendar-view .phui-calendar-today a.phui-calendar-date-number {
146
+
color: #ffffff;
142
147
}
143
148
144
149
.phui-calendar-event-empty {
···
159
164
160
165
.phui-calendar-view .phui-calendar-list li.phui-calendar-list-item.all-day {
161
166
height: 20px;
162
-
background-color: {$darkgreybackground};
167
+
background-color: {$bluebackground};
163
168
display: block;
164
169
float: none;
165
170
}
···
194
199
.phui-calendar-view li.phui-calendar-list-item .phui-calendar-list-title {
195
200
width: auto;
196
201
position: absolute;
197
-
left: 20px;
202
+
left: 16px;
198
203
right: 60px;
199
204
text-overflow: ellipsis;
200
205
overflow: hidden;
+7
-3
webroot/rsrc/css/phui/calendar/phui-calendar.css
+7
-3
webroot/rsrc/css/phui/calendar/phui-calendar.css
···
2
2
* @provides phui-calendar-css
3
3
*/
4
4
5
-
.phui-calendar-list a {
6
-
color: {$lightgreytext};
7
-
}
5
+
.phui-calendar-list a {
6
+
color: {$greytext};
7
+
}
8
+
9
+
.phui-calendar-list .event-cancelled .phui-calendar-list-title {
10
+
text-decoration: line-through;
11
+
}
8
12
9
13
.phui-calendar-viewer-invited a {
10
14
color: {$green};