Modernize Calendar View

Summary: Updates Calendar View to more modern components.

Test Plan: Browse Calendar Forward and Back, Create a Status, Get Excited, Get PUMPED.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: Korvin, epriestley, aran

Maniphest Tasks: T4392

Differential Revision: https://secure.phabricator.com/D8247

resources/celerity/map.php

@@ -19,7 +19,6 @@ return array(
     'maniphest.pkg.js' => '1e8f11af',
     'rsrc/css/aphront/aphront-bars.css' => '231ac33c',
     'rsrc/css/aphront/aphront-notes.css' => '6acadd3f',
-    'rsrc/css/aphront/calendar-view.css' => '166af03d',
     'rsrc/css/aphront/context-bar.css' => '1c3b0529',
     'rsrc/css/aphront/dark-console.css' => '6378ef3d',
     'rsrc/css/aphront/dialog-view.css' => 'dd9db96c',
@@ -126,6 +125,7 @@ return array(
     'rsrc/css/layout/phabricator-source-code-view.css' => '62a99814',
     'rsrc/css/phui/phui-box.css' => '6c21bd6a',
     'rsrc/css/phui/phui-button.css' => '8784a966',
+    'rsrc/css/phui/phui-calendar-month.css' => '3474d15a',
     'rsrc/css/phui/phui-document.css' => '143b2ac8',
     'rsrc/css/phui/phui-feed-story.css' => '3a59c2cf',
     'rsrc/css/phui/phui-form-view.css' => '0efd3326',
@@ -478,7 +478,6 @@ return array(
   'symbols' =>
   array(
     'aphront-bars' => '231ac33c',
-    'aphront-calendar-view-css' => '166af03d',
     'aphront-contextbar-view-css' => '1c3b0529',
     'aphront-dark-console-css' => '6378ef3d',
     'aphront-dialog-view-css' => 'dd9db96c',
@@ -738,6 +737,7 @@ return array(
     'phriction-document-css' => 'b0309d8e',
     'phui-box-css' => '6c21bd6a',
     'phui-button-css' => '8784a966',
+    'phui-calendar-month-css' => '3474d15a',
     'phui-document-view-css' => '143b2ac8',
     'phui-feed-story-css' => '3a59c2cf',
     'phui-form-css' => 'b78ec020',

src/__phutil_library_map__.php

@@ -20,7 +20,6 @@ phutil_register_library_map(array(
     'AphrontBarView' => 'view/widget/bars/AphrontBarView.php',
     'AphrontCSRFException' => 'aphront/exception/AphrontCSRFException.php',
     'AphrontCalendarEventView' => 'applications/calendar/view/AphrontCalendarEventView.php',
-    'AphrontCalendarMonthView' => 'applications/calendar/view/AphrontCalendarMonthView.php',
     'AphrontContextBarView' => 'view/layout/AphrontContextBarView.php',
     'AphrontController' => 'aphront/AphrontController.php',
     'AphrontCursorPagerView' => 'view/control/AphrontCursorPagerView.php',
@@ -983,6 +982,7 @@ phutil_register_library_map(array(
     'PHUIButtonBarView' => 'view/phui/PHUIButtonBarView.php',
     'PHUIButtonExample' => 'applications/uiexample/examples/PHUIButtonExample.php',
     'PHUIButtonView' => 'view/phui/PHUIButtonView.php',
+    'PHUICalendarMonthView' => 'applications/calendar/view/PHUICalendarMonthView.php',
     'PHUIColorPalletteExample' => 'applications/uiexample/examples/PHUIColorPalletteExample.php',
     'PHUIDocumentExample' => 'applications/uiexample/examples/PHUIDocumentExample.php',
     'PHUIDocumentView' => 'view/phui/PHUIDocumentView.php',
@@ -2549,7 +2549,6 @@ phutil_register_library_map(array(
     'AphrontBarView' => 'AphrontView',
     'AphrontCSRFException' => 'AphrontException',
     'AphrontCalendarEventView' => 'AphrontView',
-    'AphrontCalendarMonthView' => 'AphrontView',
     'AphrontContextBarView' => 'AphrontView',
     'AphrontController' => 'Phobject',
     'AphrontCursorPagerView' => 'AphrontView',
@@ -3613,6 +3612,7 @@ phutil_register_library_map(array(
     'PHUIButtonBarView' => 'AphrontTagView',
     'PHUIButtonExample' => 'PhabricatorUIExample',
     'PHUIButtonView' => 'AphrontTagView',
+    'PHUICalendarMonthView' => 'AphrontView',
     'PHUIColorPalletteExample' => 'PhabricatorUIExample',
     'PHUIDocumentExample' => 'PhabricatorUIExample',
     'PHUIDocumentView' => 'AphrontTagView',

src/applications/calendar/controller/PhabricatorCalendarBrowseController.php

@@ -27,9 +27,9 @@ final class PhabricatorCalendarBrowseController
       ->execute();
 
     if ($month == $month_d && $year == $year_d) {
-      $month_view = new AphrontCalendarMonthView($month, $year, $day);
+      $month_view = new PHUICalendarMonthView($month, $year, $day);
     } else {
-      $month_view = new AphrontCalendarMonthView($month, $year);
+      $month_view = new PHUICalendarMonthView($month, $year);
     }
 
     $month_view->setBrowseURI($request->getRequestURI());
@@ -62,7 +62,7 @@ final class PhabricatorCalendarBrowseController
     $nav->appendChild(
       array(
         $this->getNoticeView(),
-        phutil_tag('div', array('style' => 'padding: 20px;'), $month_view),
+        $month_view,
       ));
 
     return $this->buildApplicationPage(

src/applications/calendar/view/PHUICalendarMonthView.php

@@ -1,6 +1,6 @@
 <?php
 
-final class AphrontCalendarMonthView extends AphrontView {
+final class PHUICalendarMonthView extends AphrontView {
 
   private $day;
   private $month;
@@ -43,7 +43,7 @@ final class AphrontCalendarMonthView extends AphrontView {
 
     $days = $this->getDatesInMonth();
 
-    require_celerity_resource('aphront-calendar-view-css');
+    require_celerity_resource('phui-calendar-month-css');
 
     $first = reset($days);
     $empty = $first->format('w');
@@ -52,7 +52,7 @@ final class AphrontCalendarMonthView extends AphrontView {
 
     $empty_box = phutil_tag(
       'div',
-      array('class' => 'aphront-calendar-day aphront-calendar-empty'),
+      array('class' => 'phui-calendar-day phui-calendar-empty'),
       '');
 
     for ($ii = 0; $ii < $empty; $ii++) {
@@ -65,15 +65,15 @@ final class AphrontCalendarMonthView extends AphrontView {
       $day_number = $day->format('j');
 
       $holiday = idx($this->holidays, $day->format('Y-m-d'));
-      $class = 'aphront-calendar-day';
+      $class = 'phui-calendar-day';
       $weekday = $day->format('w');
 
       if ($day_number == $this->day) {
-        $class .= ' aphront-calendar-today';
+        $class .= ' phui-calendar-today';
       }
 
       if ($holiday || $weekday == 0 || $weekday == 6) {
-        $class .= ' aphront-calendar-not-work-day';
+        $class .= ' phui-calendar-not-work-day';
       }
 
       $day->setTime(0, 0, 0);
@@ -88,7 +88,7 @@ final class AphrontCalendarMonthView extends AphrontView {
         $show_events = array_fill_keys(
           array_keys($show_events),
           phutil_tag_div(
-            'aphront-calendar-event aphront-calendar-event-empty',
+            'phui-calendar-event phui-calendar-event-empty',
             "\xC2\xA0")); // &nbsp;
       }
 
@@ -112,7 +112,7 @@ final class AphrontCalendarMonthView extends AphrontView {
         $holiday_markup = phutil_tag(
           'div',
           array(
-            'class' => 'aphront-calendar-holiday',
+            'class' => 'phui-calendar-holiday',
             'title' => $name,
           ),
           $name);
@@ -121,7 +121,7 @@ final class AphrontCalendarMonthView extends AphrontView {
       $markup[] = phutil_tag_div(
         $class,
         array(
-          phutil_tag_div('aphront-calendar-date-number', $day_number),
+          phutil_tag_div('phui-calendar-date-number', $day_number),
           $holiday_markup,
           phutil_implode_html("\n", $show_events),
         ));
@@ -134,15 +134,25 @@ final class AphrontCalendarMonthView extends AphrontView {
       while (count($row) < 7) {
         $row[] = $empty_box;
       }
+      $j = 0;
       foreach ($row as $cell) {
+        if ($j == 0) {
+          $cells[] = phutil_tag(
+            'td',
+            array(
+              'class' => 'phui-calendar-month-weekstart'),
+            $cell);
+        } else {
           $cells[] = phutil_tag('td', array(), $cell);
         }
+        $j++;
+      }
       $table[] = phutil_tag('tr', array(), $cells);
     }
 
     $header = phutil_tag(
       'tr',
-      array('class' => 'aphront-calendar-day-of-week-header'),
+      array('class' => 'phui-calendar-day-of-week-header'),
       array(
         phutil_tag('th', array(), pht('Sun')),
         phutil_tag('th', array(), pht('Mon')),
@@ -155,52 +165,69 @@ final class AphrontCalendarMonthView extends AphrontView {
 
     $table = phutil_tag(
       'table',
-      array('class' => 'aphront-calendar-view'),
+      array('class' => 'phui-calendar-view'),
       array(
-        $this->renderCalendarHeader($first),
         $header,
         phutil_implode_html("\n", $table),
       ));
 
-    return $table;
+    $box = id(new PHUIObjectBoxView())
+      ->setHeader($this->renderCalendarHeader($first))
+      ->appendChild($table);
+
+    return $box;
   }
 
   private function renderCalendarHeader(DateTime $date) {
-    $colspan = 7;
-    $left_th = '';
-    $right_th = '';
+    $button_bar = null;
 
     // check for a browseURI, which means we need "fancy" prev / next UI
     $uri = $this->getBrowseURI();
     if ($uri) {
-      $colspan = 5;
       $uri = new PhutilURI($uri);
       list($prev_year, $prev_month) = $this->getPrevYearAndMonth();
       $query = array('year' => $prev_year, 'month' => $prev_month);
-      $prev_link = phutil_tag(
-        'a',
-        array('href' => (string) $uri->setQueryParams($query)),
-        "\xE2\x86\x90");
+      $prev_uri = (string) $uri->setQueryParams($query);
 
       list($next_year, $next_month) = $this->getNextYearAndMonth();
       $query = array('year' => $next_year, 'month' => $next_month);
-      $next_link = phutil_tag(
-        'a',
-        array('href' => (string) $uri->setQueryParams($query)),
-        "\xE2\x86\x92");
+      $next_uri = (string) $uri->setQueryParams($query);
+
+      $button_bar = new PHUIButtonBarView();
+
+      $left_icon = id(new PHUIIconView())
+          ->setSpriteSheet(PHUIIconView::SPRITE_BUTTONBAR)
+          ->setSpriteIcon('chevron-left');
+      $left = id(new PHUIButtonView())
+        ->setTag('a')
+        ->setColor(PHUIButtonView::GREY)
+        ->setHref($prev_uri)
+        ->setTitle(pht('Previous Month'))
+        ->setIcon($left_icon);
+
+      $right_icon = id(new PHUIIconView())
+          ->setSpriteSheet(PHUIIconView::SPRITE_BUTTONBAR)
+          ->setSpriteIcon('chevron-right');
+      $right = id(new PHUIButtonView())
+        ->setTag('a')
+        ->setColor(PHUIButtonView::GREY)
+        ->setHref($next_uri)
+        ->setTitle(pht('Next Month'))
+        ->setIcon($right_icon);
+
+      $button_bar->addButton($left);
+      $button_bar->addButton($right);
 
-      $left_th = phutil_tag('th', array(), $prev_link);
-      $right_th = phutil_tag('th', array(), $next_link);
     }
 
-    return phutil_tag(
-      'tr',
-      array('class' => 'aphront-calendar-month-year-header'),
-      array(
-        $left_th,
-        phutil_tag('th', array('colspan' => $colspan), $date->format('F Y')),
-        $right_th,
-      ));
+    $header = id(new PHUIHeaderView())
+      ->setHeader($date->format('F Y'));
+
+    if ($button_bar) {
+      $header->setButtonBar($button_bar);
+    }
+
+    return $header;
   }
 
   private function getNextYearAndMonth() {
@@ -279,16 +306,16 @@ final class AphrontCalendarMonthView extends AphrontView {
     $classes = array();
     $when = array();
 
-    $classes[] = 'aphront-calendar-event';
+    $classes[] = 'phui-calendar-event';
     if ($event_start < $epoch_start) {
-      $classes[] = 'aphront-calendar-event-continues-before';
+      $classes[] = 'phui-calendar-event-continues-before';
       $when[] = 'Started '.phabricator_datetime($event_start, $user);
     } else {
       $when[] = 'Starts at '.phabricator_time($event_start, $user);
     }
 
     if ($event_end > $epoch_end) {
-      $classes[] = 'aphront-calendar-event-continues-after';
+      $classes[] = 'phui-calendar-event-continues-after';
       $when[] = 'Ends '.phabricator_datetime($event_end, $user);
     } else {
       $when[] = 'Ends at '.phabricator_time($event_end, $user);
@@ -309,7 +336,7 @@ final class AphrontCalendarMonthView extends AphrontView {
           'tip'  => $info."\n\n".implode("\n", $when),
           'size' => 240,
         ),
-        'class' => 'aphront-calendar-event-text',
+        'class' => 'phui-calendar-event-text',
         'href' => '/calendar/event/view/'.$event->getEventID().'/',
       ),
       phutil_utf8_shorten($event->getName(), 32));

src/view/phui/PHUIHeaderView.php

@@ -14,6 +14,7 @@ final class PHUIHeaderView extends AphrontView {
   private $bleedHeader;
   private $properties = array();
   private $actionLinks = array();
+  private $buttonBar = null;
   private $policyObject;
 
   public function setHeader($header) {
@@ -71,6 +72,11 @@ final class PHUIHeaderView extends AphrontView {
     return $this;
   }
 
+  public function setButtonBar(PHUIButtonBarView $bb) {
+    $this->buttonBar = $bb;
+    return $this;
+  }
+
   public function setStatus($icon, $color, $name) {
     $header_class = 'phui-header-status';
 
@@ -206,6 +212,15 @@ final class PHUIHeaderView extends AphrontView {
         $actions);
     }
 
+    if ($this->buttonBar) {
+      $header[] = phutil_tag(
+        'div',
+        array(
+          'class' => 'phui-header-action-links',
+        ),
+        $this->buttonBar);
+    }
+
     return phutil_tag(
       'div',
       array(

webroot/rsrc/css/aphront/calendar-view.css

@@ -1,124 +0,0 @@
-/**
- * @provides aphront-calendar-view-css
- */
-
-.aphront-calendar-view {
-  width: 100%;
-  border-collapse: collapse;
-  background: #fff;
-  border: 2px solid #4f3612;
-  box-shadow: 0px 2px 6px #ccc;
-}
-
-tr.aphront-calendar-month-year-header th {
-  text-align: center;
-  font-weight: bold;
-  font-size: 20px;
-  padding: 10px;
-  color: white;
-  background: #4f3612;
-  height: 26px;
-
-}
-
-tr.aphront-calendar-month-year-header th a {
-  color: white;
-  font-weight: bold;
-  text-decoration: none;
-  display: block;
-}
-
-tr.aphront-calendar-month-year-header th a:hover {
-  color: #feffd0;
-}
-
-tr.aphront-calendar-day-of-week-header th {
-  text-align: center;
-  font-size: 11px;
-  padding: 3px;
-  color: white;
-  background: #896c45;
-}
-
-table.aphront-calendar-view td {
-  border: 1px solid #dfdfdf;
-  width: 14.2857%; /* This is one seventh, approximately. */
-}
-
-table.aphront-calendar-view td div.aphront-calendar-day {
-  min-height: 125px;
-}
-
-.aphront-calendar-holiday {
-  color: {$greytext};
-  padding: .5em;
-  max-height: 1em;
-  overflow: hidden;
-}
-
-.aphront-calendar-date-number {
-  font-weight: normal;
-  color: {$lightgreytext};
-  padding: 4px;
-  border-color: #dfdfdf;
-  border-style: solid;
-  border-width: 0 0 1px 1px;
-  float: right;
-  background: #ffffff;
-  width: 1.25em;
-  height: 1.25em;
-  text-align: center;
-  margin-bottom: 3px;
-}
-
-.aphront-calendar-not-work-day {
-  background-color: #fdfae7;
-}
-
-.aphront-calendar-today {
-  background-color: #A6FAAD;
-}
-
-.aphront-calendar-empty {
-  background-color: #ededed;
-}
-
-.aphront-calendar-event {
-  clear: both;
-
-  background: #006799;
-  font-size: 11px;
-  margin: 2px 0;
-  border-radius: 10px;
-  padding: 3px 5%;
-  width: 90%;
-  overflow: hidden;
-}
-
-.aphront-calendar-event a:link {
-  color: #fff;
-}
-
-.aphront-calendar-event-empty {
-  border-color: transparent;
-  background: transparent;
-}
-
-.aphront-calendar-event-text {
-  color: #fff;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-
-.aphront-calendar-event-continues-before {
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 0px;
-  border-left-width: 0px;
-}
-
-.aphront-calendar-event-continues-after {
-  border-top-right-radius: 0px;
-  border-bottom-right-radius: 0px;
-  border-right-width: 0px;
-}

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

@@ -0,0 +1,102 @@
+/**
+ * @provides phui-calendar-month-css
+ */
+
+.phui-calendar-view {
+  width: 100%;
+  border-collapse: collapse;
+  background: #fff;
+}
+
+tr.phui-calendar-day-of-week-header th {
+  text-align: center;
+  font-size: 11px;
+  padding: 3px;
+  color: {$lightbluetext};
+  background: {$lightgreybackground};
+}
+
+table.phui-calendar-view td {
+  border: 1px solid #dfdfdf;
+  width: 14.2857%; /* This is one seventh, approximately. */
+}
+
+table.phui-calendar-view td div.phui-calendar-day {
+  min-height: 125px;
+}
+
+.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;
+  color: {$lightgreytext};
+  padding: 4px;
+  border-color: {$thinblueborder};
+  border-style: solid;
+  border-width: 0 0 1px 1px;
+  float: right;
+  background: #ffffff;
+  width: 16px;
+  height: 16px;
+  text-align: center;
+  margin-bottom: 3px;
+}
+
+.phui-calendar-not-work-day {
+  background-color: {$lightgreybackground};
+}
+
+.phui-calendar-today {
+  background-color: {$lightgreen};
+}
+
+.phui-calendar-empty {
+  background-color: {$greybackground};
+}
+
+.phui-calendar-event {
+  clear: both;
+  background: {$sky};
+  font-size: 11px;
+  margin: 2px 0;
+  border-radius: 3px;
+  padding: 3px 5%;
+  width: 90%;
+  overflow: hidden;
+}
+
+.phui-calendar-event a:link {
+  color: #fff;
+}
+
+.phui-calendar-event-empty {
+  border-color: transparent;
+  background: transparent;
+}
+
+.phui-calendar-event-text {
+  color: #fff;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.phui-calendar-event-continues-before {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+  border-left-width: 0px;
+}
+
+.phui-calendar-event-continues-after {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+  border-right-width: 0px;
+}