@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
First pass at Month View
Summary: Ref T4392, First pass at Month View
Test Plan: Open month view, month view days should correctly grow with number of events, day numbers should now live at the bottom of day cells, day numbers should be links to day views of those days.
Reviewers: chad, epriestley, #blessed_reviewers
Reviewed By: epriestley, #blessed_reviewers
Subscribers: Korvin, epriestley
Maniphest Tasks: T4392
Differential Revision: https://secure.phabricator.com/D12800
+166
-84
+2
-2
resources/celerity/map.php
+2
-2
resources/celerity/map.php
···
122
122
'rsrc/css/layout/phabricator-source-code-view.css' => '2ceee894',
123
123
'rsrc/css/phui/calendar/phui-calendar-day.css' => '49037167',
124
124
'rsrc/css/phui/calendar/phui-calendar-list.css' => 'c1d0ca59',
125
-
'rsrc/css/phui/calendar/phui-calendar-month.css' => 'a92e47d2',
125
+
'rsrc/css/phui/calendar/phui-calendar-month.css' => '873e00da',
126
126
'rsrc/css/phui/calendar/phui-calendar.css' => '8675968e',
127
127
'rsrc/css/phui/phui-action-header-view.css' => '89c497e7',
128
128
'rsrc/css/phui/phui-action-list.css' => '4f4d09f2',
···
779
779
'phui-calendar-css' => '8675968e',
780
780
'phui-calendar-day-css' => '49037167',
781
781
'phui-calendar-list-css' => 'c1d0ca59',
782
-
'phui-calendar-month-css' => 'a92e47d2',
782
+
'phui-calendar-month-css' => '873e00da',
783
783
'phui-crumbs-view-css' => '594d719e',
784
784
'phui-document-view-css' => '94d5dcd8',
785
785
'phui-feed-story-css' => 'c9f3a0b5',
+32
-7
src/applications/calendar/query/PhabricatorCalendarEventSearchEngine.php
+32
-7
src/applications/calendar/query/PhabricatorCalendarEventSearchEngine.php
···
57
57
$min_range = $this->getDateFrom($saved)->getEpoch();
58
58
$max_range = $this->getDateTo($saved)->getEpoch();
59
59
60
-
if ($saved->getParameter('display') == 'month' ||
61
-
$saved->getParameter('display') == 'day') {
60
+
if ($this->isMonthView($saved) ||
61
+
$this->isDayView($saved)) {
62
62
list($start_year, $start_month, $start_day) =
63
63
$this->getDisplayYearAndMonthAndDay($saved);
64
64
···
67
67
$timezone);
68
68
$next = clone $start_day;
69
69
70
-
if ($saved->getParameter('display') == 'month') {
70
+
if ($this->isMonthView($saved)) {
71
71
$next->modify('+1 month');
72
-
} else if ($saved->getParameter('display') == 'day') {
72
+
} else if ($this->isDayView($saved)) {
73
73
$next->modify('+6 day');
74
74
}
75
75
···
269
269
PhabricatorSavedQuery $query,
270
270
array $handles) {
271
271
272
-
if ($query->getParameter('display') == 'month') {
272
+
if ($this->isMonthView($query)) {
273
273
return $this->buildCalendarView($events, $query, $handles);
274
-
} else if ($query->getParameter('display') == 'day') {
274
+
} else if ($this->isDayView($query)) {
275
275
return $this->buildCalendarDayView($events, $query, $handles);
276
276
}
277
277
···
358
358
foreach ($statuses as $status) {
359
359
$event = new AphrontCalendarEventView();
360
360
$event->setEpochRange($status->getDateFrom(), $status->getDateTo());
361
+
$event->setIsAllDay($status->getIsAllDay());
361
362
362
363
$name_text = $handles[$status->getUserPHID()]->getName();
363
364
$status_text = $status->getName();
···
430
431
$epoch = time();
431
432
}
432
433
}
434
+
if ($this->isMonthView($query)) {
435
+
$day = 1;
436
+
} else {
437
+
$day = phabricator_format_local_time($epoch, $viewer, 'd');
438
+
}
433
439
$start_year = phabricator_format_local_time($epoch, $viewer, 'Y');
434
440
$start_month = phabricator_format_local_time($epoch, $viewer, 'm');
435
-
$start_day = phabricator_format_local_time($epoch, $viewer, 'd');
441
+
$start_day = $day;
436
442
}
437
443
return array($start_year, $start_month, $start_day);
438
444
}
···
467
473
return $value;
468
474
}
469
475
476
+
private function isMonthView(PhabricatorSavedQuery $query) {
477
+
if ($this->isDayView($query)) {
478
+
return false;
479
+
}
480
+
if ($query->getParameter('display') == 'month') {
481
+
return true;
482
+
}
483
+
}
484
+
485
+
private function isDayView(PhabricatorSavedQuery $query) {
486
+
if ($query->getParameter('display') == 'day') {
487
+
return true;
488
+
}
489
+
if ($this->calendarDay) {
490
+
return true;
491
+
}
492
+
493
+
return false;
494
+
}
470
495
}
+26
-12
src/view/phui/calendar/PHUICalendarListView.php
+26
-12
src/view/phui/calendar/PHUICalendarListView.php
···
4
4
5
5
private $events = array();
6
6
private $blankState;
7
+
private $isDayView = false;
7
8
8
9
public function addEvent(AphrontCalendarEventView $event) {
9
10
$this->events[] = $event;
10
11
return $this;
11
12
}
12
13
14
+
public function setIsDayView($is_day_view) {
15
+
$this->isDayView = $is_day_view;
16
+
return $this;
17
+
}
18
+
13
19
public function showBlankState($state) {
14
20
$this->blankState = $state;
15
21
return $this;
···
22
28
protected function getTagAttributes() {
23
29
require_celerity_resource('phui-calendar-css');
24
30
require_celerity_resource('phui-calendar-list-css');
25
-
return array('class' => 'phui-calendar-day-list');
31
+
return array('class' => 'phui-calendar-event-list');
26
32
}
27
33
28
34
protected function getTagContent() {
29
35
if (!$this->blankState && empty($this->events)) {
30
36
return '';
31
37
}
32
-
33
-
$events = msort($this->events, 'getEpochStart');
34
38
35
39
$singletons = array();
36
40
$allday = false;
37
-
foreach ($events as $event) {
41
+
foreach ($this->events as $event) {
38
42
$color = $event->getColor();
43
+
$start_epoch = $event->getEpochStart();
39
44
40
45
if ($event->getIsAllDay()) {
41
46
$timelabel = pht('All Day');
47
+
$dot = null;
42
48
} else {
43
49
$timelabel = phabricator_time(
44
50
$event->getEpochStart(),
45
51
$this->getUser());
52
+
53
+
$dot = phutil_tag(
54
+
'span',
55
+
array(
56
+
'class' => 'phui-calendar-list-dot',
57
+
),
58
+
'');
46
59
}
47
60
48
-
$dot = phutil_tag(
49
-
'span',
50
-
array(
51
-
'class' => 'phui-calendar-list-dot',
52
-
),
53
-
'');
54
61
$title = phutil_tag(
55
62
'span',
56
63
array(
···
64
71
),
65
72
$timelabel);
66
73
74
+
$class = 'phui-calendar-list-item phui-calendar-'.$color;
75
+
if ($event->getIsAllDay()) {
76
+
$class = $class.' all-day';
77
+
}
78
+
67
79
$singletons[] = phutil_tag(
68
80
'li',
69
81
array(
70
-
'class' => 'phui-calendar-list-item phui-calendar-'.$color,
82
+
'class' => $class,
71
83
),
72
84
array(
73
85
$dot,
···
112
124
$description = pht('(%s)', $event->getName());
113
125
}
114
126
127
+
$class = 'phui-calendar-item-link';
128
+
115
129
$anchor = javelin_tag(
116
130
'a',
117
131
array(
118
132
'sigil' => 'has-tooltip',
119
-
'class' => 'phui-calendar-item-link',
133
+
'class' => $class,
120
134
'href' => '/E'.$event->getEventID(),
121
135
'meta' => array(
122
136
'tip' => $tip,
+62
-38
src/view/phui/calendar/PHUICalendarMonthView.php
+62
-38
src/view/phui/calendar/PHUICalendarMonthView.php
···
72
72
$empty = $first->format('w');
73
73
74
74
$markup = array();
75
-
76
-
$empty_box = phutil_tag(
77
-
'div',
78
-
array('class' => 'phui-calendar-day phui-calendar-empty'),
79
-
'');
75
+
$empty_cell = array(
76
+
'list' => null,
77
+
'date' => null,
78
+
'class' => 'phui-calendar-empty',
79
+
);
80
80
81
81
for ($ii = 0; $ii < $empty; $ii++) {
82
-
$markup[] = $empty_box;
82
+
$markup[] = $empty_cell;
83
83
}
84
84
85
85
$show_events = array();
···
88
88
$day_number = $day->format('j');
89
89
90
90
$holiday = idx($this->holidays, $day->format('Y-m-d'));
91
-
$class = 'phui-calendar-day';
91
+
$class = 'phui-calendar-month-day';
92
92
$weekday = $day->format('w');
93
93
94
94
if ($day_number == $this->day) {
···
102
102
$day->setTime(0, 0, 0);
103
103
$epoch_start = $day->format('U');
104
104
105
-
$day->modify('+1 day');
106
-
$epoch_end = $day->format('U');
105
+
106
+
$epoch_end = id(clone $day)->modify('+1 day')->format('U');
107
107
108
108
if ($weekday == 0) {
109
109
$show_events = array();
···
116
116
}
117
117
118
118
$list_events = array();
119
+
$all_day_events = array();
119
120
foreach ($events as $event) {
120
121
if ($event->getEpochStart() >= $epoch_end) {
121
122
// This list is sorted, so we can stop looking.
···
123
124
}
124
125
if ($event->getEpochStart() < $epoch_end &&
125
126
$event->getEpochEnd() > $epoch_start) {
126
-
$list_events[] = $event;
127
+
if ($event->getIsAllDay()) {
128
+
$all_day_events[] = $event;
129
+
} else {
130
+
$list_events[] = $event;
131
+
}
127
132
}
128
133
}
129
134
130
135
$list = new PHUICalendarListView();
131
136
$list->setUser($this->user);
137
+
foreach ($all_day_events as $item) {
138
+
$list->addEvent($item);
139
+
}
132
140
foreach ($list_events as $item) {
133
141
$list->addEvent($item);
134
142
}
135
143
136
-
$holiday_markup = null;
137
-
if ($holiday) {
138
-
$name = $holiday->getName();
139
-
$holiday_markup = phutil_tag(
140
-
'div',
141
-
array(
142
-
'class' => 'phui-calendar-holiday',
143
-
'title' => $name,
144
-
),
145
-
$name);
146
-
}
147
-
148
-
$markup[] = phutil_tag_div(
149
-
$class,
150
-
array(
151
-
phutil_tag_div('phui-calendar-date-number', $day_number),
152
-
$holiday_markup,
153
-
$list,
154
-
));
144
+
$markup[] = array(
145
+
'list' => $list,
146
+
'date' => $day,
147
+
'class' => $class,
148
+
);
155
149
}
156
150
157
151
$table = array();
158
152
$rows = array_chunk($markup, 7);
153
+
159
154
foreach ($rows as $row) {
160
155
$cells = array();
161
156
while (count($row) < 7) {
162
-
$row[] = $empty_box;
157
+
$row[] = $empty_cell;
158
+
}
159
+
foreach ($row as $cell) {
160
+
$cell_list = $cell['list'];
161
+
$class = $cell['class'];
162
+
$cells[] = phutil_tag(
163
+
'td',
164
+
array(
165
+
'class' => 'phui-calendar-month-event-list '.$class,
166
+
),
167
+
$cell_list);
163
168
}
164
-
$j = 0;
169
+
$table[] = phutil_tag('tr', array(), $cells);
170
+
171
+
$cells = array();
165
172
foreach ($row as $cell) {
166
-
if ($j == 0) {
167
-
$cells[] = phutil_tag(
168
-
'td',
173
+
$class = $cell['class'];
174
+
175
+
if ($cell['date']) {
176
+
$cell_day = $cell['date'];
177
+
178
+
$uri = $this->getBrowseURI();
179
+
$date = $cell['date'];
180
+
$uri = $uri.$date->format('Y').'/'.
181
+
$date->format('m').'/'.
182
+
$date->format('d').'/';
183
+
184
+
$cell_day = phutil_tag(
185
+
'a',
169
186
array(
170
-
'class' => 'phui-calendar-month-weekstart',
187
+
'class' => 'phui-calendar-date-number',
188
+
'href' => $uri,
171
189
),
172
-
$cell);
190
+
$cell_day->format('j'));
173
191
} else {
174
-
$cells[] = phutil_tag('td', array(), $cell);
192
+
$cell_day = null;
175
193
}
176
-
$j++;
194
+
195
+
$cells[] = phutil_tag(
196
+
'td',
197
+
array(
198
+
'class' => 'phui-calendar-date-number-container '.$class,
199
+
),
200
+
$cell_day);
177
201
}
178
202
$table[] = phutil_tag('tr', array(), $cells);
179
203
}
+44
-25
webroot/rsrc/css/phui/calendar/phui-calendar-month.css
+44
-25
webroot/rsrc/css/phui/calendar/phui-calendar-month.css
···
17
17
}
18
18
19
19
table.phui-calendar-view td {
20
-
border: 1px solid #dfdfdf;
20
+
border: solid #dfdfdf;
21
+
border-width: 1px 1px 0 1px;
21
22
width: 14.2857%; /* This is one seventh, approximately. */
22
23
}
23
24
24
-
table.phui-calendar-view td div.phui-calendar-day {
25
-
min-height: 125px;
26
-
position: relative;
25
+
table.phui-calendar-view tr td:first-child {
26
+
border-left-width: 0px;
27
27
}
28
28
29
-
.phui-calendar-holiday {
30
-
color: {$greytext};
31
-
padding: .5em;
32
-
max-height: 1em;
33
-
overflow: hidden;
29
+
table.phui-calendar-view .phui-calendar-event-list {
30
+
min-height: 125px;
34
31
}
35
32
36
-
table.phui-calendar-view td.phui-calendar-month-weekstart {
37
-
border-left: none;
33
+
table.phui-calendar-view a.phui-calendar-date-number {
34
+
color: {$lightgreytext};
35
+
border-color: {$thinblueborder};
36
+
border-style: solid;
37
+
border-width: 1px 0 0 1px;
38
+
padding: 4px;
39
+
display: inline-block;
40
+
min-width: 16px;
41
+
text-align: center;
42
+
background-color: #ffffff;
38
43
}
39
44
40
-
.phui-calendar-date-number {
45
+
table.phui-calendar-view td.phui-calendar-date-number-container {
41
46
font-weight: normal;
42
47
color: {$lightgreytext};
43
-
padding: 4px;
44
-
border-color: {$thinblueborder};
45
-
border-style: solid;
46
-
border-width: 0 0 1px 1px;
47
-
position: absolute;
48
-
background: #ffffff;
49
-
width: 16px;
50
-
height: 16px;
51
-
text-align: center;
52
-
top: 0;
53
-
right: 0;
48
+
border-width: 0 1px 0 1px;
49
+
text-align: right;
54
50
}
55
51
56
52
.phui-calendar-not-work-day {
···
71
67
}
72
68
73
69
.phui-calendar-view .phui-calendar-list {
74
-
padding: 8px;
70
+
padding: 1px;
71
+
}
72
+
73
+
.phui-calendar-list-item.all-day span {
74
+
padding: 0;
75
+
margin: 0;
76
+
}
77
+
78
+
.phui-calendar-view .phui-calendar-list li.phui-calendar-list-item.all-day {
79
+
margin: 0;
80
+
padding: 4px 8px;
81
+
background-color: {$lightpink};
82
+
}
83
+
84
+
li.phui-calendar-list-item.all-day:first-child {
85
+
margin-top: 0;
86
+
}
87
+
88
+
.phui-calendar-view .phui-calendar-list li {
89
+
margin: 0 8px;
75
90
}
76
91
77
92
.phui-calendar-view .phui-calendar-list li:first-child {
78
-
margin-right: 16px;
93
+
margin-top: 8px;
79
94
}
80
95
81
96
.phui-calendar-view .phui-calendar-list-dot {
···
93
108
margin-left: 10px;
94
109
white-space: normal;
95
110
word-break: break-word;
111
+
}
112
+
113
+
li.phui-calendar-list-item.all-day .phui-calendar-list-title a{
114
+
color: {$pink};
96
115
}
97
116
98
117
.phui-calendar-view .phui-calendar-list-time {