1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-10 08:52:39 +01:00

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
This commit is contained in:
Bob Trahan 2013-04-03 17:30:20 -07:00
parent 64a2096684
commit 1387196c7a
3 changed files with 254 additions and 56 deletions

View file

@ -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())
->setHeader($day->format('l'))
->render();
$content[] = phutil_tag(
'div',
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');
$epoch_end = $day->format('U');
$next_day = clone $day;
$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) {
$timespan = $status->getDateTo() - $status->getDateFrom();
if ($timespan > $one_day) {
$time_str = 'm/d';
} else {
$time_str = 'h:i A';
}
$epoch_range = phabricator_format_local_time(
$status->getDateFrom(),
$status->getDateTo() > $epoch_start) {
$statuses_of_the_day[$status->getUserPHID()] = $status;
$timespan = $status->getDateTo() - $status->getDateFrom();
if ($timespan > $one_day) {
$time_str = 'm/d';
} else {
$time_str = 'h:i A';
}
$epoch_range = phabricator_format_local_time(
$status->getDateFrom(),
$user,
$time_str) . ' - ' . phabricator_format_local_time(
$status->getDateTo(),
$user,
$time_str) . ' - ' . phabricator_format_local_time(
$status->getDateTo(),
$user,
$time_str);
$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(
'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())
));
'class' => 'present'
),
'');
}
}
$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(
sprintf('today +%d days', $day),
$timezone
);
$timestamp = clone $monday;
$timestamps[] = $timestamp->modify(sprintf('+%d days', $day));
}
return $timestamps;
return array(
'today' => $today,
'weekstamps' => $timestamps
);
}
private function getWidgetURI() {

View file

@ -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())

View file

@ -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;
}