From 4859a3373921bac761c725d87a1e10df519cb35c Mon Sep 17 00:00:00 2001 From: epriestley Date: Fri, 15 Jul 2016 14:02:24 -0700 Subject: [PATCH] Make Calendar day view a little more consistent Summary: Ref T11326. This just cleans things up a little and removes some of the obvious layout/CSS issues. Test Plan: - Viewed day view before/after. Also viewed profile panel. Before: {F1725547} After: {F1725548} Reviewers: chad Reviewed By: chad Maniphest Tasks: T11326 Differential Revision: https://secure.phabricator.com/D16308 --- resources/celerity/map.php | 15 +++--- .../PhabricatorCalendarEventSearchEngine.php | 48 +++++++++--------- ...PhabricatorPeopleProfileViewController.php | 6 ++- .../phui/calendar/PHUICalendarDayView.php | 16 +++--- .../css/phui/calendar/phui-calendar-day.css | 37 +++++++------- .../css/phui/calendar/phui-calendar-list.css | 2 +- .../application/calendar/behavior-day-view.js | 50 ++++++++++--------- 7 files changed, 90 insertions(+), 84 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 276223ec85..0a3bdd965f 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -115,8 +115,8 @@ return array( 'rsrc/css/layout/phabricator-filetree-view.css' => 'fccf9f82', 'rsrc/css/layout/phabricator-side-menu-view.css' => 'dd849797', '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-day.css' => 'f15bb6d6', + 'rsrc/css/phui/calendar/phui-calendar-list.css' => '5d89cd71', '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', @@ -362,7 +362,7 @@ return array( 'rsrc/js/application/aphlict/behavior-aphlict-status.js' => 'ea681761', 'rsrc/js/application/aphlict/behavior-desktop-notifications-control.js' => 'edd1ba66', 'rsrc/js/application/auth/behavior-persona-login.js' => '9414ff18', - 'rsrc/js/application/calendar/behavior-day-view.js' => '1a5bb063', + 'rsrc/js/application/calendar/behavior-day-view.js' => '4b3c4443', 'rsrc/js/application/calendar/behavior-event-all-day.js' => '38dcf3c8', 'rsrc/js/application/calendar/behavior-recurring-edit.js' => '5f1c4d5f', 'rsrc/js/application/config/behavior-reorder-fields.js' => 'b6993408', @@ -603,7 +603,7 @@ return array( 'javelin-behavior-dashboard-move-panels' => '019f36c4', 'javelin-behavior-dashboard-query-panel-select' => '453c5375', 'javelin-behavior-dashboard-tab-panel' => 'd4eecc63', - 'javelin-behavior-day-view' => '1a5bb063', + 'javelin-behavior-day-view' => '4b3c4443', 'javelin-behavior-desktop-notifications-control' => 'edd1ba66', 'javelin-behavior-detect-timezone' => '4c193c96', 'javelin-behavior-device' => 'bb1dd507', @@ -826,8 +826,8 @@ return array( 'phui-box-css' => '5c8387cf', 'phui-button-css' => '4a5fbe3d', 'phui-calendar-css' => '3354bbd6', - 'phui-calendar-day-css' => 'd1cf6f93', - 'phui-calendar-list-css' => '56e6381a', + 'phui-calendar-day-css' => 'f15bb6d6', + 'phui-calendar-list-css' => '5d89cd71', 'phui-calendar-month-css' => 'f3bb2030', 'phui-chart-css' => '6bf6f78e', 'phui-crumbs-view-css' => '6b813619', @@ -1233,6 +1233,9 @@ return array( 'javelin-dom', 'javelin-vector', ), + '4b3c4443' => array( + 'phuix-icon-view', + ), '4b700e9e' => array( 'javelin-behavior', 'javelin-dom', diff --git a/src/applications/calendar/query/PhabricatorCalendarEventSearchEngine.php b/src/applications/calendar/query/PhabricatorCalendarEventSearchEngine.php index 9cbb1985a6..86d298d069 100644 --- a/src/applications/calendar/query/PhabricatorCalendarEventSearchEngine.php +++ b/src/applications/calendar/query/PhabricatorCalendarEventSearchEngine.php @@ -257,7 +257,7 @@ final class PhabricatorCalendarEventSearchEngine if ($this->isMonthView($query)) { return $this->buildCalendarView($events, $query); } else if ($this->isDayView($query)) { - return $this->buildCalendarDayView($events, $query, $handles); + return $this->buildCalendarDayView($events, $query); } assert_instances_of($events, 'PhabricatorCalendarEvent'); @@ -370,9 +370,8 @@ final class PhabricatorCalendarEventSearchEngine } private function buildCalendarDayView( - array $statuses, - PhabricatorSavedQuery $query, - array $handles) { + array $events, + PhabricatorSavedQuery $query) { $viewer = $this->requireViewer(); @@ -392,33 +391,32 @@ final class PhabricatorCalendarEventSearchEngine $day_view->setUser($viewer); - $phids = mpull($statuses, 'getHostPHID'); - - foreach ($statuses as $status) { - if ($status->getIsCancelled()) { - continue; - } - - $viewer_is_invited = $status->getIsUserInvited($viewer->getPHID()); + $phids = mpull($events, 'getHostPHID'); + foreach ($events as $event) { $can_edit = PhabricatorPolicyFilter::hasCapability( $viewer, - $status, + $event, PhabricatorPolicyCapability::CAN_EDIT); - $event = new AphrontCalendarEventView(); - $event->setCanEdit($can_edit); - $event->setEventID($status->getID()); - $event->setEpochRange( - $status->getViewerDateFrom(), - $status->getViewerDateTo()); - $event->setIsAllDay($status->getIsAllDay()); - $event->setIcon($status->getIcon()); - $event->setViewerIsInvited($viewer_is_invited); + $epoch_min = $event->getViewerDateFrom(); + $epoch_max = $event->getViewerDateTo(); - $event->setName($status->getName()); - $event->setURI($status->getURI()); - $day_view->addEvent($event); + $status_icon = $event->getDisplayIcon($viewer); + $status_color = $event->getDisplayIconColor($viewer); + + $event_view = id(new AphrontCalendarEventView()) + ->setCanEdit($can_edit) + ->setEventID($event->getID()) + ->setEpochRange($epoch_min, $epoch_max) + ->setIsAllDay($event->getIsAllDay()) + ->setIcon($status_icon) + ->setIconColor($status_color) + ->setName($event->getName()) + ->setURI($event->getURI()) + ->setIsCancelled($event->isCancelledEvent()); + + $day_view->addEvent($event_view); } $day_view->setBrowseURI( diff --git a/src/applications/people/controller/PhabricatorPeopleProfileViewController.php b/src/applications/people/controller/PhabricatorPeopleProfileViewController.php index 66d5e91af6..4621aba3c5 100644 --- a/src/applications/people/controller/PhabricatorPeopleProfileViewController.php +++ b/src/applications/people/controller/PhabricatorPeopleProfileViewController.php @@ -234,11 +234,13 @@ final class PhabricatorPeopleProfileViewController ->setHeader(pht('Calendar')) ->setHref( urisprintf( - '/calendar/?invitedPHIDs=%s#R', - $user->getPHID())); + '/calendar/?invited=%s#R', + $user->getUsername())); + $box = id(new PHUIObjectBoxView()) ->setHeader($header) ->appendChild($day_view) + ->addClass('calendar-profile-box') ->setBackground(PHUIObjectBoxView::GREY); return $box; diff --git a/src/view/phui/calendar/PHUICalendarDayView.php b/src/view/phui/calendar/PHUICalendarDayView.php index ee9e8b5cf4..a2cab191a5 100644 --- a/src/view/phui/calendar/PHUICalendarDayView.php +++ b/src/view/phui/calendar/PHUICalendarDayView.php @@ -85,6 +85,8 @@ final class PHUICalendarDayView extends AphrontView { 'id' => $all_day_event->getEventID(), 'viewerIsInvited' => $all_day_event->getViewerIsInvited(), 'uri' => $all_day_event->getURI(), + 'displayIcon' => $all_day_event->getIcon(), + 'displayIconColor' => $all_day_event->getIconColor(), ); } } @@ -140,6 +142,8 @@ final class PHUICalendarDayView extends AphrontView { 'top' => $top.'px', 'height' => $height.'px', 'canEdit' => $event->getCanEdit(), + 'displayIcon' => $event->getIcon(), + 'displayIconColor' => $event->getIconColor(), ); } } @@ -183,17 +187,11 @@ final class PHUICalendarDayView extends AphrontView { ->setFlush(true); $layout = id(new AphrontMultiColumnView()) - ->addColumn($sidebar, 'third') + ->addColumn($sidebar, 'third phui-day-view-upcoming') ->addColumn($table_box, 'thirds phui-day-view-column') - ->setFluidLayout(true) - ->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM); + ->setFluidLayout(true); - return phutil_tag( - 'div', - array( - 'class' => 'ml', - ), - $layout); + return $layout; } private function getAllDayEvents() { diff --git a/webroot/rsrc/css/phui/calendar/phui-calendar-day.css b/webroot/rsrc/css/phui/calendar/phui-calendar-day.css index e012be0afa..acb577675a 100644 --- a/webroot/rsrc/css/phui/calendar/phui-calendar-day.css +++ b/webroot/rsrc/css/phui/calendar/phui-calendar-day.css @@ -10,6 +10,15 @@ width: 100%; } +.aphront-multi-column-column-outer.phui-day-view-upcoming, +.aphront-multi-column-column-outer.phui-day-view-column{ + padding: 0; +} + +.aphront-multi-column-column-outer.phui-day-view-upcoming .phui-header-shell { + margin: 0; +} + .phui-calendar-day-view { overflow: scroll; width: 100%; @@ -61,17 +70,13 @@ div.phui-calendar-day-event.all-day { } .phui-calendar-day-event-link { - padding: 8px; - border: 1px solid {$greyborder}; - background-color: {$darkgreybackground}; - margin: 0 1px; + margin: 0 0 -1px -1px; + box-sizing: border-box; position: absolute; left: 0; right: 0; top: 0; bottom: 0; - text-decoration: none; - color: {$greytext}; } .phui-calendar-day-event-link.viewer-invited-day-event { @@ -80,21 +85,19 @@ div.phui-calendar-day-event.all-day { color: {$green}; } -.day-view-all-day { - border: 1px solid {$greyborder}; - height: 12px; - margin: 0; - display: block; +.day-view-all-day, +.phui-calendar-day-event-link { padding: 8px; - background-color: {$darkgreybackground}; - text-decoration: none; + border: 1px solid {$lightblueborder}; + background-color: {$bluebackground}; color: {$greytext}; + text-decoration: none; + text-decoration: none; } -.day-view-all-day.viewer-invited-day-event { - border-color: {$green}; - background-color: {$lightgreen}; - color: {$green}; +.day-view-all-day { + margin: 3px 0 3px 4px; + display: block; } .phui-calendar-day-event + .phui-calendar-day-event .day-view-all-day { diff --git a/webroot/rsrc/css/phui/calendar/phui-calendar-list.css b/webroot/rsrc/css/phui/calendar/phui-calendar-list.css index 9580343415..9cf5e3bcd8 100644 --- a/webroot/rsrc/css/phui/calendar/phui-calendar-list.css +++ b/webroot/rsrc/css/phui/calendar/phui-calendar-list.css @@ -6,7 +6,7 @@ width: auto; } -.phui-calendar-list-container.calendar-day-view-sidebar .phui-object-box { +.calendar-profile-box .calendar-day-view-sidebar .phui-object-box { border-bottom: none; margin: 0; padding: 0 12px 12px; diff --git a/webroot/rsrc/js/application/calendar/behavior-day-view.js b/webroot/rsrc/js/application/calendar/behavior-day-view.js index 651698b026..7f821ffe83 100644 --- a/webroot/rsrc/js/application/calendar/behavior-day-view.js +++ b/webroot/rsrc/js/application/calendar/behavior-day-view.js @@ -1,8 +1,7 @@ /** * @provides javelin-behavior-day-view + * @requires phuix-icon-view */ - - JX.behavior('day-view', function(config) { function findTodayClusters() { @@ -92,13 +91,20 @@ JX.behavior('day-view', function(config) { link_class = link_class + ' viewer-invited-day-event'; } + var icon = new JX.PHUIXIconView() + .setIcon(e.displayIcon) + .setColor(e.displayIconColor) + .getNode(); + + var content = [icon, ' ', name]; + var name_link = JX.$N( 'a', { className : link_class, href: uri }, - name); + content); var class_name = 'phui-calendar-day-event'; if (e.canEdit) { @@ -123,22 +129,22 @@ JX.behavior('day-view', function(config) { return div; } - function drawAllDayEvent( - viewerIsInvited, - uri, - name) { + function drawAllDayEvent(e) { var class_name = 'day-view-all-day'; - if (viewerIsInvited) { - class_name = class_name + ' viewer-invited-day-event'; - } - name = JX.$N( + var icon = new JX.PHUIXIconView() + .setIcon(e.displayIcon) + .setColor(e.displayIconColor) + .getNode(); + var content = [icon, ' ', e.name]; + + var name = JX.$N( 'a', { className: class_name, - href: uri + href: e.uri }, - name); + content); var all_day_label = JX.$N( 'span', @@ -220,10 +226,7 @@ JX.behavior('day-view', function(config) { var all_day_events = []; for(i=0; i < today_all_day_events.length; i++) { var all_day_event = today_all_day_events[i]; - all_day_events.push(drawAllDayEvent( - all_day_event['viewerIsInvited'], - all_day_event['uri'], - all_day_event['name'])); + all_day_events.push(drawAllDayEvent(all_day_event)); } var table = JX.$N( @@ -329,15 +332,14 @@ JX.behavior('day-view', function(config) { } var data = e.getNodeData('phui-calendar-day-event-cell'); var time = data.time; + new JX.Workflow( - '/calendar/event/create/', + '/calendar/event/edit/', { - year: year, - month: month, - day: day, - time: time, - next: 'day', - query: query + start_d: year + '-' + month + '-' + day, + start_t: time, + end_d: year + '-' + month + '-' + day, + end_t: time + ' +1 hour' }) .start(); });