Make Calendar month view events render a little more consistently

Summary:
Ref T11326. This just inches things forward a little bit:

  - Make it easier to see current day.
  - Line-through cancelled events.
  - Don't colorize the whole event title, just use an Attending/Invited/Custom icon.
  - Slightly subtler treatment for all-day events.

Test Plan: See screenshot in T11326.

Reviewers: chad

Reviewed By: chad

Maniphest Tasks: T11326

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

resources/celerity/map.php

@@ -117,8 +117,8 @@ return array(
     'rsrc/css/layout/phabricator-source-code-view.css' => 'cbeef983',
     'rsrc/css/phui/calendar/phui-calendar-day.css' => 'd1cf6f93',
     'rsrc/css/phui/calendar/phui-calendar-list.css' => '56e6381a',
-    'rsrc/css/phui/calendar/phui-calendar-month.css' => '476be7e0',
-    'rsrc/css/phui/calendar/phui-calendar.css' => 'ccabe893',
+    'rsrc/css/phui/calendar/phui-calendar-month.css' => 'f3bb2030',
+    'rsrc/css/phui/calendar/phui-calendar.css' => '3354bbd6',
     'rsrc/css/phui/phui-action-list.css' => 'c5eba19d',
     'rsrc/css/phui/phui-action-panel.css' => '91c7b835',
     'rsrc/css/phui/phui-badge.css' => '3baef8db',
@@ -825,10 +825,10 @@ return array(
     'phui-big-info-view-css' => 'bd903741',
     'phui-box-css' => '5c8387cf',
     'phui-button-css' => '4a5fbe3d',
-    'phui-calendar-css' => 'ccabe893',
+    'phui-calendar-css' => '3354bbd6',
     'phui-calendar-day-css' => 'd1cf6f93',
     'phui-calendar-list-css' => '56e6381a',
-    'phui-calendar-month-css' => '476be7e0',
+    'phui-calendar-month-css' => 'f3bb2030',
     'phui-chart-css' => '6bf6f78e',
     'phui-crumbs-view-css' => '6b813619',
     'phui-curtain-view-css' => '7148ae25',

src/applications/calendar/query/PhabricatorCalendarEventSearchEngine.php

@@ -255,7 +255,7 @@ final class PhabricatorCalendarEventSearchEngine
     array $handles) {
 
     if ($this->isMonthView($query)) {
-      return $this->buildCalendarView($events, $query, $handles);
+      return $this->buildCalendarView($events, $query);
     } else if ($this->isDayView($query)) {
       return $this->buildCalendarDayView($events, $query, $handles);
     }
@@ -283,32 +283,14 @@ final class PhabricatorCalendarEventSearchEngine
       $item->addAttribute($event->renderEventDate($viewer, false));
 
       if ($event->isCancelledEvent()) {
-        $status_icon = 'fa-times red';
-        $status_label = pht('Cancelled');
         $item->setDisabled(true);
-      } else if ($viewer->isLoggedIn()) {
-        $status = $event->getUserInviteStatus($viewer->getPHID());
-        switch ($status) {
-          case PhabricatorCalendarEventInvitee::STATUS_ATTENDING:
-            $status_icon = 'fa-check-circle green';
-            $status_label = pht('Attending');
-            break;
-          case PhabricatorCalendarEventInvitee::STATUS_INVITED:
-            $status_icon = 'fa-user-plus green';
-            $status_label = pht('Invited');
-            break;
-          case PhabricatorCalendarEventInvitee::STATUS_DECLINED:
-            $status_icon = 'fa-times grey';
-            $status_label = pht('Declined');
-            break;
-          default:
-            $status_icon = $event->getIcon().' grey';
-            $status_label = null;
-            break;
-        }
       }
 
-      $item->setStatusIcon($status_icon, $status_label);
+      $status_icon = $event->getDisplayIcon($viewer);
+      $status_color = $event->getDisplayIconColor($viewer);
+      $status_label = $event->getDisplayIconLabel($viewer);
+
+      $item->setStatusIcon("{$status_icon} {$status_color}", $status_label);
 
       $host = pht(
         'Hosted by %s',
@@ -326,12 +308,12 @@ final class PhabricatorCalendarEventSearchEngine
   }
 
   private function buildCalendarView(
-    array $statuses,
-    PhabricatorSavedQuery $query,
-    array $handles) {
+    array $events,
+    PhabricatorSavedQuery $query) {
+    assert_instances_of($events, 'PhabricatorCalendarEvent');
 
     $viewer = $this->requireViewer();
-    $now = time();
+    $now = PhabricatorTime::getNow();
 
     list($start_year, $start_month) =
       $this->getDisplayYearAndMonthAndDay(
@@ -360,27 +342,21 @@ final class PhabricatorCalendarEventSearchEngine
 
     $month_view->setUser($viewer);
 
-    $phids = mpull($statuses, 'getHostPHID');
-    $handles = $viewer->loadHandles($phids);
+    foreach ($events as $event) {
+      $epoch_min = $event->getViewerDateFrom();
+      $epoch_max = $event->getViewerDateTo();
 
-    foreach ($statuses as $status) {
-      $viewer_is_invited = $status->getIsUserInvited($viewer->getPHID());
+      $event_view = id(new AphrontCalendarEventView())
+        ->setHostPHID($event->getHostPHID())
+        ->setEpochRange($epoch_min, $epoch_max)
+        ->setIsCancelled($event->isCancelledEvent())
+        ->setName($event->getName())
+        ->setURI($event->getURI())
+        ->setIsAllDay($event->getIsAllDay())
+        ->setIcon($event->getDisplayIcon($viewer))
+        ->setIconColor($event->getDisplayIconColor($viewer));
 
-      $event = new AphrontCalendarEventView();
-      $event->setEpochRange(
-        $status->getViewerDateFrom(),
-        $status->getViewerDateTo());
-      $event->setIsAllDay($status->getIsAllDay());
-      $event->setIcon($status->getIcon());
-
-      $name_text = $handles[$status->getHostPHID()]->getName();
-      $status_text = $status->getName();
-      $event->setHostPHID($status->getHostPHID());
-      $event->setDescription(pht('%s (%s)', $name_text, $status_text));
-      $event->setName($status_text);
-      $event->setURI($status->getURI());
-      $event->setViewerIsInvited($viewer_is_invited);
-      $month_view->addEvent($event);
+      $month_view->addEvent($event_view);
     }
 
     $month_view->setBrowseURI(

src/applications/calendar/storage/PhabricatorCalendarEvent.php

@@ -531,6 +531,66 @@ final class PhabricatorCalendarEvent extends PhabricatorCalendarDAO
   }
 
 
+  public function getDisplayIcon(PhabricatorUser $viewer) {
+    if ($this->isCancelledEvent()) {
+      return 'fa-times';
+    }
+
+    if ($viewer->isLoggedIn()) {
+      $status = $this->getUserInviteStatus($viewer->getPHID());
+      switch ($status) {
+        case PhabricatorCalendarEventInvitee::STATUS_ATTENDING:
+          return 'fa-check-circle';
+        case PhabricatorCalendarEventInvitee::STATUS_INVITED:
+          return 'fa-user-plus';
+        case PhabricatorCalendarEventInvitee::STATUS_DECLINED:
+          return 'fa-times';
+      }
+    }
+
+    return $this->getIcon();
+  }
+
+  public function getDisplayIconColor(PhabricatorUser $viewer) {
+    if ($this->isCancelledEvent()) {
+      return 'red';
+    }
+
+    if ($viewer->isLoggedIn()) {
+      $status = $this->getUserInviteStatus($viewer->getPHID());
+      switch ($status) {
+        case PhabricatorCalendarEventInvitee::STATUS_ATTENDING:
+          return 'green';
+        case PhabricatorCalendarEventInvitee::STATUS_INVITED:
+          return 'green';
+        case PhabricatorCalendarEventInvitee::STATUS_DECLINED:
+          return 'grey';
+      }
+    }
+
+    return 'bluegrey';
+  }
+
+  public function getDisplayIconLabel(PhabricatorUser $viewer) {
+    if ($this->isCancelledEvent()) {
+      return pht('Cancelled');
+    }
+
+    if ($viewer->isLoggedIn()) {
+      $status = $this->getUserInviteStatus($viewer->getPHID());
+      switch ($status) {
+        case PhabricatorCalendarEventInvitee::STATUS_ATTENDING:
+          return pht('Attending');
+        case PhabricatorCalendarEventInvitee::STATUS_INVITED:
+          return pht('Invited');
+        case PhabricatorCalendarEventInvitee::STATUS_DECLINED:
+          return pht('Declined');
+      }
+    }
+
+    return null;
+  }
+
 
 /* -(  Markup Interface  )--------------------------------------------------- */
 

src/applications/calendar/view/AphrontCalendarEventView.php

@@ -12,7 +12,27 @@ final class AphrontCalendarEventView extends AphrontView {
   private $uri;
   private $isAllDay;
   private $icon;
+  private $iconColor;
   private $canEdit;
+  private $isCancelled;
+
+  public function setIconColor($icon_color) {
+    $this->iconColor = $icon_color;
+    return $this;
+  }
+
+  public function getIconColor() {
+    return $this->iconColor;
+  }
+
+  public function setIsCancelled($is_cancelled) {
+    $this->isCancelled = $is_cancelled;
+    return $this;
+  }
+
+  public function getIsCancelled() {
+    return $this->isCancelled;
+  }
 
   public function setURI($uri) {
     $this->uri = $uri;

src/view/phui/calendar/PHUICalendarListView.php

@@ -53,14 +53,11 @@ final class PHUICalendarListView extends AphrontTagView {
           $this->getUser());
       }
 
-      if ($event->getViewerIsInvited()) {
-        $icon_color = 'green';
-      } else {
-        $icon_color = null;
-      }
+      $icon_icon = $event->getIcon();
+      $icon_color = $event->getIconColor();
 
       $dot = id(new PHUIIconView())
-        ->setIcon($event->getIcon(), $icon_color)
+        ->setIcon($icon_icon, $icon_color)
         ->addClass('phui-calendar-list-item-icon');
 
       $title = phutil_tag(
@@ -76,12 +73,14 @@ final class PHUICalendarListView extends AphrontTagView {
         ),
         $timelabel);
 
-      $class = 'phui-calendar-list-item';
-      if ($event->getViewerIsInvited()) {
-        $class = $class.' phui-calendar-viewer-invited';
-      }
+      $event_classes = array();
+      $event_classes[] = 'phui-calendar-list-item';
       if ($event->getIsAllDay()) {
-        $class = $class.' all-day';
+        $event_classes[] = 'all-day';
+      }
+
+      if ($event->getIsCancelled()) {
+        $event_classes[] = 'event-cancelled';
       }
 
       $tip = $this->getEventTooltip($event);
@@ -92,6 +91,7 @@ final class PHUICalendarListView extends AphrontTagView {
       } else {
         $tip_align = 'W';
       }
+
       $content = javelin_tag(
         'a',
         array(
@@ -112,7 +112,7 @@ final class PHUICalendarListView extends AphrontTagView {
       $singletons[] = phutil_tag(
         'li',
         array(
-          'class' => $class,
+          'class' => implode(' ', $event_classes),
         ),
         $content);
     }

src/view/phui/calendar/PHUICalendarMonthView.php

@@ -236,16 +236,7 @@ final class PHUICalendarMonthView extends AphrontView {
       $cell_day = null;
     }
 
-    if ($date && $date->format('j') == $this->day &&
-      $date->format('m') == $this->month) {
-      $today_class = 'phui-calendar-today-slot phui-calendar-today';
-    } else {
     $today_class = 'phui-calendar-today-slot';
-    }
-
-    if ($this->isDateInCurrentWeek($date)) {
-      $today_class .= ' phui-calendar-this-week';
-    }
 
     $last_week_day = 6;
     if ($date->format('w') == $last_week_day) {
@@ -271,10 +262,25 @@ final class PHUICalendarMonthView extends AphrontView {
         $today_slot,
       ));
 
+    $classes = array();
+    $classes[] = 'phui-calendar-date-number-container';
+
+    if ($date) {
+      if ($this->isDateInCurrentWeek($date)) {
+        $classes[] = 'phui-calendar-this-week';
+      }
+
+      if ($date->format('j') == $this->day) {
+        if ($date->format('m') == $this->month) {
+          $classes[] = 'phui-calendar-today';
+        }
+      }
+    }
+
     return phutil_tag(
       'td',
       array(
-        'class' => 'phui-calendar-date-number-container '.$class,
+        'class' => implode(' ', $classes),
       ),
       $cell_div);
   }

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

@@ -133,12 +133,17 @@ table.phui-calendar-view td.phui-calendar-date-number-container {
   right: 0px;
 }
 
-.phui-calendar-today-slot.phui-calendar-this-week {
-  background-color: {$blueborder};
+.phui-calendar-this-week .phui-calendar-today-slot {
+  background-color: {$blue};
 }
 
-.phui-calendar-today-slot.phui-calendar-today {
-  background-color: {$lightblueborder};
+.phui-calendar-today .phui-calendar-today-slot,
+.phui-calendar-today .phui-calendar-date-number {
+  background-color: {$sky};
+}
+
+table.phui-calendar-view .phui-calendar-today a.phui-calendar-date-number {
+  color: #ffffff;
 }
 
 .phui-calendar-event-empty {
@@ -159,7 +164,7 @@ table.phui-calendar-view td.phui-calendar-date-number-container {
 
 .phui-calendar-view .phui-calendar-list li.phui-calendar-list-item.all-day {
   height: 20px;
-  background-color: {$darkgreybackground};
+  background-color: {$bluebackground};
   display: block;
   float: none;
 }
@@ -194,7 +199,7 @@ li.phui-calendar-viewer-invited.all-day {
 .phui-calendar-view li.phui-calendar-list-item .phui-calendar-list-title {
   width: auto;
   position: absolute;
-  left: 20px;
+  left: 16px;
   right: 60px;
   text-overflow: ellipsis;
   overflow: hidden;

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

@@ -2,9 +2,13 @@
  * @provides phui-calendar-css
  */
 
- .phui-calendar-list a {
-  color: {$lightgreytext};
- }
+.phui-calendar-list a {
+  color: {$greytext};
+}
+
+.phui-calendar-list .event-cancelled .phui-calendar-list-title {
+  text-decoration: line-through;
+}
 
 .phui-calendar-viewer-invited a {
   color: {$green};