mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-22 14:52:41 +01:00
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
This commit is contained in:
parent
b53ecd0d42
commit
c4dfc097c8
5 changed files with 167 additions and 85 deletions
|
@ -122,7 +122,7 @@ return array(
|
|||
'rsrc/css/layout/phabricator-source-code-view.css' => '2ceee894',
|
||||
'rsrc/css/phui/calendar/phui-calendar-day.css' => '49037167',
|
||||
'rsrc/css/phui/calendar/phui-calendar-list.css' => 'c1d0ca59',
|
||||
'rsrc/css/phui/calendar/phui-calendar-month.css' => 'a92e47d2',
|
||||
'rsrc/css/phui/calendar/phui-calendar-month.css' => '873e00da',
|
||||
'rsrc/css/phui/calendar/phui-calendar.css' => '8675968e',
|
||||
'rsrc/css/phui/phui-action-header-view.css' => '89c497e7',
|
||||
'rsrc/css/phui/phui-action-list.css' => '4f4d09f2',
|
||||
|
@ -779,7 +779,7 @@ return array(
|
|||
'phui-calendar-css' => '8675968e',
|
||||
'phui-calendar-day-css' => '49037167',
|
||||
'phui-calendar-list-css' => 'c1d0ca59',
|
||||
'phui-calendar-month-css' => 'a92e47d2',
|
||||
'phui-calendar-month-css' => '873e00da',
|
||||
'phui-crumbs-view-css' => '594d719e',
|
||||
'phui-document-view-css' => '94d5dcd8',
|
||||
'phui-feed-story-css' => 'c9f3a0b5',
|
||||
|
|
|
@ -57,8 +57,8 @@ final class PhabricatorCalendarEventSearchEngine
|
|||
$min_range = $this->getDateFrom($saved)->getEpoch();
|
||||
$max_range = $this->getDateTo($saved)->getEpoch();
|
||||
|
||||
if ($saved->getParameter('display') == 'month' ||
|
||||
$saved->getParameter('display') == 'day') {
|
||||
if ($this->isMonthView($saved) ||
|
||||
$this->isDayView($saved)) {
|
||||
list($start_year, $start_month, $start_day) =
|
||||
$this->getDisplayYearAndMonthAndDay($saved);
|
||||
|
||||
|
@ -67,9 +67,9 @@ final class PhabricatorCalendarEventSearchEngine
|
|||
$timezone);
|
||||
$next = clone $start_day;
|
||||
|
||||
if ($saved->getParameter('display') == 'month') {
|
||||
if ($this->isMonthView($saved)) {
|
||||
$next->modify('+1 month');
|
||||
} else if ($saved->getParameter('display') == 'day') {
|
||||
} else if ($this->isDayView($saved)) {
|
||||
$next->modify('+6 day');
|
||||
}
|
||||
|
||||
|
@ -269,9 +269,9 @@ final class PhabricatorCalendarEventSearchEngine
|
|||
PhabricatorSavedQuery $query,
|
||||
array $handles) {
|
||||
|
||||
if ($query->getParameter('display') == 'month') {
|
||||
if ($this->isMonthView($query)) {
|
||||
return $this->buildCalendarView($events, $query, $handles);
|
||||
} else if ($query->getParameter('display') == 'day') {
|
||||
} else if ($this->isDayView($query)) {
|
||||
return $this->buildCalendarDayView($events, $query, $handles);
|
||||
}
|
||||
|
||||
|
@ -358,6 +358,7 @@ final class PhabricatorCalendarEventSearchEngine
|
|||
foreach ($statuses as $status) {
|
||||
$event = new AphrontCalendarEventView();
|
||||
$event->setEpochRange($status->getDateFrom(), $status->getDateTo());
|
||||
$event->setIsAllDay($status->getIsAllDay());
|
||||
|
||||
$name_text = $handles[$status->getUserPHID()]->getName();
|
||||
$status_text = $status->getName();
|
||||
|
@ -430,9 +431,14 @@ final class PhabricatorCalendarEventSearchEngine
|
|||
$epoch = time();
|
||||
}
|
||||
}
|
||||
if ($this->isMonthView($query)) {
|
||||
$day = 1;
|
||||
} else {
|
||||
$day = phabricator_format_local_time($epoch, $viewer, 'd');
|
||||
}
|
||||
$start_year = phabricator_format_local_time($epoch, $viewer, 'Y');
|
||||
$start_month = phabricator_format_local_time($epoch, $viewer, 'm');
|
||||
$start_day = phabricator_format_local_time($epoch, $viewer, 'd');
|
||||
$start_day = $day;
|
||||
}
|
||||
return array($start_year, $start_month, $start_day);
|
||||
}
|
||||
|
@ -467,4 +473,23 @@ final class PhabricatorCalendarEventSearchEngine
|
|||
return $value;
|
||||
}
|
||||
|
||||
private function isMonthView(PhabricatorSavedQuery $query) {
|
||||
if ($this->isDayView($query)) {
|
||||
return false;
|
||||
}
|
||||
if ($query->getParameter('display') == 'month') {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
private function isDayView(PhabricatorSavedQuery $query) {
|
||||
if ($query->getParameter('display') == 'day') {
|
||||
return true;
|
||||
}
|
||||
if ($this->calendarDay) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,12 +4,18 @@ final class PHUICalendarListView extends AphrontTagView {
|
|||
|
||||
private $events = array();
|
||||
private $blankState;
|
||||
private $isDayView = false;
|
||||
|
||||
public function addEvent(AphrontCalendarEventView $event) {
|
||||
$this->events[] = $event;
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function setIsDayView($is_day_view) {
|
||||
$this->isDayView = $is_day_view;
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function showBlankState($state) {
|
||||
$this->blankState = $state;
|
||||
return $this;
|
||||
|
@ -22,7 +28,7 @@ final class PHUICalendarListView extends AphrontTagView {
|
|||
protected function getTagAttributes() {
|
||||
require_celerity_resource('phui-calendar-css');
|
||||
require_celerity_resource('phui-calendar-list-css');
|
||||
return array('class' => 'phui-calendar-day-list');
|
||||
return array('class' => 'phui-calendar-event-list');
|
||||
}
|
||||
|
||||
protected function getTagContent() {
|
||||
|
@ -30,27 +36,28 @@ final class PHUICalendarListView extends AphrontTagView {
|
|||
return '';
|
||||
}
|
||||
|
||||
$events = msort($this->events, 'getEpochStart');
|
||||
|
||||
$singletons = array();
|
||||
$allday = false;
|
||||
foreach ($events as $event) {
|
||||
foreach ($this->events as $event) {
|
||||
$color = $event->getColor();
|
||||
$start_epoch = $event->getEpochStart();
|
||||
|
||||
if ($event->getIsAllDay()) {
|
||||
$timelabel = pht('All Day');
|
||||
$dot = null;
|
||||
} else {
|
||||
$timelabel = phabricator_time(
|
||||
$event->getEpochStart(),
|
||||
$this->getUser());
|
||||
|
||||
$dot = phutil_tag(
|
||||
'span',
|
||||
array(
|
||||
'class' => 'phui-calendar-list-dot',
|
||||
),
|
||||
'');
|
||||
}
|
||||
|
||||
$dot = phutil_tag(
|
||||
'span',
|
||||
array(
|
||||
'class' => 'phui-calendar-list-dot',
|
||||
),
|
||||
'');
|
||||
$title = phutil_tag(
|
||||
'span',
|
||||
array(
|
||||
|
@ -64,10 +71,15 @@ final class PHUICalendarListView extends AphrontTagView {
|
|||
),
|
||||
$timelabel);
|
||||
|
||||
$class = 'phui-calendar-list-item phui-calendar-'.$color;
|
||||
if ($event->getIsAllDay()) {
|
||||
$class = $class.' all-day';
|
||||
}
|
||||
|
||||
$singletons[] = phutil_tag(
|
||||
'li',
|
||||
array(
|
||||
'class' => 'phui-calendar-list-item phui-calendar-'.$color,
|
||||
'class' => $class,
|
||||
),
|
||||
array(
|
||||
$dot,
|
||||
|
@ -112,11 +124,13 @@ final class PHUICalendarListView extends AphrontTagView {
|
|||
$description = pht('(%s)', $event->getName());
|
||||
}
|
||||
|
||||
$class = 'phui-calendar-item-link';
|
||||
|
||||
$anchor = javelin_tag(
|
||||
'a',
|
||||
array(
|
||||
'sigil' => 'has-tooltip',
|
||||
'class' => 'phui-calendar-item-link',
|
||||
'class' => $class,
|
||||
'href' => '/E'.$event->getEventID(),
|
||||
'meta' => array(
|
||||
'tip' => $tip,
|
||||
|
|
|
@ -72,14 +72,14 @@ final class PHUICalendarMonthView extends AphrontView {
|
|||
$empty = $first->format('w');
|
||||
|
||||
$markup = array();
|
||||
|
||||
$empty_box = phutil_tag(
|
||||
'div',
|
||||
array('class' => 'phui-calendar-day phui-calendar-empty'),
|
||||
'');
|
||||
$empty_cell = array(
|
||||
'list' => null,
|
||||
'date' => null,
|
||||
'class' => 'phui-calendar-empty',
|
||||
);
|
||||
|
||||
for ($ii = 0; $ii < $empty; $ii++) {
|
||||
$markup[] = $empty_box;
|
||||
$markup[] = $empty_cell;
|
||||
}
|
||||
|
||||
$show_events = array();
|
||||
|
@ -88,7 +88,7 @@ final class PHUICalendarMonthView extends AphrontView {
|
|||
$day_number = $day->format('j');
|
||||
|
||||
$holiday = idx($this->holidays, $day->format('Y-m-d'));
|
||||
$class = 'phui-calendar-day';
|
||||
$class = 'phui-calendar-month-day';
|
||||
$weekday = $day->format('w');
|
||||
|
||||
if ($day_number == $this->day) {
|
||||
|
@ -102,8 +102,8 @@ final class PHUICalendarMonthView extends AphrontView {
|
|||
$day->setTime(0, 0, 0);
|
||||
$epoch_start = $day->format('U');
|
||||
|
||||
$day->modify('+1 day');
|
||||
$epoch_end = $day->format('U');
|
||||
|
||||
$epoch_end = id(clone $day)->modify('+1 day')->format('U');
|
||||
|
||||
if ($weekday == 0) {
|
||||
$show_events = array();
|
||||
|
@ -116,6 +116,7 @@ final class PHUICalendarMonthView extends AphrontView {
|
|||
}
|
||||
|
||||
$list_events = array();
|
||||
$all_day_events = array();
|
||||
foreach ($events as $event) {
|
||||
if ($event->getEpochStart() >= $epoch_end) {
|
||||
// This list is sorted, so we can stop looking.
|
||||
|
@ -123,57 +124,80 @@ final class PHUICalendarMonthView extends AphrontView {
|
|||
}
|
||||
if ($event->getEpochStart() < $epoch_end &&
|
||||
$event->getEpochEnd() > $epoch_start) {
|
||||
$list_events[] = $event;
|
||||
if ($event->getIsAllDay()) {
|
||||
$all_day_events[] = $event;
|
||||
} else {
|
||||
$list_events[] = $event;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$list = new PHUICalendarListView();
|
||||
$list->setUser($this->user);
|
||||
foreach ($all_day_events as $item) {
|
||||
$list->addEvent($item);
|
||||
}
|
||||
foreach ($list_events as $item) {
|
||||
$list->addEvent($item);
|
||||
}
|
||||
|
||||
$holiday_markup = null;
|
||||
if ($holiday) {
|
||||
$name = $holiday->getName();
|
||||
$holiday_markup = phutil_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'phui-calendar-holiday',
|
||||
'title' => $name,
|
||||
),
|
||||
$name);
|
||||
}
|
||||
|
||||
$markup[] = phutil_tag_div(
|
||||
$class,
|
||||
array(
|
||||
phutil_tag_div('phui-calendar-date-number', $day_number),
|
||||
$holiday_markup,
|
||||
$list,
|
||||
));
|
||||
$markup[] = array(
|
||||
'list' => $list,
|
||||
'date' => $day,
|
||||
'class' => $class,
|
||||
);
|
||||
}
|
||||
|
||||
$table = array();
|
||||
$rows = array_chunk($markup, 7);
|
||||
|
||||
foreach ($rows as $row) {
|
||||
$cells = array();
|
||||
while (count($row) < 7) {
|
||||
$row[] = $empty_box;
|
||||
$row[] = $empty_cell;
|
||||
}
|
||||
$j = 0;
|
||||
foreach ($row as $cell) {
|
||||
if ($j == 0) {
|
||||
$cells[] = phutil_tag(
|
||||
'td',
|
||||
$cell_list = $cell['list'];
|
||||
$class = $cell['class'];
|
||||
$cells[] = phutil_tag(
|
||||
'td',
|
||||
array(
|
||||
'class' => 'phui-calendar-month-event-list '.$class,
|
||||
),
|
||||
$cell_list);
|
||||
}
|
||||
$table[] = phutil_tag('tr', array(), $cells);
|
||||
|
||||
$cells = array();
|
||||
foreach ($row as $cell) {
|
||||
$class = $cell['class'];
|
||||
|
||||
if ($cell['date']) {
|
||||
$cell_day = $cell['date'];
|
||||
|
||||
$uri = $this->getBrowseURI();
|
||||
$date = $cell['date'];
|
||||
$uri = $uri.$date->format('Y').'/'.
|
||||
$date->format('m').'/'.
|
||||
$date->format('d').'/';
|
||||
|
||||
$cell_day = phutil_tag(
|
||||
'a',
|
||||
array(
|
||||
'class' => 'phui-calendar-month-weekstart',
|
||||
'class' => 'phui-calendar-date-number',
|
||||
'href' => $uri,
|
||||
),
|
||||
$cell);
|
||||
$cell_day->format('j'));
|
||||
} else {
|
||||
$cells[] = phutil_tag('td', array(), $cell);
|
||||
$cell_day = null;
|
||||
}
|
||||
$j++;
|
||||
|
||||
$cells[] = phutil_tag(
|
||||
'td',
|
||||
array(
|
||||
'class' => 'phui-calendar-date-number-container '.$class,
|
||||
),
|
||||
$cell_day);
|
||||
}
|
||||
$table[] = phutil_tag('tr', array(), $cells);
|
||||
}
|
||||
|
|
|
@ -17,40 +17,36 @@ tr.phui-calendar-day-of-week-header th {
|
|||
}
|
||||
|
||||
table.phui-calendar-view td {
|
||||
border: 1px solid #dfdfdf;
|
||||
border: solid #dfdfdf;
|
||||
border-width: 1px 1px 0 1px;
|
||||
width: 14.2857%; /* This is one seventh, approximately. */
|
||||
}
|
||||
|
||||
table.phui-calendar-view td div.phui-calendar-day {
|
||||
table.phui-calendar-view tr td:first-child {
|
||||
border-left-width: 0px;
|
||||
}
|
||||
|
||||
table.phui-calendar-view .phui-calendar-event-list {
|
||||
min-height: 125px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.phui-calendar-holiday {
|
||||
color: {$greytext};
|
||||
padding: .5em;
|
||||
max-height: 1em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
table.phui-calendar-view td.phui-calendar-month-weekstart {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.phui-calendar-date-number {
|
||||
font-weight: normal;
|
||||
table.phui-calendar-view a.phui-calendar-date-number {
|
||||
color: {$lightgreytext};
|
||||
padding: 4px;
|
||||
border-color: {$thinblueborder};
|
||||
border-style: solid;
|
||||
border-width: 0 0 1px 1px;
|
||||
position: absolute;
|
||||
background: #ffffff;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-width: 1px 0 0 1px;
|
||||
padding: 4px;
|
||||
display: inline-block;
|
||||
min-width: 16px;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
table.phui-calendar-view td.phui-calendar-date-number-container {
|
||||
font-weight: normal;
|
||||
color: {$lightgreytext};
|
||||
border-width: 0 1px 0 1px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.phui-calendar-not-work-day {
|
||||
|
@ -71,11 +67,30 @@ table.phui-calendar-view td.phui-calendar-month-weekstart {
|
|||
}
|
||||
|
||||
.phui-calendar-view .phui-calendar-list {
|
||||
padding: 8px;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.phui-calendar-list-item.all-day span {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.phui-calendar-view .phui-calendar-list li.phui-calendar-list-item.all-day {
|
||||
margin: 0;
|
||||
padding: 4px 8px;
|
||||
background-color: {$lightpink};
|
||||
}
|
||||
|
||||
li.phui-calendar-list-item.all-day:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.phui-calendar-view .phui-calendar-list li {
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.phui-calendar-view .phui-calendar-list li:first-child {
|
||||
margin-right: 16px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.phui-calendar-view .phui-calendar-list-dot {
|
||||
|
@ -95,6 +110,10 @@ table.phui-calendar-view td.phui-calendar-month-weekstart {
|
|||
word-break: break-word;
|
||||
}
|
||||
|
||||
li.phui-calendar-list-item.all-day .phui-calendar-list-title a{
|
||||
color: {$pink};
|
||||
}
|
||||
|
||||
.phui-calendar-view .phui-calendar-list-time {
|
||||
display: none;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue