Calendar event icons show up on month and day views

Summary: Closes T7936, Calendar event icons show up on month and day views

Test Plan: Calendar month and day views should show event icons

Reviewers: chad, #blessed_reviewers, epriestley

Reviewed By: #blessed_reviewers, epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T7936

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

resources/celerity/map.php

@@ -122,8 +122,8 @@ return array(
     'rsrc/css/layout/phabricator-side-menu-view.css' => 'c1db9e9c',
     'rsrc/css/layout/phabricator-source-code-view.css' => '2ceee894',
     'rsrc/css/phui/calendar/phui-calendar-day.css' => 'c0cf782a',
-    'rsrc/css/phui/calendar/phui-calendar-list.css' => '857a0d83',
+    'rsrc/css/phui/calendar/phui-calendar-list.css' => 'c1c7f338',
-    'rsrc/css/phui/calendar/phui-calendar-month.css' => '1d0e1e9b',
+    'rsrc/css/phui/calendar/phui-calendar-month.css' => '94b1750a',
     'rsrc/css/phui/calendar/phui-calendar.css' => 'ccabe893',
     'rsrc/css/phui/phui-action-header-view.css' => '89c497e7',
     'rsrc/css/phui/phui-action-list.css' => '4f4d09f2',
@@ -764,8 +764,8 @@ return array(
     'phui-button-css' => 'de610129',
     'phui-calendar-css' => 'ccabe893',
     'phui-calendar-day-css' => 'c0cf782a',
-    'phui-calendar-list-css' => '857a0d83',
+    'phui-calendar-list-css' => 'c1c7f338',
-    'phui-calendar-month-css' => '1d0e1e9b',
+    'phui-calendar-month-css' => '94b1750a',
     'phui-crumbs-view-css' => '594d719e',
     'phui-document-view-css' => '94d5dcd8',
     'phui-feed-story-css' => 'c9f3a0b5',

src/applications/calendar/query/PhabricatorCalendarEventSearchEngine.php

@@ -364,6 +364,7 @@ final class PhabricatorCalendarEventSearchEngine
       $event = new AphrontCalendarEventView();
       $event->setEpochRange($status->getDateFrom(), $status->getDateTo());
       $event->setIsAllDay($status->getIsAllDay());
+      $event->setIcon($status->getIcon());
 
       $name_text = $handles[$status->getUserPHID()]->getName();
       $status_text = $status->getName();
@@ -411,6 +412,7 @@ final class PhabricatorCalendarEventSearchEngine
       $event->setEventID($status->getID());
       $event->setEpochRange($status->getDateFrom(), $status->getDateTo());
       $event->setIsAllDay($status->getIsAllDay());
+      $event->setIcon($status->getIcon());
       $event->setViewerIsInvited($viewer_is_invited);
 
       $event->setName($status->getName());

src/applications/calendar/view/AphrontCalendarEventView.php

@@ -11,6 +11,7 @@ final class AphrontCalendarEventView extends AphrontView {
   private $viewerIsInvited;
   private $uri;
   private $isAllDay;
+  private $icon;
 
   public function setURI($uri) {
     $this->uri = $uri;
@@ -87,6 +88,15 @@ final class AphrontCalendarEventView extends AphrontView {
     return $this->isAllDay;
   }
 
+  public function setIcon($icon) {
+    $this->icon = $icon;
+    return $this;
+  }
+
+  public function getIcon() {
+    return $this->icon;
+  }
+
 
   public function getMultiDay() {
     $nextday = strtotime('12:00 AM Tomorrow', $this->getEpochStart());

src/view/phui/calendar/PHUICalendarDayView.php

@@ -276,7 +276,8 @@ final class PHUICalendarDayView extends AphrontView {
       ->addClass('calendar-day-view-sidebar');
 
     $list = id(new PHUICalendarListView())
-      ->setUser($this->user);
+      ->setUser($this->user)
+      ->setView('day');
 
     if (count($events) == 0) {
       $list->showBlankState(true);

src/view/phui/calendar/PHUICalendarListView.php

@@ -4,6 +4,16 @@ final class PHUICalendarListView extends AphrontTagView {
 
   private $events = array();
   private $blankState;
+  private $view;
+
+  private function getView() {
+    return $this->view;
+  }
+
+  public function setView($view) {
+    $this->view = $view;
+    return $this;
+  }
 
   public function addEvent(AphrontCalendarEventView $event) {
     $this->events[] = $event;
@@ -37,26 +47,28 @@ final class PHUICalendarListView extends AphrontTagView {
 
       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',
-          ),
-          '');
       }
 
+      if ($event->getViewerIsInvited()) {
+        $icon_color = 'green';
+      } else {
+        $icon_color = null;
+      }
+
+      $dot = id(new PHUIIconView())
+        ->setIconFont($event->getIcon(), $icon_color)
+        ->addClass('phui-calendar-list-item-icon');
+
       $title = phutil_tag(
         'span',
         array(
           'class' => 'phui-calendar-list-title',
         ),
-        $this->renderEventLink($event, $allday));
+        $this->getEventTitle($event, $allday));
       $time = phutil_tag(
         'span',
         array(
@@ -72,10 +84,18 @@ final class PHUICalendarListView extends AphrontTagView {
         $class = $class.' all-day';
       }
 
-      $content = phutil_tag(
+      $tip = $this->getEventTooltip($event);
+      $tip_align = ($this->getView() == 'day') ? 'E' : 'N';
+      $content = javelin_tag(
         'a',
         array(
           'href' => '/E'.$event->getEventID(),
+          'sigil' => 'has-tooltip',
+          'meta'  => array(
+            'tip'  => $tip,
+            'size' => 200,
+            'align' => $tip_align,
+          ),
         ),
         array(
           $dot,
@@ -110,8 +130,17 @@ final class PHUICalendarListView extends AphrontTagView {
     return $list;
   }
 
-  private function renderEventLink($event) {
+  private function getEventTitle($event) {
+    $class = 'phui-calendar-item';
+    return phutil_tag(
+      'span',
+      array(
+        'class' => $class,
+      ),
+      $event->getName());
+  }
 
+  private function getEventTooltip(AphrontCalendarEventView $event) {
     Javelin::initBehavior('phabricator-tooltips');
 
     $start = id(AphrontFormDateControlValue::newFromEpoch(
@@ -145,27 +174,7 @@ final class PHUICalendarListView extends AphrontTagView {
           $end->getValueAsFormat('M j, Y, g:i A'));
       }
     }
-
+    return $tip;
-    $description = $event->getDescription();
-    if (strlen($description) == 0) {
-      $description = pht('(%s)', $event->getName());
-    }
-
-    $class = 'phui-calendar-item';
-
-    $anchor = javelin_tag(
-      'span',
-      array(
-        'sigil' => 'has-tooltip',
-        'class' => $class,
-        'meta'  => array(
-          'tip'  => $tip,
-          'size' => 200,
-        ),
-      ),
-      $event->getName());
-
-    return $anchor;
   }
 
   public function getIsViewerInvitedOnList() {

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

@@ -29,25 +29,30 @@
 
 .phui-calendar-list-item {
   position: relative;
+  line-height: 18px;
+  height: 18px;
 }
 
-.phui-calendar-list-dot {
+.phui-calendar-list-item a {
-  position: relative;
+  display: block;
-  display: inline-block;
+  width: auto;
-  width: 5px;
+  min-height: 18px;
-  height: 5px;
+}
-  margin-right: 6px;
+
-  top: -5px;
+.phui-calendar-list-item-icon {
-  border-radius: 10px;
+  position: absolute;
-  border: 1px solid transparent;
+  left: 0;
+  top: 3px;
 }
 
 .phui-calendar-list-title {
  width: 200px;
- display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
+ position: absolute;
+ left: 20px;
+ top: 0;
 }
 
 .phui-calendar-viewer-invited .phui-calendar-list-title {
@@ -61,6 +66,7 @@
   right: 0;
   color: {$lightgreytext};
   text-align: right;
+  line-height: 20px;
 }
 
 .phui-calendar-list-item-empty {

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

@@ -180,6 +180,7 @@ li.phui-calendar-viewer-invited.all-day {
   display: block;
   overflow: hidden;
   position: relative;
+  height: 18px;
 }
 
 .phui-calendar-view li.phui-calendar-list-item {
@@ -187,40 +188,27 @@ li.phui-calendar-viewer-invited.all-day {
   width: auto;
 }
 
-.phui-calendar-view .phui-calendar-list-dot {
+.phui-calendar-list-item-icon {
-  position: relative;
   display: block;
-  float: left;
+  left: 0px;
-  width: 3px;
-  height: 3px;
-  margin-right: 4px;
-  border-radius: 10px;
-  top: 5px;
-  left: 0;
-  display: none;
 }
 
 .phui-calendar-view li.phui-calendar-list-item .phui-calendar-list-title {
   width: auto;
   position: absolute;
-  right: 0;
+  left: 20px;
-  left: 60px;
+  right: 60px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
 }
 
-li.all-day {
-  line-height: 18px;
-}
-
 .phui-calendar-view li.phui-calendar-list-item .phui-calendar-list-time {
-  position: relative;
+  position: absolute;
-  display: inline-block;
+  top: 0;
-  float: left;
+  right: 0px;
   padding: 0;
-  line-height: 18px;
   width: 60px;
   color: {$lightgreytext};
-  text-align: left;
+  text-align: right;
 }