Index: resources/celerity/map.php =================================================================== --- resources/celerity/map.php +++ resources/celerity/map.php @@ -19,7 +19,6 @@ 'maniphest.pkg.js' => '1e8f11af', 'rsrc/css/aphront/aphront-bars.css' => '231ac33c', 'rsrc/css/aphront/aphront-notes.css' => '6acadd3f', - 'rsrc/css/aphront/calendar-view.css' => '166af03d', 'rsrc/css/aphront/context-bar.css' => '1c3b0529', 'rsrc/css/aphront/dark-console.css' => '6378ef3d', 'rsrc/css/aphront/dialog-view.css' => 'dd9db96c', @@ -126,6 +125,7 @@ 'rsrc/css/layout/phabricator-source-code-view.css' => '62a99814', 'rsrc/css/phui/phui-box.css' => '6c21bd6a', 'rsrc/css/phui/phui-button.css' => '8784a966', + 'rsrc/css/phui/phui-calendar-month.css' => '3474d15a', 'rsrc/css/phui/phui-document.css' => '143b2ac8', 'rsrc/css/phui/phui-feed-story.css' => '3a59c2cf', 'rsrc/css/phui/phui-form-view.css' => '0efd3326', @@ -478,7 +478,6 @@ 'symbols' => array( 'aphront-bars' => '231ac33c', - 'aphront-calendar-view-css' => '166af03d', 'aphront-contextbar-view-css' => '1c3b0529', 'aphront-dark-console-css' => '6378ef3d', 'aphront-dialog-view-css' => 'dd9db96c', @@ -738,6 +737,7 @@ 'phriction-document-css' => 'b0309d8e', 'phui-box-css' => '6c21bd6a', 'phui-button-css' => '8784a966', + 'phui-calendar-month-css' => '3474d15a', 'phui-document-view-css' => '143b2ac8', 'phui-feed-story-css' => '3a59c2cf', 'phui-form-css' => 'b78ec020', Index: src/__phutil_library_map__.php =================================================================== --- src/__phutil_library_map__.php +++ src/__phutil_library_map__.php @@ -20,7 +20,6 @@ 'AphrontBarView' => 'view/widget/bars/AphrontBarView.php', 'AphrontCSRFException' => 'aphront/exception/AphrontCSRFException.php', 'AphrontCalendarEventView' => 'applications/calendar/view/AphrontCalendarEventView.php', - 'AphrontCalendarMonthView' => 'applications/calendar/view/AphrontCalendarMonthView.php', 'AphrontContextBarView' => 'view/layout/AphrontContextBarView.php', 'AphrontController' => 'aphront/AphrontController.php', 'AphrontCursorPagerView' => 'view/control/AphrontCursorPagerView.php', @@ -983,6 +982,7 @@ 'PHUIButtonBarView' => 'view/phui/PHUIButtonBarView.php', 'PHUIButtonExample' => 'applications/uiexample/examples/PHUIButtonExample.php', 'PHUIButtonView' => 'view/phui/PHUIButtonView.php', + 'PHUICalendarMonthView' => 'applications/calendar/view/PHUICalendarMonthView.php', 'PHUIColorPalletteExample' => 'applications/uiexample/examples/PHUIColorPalletteExample.php', 'PHUIDocumentExample' => 'applications/uiexample/examples/PHUIDocumentExample.php', 'PHUIDocumentView' => 'view/phui/PHUIDocumentView.php', @@ -2549,7 +2549,6 @@ 'AphrontBarView' => 'AphrontView', 'AphrontCSRFException' => 'AphrontException', 'AphrontCalendarEventView' => 'AphrontView', - 'AphrontCalendarMonthView' => 'AphrontView', 'AphrontContextBarView' => 'AphrontView', 'AphrontController' => 'Phobject', 'AphrontCursorPagerView' => 'AphrontView', @@ -3613,6 +3612,7 @@ 'PHUIButtonBarView' => 'AphrontTagView', 'PHUIButtonExample' => 'PhabricatorUIExample', 'PHUIButtonView' => 'AphrontTagView', + 'PHUICalendarMonthView' => 'AphrontView', 'PHUIColorPalletteExample' => 'PhabricatorUIExample', 'PHUIDocumentExample' => 'PhabricatorUIExample', 'PHUIDocumentView' => 'AphrontTagView', Index: src/applications/calendar/controller/PhabricatorCalendarBrowseController.php =================================================================== --- src/applications/calendar/controller/PhabricatorCalendarBrowseController.php +++ src/applications/calendar/controller/PhabricatorCalendarBrowseController.php @@ -27,9 +27,9 @@ ->execute(); if ($month == $month_d && $year == $year_d) { - $month_view = new AphrontCalendarMonthView($month, $year, $day); + $month_view = new PHUICalendarMonthView($month, $year, $day); } else { - $month_view = new AphrontCalendarMonthView($month, $year); + $month_view = new PHUICalendarMonthView($month, $year); } $month_view->setBrowseURI($request->getRequestURI()); @@ -62,7 +62,7 @@ $nav->appendChild( array( $this->getNoticeView(), - phutil_tag('div', array('style' => 'padding: 20px;'), $month_view), + $month_view, )); return $this->buildApplicationPage( Index: src/applications/calendar/view/PHUICalendarMonthView.php =================================================================== --- src/applications/calendar/view/PHUICalendarMonthView.php +++ src/applications/calendar/view/PHUICalendarMonthView.php @@ -1,6 +1,6 @@ getDatesInMonth(); - require_celerity_resource('aphront-calendar-view-css'); + require_celerity_resource('phui-calendar-month-css'); $first = reset($days); $empty = $first->format('w'); @@ -52,7 +52,7 @@ $empty_box = phutil_tag( 'div', - array('class' => 'aphront-calendar-day aphront-calendar-empty'), + array('class' => 'phui-calendar-day phui-calendar-empty'), ''); for ($ii = 0; $ii < $empty; $ii++) { @@ -65,15 +65,15 @@ $day_number = $day->format('j'); $holiday = idx($this->holidays, $day->format('Y-m-d')); - $class = 'aphront-calendar-day'; + $class = 'phui-calendar-day'; $weekday = $day->format('w'); if ($day_number == $this->day) { - $class .= ' aphront-calendar-today'; + $class .= ' phui-calendar-today'; } if ($holiday || $weekday == 0 || $weekday == 6) { - $class .= ' aphront-calendar-not-work-day'; + $class .= ' phui-calendar-not-work-day'; } $day->setTime(0, 0, 0); @@ -88,7 +88,7 @@ $show_events = array_fill_keys( array_keys($show_events), phutil_tag_div( - 'aphront-calendar-event aphront-calendar-event-empty', + 'phui-calendar-event phui-calendar-event-empty', "\xC2\xA0")); //   } @@ -112,7 +112,7 @@ $holiday_markup = phutil_tag( 'div', array( - 'class' => 'aphront-calendar-holiday', + 'class' => 'phui-calendar-holiday', 'title' => $name, ), $name); @@ -121,7 +121,7 @@ $markup[] = phutil_tag_div( $class, array( - phutil_tag_div('aphront-calendar-date-number', $day_number), + phutil_tag_div('phui-calendar-date-number', $day_number), $holiday_markup, phutil_implode_html("\n", $show_events), )); @@ -134,15 +134,25 @@ while (count($row) < 7) { $row[] = $empty_box; } + $j = 0; foreach ($row as $cell) { - $cells[] = phutil_tag('td', array(), $cell); + if ($j == 0) { + $cells[] = phutil_tag( + 'td', + array( + 'class' => 'phui-calendar-month-weekstart'), + $cell); + } else { + $cells[] = phutil_tag('td', array(), $cell); + } + $j++; } $table[] = phutil_tag('tr', array(), $cells); } $header = phutil_tag( 'tr', - array('class' => 'aphront-calendar-day-of-week-header'), + array('class' => 'phui-calendar-day-of-week-header'), array( phutil_tag('th', array(), pht('Sun')), phutil_tag('th', array(), pht('Mon')), @@ -155,52 +165,69 @@ $table = phutil_tag( 'table', - array('class' => 'aphront-calendar-view'), + array('class' => 'phui-calendar-view'), array( - $this->renderCalendarHeader($first), $header, phutil_implode_html("\n", $table), )); - return $table; + $box = id(new PHUIObjectBoxView()) + ->setHeader($this->renderCalendarHeader($first)) + ->appendChild($table); + + return $box; } private function renderCalendarHeader(DateTime $date) { - $colspan = 7; - $left_th = ''; - $right_th = ''; + $button_bar = null; // check for a browseURI, which means we need "fancy" prev / next UI $uri = $this->getBrowseURI(); if ($uri) { - $colspan = 5; $uri = new PhutilURI($uri); list($prev_year, $prev_month) = $this->getPrevYearAndMonth(); $query = array('year' => $prev_year, 'month' => $prev_month); - $prev_link = phutil_tag( - 'a', - array('href' => (string) $uri->setQueryParams($query)), - "\xE2\x86\x90"); + $prev_uri = (string) $uri->setQueryParams($query); list($next_year, $next_month) = $this->getNextYearAndMonth(); $query = array('year' => $next_year, 'month' => $next_month); - $next_link = phutil_tag( - 'a', - array('href' => (string) $uri->setQueryParams($query)), - "\xE2\x86\x92"); + $next_uri = (string) $uri->setQueryParams($query); + + $button_bar = new PHUIButtonBarView(); + + $left_icon = id(new PHUIIconView()) + ->setSpriteSheet(PHUIIconView::SPRITE_BUTTONBAR) + ->setSpriteIcon('chevron-left'); + $left = id(new PHUIButtonView()) + ->setTag('a') + ->setColor(PHUIButtonView::GREY) + ->setHref($prev_uri) + ->setTitle(pht('Previous Month')) + ->setIcon($left_icon); + + $right_icon = id(new PHUIIconView()) + ->setSpriteSheet(PHUIIconView::SPRITE_BUTTONBAR) + ->setSpriteIcon('chevron-right'); + $right = id(new PHUIButtonView()) + ->setTag('a') + ->setColor(PHUIButtonView::GREY) + ->setHref($next_uri) + ->setTitle(pht('Next Month')) + ->setIcon($right_icon); + + $button_bar->addButton($left); + $button_bar->addButton($right); - $left_th = phutil_tag('th', array(), $prev_link); - $right_th = phutil_tag('th', array(), $next_link); } - return phutil_tag( - 'tr', - array('class' => 'aphront-calendar-month-year-header'), - array( - $left_th, - phutil_tag('th', array('colspan' => $colspan), $date->format('F Y')), - $right_th, - )); + $header = id(new PHUIHeaderView()) + ->setHeader($date->format('F Y')); + + if ($button_bar) { + $header->setButtonBar($button_bar); + } + + return $header; } private function getNextYearAndMonth() { @@ -279,16 +306,16 @@ $classes = array(); $when = array(); - $classes[] = 'aphront-calendar-event'; + $classes[] = 'phui-calendar-event'; if ($event_start < $epoch_start) { - $classes[] = 'aphront-calendar-event-continues-before'; + $classes[] = 'phui-calendar-event-continues-before'; $when[] = 'Started '.phabricator_datetime($event_start, $user); } else { $when[] = 'Starts at '.phabricator_time($event_start, $user); } if ($event_end > $epoch_end) { - $classes[] = 'aphront-calendar-event-continues-after'; + $classes[] = 'phui-calendar-event-continues-after'; $when[] = 'Ends '.phabricator_datetime($event_end, $user); } else { $when[] = 'Ends at '.phabricator_time($event_end, $user); @@ -309,7 +336,7 @@ 'tip' => $info."\n\n".implode("\n", $when), 'size' => 240, ), - 'class' => 'aphront-calendar-event-text', + 'class' => 'phui-calendar-event-text', 'href' => '/calendar/event/view/'.$event->getEventID().'/', ), phutil_utf8_shorten($event->getName(), 32)); Index: src/view/phui/PHUIHeaderView.php =================================================================== --- src/view/phui/PHUIHeaderView.php +++ src/view/phui/PHUIHeaderView.php @@ -14,6 +14,7 @@ private $bleedHeader; private $properties = array(); private $actionLinks = array(); + private $buttonBar = null; private $policyObject; public function setHeader($header) { @@ -71,6 +72,11 @@ return $this; } + public function setButtonBar(PHUIButtonBarView $bb) { + $this->buttonBar = $bb; + return $this; + } + public function setStatus($icon, $color, $name) { $header_class = 'phui-header-status'; @@ -206,6 +212,15 @@ $actions); } + if ($this->buttonBar) { + $header[] = phutil_tag( + 'div', + array( + 'class' => 'phui-header-action-links', + ), + $this->buttonBar); + } + return phutil_tag( 'div', array( Index: webroot/rsrc/css/aphront/calendar-view.css =================================================================== --- webroot/rsrc/css/aphront/calendar-view.css +++ /dev/null @@ -1,124 +0,0 @@ -/** - * @provides aphront-calendar-view-css - */ - -.aphront-calendar-view { - width: 100%; - border-collapse: collapse; - background: #fff; - border: 2px solid #4f3612; - box-shadow: 0px 2px 6px #ccc; -} - -tr.aphront-calendar-month-year-header th { - text-align: center; - font-weight: bold; - font-size: 20px; - padding: 10px; - color: white; - background: #4f3612; - height: 26px; - -} - -tr.aphront-calendar-month-year-header th a { - color: white; - font-weight: bold; - text-decoration: none; - display: block; -} - -tr.aphront-calendar-month-year-header th a:hover { - color: #feffd0; -} - -tr.aphront-calendar-day-of-week-header th { - text-align: center; - font-size: 11px; - padding: 3px; - color: white; - background: #896c45; -} - -table.aphront-calendar-view td { - border: 1px solid #dfdfdf; - width: 14.2857%; /* This is one seventh, approximately. */ -} - -table.aphront-calendar-view td div.aphront-calendar-day { - min-height: 125px; -} - -.aphront-calendar-holiday { - color: {$greytext}; - padding: .5em; - max-height: 1em; - overflow: hidden; -} - -.aphront-calendar-date-number { - font-weight: normal; - color: {$lightgreytext}; - padding: 4px; - border-color: #dfdfdf; - border-style: solid; - border-width: 0 0 1px 1px; - float: right; - background: #ffffff; - width: 1.25em; - height: 1.25em; - text-align: center; - margin-bottom: 3px; -} - -.aphront-calendar-not-work-day { - background-color: #fdfae7; -} - -.aphront-calendar-today { - background-color: #A6FAAD; -} - -.aphront-calendar-empty { - background-color: #ededed; -} - -.aphront-calendar-event { - clear: both; - - background: #006799; - font-size: 11px; - margin: 2px 0; - border-radius: 10px; - padding: 3px 5%; - width: 90%; - overflow: hidden; -} - -.aphront-calendar-event a:link { - color: #fff; -} - -.aphront-calendar-event-empty { - border-color: transparent; - background: transparent; -} - -.aphront-calendar-event-text { - color: #fff; - overflow: hidden; - white-space: nowrap; -} - - -.aphront-calendar-event-continues-before { - border-top-left-radius: 0px; - border-bottom-left-radius: 0px; - border-left-width: 0px; -} - -.aphront-calendar-event-continues-after { - border-top-right-radius: 0px; - border-bottom-right-radius: 0px; - border-right-width: 0px; -} Index: webroot/rsrc/css/phui/phui-calendar-month.css =================================================================== --- /dev/null +++ webroot/rsrc/css/phui/phui-calendar-month.css @@ -0,0 +1,102 @@ +/** + * @provides phui-calendar-month-css + */ + +.phui-calendar-view { + width: 100%; + border-collapse: collapse; + background: #fff; +} + +tr.phui-calendar-day-of-week-header th { + text-align: center; + font-size: 11px; + padding: 3px; + color: {$lightbluetext}; + background: {$lightgreybackground}; +} + +table.phui-calendar-view td { + border: 1px solid #dfdfdf; + width: 14.2857%; /* This is one seventh, approximately. */ +} + +table.phui-calendar-view td div.phui-calendar-day { + min-height: 125px; +} + +.phui-calendar-holiday { + color: {$greytext}; + padding: .5em; + max-height: 1em; + overflow: hidden; +} + +table.phui-calendar-view td.phui-calendar-month-weekstart { + border-left: none; +} + +.phui-calendar-date-number { + font-weight: normal; + color: {$lightgreytext}; + padding: 4px; + border-color: {$thinblueborder}; + border-style: solid; + border-width: 0 0 1px 1px; + float: right; + background: #ffffff; + width: 16px; + height: 16px; + text-align: center; + margin-bottom: 3px; +} + +.phui-calendar-not-work-day { + background-color: {$lightgreybackground}; +} + +.phui-calendar-today { + background-color: {$lightgreen}; +} + +.phui-calendar-empty { + background-color: {$greybackground}; +} + +.phui-calendar-event { + clear: both; + background: {$sky}; + font-size: 11px; + margin: 2px 0; + border-radius: 3px; + padding: 3px 5%; + width: 90%; + overflow: hidden; +} + +.phui-calendar-event a:link { + color: #fff; +} + +.phui-calendar-event-empty { + border-color: transparent; + background: transparent; +} + +.phui-calendar-event-text { + color: #fff; + overflow: hidden; + white-space: nowrap; +} + +.phui-calendar-event-continues-before { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + border-left-width: 0px; +} + +.phui-calendar-event-continues-after { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; + border-right-width: 0px; +}