1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-28 16:30:59 +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:
lkassianik 2015-05-11 18:15:27 -07:00
parent b53ecd0d42
commit c4dfc097c8
5 changed files with 167 additions and 85 deletions

View file

@ -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',

View file

@ -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;
}
}

View file

@ -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,

View file

@ -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);
}

View file

@ -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;
}