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:
parent
64a2096684
commit
1387196c7a
3 changed files with 254 additions and 56 deletions
|
@ -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() {
|
||||
|
|
|
@ -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())
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue