Making the day view slightly less bad.

Summary: Ref T4393, Making the day view slightly less bad.

Test Plan: Open Calendar Advanced Search, search for day with multiple events starting at the same time, events should show up side by side, and should link to actual events.

Reviewers: chad, #blessed_reviewers, epriestley

Reviewed By: #blessed_reviewers, epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T4393

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

resources/celerity/map.php

@@ -119,7 +119,7 @@ return array(
     'rsrc/css/layout/phabricator-hovercard-view.css' => '44394670',
     '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' => 'a00b748d',
+    'rsrc/css/phui/calendar/phui-calendar-day.css' => 'a4df5b72',
     'rsrc/css/phui/calendar/phui-calendar-list.css' => 'c1d0ca59',
     'rsrc/css/phui/calendar/phui-calendar-month.css' => 'a92e47d2',
     'rsrc/css/phui/calendar/phui-calendar.css' => '8675968e',
@@ -780,7 +780,7 @@ return array(
     'phui-box-css' => '7b3a2eed',
     'phui-button-css' => 'de610129',
     'phui-calendar-css' => '8675968e',
-    'phui-calendar-day-css' => 'a00b748d',
+    'phui-calendar-day-css' => 'a4df5b72',
     'phui-calendar-list-css' => 'c1d0ca59',
     'phui-calendar-month-css' => 'a92e47d2',
     'phui-crumbs-view-css' => '594d719e',

src/applications/calendar/query/PhabricatorCalendarEventSearchEngine.php

@@ -375,6 +375,7 @@ final class PhabricatorCalendarEventSearchEngine
       $event->setEpochRange($status->getDateFrom(), $status->getDateTo());
 
       $event->setName($status->getName());
+      $event->setURI('/'.$status->getMonogram());
       $day_view->addEvent($event);
     }
 

src/applications/calendar/view/AphrontCalendarDayEventView.php

@@ -2,10 +2,10 @@
 
 final class AphrontCalendarDayEventView extends AphrontView {
 
-  private $event;
   private $epochStart;
   private $epochEnd;
   private $name;
+  private $uri;
 
   public function setName($name) {
     $this->name = $name;
@@ -16,6 +16,15 @@ final class AphrontCalendarDayEventView extends AphrontView {
     return $this->name;
   }
 
+  public function setURI($uri) {
+    $this->uri = $uri;
+    return $this;
+  }
+
+  public function getURI() {
+    return $this->uri;
+  }
+
   public function setEpochRange($start, $end) {
     $this->epochStart = $start;
     $this->epochEnd   = $end;

src/view/phui/calendar/PHUICalendarDayView.php

@@ -34,20 +34,32 @@ final class PHUICalendarDayView extends AphrontView {
       $cell_time = phutil_tag(
         'td',
         array('class' => 'phui-calendar-day-hour'),
-        $hour->format('g:i A'));
+        $hour->format('g A'));
 
-      $event_boxes = array();
+      $events = array();
+      $hour_start = $hour->format('U');
+      $hour_end = id(clone $hour)->modify('+1 hour')->format('U');
       foreach ($this->events as $event) {
-        if ($event->getEpochStart() >= $hour->format('U')
-          && $event->getEpochStart() < $hour->modify('+1 hour')->format('U')) {
-          $event_boxes[] = $this->drawEvent($event);
+        if ($event->getEpochStart() >= $hour_start
+          && $event->getEpochStart() < $hour_end) {
+          $events[] = $event;
         }
       }
 
+      $count_events = count($events);
+      $event_boxes = array();
+      $n = 0;
+      foreach ($events as $event) {
+        $offset = (($n / $count_events) * 100).'%';
+        $width = ((1 / $count_events) * 100).'%';
+        $event_boxes[] = $this->drawEvent($event, $offset, $width);
+        $n++;
+      }
+
       // events starting in time slot
       $cell_event = phutil_tag(
         'td',
-        array(),
+        array('class' => 'phui-calendar-day-events'),
         $event_boxes);
 
 
@@ -72,15 +84,24 @@ final class PHUICalendarDayView extends AphrontView {
 
   }
 
-  private function drawEvent(AphrontCalendarDayEventView $event) {
+  private function drawEvent(
+    AphrontCalendarDayEventView $event,
+    $offset,
+    $width) {
     $name = phutil_tag(
-      'div',
-      array(),
+      'a',
+      array(
+        'class' => 'phui-calendar-day-event-link',
+        'href' => $event->getURI(),
+      ),
       $event->getName());
 
     $div = phutil_tag(
       'div',
-      array('class' => 'phui-calendar-day-event'),
+      array(
+        'class' => 'phui-calendar-day-event',
+        'style' => 'left: '.$offset.'; width: '.$width.';',
+      ),
       $name);
 
     return $div;

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

@@ -9,27 +9,41 @@
 
 .phui-calendar-day-hour {
   width: 60px;
-  font-size: 10px;
+  color: {$lightgreytext};
+  text-align: right;
+  padding: 4px 4px;
+  border-right: 1px solid {$lightgreyborder};
 }
 
 .phui-calendar-day-view tr {
-  width: 100%;
   height: 60px;
-  border: 1px solid {$lightgreyborder};
 }
 
 .phui-calendar-day-view td {
   position: relative;
 }
 
+.phui-calendar-day-view tr + tr td.phui-calendar-day-events {
+  border-top: 1px solid {$lightgreyborder};
+}
+
 .phui-calendar-day-view td div.phui-calendar-day-event {
   width: 100%;
-  background-color: {$darkgreybackground};
   position: absolute;
   top: 0;
   bottom: 0;
 }
 
-.phui-calendar-day-view td div.phui-calendar-day-event div {
-  padding: 4px;
+.phui-calendar-day-event-link {
+  padding: 8px;
+  border: 1px solid {$blueborder};
+  background-color: {$bluebackground};
+  margin: 4px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  text-decoration: none;
+  color: {$greytext};
 }