Make Calendar day view a little more consistent

Summary: Ref T11326. This just cleans things up a little and removes some of the obvious layout/CSS issues.

Test Plan:
- Viewed day view before/after. Also viewed profile panel.

Before:

{F1725547}

After:

{F1725548}

Reviewers: chad

Reviewed By: chad

Maniphest Tasks: T11326

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

resources/celerity/map.php

@@ -115,8 +115,8 @@ return array(
     'rsrc/css/layout/phabricator-filetree-view.css' => 'fccf9f82',
     'rsrc/css/layout/phabricator-side-menu-view.css' => 'dd849797',
     'rsrc/css/layout/phabricator-source-code-view.css' => 'cbeef983',
-    'rsrc/css/phui/calendar/phui-calendar-day.css' => 'd1cf6f93',
+    'rsrc/css/phui/calendar/phui-calendar-day.css' => 'f15bb6d6',
-    'rsrc/css/phui/calendar/phui-calendar-list.css' => '56e6381a',
+    'rsrc/css/phui/calendar/phui-calendar-list.css' => '5d89cd71',
     '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',
@@ -362,7 +362,7 @@ return array(
     'rsrc/js/application/aphlict/behavior-aphlict-status.js' => 'ea681761',
     'rsrc/js/application/aphlict/behavior-desktop-notifications-control.js' => 'edd1ba66',
     'rsrc/js/application/auth/behavior-persona-login.js' => '9414ff18',
-    'rsrc/js/application/calendar/behavior-day-view.js' => '1a5bb063',
+    'rsrc/js/application/calendar/behavior-day-view.js' => '4b3c4443',
     'rsrc/js/application/calendar/behavior-event-all-day.js' => '38dcf3c8',
     'rsrc/js/application/calendar/behavior-recurring-edit.js' => '5f1c4d5f',
     'rsrc/js/application/config/behavior-reorder-fields.js' => 'b6993408',
@@ -603,7 +603,7 @@ return array(
     'javelin-behavior-dashboard-move-panels' => '019f36c4',
     'javelin-behavior-dashboard-query-panel-select' => '453c5375',
     'javelin-behavior-dashboard-tab-panel' => 'd4eecc63',
-    'javelin-behavior-day-view' => '1a5bb063',
+    'javelin-behavior-day-view' => '4b3c4443',
     'javelin-behavior-desktop-notifications-control' => 'edd1ba66',
     'javelin-behavior-detect-timezone' => '4c193c96',
     'javelin-behavior-device' => 'bb1dd507',
@@ -826,8 +826,8 @@ return array(
     'phui-box-css' => '5c8387cf',
     'phui-button-css' => '4a5fbe3d',
     'phui-calendar-css' => '3354bbd6',
-    'phui-calendar-day-css' => 'd1cf6f93',
+    'phui-calendar-day-css' => 'f15bb6d6',
-    'phui-calendar-list-css' => '56e6381a',
+    'phui-calendar-list-css' => '5d89cd71',
     'phui-calendar-month-css' => 'f3bb2030',
     'phui-chart-css' => '6bf6f78e',
     'phui-crumbs-view-css' => '6b813619',
@@ -1233,6 +1233,9 @@ return array(
       'javelin-dom',
       'javelin-vector',
     ),
+    '4b3c4443' => array(
+      'phuix-icon-view',
+    ),
     '4b700e9e' => array(
       'javelin-behavior',
       'javelin-dom',

src/applications/calendar/query/PhabricatorCalendarEventSearchEngine.php

@@ -257,7 +257,7 @@ final class PhabricatorCalendarEventSearchEngine
     if ($this->isMonthView($query)) {
       return $this->buildCalendarView($events, $query);
     } else if ($this->isDayView($query)) {
-      return $this->buildCalendarDayView($events, $query, $handles);
+      return $this->buildCalendarDayView($events, $query);
     }
 
     assert_instances_of($events, 'PhabricatorCalendarEvent');
@@ -370,9 +370,8 @@ final class PhabricatorCalendarEventSearchEngine
   }
 
   private function buildCalendarDayView(
-    array $statuses,
+    array $events,
-    PhabricatorSavedQuery $query,
+    PhabricatorSavedQuery $query) {
-    array $handles) {
 
     $viewer = $this->requireViewer();
 
@@ -392,33 +391,32 @@ final class PhabricatorCalendarEventSearchEngine
 
     $day_view->setUser($viewer);
 
-    $phids = mpull($statuses, 'getHostPHID');
+    $phids = mpull($events, 'getHostPHID');
-
-    foreach ($statuses as $status) {
-      if ($status->getIsCancelled()) {
-        continue;
-      }
-
-      $viewer_is_invited = $status->getIsUserInvited($viewer->getPHID());
 
+    foreach ($events as $event) {
       $can_edit = PhabricatorPolicyFilter::hasCapability(
         $viewer,
-        $status,
+        $event,
         PhabricatorPolicyCapability::CAN_EDIT);
 
-      $event = new AphrontCalendarEventView();
+      $epoch_min = $event->getViewerDateFrom();
-      $event->setCanEdit($can_edit);
+      $epoch_max = $event->getViewerDateTo();
-      $event->setEventID($status->getID());
-      $event->setEpochRange(
-        $status->getViewerDateFrom(),
-        $status->getViewerDateTo());
-      $event->setIsAllDay($status->getIsAllDay());
-      $event->setIcon($status->getIcon());
-      $event->setViewerIsInvited($viewer_is_invited);
 
-      $event->setName($status->getName());
+      $status_icon = $event->getDisplayIcon($viewer);
-      $event->setURI($status->getURI());
+      $status_color = $event->getDisplayIconColor($viewer);
-      $day_view->addEvent($event);
+
+      $event_view = id(new AphrontCalendarEventView())
+        ->setCanEdit($can_edit)
+        ->setEventID($event->getID())
+        ->setEpochRange($epoch_min, $epoch_max)
+        ->setIsAllDay($event->getIsAllDay())
+        ->setIcon($status_icon)
+        ->setIconColor($status_color)
+        ->setName($event->getName())
+        ->setURI($event->getURI())
+        ->setIsCancelled($event->isCancelledEvent());
+
+      $day_view->addEvent($event_view);
     }
 
     $day_view->setBrowseURI(

src/applications/people/controller/PhabricatorPeopleProfileViewController.php

@@ -234,11 +234,13 @@ final class PhabricatorPeopleProfileViewController
       ->setHeader(pht('Calendar'))
       ->setHref(
         urisprintf(
-          '/calendar/?invitedPHIDs=%s#R',
+          '/calendar/?invited=%s#R',
-          $user->getPHID()));
+          $user->getUsername()));
+
     $box = id(new PHUIObjectBoxView())
       ->setHeader($header)
       ->appendChild($day_view)
+      ->addClass('calendar-profile-box')
       ->setBackground(PHUIObjectBoxView::GREY);
 
     return $box;

src/view/phui/calendar/PHUICalendarDayView.php

@@ -85,6 +85,8 @@ final class PHUICalendarDayView extends AphrontView {
           'id' => $all_day_event->getEventID(),
           'viewerIsInvited' => $all_day_event->getViewerIsInvited(),
           'uri' => $all_day_event->getURI(),
+          'displayIcon' => $all_day_event->getIcon(),
+          'displayIconColor' => $all_day_event->getIconColor(),
         );
       }
     }
@@ -140,6 +142,8 @@ final class PHUICalendarDayView extends AphrontView {
           'top' => $top.'px',
           'height' => $height.'px',
           'canEdit' => $event->getCanEdit(),
+          'displayIcon' => $event->getIcon(),
+          'displayIconColor' => $event->getIconColor(),
         );
       }
     }
@@ -183,17 +187,11 @@ final class PHUICalendarDayView extends AphrontView {
       ->setFlush(true);
 
     $layout = id(new AphrontMultiColumnView())
-      ->addColumn($sidebar, 'third')
+      ->addColumn($sidebar, 'third phui-day-view-upcoming')
       ->addColumn($table_box, 'thirds phui-day-view-column')
-      ->setFluidLayout(true)
+      ->setFluidLayout(true);
-      ->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM);
 
-    return phutil_tag(
+    return $layout;
-      'div',
-        array(
-          'class' => 'ml',
-        ),
-        $layout);
   }
 
   private function getAllDayEvents() {

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

@@ -10,6 +10,15 @@
   width: 100%;
 }
 
+.aphront-multi-column-column-outer.phui-day-view-upcoming,
+.aphront-multi-column-column-outer.phui-day-view-column{
+  padding: 0;
+}
+
+.aphront-multi-column-column-outer.phui-day-view-upcoming .phui-header-shell {
+  margin: 0;
+}
+
 .phui-calendar-day-view {
   overflow: scroll;
   width: 100%;
@@ -61,17 +70,13 @@ div.phui-calendar-day-event.all-day {
 }
 
 .phui-calendar-day-event-link {
-  padding: 8px;
+  margin: 0 0 -1px -1px;
-  border: 1px solid {$greyborder};
+  box-sizing: border-box;
-  background-color: {$darkgreybackground};
-  margin: 0 1px;
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
-  text-decoration: none;
-  color: {$greytext};
 }
 
 .phui-calendar-day-event-link.viewer-invited-day-event {
@@ -80,21 +85,19 @@ div.phui-calendar-day-event.all-day {
   color: {$green};
 }
 
-.day-view-all-day {
+.day-view-all-day,
-  border: 1px solid {$greyborder};
+.phui-calendar-day-event-link {
-  height: 12px;
-  margin: 0;
-  display: block;
   padding: 8px;
-  background-color: {$darkgreybackground};
+  border: 1px solid {$lightblueborder};
-  text-decoration: none;
+  background-color: {$bluebackground};
   color: {$greytext};
+  text-decoration: none;
+  text-decoration: none;
 }
 
-.day-view-all-day.viewer-invited-day-event {
+.day-view-all-day {
-  border-color: {$green};
+  margin: 3px 0 3px 4px;
-  background-color: {$lightgreen};
+  display: block;
-  color: {$green};
 }
 
 .phui-calendar-day-event + .phui-calendar-day-event .day-view-all-day {

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

@@ -6,7 +6,7 @@
   width: auto;
 }
 
-.phui-calendar-list-container.calendar-day-view-sidebar .phui-object-box {
+.calendar-profile-box .calendar-day-view-sidebar .phui-object-box {
   border-bottom: none;
   margin: 0;
   padding: 0 12px 12px;

webroot/rsrc/js/application/calendar/behavior-day-view.js

@@ -1,8 +1,7 @@
 /**
  * @provides javelin-behavior-day-view
+ * @requires phuix-icon-view
  */
-
-
 JX.behavior('day-view', function(config) {
 
   function findTodayClusters() {
@@ -92,13 +91,20 @@ JX.behavior('day-view', function(config) {
       link_class = link_class + ' viewer-invited-day-event';
     }
 
+    var icon = new JX.PHUIXIconView()
+      .setIcon(e.displayIcon)
+      .setColor(e.displayIconColor)
+      .getNode();
+
+    var content = [icon, ' ', name];
+
     var name_link = JX.$N(
       'a',
       {
         className : link_class,
         href: uri
       },
-      name);
+      content);
 
     var class_name = 'phui-calendar-day-event';
     if (e.canEdit) {
@@ -123,22 +129,22 @@ JX.behavior('day-view', function(config) {
     return div;
   }
 
-  function drawAllDayEvent(
+  function drawAllDayEvent(e) {
-    viewerIsInvited,
-    uri,
-    name) {
     var class_name = 'day-view-all-day';
-    if (viewerIsInvited) {
-      class_name = class_name + ' viewer-invited-day-event';
-    }
 
-    name = JX.$N(
+    var icon = new JX.PHUIXIconView()
+      .setIcon(e.displayIcon)
+      .setColor(e.displayIconColor)
+      .getNode();
+    var content = [icon, ' ', e.name];
+
+    var name = JX.$N(
       'a',
       {
         className: class_name,
-        href: uri
+        href: e.uri
       },
-      name);
+      content);
 
     var all_day_label = JX.$N(
       'span',
@@ -220,10 +226,7 @@ JX.behavior('day-view', function(config) {
   var all_day_events = [];
   for(i=0; i < today_all_day_events.length; i++) {
     var all_day_event = today_all_day_events[i];
-    all_day_events.push(drawAllDayEvent(
+    all_day_events.push(drawAllDayEvent(all_day_event));
-      all_day_event['viewerIsInvited'],
-      all_day_event['uri'],
-      all_day_event['name']));
   }
 
   var table = JX.$N(
@@ -329,15 +332,14 @@ JX.behavior('day-view', function(config) {
     }
     var data = e.getNodeData('phui-calendar-day-event-cell');
     var time = data.time;
+
     new JX.Workflow(
-      '/calendar/event/create/',
+      '/calendar/event/edit/',
       {
-        year: year,
+        start_d: year + '-' + month + '-' + day,
-        month: month,
+        start_t: time,
-        day: day,
+        end_d: year + '-' + month + '-' + day,
-        time: time,
+        end_t: time + ' +1 hour'
-        next: 'day',
-        query: query
       })
       .start();
   });