Conpherence - make the calendar have a better calendar looking view up top

Summary: Ref T2400 and M14.

Test Plan: had a few conpherences with various status set amongst participants; views were sensical.

Reviewers: epriestley, chad

Reviewed By: chad

CC: aran, Korvin

Maniphest Tasks: T2400

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

src/applications/conpherence/controller/ConpherenceWidgetController.php

@@ -279,96 +279,199 @@ final class ConpherenceWidgetController extends
     $user = $this->getRequest()->getUser();
 
     $conpherence = $this->getConpherence();
+    $participants = $conpherence->getParticipants();
     $widget_data = $conpherence->getWidgetData();
     $statuses = $widget_data['statuses'];
     $handles = $conpherence->getHandles();
     $content = array();
+    $layout = id(new AphrontMultiColumnView())
+      ->setFluidLayout(true);
     $timestamps = $this->getCalendarWidgetWeekTimestamps();
+    $today = $timestamps['today'];
+    $weekstamps = $timestamps['weekstamps'];
     $one_day = 24 * 60 * 60;
-    foreach ($timestamps as $time => $day) {
+    foreach ($weekstamps as $time => $day) {
       // build a header for the new day
-      $content[] = id(new PhabricatorHeaderView())
+      $content[] = phutil_tag(
-        ->setHeader($day->format('l'))
+        'div',
-        ->render();
+        array(
+          'class' => 'day-header'
+        ),
+        array(
+          phutil_tag(
+            'div',
+            array(
+              'class' => 'day-name'
+            ),
+            $day->format('l')),
+          phutil_tag(
+            'div',
+            array(
+              'class' => 'day-date'
+            ),
+            $day->format('m/d/y'))
+          ));
+
+      $week_day_number = $day->format('w');
+
 
       $day->setTime(0, 0, 0);
       $epoch_start = $day->format('U');
-      $day->modify('+1 day');
+      $next_day = clone $day;
-      $epoch_end = $day->format('U');
+      $next_day->modify('+1 day');
+      $epoch_end = $next_day->format('U');
 
+      $first_status_of_the_day = true;
+      $statuses_of_the_day = array();
       // keep looking through statuses where we last left off
       foreach ($statuses as $status) {
         if ($status->getDateFrom() >= $epoch_end) {
           // This list is sorted, so we can stop looking.
           break;
         }
+        if (!$first_status_of_the_day) {
+          $content[] = phutil_tag(
+            'div',
+            array(
+              'class' => 'divider'
+            ),
+            '');
+        }
         if ($status->getDateFrom() < $epoch_end &&
-          $status->getDateTo() > $epoch_start) {
+            $status->getDateTo() > $epoch_start) {
-            $timespan = $status->getDateTo() - $status->getDateFrom();
+          $statuses_of_the_day[$status->getUserPHID()] = $status;
-            if ($timespan > $one_day) {
+          $timespan = $status->getDateTo() - $status->getDateFrom();
-              $time_str = 'm/d';
+          if ($timespan > $one_day) {
-            } else {
+            $time_str = 'm/d';
-              $time_str = 'h:i A';
+          } else {
-            }
+            $time_str = 'h:i A';
-            $epoch_range = phabricator_format_local_time(
+          }
-              $status->getDateFrom(),
+          $epoch_range = phabricator_format_local_time(
+            $status->getDateFrom(),
+            $user,
+            $time_str) . ' - ' . phabricator_format_local_time(
+              $status->getDateTo(),
               $user,
-              $time_str) . ' - ' . phabricator_format_local_time(
+              $time_str);
-                $status->getDateTo(),
-                $user,
-                $time_str);
 
-            $content[] = phutil_tag(
+          $content[] = phutil_tag(
+            'div',
+            array(
+              'class' => 'user-status '.$status->getTextStatus(),
+            ),
+            array(
+              phutil_tag(
+                'div',
+                array(
+                  'class' => 'epoch-range'
+                ),
+                $epoch_range),
+              phutil_tag(
+                'div',
+                array(
+                  'class' => 'icon',
+                ),
+                ''),
+              phutil_tag(
+                'div',
+                array(
+                  'class' => 'description'
+                ),
+                $status->getTerseSummary($user)),
+              phutil_tag(
+                'div',
+                array(
+                  'class' => 'participant'
+                ),
+                $handles[$status->getUserPHID()]->getName())
+              ));
+          $first_status_of_the_day = false;
+        }
+      }
+      // we didn't get a status on this day so add a spacer
+      if ($first_status_of_the_day) {
+        $content[] = phutil_tag(
+          'div',
+          array(
+            'class' => 'spacer'
+          ),
+          '');
+      }
+      if ($week_day_number > 0 && $week_day_number < 6) {
+        if ($week_day_number == $today->format('w')) {
+          $active_class = '-active';
+        } else {
+          $active_class = '';
+        }
+        $inner_layout = array();
+        foreach ($participants as $phid => $participant) {
+          $status = idx($statuses_of_the_day, $phid, false);
+          if ($status) {
+            $inner_layout[] = phutil_tag(
               'div',
               array(
-                'class' => 'user-status '.$status->getTextStatus(),
+                'class' => $status->getTextStatus()
               ),
+              '');
+          } else {
+            $inner_layout[] = phutil_tag(
+              'div',
               array(
-                phutil_tag(
+                'class' => 'present'
-                  'div',
+              ),
-                  array(
+              '');
-                    'class' => 'epoch-range'
-                  ),
-                  $epoch_range),
-                phutil_tag(
-                  'div',
-                  array(
-                    'class' => 'icon',
-                  ),
-                  ''),
-                phutil_tag(
-                  'div',
-                  array(
-                    'class' => 'description'
-                  ),
-                  $status->getTerseSummary($user)),
-                phutil_tag(
-                  'div',
-                  array(
-                    'class' => 'participant'
-                  ),
-                  $handles[$status->getUserPHID()]->getName())
-                ));
           }
+        }
+        $layout->addColumn(
+          phutil_tag(
+            'div',
+            array(
+              'class' => 'day-column'.$active_class
+            ),
+            array(
+              phutil_tag(
+                'div',
+                array(
+                  'class' => 'day-name'
+                ),
+                $day->format('D')),
+              phutil_tag(
+                'div',
+                array(
+                  'class' => 'day-number',
+                ),
+                $day->format('j')),
+              $inner_layout
+              )));
       }
     }
 
-    return new PhutilSafeHTML(implode('', $content));
+    return
+      array(
+        $layout,
+        $content
+      );
   }
 
   private function getCalendarWidgetWeekTimestamps() {
     $user = $this->getRequest()->getUser();
     $timezone = new DateTimeZone($user->getTimezoneIdentifier());
 
+    $today = id(new DateTime('now', $timezone));
+    $monday = clone $today;
+    $monday
+      ->modify('+1 day')
+      ->modify('last monday');
     $timestamps = array();
     for ($day = 0; $day < 7; $day++) {
-      $timestamps[] = new DateTime(
+      $timestamp = clone $monday;
-        sprintf('today +%d days', $day),
+      $timestamps[] = $timestamp->modify(sprintf('+%d days', $day));
-        $timezone
-      );
     }
 
-    return $timestamps;
+    return array(
+      'today' => $today,
+      'weekstamps' => $timestamps
+    );
   }
 
   private function getWidgetURI() {

src/applications/conpherence/query/ConpherenceThreadQuery.php

@@ -173,11 +173,11 @@ final class ConpherenceThreadQuery
     // statuses of everyone currently in the conpherence
     // for a rolling one week window
     $start_of_week = phabricator_format_local_time(
-      strtotime('today'),
+      strtotime('last monday', strtotime('tomorrow')),
       $this->getViewer(),
       'U');
     $end_of_week = phabricator_format_local_time(
-      strtotime('midnight +1 week'),
+      strtotime('last monday +1 week', strtotime('tomorrow')),
       $this->getViewer(),
       'U');
     $statuses = id(new PhabricatorUserStatus())

webroot/rsrc/css/application/conpherence/widget-pane.css

@@ -133,17 +133,112 @@
   margin: 8px 0px 0px 50px;
   border: 1px dashed #bfbfbf;
 }
+
 /* calendar widget */
 
+.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view {
+  margin: 2px 0px 0px 0px;
+  width: 280px;
+}
+.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
+.aphront-multi-column-column {
+  background: white;
+  border-right: 1px solid #bfbfbf;
+  text-align: center;
+}
+.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
+.aphront-multi-column-column-last {
+  border-right: 0;
+}
+.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
+.aphront-multi-column-column .day-column,
+.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
+.aphront-multi-column-column .day-column-active {
+  color: #bfbfbf;
+  background-color: white;
+  font-weight: bold;
+  padding: 0px 0px 10px 0px;
+}
+.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
+.aphront-multi-column-column .day-column-active {
+  color: black;
+}
+.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
+.aphront-multi-column-column .present ,
+.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
+.aphront-multi-column-column .sporadic ,
+.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
+.aphront-multi-column-column .away {
+  height: 10px;
+  margin: 5px 0px 5px 0px;
+  width: 100%;
+}
+.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
+.aphront-multi-column-column .present {
+  background-color: white;
+}
+.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
+.aphront-multi-column-column .sporadic {
+  background-color: rgb(222, 226, 232);
+}
+.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
+.aphront-multi-column-column .away {
+  background-color: rgb(102, 204, 255);
+}
+.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
+.aphront-multi-column-column .day-name {
+  padding: 5px 0px 0px 0px;
+  font-size: 12px;
+}
+.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
+.aphront-multi-column-column .day-number {
+  font-size: 16px;
+  padding: 5px 0px 5px 0px;
+}
+.conpherence-widget-pane #widgets-calendar .day-header {
+  float: left;
+  clear: both;
+  background-color: #d8dce2;
+  border-top: 1px solid #bfbfbf;
+  border-bottom: 1px solid #bfbfbf;
+  padding: 5px 10px 5px 10px;
+  width: 260px;
+}
+.conpherence-widget-pane #widgets-calendar .day-header .day-name {
+  float: left;
+  clear: none;
+}
+.conpherence-widget-pane #widgets-calendar .day-header .day-date {
+  float: right;
+  clear: none;
+}
+
+.conpherence-widget-pane #widgets-calendar .divider {
+  float: left;
+  clear: both;
+  width: 260px;
+  margin: 0px 0px 0px 10px;
+  border: 1px dashed #bfbfbf;
+}
+.conpherence-widget-pane #widgets-calendar .spacer {
+  float: left;
+  clear: both;
+  height: 10px;
+  width: 100%;
+}
+
 .conpherence-widget-pane #widgets-calendar .user-status {
+  float: left;
+  clear: both;
   height: 60px;
+  width: 280px;
 }
 
 .conpherence-widget-pane #widgets-calendar .user-status .icon {
   border-radius: 10px;
   position: relative;
   top: 24px;
-  left: 12px;
+  left: 10px;
   height: 16px;
   width: 16px;
   box-shadow: 0px 0px 1px #000;
@@ -162,7 +257,7 @@
   font-style: italic;
   position: relative;
   top: 24px;
-  right: 8px;
+  right: 10px;
   font-size: 11px;
 }