@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
Making the day view slightly less bad.
Summary: Ref T4393, Making the day view slightly less bad.
Test Plan: Open Calendar Advanced Search, search for day with multiple events starting at the same time, events should show up side by side, and should link to actual events.
Reviewers: chad, #blessed_reviewers, epriestley
Reviewed By: #blessed_reviewers, epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T4393
Differential Revision: https://secure.phabricator.com/D12686
+64
-19
+2
-2
resources/celerity/map.php
+2
-2
resources/celerity/map.php
···
119
119
'rsrc/css/layout/phabricator-hovercard-view.css' => '44394670',
120
120
'rsrc/css/layout/phabricator-side-menu-view.css' => 'c1db9e9c',
121
121
'rsrc/css/layout/phabricator-source-code-view.css' => '2ceee894',
122
-
'rsrc/css/phui/calendar/phui-calendar-day.css' => 'a00b748d',
122
+
'rsrc/css/phui/calendar/phui-calendar-day.css' => 'a4df5b72',
123
123
'rsrc/css/phui/calendar/phui-calendar-list.css' => 'c1d0ca59',
124
124
'rsrc/css/phui/calendar/phui-calendar-month.css' => 'a92e47d2',
125
125
'rsrc/css/phui/calendar/phui-calendar.css' => '8675968e',
···
780
780
'phui-box-css' => '7b3a2eed',
781
781
'phui-button-css' => 'de610129',
782
782
'phui-calendar-css' => '8675968e',
783
-
'phui-calendar-day-css' => 'a00b748d',
783
+
'phui-calendar-day-css' => 'a4df5b72',
784
784
'phui-calendar-list-css' => 'c1d0ca59',
785
785
'phui-calendar-month-css' => 'a92e47d2',
786
786
'phui-crumbs-view-css' => '594d719e',
+1
src/applications/calendar/query/PhabricatorCalendarEventSearchEngine.php
+1
src/applications/calendar/query/PhabricatorCalendarEventSearchEngine.php
+10
-1
src/applications/calendar/view/AphrontCalendarDayEventView.php
+10
-1
src/applications/calendar/view/AphrontCalendarDayEventView.php
···
2
2
3
3
final class AphrontCalendarDayEventView extends AphrontView {
4
4
5
-
private $event;
6
5
private $epochStart;
7
6
private $epochEnd;
8
7
private $name;
8
+
private $uri;
9
9
10
10
public function setName($name) {
11
11
$this->name = $name;
···
14
14
15
15
public function getName() {
16
16
return $this->name;
17
+
}
18
+
19
+
public function setURI($uri) {
20
+
$this->uri = $uri;
21
+
return $this;
22
+
}
23
+
24
+
public function getURI() {
25
+
return $this->uri;
17
26
}
18
27
19
28
public function setEpochRange($start, $end) {
+31
-10
src/view/phui/calendar/PHUICalendarDayView.php
+31
-10
src/view/phui/calendar/PHUICalendarDayView.php
···
34
34
$cell_time = phutil_tag(
35
35
'td',
36
36
array('class' => 'phui-calendar-day-hour'),
37
-
$hour->format('g:i A'));
37
+
$hour->format('g A'));
38
38
39
-
$event_boxes = array();
39
+
$events = array();
40
+
$hour_start = $hour->format('U');
41
+
$hour_end = id(clone $hour)->modify('+1 hour')->format('U');
40
42
foreach ($this->events as $event) {
41
-
if ($event->getEpochStart() >= $hour->format('U')
42
-
&& $event->getEpochStart() < $hour->modify('+1 hour')->format('U')) {
43
-
$event_boxes[] = $this->drawEvent($event);
43
+
if ($event->getEpochStart() >= $hour_start
44
+
&& $event->getEpochStart() < $hour_end) {
45
+
$events[] = $event;
44
46
}
45
47
}
46
48
49
+
$count_events = count($events);
50
+
$event_boxes = array();
51
+
$n = 0;
52
+
foreach ($events as $event) {
53
+
$offset = (($n / $count_events) * 100).'%';
54
+
$width = ((1 / $count_events) * 100).'%';
55
+
$event_boxes[] = $this->drawEvent($event, $offset, $width);
56
+
$n++;
57
+
}
58
+
47
59
// events starting in time slot
48
60
$cell_event = phutil_tag(
49
61
'td',
50
-
array(),
62
+
array('class' => 'phui-calendar-day-events'),
51
63
$event_boxes);
52
64
53
65
···
72
84
73
85
}
74
86
75
-
private function drawEvent(AphrontCalendarDayEventView $event) {
87
+
private function drawEvent(
88
+
AphrontCalendarDayEventView $event,
89
+
$offset,
90
+
$width) {
76
91
$name = phutil_tag(
77
-
'div',
78
-
array(),
92
+
'a',
93
+
array(
94
+
'class' => 'phui-calendar-day-event-link',
95
+
'href' => $event->getURI(),
96
+
),
79
97
$event->getName());
80
98
81
99
$div = phutil_tag(
82
100
'div',
83
-
array('class' => 'phui-calendar-day-event'),
101
+
array(
102
+
'class' => 'phui-calendar-day-event',
103
+
'style' => 'left: '.$offset.'; width: '.$width.';',
104
+
),
84
105
$name);
85
106
86
107
return $div;
+20
-6
webroot/rsrc/css/phui/calendar/phui-calendar-day.css
+20
-6
webroot/rsrc/css/phui/calendar/phui-calendar-day.css
···
9
9
10
10
.phui-calendar-day-hour {
11
11
width: 60px;
12
-
font-size: 10px;
12
+
color: {$lightgreytext};
13
+
text-align: right;
14
+
padding: 4px 4px;
15
+
border-right: 1px solid {$lightgreyborder};
13
16
}
14
17
15
18
.phui-calendar-day-view tr {
16
-
width: 100%;
17
19
height: 60px;
18
-
border: 1px solid {$lightgreyborder};
19
20
}
20
21
21
22
.phui-calendar-day-view td {
22
23
position: relative;
23
24
}
24
25
26
+
.phui-calendar-day-view tr + tr td.phui-calendar-day-events {
27
+
border-top: 1px solid {$lightgreyborder};
28
+
}
29
+
25
30
.phui-calendar-day-view td div.phui-calendar-day-event {
26
31
width: 100%;
27
-
background-color: {$darkgreybackground};
28
32
position: absolute;
29
33
top: 0;
30
34
bottom: 0;
31
35
}
32
36
33
-
.phui-calendar-day-view td div.phui-calendar-day-event div {
34
-
padding: 4px;
37
+
.phui-calendar-day-event-link {
38
+
padding: 8px;
39
+
border: 1px solid {$blueborder};
40
+
background-color: {$bluebackground};
41
+
margin: 4px;
42
+
position: absolute;
43
+
left: 0;
44
+
right: 0;
45
+
top: 0;
46
+
bottom: 0;
47
+
text-decoration: none;
48
+
color: {$greytext};
35
49
}