mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-18 12:52:42 +01:00
Make Calendar month view events render a little more consistently
Summary: Ref T11326. This just inches things forward a little bit: - Make it easier to see current day. - Line-through cancelled events. - Don't colorize the whole event title, just use an Attending/Invited/Custom icon. - Slightly subtler treatment for all-day events. Test Plan: See screenshot in T11326. Reviewers: chad Reviewed By: chad Maniphest Tasks: T11326 Differential Revision: https://secure.phabricator.com/D16306
This commit is contained in:
parent
e2b6912b9d
commit
b6c3d184d2
8 changed files with 156 additions and 85 deletions
|
@ -117,8 +117,8 @@ return array(
|
|||
'rsrc/css/layout/phabricator-source-code-view.css' => 'cbeef983',
|
||||
'rsrc/css/phui/calendar/phui-calendar-day.css' => 'd1cf6f93',
|
||||
'rsrc/css/phui/calendar/phui-calendar-list.css' => '56e6381a',
|
||||
'rsrc/css/phui/calendar/phui-calendar-month.css' => '476be7e0',
|
||||
'rsrc/css/phui/calendar/phui-calendar.css' => 'ccabe893',
|
||||
'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',
|
||||
'rsrc/css/phui/phui-action-panel.css' => '91c7b835',
|
||||
'rsrc/css/phui/phui-badge.css' => '3baef8db',
|
||||
|
@ -825,10 +825,10 @@ return array(
|
|||
'phui-big-info-view-css' => 'bd903741',
|
||||
'phui-box-css' => '5c8387cf',
|
||||
'phui-button-css' => '4a5fbe3d',
|
||||
'phui-calendar-css' => 'ccabe893',
|
||||
'phui-calendar-css' => '3354bbd6',
|
||||
'phui-calendar-day-css' => 'd1cf6f93',
|
||||
'phui-calendar-list-css' => '56e6381a',
|
||||
'phui-calendar-month-css' => '476be7e0',
|
||||
'phui-calendar-month-css' => 'f3bb2030',
|
||||
'phui-chart-css' => '6bf6f78e',
|
||||
'phui-crumbs-view-css' => '6b813619',
|
||||
'phui-curtain-view-css' => '7148ae25',
|
||||
|
|
|
@ -255,7 +255,7 @@ final class PhabricatorCalendarEventSearchEngine
|
|||
array $handles) {
|
||||
|
||||
if ($this->isMonthView($query)) {
|
||||
return $this->buildCalendarView($events, $query, $handles);
|
||||
return $this->buildCalendarView($events, $query);
|
||||
} else if ($this->isDayView($query)) {
|
||||
return $this->buildCalendarDayView($events, $query, $handles);
|
||||
}
|
||||
|
@ -283,32 +283,14 @@ final class PhabricatorCalendarEventSearchEngine
|
|||
$item->addAttribute($event->renderEventDate($viewer, false));
|
||||
|
||||
if ($event->isCancelledEvent()) {
|
||||
$status_icon = 'fa-times red';
|
||||
$status_label = pht('Cancelled');
|
||||
$item->setDisabled(true);
|
||||
} else if ($viewer->isLoggedIn()) {
|
||||
$status = $event->getUserInviteStatus($viewer->getPHID());
|
||||
switch ($status) {
|
||||
case PhabricatorCalendarEventInvitee::STATUS_ATTENDING:
|
||||
$status_icon = 'fa-check-circle green';
|
||||
$status_label = pht('Attending');
|
||||
break;
|
||||
case PhabricatorCalendarEventInvitee::STATUS_INVITED:
|
||||
$status_icon = 'fa-user-plus green';
|
||||
$status_label = pht('Invited');
|
||||
break;
|
||||
case PhabricatorCalendarEventInvitee::STATUS_DECLINED:
|
||||
$status_icon = 'fa-times grey';
|
||||
$status_label = pht('Declined');
|
||||
break;
|
||||
default:
|
||||
$status_icon = $event->getIcon().' grey';
|
||||
$status_label = null;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
$item->setStatusIcon($status_icon, $status_label);
|
||||
$status_icon = $event->getDisplayIcon($viewer);
|
||||
$status_color = $event->getDisplayIconColor($viewer);
|
||||
$status_label = $event->getDisplayIconLabel($viewer);
|
||||
|
||||
$item->setStatusIcon("{$status_icon} {$status_color}", $status_label);
|
||||
|
||||
$host = pht(
|
||||
'Hosted by %s',
|
||||
|
@ -326,12 +308,12 @@ final class PhabricatorCalendarEventSearchEngine
|
|||
}
|
||||
|
||||
private function buildCalendarView(
|
||||
array $statuses,
|
||||
PhabricatorSavedQuery $query,
|
||||
array $handles) {
|
||||
array $events,
|
||||
PhabricatorSavedQuery $query) {
|
||||
assert_instances_of($events, 'PhabricatorCalendarEvent');
|
||||
|
||||
$viewer = $this->requireViewer();
|
||||
$now = time();
|
||||
$now = PhabricatorTime::getNow();
|
||||
|
||||
list($start_year, $start_month) =
|
||||
$this->getDisplayYearAndMonthAndDay(
|
||||
|
@ -339,9 +321,9 @@ final class PhabricatorCalendarEventSearchEngine
|
|||
$this->getQueryDateTo($query)->getEpoch(),
|
||||
$query->getParameter('display'));
|
||||
|
||||
$now_year = phabricator_format_local_time($now, $viewer, 'Y');
|
||||
$now_year = phabricator_format_local_time($now, $viewer, 'Y');
|
||||
$now_month = phabricator_format_local_time($now, $viewer, 'm');
|
||||
$now_day = phabricator_format_local_time($now, $viewer, 'j');
|
||||
$now_day = phabricator_format_local_time($now, $viewer, 'j');
|
||||
|
||||
if ($start_month == $now_month && $start_year == $now_year) {
|
||||
$month_view = new PHUICalendarMonthView(
|
||||
|
@ -360,27 +342,21 @@ final class PhabricatorCalendarEventSearchEngine
|
|||
|
||||
$month_view->setUser($viewer);
|
||||
|
||||
$phids = mpull($statuses, 'getHostPHID');
|
||||
$handles = $viewer->loadHandles($phids);
|
||||
foreach ($events as $event) {
|
||||
$epoch_min = $event->getViewerDateFrom();
|
||||
$epoch_max = $event->getViewerDateTo();
|
||||
|
||||
foreach ($statuses as $status) {
|
||||
$viewer_is_invited = $status->getIsUserInvited($viewer->getPHID());
|
||||
$event_view = id(new AphrontCalendarEventView())
|
||||
->setHostPHID($event->getHostPHID())
|
||||
->setEpochRange($epoch_min, $epoch_max)
|
||||
->setIsCancelled($event->isCancelledEvent())
|
||||
->setName($event->getName())
|
||||
->setURI($event->getURI())
|
||||
->setIsAllDay($event->getIsAllDay())
|
||||
->setIcon($event->getDisplayIcon($viewer))
|
||||
->setIconColor($event->getDisplayIconColor($viewer));
|
||||
|
||||
$event = new AphrontCalendarEventView();
|
||||
$event->setEpochRange(
|
||||
$status->getViewerDateFrom(),
|
||||
$status->getViewerDateTo());
|
||||
$event->setIsAllDay($status->getIsAllDay());
|
||||
$event->setIcon($status->getIcon());
|
||||
|
||||
$name_text = $handles[$status->getHostPHID()]->getName();
|
||||
$status_text = $status->getName();
|
||||
$event->setHostPHID($status->getHostPHID());
|
||||
$event->setDescription(pht('%s (%s)', $name_text, $status_text));
|
||||
$event->setName($status_text);
|
||||
$event->setURI($status->getURI());
|
||||
$event->setViewerIsInvited($viewer_is_invited);
|
||||
$month_view->addEvent($event);
|
||||
$month_view->addEvent($event_view);
|
||||
}
|
||||
|
||||
$month_view->setBrowseURI(
|
||||
|
|
|
@ -531,6 +531,66 @@ final class PhabricatorCalendarEvent extends PhabricatorCalendarDAO
|
|||
}
|
||||
|
||||
|
||||
public function getDisplayIcon(PhabricatorUser $viewer) {
|
||||
if ($this->isCancelledEvent()) {
|
||||
return 'fa-times';
|
||||
}
|
||||
|
||||
if ($viewer->isLoggedIn()) {
|
||||
$status = $this->getUserInviteStatus($viewer->getPHID());
|
||||
switch ($status) {
|
||||
case PhabricatorCalendarEventInvitee::STATUS_ATTENDING:
|
||||
return 'fa-check-circle';
|
||||
case PhabricatorCalendarEventInvitee::STATUS_INVITED:
|
||||
return 'fa-user-plus';
|
||||
case PhabricatorCalendarEventInvitee::STATUS_DECLINED:
|
||||
return 'fa-times';
|
||||
}
|
||||
}
|
||||
|
||||
return $this->getIcon();
|
||||
}
|
||||
|
||||
public function getDisplayIconColor(PhabricatorUser $viewer) {
|
||||
if ($this->isCancelledEvent()) {
|
||||
return 'red';
|
||||
}
|
||||
|
||||
if ($viewer->isLoggedIn()) {
|
||||
$status = $this->getUserInviteStatus($viewer->getPHID());
|
||||
switch ($status) {
|
||||
case PhabricatorCalendarEventInvitee::STATUS_ATTENDING:
|
||||
return 'green';
|
||||
case PhabricatorCalendarEventInvitee::STATUS_INVITED:
|
||||
return 'green';
|
||||
case PhabricatorCalendarEventInvitee::STATUS_DECLINED:
|
||||
return 'grey';
|
||||
}
|
||||
}
|
||||
|
||||
return 'bluegrey';
|
||||
}
|
||||
|
||||
public function getDisplayIconLabel(PhabricatorUser $viewer) {
|
||||
if ($this->isCancelledEvent()) {
|
||||
return pht('Cancelled');
|
||||
}
|
||||
|
||||
if ($viewer->isLoggedIn()) {
|
||||
$status = $this->getUserInviteStatus($viewer->getPHID());
|
||||
switch ($status) {
|
||||
case PhabricatorCalendarEventInvitee::STATUS_ATTENDING:
|
||||
return pht('Attending');
|
||||
case PhabricatorCalendarEventInvitee::STATUS_INVITED:
|
||||
return pht('Invited');
|
||||
case PhabricatorCalendarEventInvitee::STATUS_DECLINED:
|
||||
return pht('Declined');
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
/* -( Markup Interface )--------------------------------------------------- */
|
||||
|
||||
|
|
|
@ -12,7 +12,27 @@ final class AphrontCalendarEventView extends AphrontView {
|
|||
private $uri;
|
||||
private $isAllDay;
|
||||
private $icon;
|
||||
private $iconColor;
|
||||
private $canEdit;
|
||||
private $isCancelled;
|
||||
|
||||
public function setIconColor($icon_color) {
|
||||
$this->iconColor = $icon_color;
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function getIconColor() {
|
||||
return $this->iconColor;
|
||||
}
|
||||
|
||||
public function setIsCancelled($is_cancelled) {
|
||||
$this->isCancelled = $is_cancelled;
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function getIsCancelled() {
|
||||
return $this->isCancelled;
|
||||
}
|
||||
|
||||
public function setURI($uri) {
|
||||
$this->uri = $uri;
|
||||
|
|
|
@ -53,14 +53,11 @@ final class PHUICalendarListView extends AphrontTagView {
|
|||
$this->getUser());
|
||||
}
|
||||
|
||||
if ($event->getViewerIsInvited()) {
|
||||
$icon_color = 'green';
|
||||
} else {
|
||||
$icon_color = null;
|
||||
}
|
||||
$icon_icon = $event->getIcon();
|
||||
$icon_color = $event->getIconColor();
|
||||
|
||||
$dot = id(new PHUIIconView())
|
||||
->setIcon($event->getIcon(), $icon_color)
|
||||
->setIcon($icon_icon, $icon_color)
|
||||
->addClass('phui-calendar-list-item-icon');
|
||||
|
||||
$title = phutil_tag(
|
||||
|
@ -76,12 +73,14 @@ final class PHUICalendarListView extends AphrontTagView {
|
|||
),
|
||||
$timelabel);
|
||||
|
||||
$class = 'phui-calendar-list-item';
|
||||
if ($event->getViewerIsInvited()) {
|
||||
$class = $class.' phui-calendar-viewer-invited';
|
||||
}
|
||||
$event_classes = array();
|
||||
$event_classes[] = 'phui-calendar-list-item';
|
||||
if ($event->getIsAllDay()) {
|
||||
$class = $class.' all-day';
|
||||
$event_classes[] = 'all-day';
|
||||
}
|
||||
|
||||
if ($event->getIsCancelled()) {
|
||||
$event_classes[] = 'event-cancelled';
|
||||
}
|
||||
|
||||
$tip = $this->getEventTooltip($event);
|
||||
|
@ -92,6 +91,7 @@ final class PHUICalendarListView extends AphrontTagView {
|
|||
} else {
|
||||
$tip_align = 'W';
|
||||
}
|
||||
|
||||
$content = javelin_tag(
|
||||
'a',
|
||||
array(
|
||||
|
@ -112,7 +112,7 @@ final class PHUICalendarListView extends AphrontTagView {
|
|||
$singletons[] = phutil_tag(
|
||||
'li',
|
||||
array(
|
||||
'class' => $class,
|
||||
'class' => implode(' ', $event_classes),
|
||||
),
|
||||
$content);
|
||||
}
|
||||
|
|
|
@ -236,16 +236,7 @@ final class PHUICalendarMonthView extends AphrontView {
|
|||
$cell_day = null;
|
||||
}
|
||||
|
||||
if ($date && $date->format('j') == $this->day &&
|
||||
$date->format('m') == $this->month) {
|
||||
$today_class = 'phui-calendar-today-slot phui-calendar-today';
|
||||
} else {
|
||||
$today_class = 'phui-calendar-today-slot';
|
||||
}
|
||||
|
||||
if ($this->isDateInCurrentWeek($date)) {
|
||||
$today_class .= ' phui-calendar-this-week';
|
||||
}
|
||||
$today_class = 'phui-calendar-today-slot';
|
||||
|
||||
$last_week_day = 6;
|
||||
if ($date->format('w') == $last_week_day) {
|
||||
|
@ -271,10 +262,25 @@ final class PHUICalendarMonthView extends AphrontView {
|
|||
$today_slot,
|
||||
));
|
||||
|
||||
$classes = array();
|
||||
$classes[] = 'phui-calendar-date-number-container';
|
||||
|
||||
if ($date) {
|
||||
if ($this->isDateInCurrentWeek($date)) {
|
||||
$classes[] = 'phui-calendar-this-week';
|
||||
}
|
||||
|
||||
if ($date->format('j') == $this->day) {
|
||||
if ($date->format('m') == $this->month) {
|
||||
$classes[] = 'phui-calendar-today';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return phutil_tag(
|
||||
'td',
|
||||
array(
|
||||
'class' => 'phui-calendar-date-number-container '.$class,
|
||||
'class' => implode(' ', $classes),
|
||||
),
|
||||
$cell_div);
|
||||
}
|
||||
|
|
|
@ -133,12 +133,17 @@ table.phui-calendar-view td.phui-calendar-date-number-container {
|
|||
right: 0px;
|
||||
}
|
||||
|
||||
.phui-calendar-today-slot.phui-calendar-this-week {
|
||||
background-color: {$blueborder};
|
||||
.phui-calendar-this-week .phui-calendar-today-slot {
|
||||
background-color: {$blue};
|
||||
}
|
||||
|
||||
.phui-calendar-today-slot.phui-calendar-today {
|
||||
background-color: {$lightblueborder};
|
||||
.phui-calendar-today .phui-calendar-today-slot,
|
||||
.phui-calendar-today .phui-calendar-date-number {
|
||||
background-color: {$sky};
|
||||
}
|
||||
|
||||
table.phui-calendar-view .phui-calendar-today a.phui-calendar-date-number {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.phui-calendar-event-empty {
|
||||
|
@ -159,7 +164,7 @@ table.phui-calendar-view td.phui-calendar-date-number-container {
|
|||
|
||||
.phui-calendar-view .phui-calendar-list li.phui-calendar-list-item.all-day {
|
||||
height: 20px;
|
||||
background-color: {$darkgreybackground};
|
||||
background-color: {$bluebackground};
|
||||
display: block;
|
||||
float: none;
|
||||
}
|
||||
|
@ -194,7 +199,7 @@ li.phui-calendar-viewer-invited.all-day {
|
|||
.phui-calendar-view li.phui-calendar-list-item .phui-calendar-list-title {
|
||||
width: auto;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
left: 16px;
|
||||
right: 60px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
|
|
@ -2,9 +2,13 @@
|
|||
* @provides phui-calendar-css
|
||||
*/
|
||||
|
||||
.phui-calendar-list a {
|
||||
color: {$lightgreytext};
|
||||
}
|
||||
.phui-calendar-list a {
|
||||
color: {$greytext};
|
||||
}
|
||||
|
||||
.phui-calendar-list .event-cancelled .phui-calendar-list-title {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.phui-calendar-viewer-invited a {
|
||||
color: {$green};
|
||||
|
|
Loading…
Reference in a new issue