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

resources/celerity/map.php

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

src/applications/calendar/query/PhabricatorCalendarEventSearchEngine.php

@@ -57,8 +57,8 @@ final class PhabricatorCalendarEventSearchEngine
     $min_range = $this->getDateFrom($saved)->getEpoch();
     $max_range = $this->getDateTo($saved)->getEpoch();
 
-    if ($saved->getParameter('display') == 'month' ||
+    if ($this->isMonthView($saved) ||
-      $saved->getParameter('display') == 'day') {
+      $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;
+  }
 }

src/view/phui/calendar/PHUICalendarListView.php

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

src/view/phui/calendar/PHUICalendarMonthView.php

@@ -72,14 +72,14 @@ final class PHUICalendarMonthView extends AphrontView {
     $empty = $first->format('w');
 
     $markup = array();
-
+    $empty_cell = array(
-    $empty_box = phutil_tag(
+        'list' => null,
-      'div',
+        'date' => null,
-      array('class' => 'phui-calendar-day phui-calendar-empty'),
+        '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;
+      $markup[] = array(
-      if ($holiday) {
+        'list' => $list,
-        $name = $holiday->getName();
+        'date' => $day,
-        $holiday_markup = phutil_tag(
+        'class' => $class,
-          '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,
-        ));
     }
 
     $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) {
+        $cell_list = $cell['list'];
-          $cells[] = phutil_tag(
+        $class = $cell['class'];
-            'td',
+        $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);
     }

webroot/rsrc/css/phui/calendar/phui-calendar-month.css

@@ -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 {
+table.phui-calendar-view a.phui-calendar-date-number {
-  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;
   color: {$lightgreytext};
-  padding: 4px;
   border-color: {$thinblueborder};
   border-style: solid;
-  border-width: 0 0 1px 1px;
+  border-width: 1px 0 0 1px;
-  position: absolute;
+  padding: 4px;
-  background: #ffffff;
+  display: inline-block;
-  width: 16px;
+  min-width: 16px;
-  height: 16px;
   text-align: center;
-  top: 0;
+  background-color: #ffffff;
-  right: 0;
+}
+
+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;
 }