From b6c3d184d200e6bc43ba8f15a069c3a8620779cc Mon Sep 17 00:00:00 2001 From: epriestley Date: Thu, 14 Jul 2016 09:47:46 -0700 Subject: [PATCH] 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 --- resources/celerity/map.php | 8 +- .../PhabricatorCalendarEventSearchEngine.php | 74 +++++++------------ .../storage/PhabricatorCalendarEvent.php | 60 +++++++++++++++ .../view/AphrontCalendarEventView.php | 20 +++++ .../phui/calendar/PHUICalendarListView.php | 24 +++--- .../phui/calendar/PHUICalendarMonthView.php | 28 ++++--- .../css/phui/calendar/phui-calendar-month.css | 17 +++-- .../rsrc/css/phui/calendar/phui-calendar.css | 10 ++- 8 files changed, 156 insertions(+), 85 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 31a56d7e70..276223ec85 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -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', diff --git a/src/applications/calendar/query/PhabricatorCalendarEventSearchEngine.php b/src/applications/calendar/query/PhabricatorCalendarEventSearchEngine.php index f9083f9021..9cbb1985a6 100644 --- a/src/applications/calendar/query/PhabricatorCalendarEventSearchEngine.php +++ b/src/applications/calendar/query/PhabricatorCalendarEventSearchEngine.php @@ -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( diff --git a/src/applications/calendar/storage/PhabricatorCalendarEvent.php b/src/applications/calendar/storage/PhabricatorCalendarEvent.php index f0f9598b98..ca42f872f7 100644 --- a/src/applications/calendar/storage/PhabricatorCalendarEvent.php +++ b/src/applications/calendar/storage/PhabricatorCalendarEvent.php @@ -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 )--------------------------------------------------- */ diff --git a/src/applications/calendar/view/AphrontCalendarEventView.php b/src/applications/calendar/view/AphrontCalendarEventView.php index 40317047a3..0dc9231e6f 100644 --- a/src/applications/calendar/view/AphrontCalendarEventView.php +++ b/src/applications/calendar/view/AphrontCalendarEventView.php @@ -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; diff --git a/src/view/phui/calendar/PHUICalendarListView.php b/src/view/phui/calendar/PHUICalendarListView.php index 7dd921d769..cff2dcf8a5 100644 --- a/src/view/phui/calendar/PHUICalendarListView.php +++ b/src/view/phui/calendar/PHUICalendarListView.php @@ -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); } diff --git a/src/view/phui/calendar/PHUICalendarMonthView.php b/src/view/phui/calendar/PHUICalendarMonthView.php index da7220f015..f3f90c5a14 100644 --- a/src/view/phui/calendar/PHUICalendarMonthView.php +++ b/src/view/phui/calendar/PHUICalendarMonthView.php @@ -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); } diff --git a/webroot/rsrc/css/phui/calendar/phui-calendar-month.css b/webroot/rsrc/css/phui/calendar/phui-calendar-month.css index a219e49cf7..adaeabadd0 100644 --- a/webroot/rsrc/css/phui/calendar/phui-calendar-month.css +++ b/webroot/rsrc/css/phui/calendar/phui-calendar-month.css @@ -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; diff --git a/webroot/rsrc/css/phui/calendar/phui-calendar.css b/webroot/rsrc/css/phui/calendar/phui-calendar.css index d2a094c65a..637a479aa8 100644 --- a/webroot/rsrc/css/phui/calendar/phui-calendar.css +++ b/webroot/rsrc/css/phui/calendar/phui-calendar.css @@ -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};