1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-18 21:02:41 +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:
epriestley 2016-07-14 09:47:46 -07:00
parent e2b6912b9d
commit b6c3d184d2
8 changed files with 156 additions and 85 deletions

View file

@ -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',

View file

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

View file

@ -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 )--------------------------------------------------- */

View file

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

View file

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

View file

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

View file

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

View file

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