Modernize Calendar View · recaptime.dev/phorge@32cff58

+2 -2

resources/celerity/map.php

··· 19 19 'maniphest.pkg.js' => '1e8f11af', 20 20 'rsrc/css/aphront/aphront-bars.css' => '231ac33c', 21 21 'rsrc/css/aphront/aphront-notes.css' => '6acadd3f', 22 - 'rsrc/css/aphront/calendar-view.css' => '166af03d', 23 22 'rsrc/css/aphront/context-bar.css' => '1c3b0529', 24 23 'rsrc/css/aphront/dark-console.css' => '6378ef3d', 25 24 'rsrc/css/aphront/dialog-view.css' => 'dd9db96c', ··· 126 125 'rsrc/css/layout/phabricator-source-code-view.css' => '62a99814', 127 126 'rsrc/css/phui/phui-box.css' => '6c21bd6a', 128 127 'rsrc/css/phui/phui-button.css' => '8784a966', 128 + 'rsrc/css/phui/phui-calendar-month.css' => '3474d15a', 129 129 'rsrc/css/phui/phui-document.css' => '143b2ac8', 130 130 'rsrc/css/phui/phui-feed-story.css' => '3a59c2cf', 131 131 'rsrc/css/phui/phui-form-view.css' => '0efd3326', ··· 478 478 'symbols' => 479 479 array( 480 480 'aphront-bars' => '231ac33c', 481 - 'aphront-calendar-view-css' => '166af03d', 482 481 'aphront-contextbar-view-css' => '1c3b0529', 483 482 'aphront-dark-console-css' => '6378ef3d', 484 483 'aphront-dialog-view-css' => 'dd9db96c', ··· 738 737 'phriction-document-css' => 'b0309d8e', 739 738 'phui-box-css' => '6c21bd6a', 740 739 'phui-button-css' => '8784a966', 740 + 'phui-calendar-month-css' => '3474d15a', 741 741 'phui-document-view-css' => '143b2ac8', 742 742 'phui-feed-story-css' => '3a59c2cf', 743 743 'phui-form-css' => 'b78ec020',

+2 -2

src/__phutil_library_map__.php

··· 20 20 'AphrontBarView' => 'view/widget/bars/AphrontBarView.php', 21 21 'AphrontCSRFException' => 'aphront/exception/AphrontCSRFException.php', 22 22 'AphrontCalendarEventView' => 'applications/calendar/view/AphrontCalendarEventView.php', 23 - 'AphrontCalendarMonthView' => 'applications/calendar/view/AphrontCalendarMonthView.php', 24 23 'AphrontContextBarView' => 'view/layout/AphrontContextBarView.php', 25 24 'AphrontController' => 'aphront/AphrontController.php', 26 25 'AphrontCursorPagerView' => 'view/control/AphrontCursorPagerView.php', ··· 983 982 'PHUIButtonBarView' => 'view/phui/PHUIButtonBarView.php', 984 983 'PHUIButtonExample' => 'applications/uiexample/examples/PHUIButtonExample.php', 985 984 'PHUIButtonView' => 'view/phui/PHUIButtonView.php', 985 + 'PHUICalendarMonthView' => 'applications/calendar/view/PHUICalendarMonthView.php', 986 986 'PHUIColorPalletteExample' => 'applications/uiexample/examples/PHUIColorPalletteExample.php', 987 987 'PHUIDocumentExample' => 'applications/uiexample/examples/PHUIDocumentExample.php', 988 988 'PHUIDocumentView' => 'view/phui/PHUIDocumentView.php', ··· 2549 2549 'AphrontBarView' => 'AphrontView', 2550 2550 'AphrontCSRFException' => 'AphrontException', 2551 2551 'AphrontCalendarEventView' => 'AphrontView', 2552 - 'AphrontCalendarMonthView' => 'AphrontView', 2553 2552 'AphrontContextBarView' => 'AphrontView', 2554 2553 'AphrontController' => 'Phobject', 2555 2554 'AphrontCursorPagerView' => 'AphrontView', ··· 3613 3612 'PHUIButtonBarView' => 'AphrontTagView', 3614 3613 'PHUIButtonExample' => 'PhabricatorUIExample', 3615 3614 'PHUIButtonView' => 'AphrontTagView', 3615 + 'PHUICalendarMonthView' => 'AphrontView', 3616 3616 'PHUIColorPalletteExample' => 'PhabricatorUIExample', 3617 3617 'PHUIDocumentExample' => 'PhabricatorUIExample', 3618 3618 'PHUIDocumentView' => 'AphrontTagView',

+3 -3

src/applications/calendar/controller/PhabricatorCalendarBrowseController.php

··· 27 27 ->execute(); 28 28 29 29 if ($month == $month_d && $year == $year_d) { 30 - $month_view = new AphrontCalendarMonthView($month, $year, $day); 30 + $month_view = new PHUICalendarMonthView($month, $year, $day); 31 31 } else { 32 - $month_view = new AphrontCalendarMonthView($month, $year); 32 + $month_view = new PHUICalendarMonthView($month, $year); 33 33 } 34 34 35 35 $month_view->setBrowseURI($request->getRequestURI()); ··· 62 62 $nav->appendChild( 63 63 array( 64 64 $this->getNoticeView(), 65 - phutil_tag('div', array('style' => 'padding: 20px;'), $month_view), 65 + $month_view, 66 66 )); 67 67 68 68 return $this->buildApplicationPage(

+67 -40

src/applications/calendar/view/AphrontCalendarMonthView.php src/applications/calendar/view/PHUICalendarMonthView.php

··· 1 1 <?php 2 2 3 - final class AphrontCalendarMonthView extends AphrontView { 3 + final class PHUICalendarMonthView extends AphrontView { 4 4 5 5 private $day; 6 6 private $month; ··· 43 43 44 44 $days = $this->getDatesInMonth(); 45 45 46 - require_celerity_resource('aphront-calendar-view-css'); 46 + require_celerity_resource('phui-calendar-month-css'); 47 47 48 48 $first = reset($days); 49 49 $empty = $first->format('w'); ··· 52 52 53 53 $empty_box = phutil_tag( 54 54 'div', 55 - array('class' => 'aphront-calendar-day aphront-calendar-empty'), 55 + array('class' => 'phui-calendar-day phui-calendar-empty'), 56 56 ''); 57 57 58 58 for ($ii = 0; $ii < $empty; $ii++) { ··· 65 65 $day_number = $day->format('j'); 66 66 67 67 $holiday = idx($this->holidays, $day->format('Y-m-d')); 68 - $class = 'aphront-calendar-day'; 68 + $class = 'phui-calendar-day'; 69 69 $weekday = $day->format('w'); 70 70 71 71 if ($day_number == $this->day) { 72 - $class .= ' aphront-calendar-today'; 72 + $class .= ' phui-calendar-today'; 73 73 } 74 74 75 75 if ($holiday || $weekday == 0 || $weekday == 6) { 76 - $class .= ' aphront-calendar-not-work-day'; 76 + $class .= ' phui-calendar-not-work-day'; 77 77 } 78 78 79 79 $day->setTime(0, 0, 0); ··· 88 88 $show_events = array_fill_keys( 89 89 array_keys($show_events), 90 90 phutil_tag_div( 91 - 'aphront-calendar-event aphront-calendar-event-empty', 91 + 'phui-calendar-event phui-calendar-event-empty', 92 92 "\xC2\xA0")); //   93 93 } 94 94 ··· 112 112 $holiday_markup = phutil_tag( 113 113 'div', 114 114 array( 115 - 'class' => 'aphront-calendar-holiday', 115 + 'class' => 'phui-calendar-holiday', 116 116 'title' => $name, 117 117 ), 118 118 $name); ··· 121 121 $markup[] = phutil_tag_div( 122 122 $class, 123 123 array( 124 - phutil_tag_div('aphront-calendar-date-number', $day_number), 124 + phutil_tag_div('phui-calendar-date-number', $day_number), 125 125 $holiday_markup, 126 126 phutil_implode_html("\n", $show_events), 127 127 )); ··· 134 134 while (count($row) < 7) { 135 135 $row[] = $empty_box; 136 136 } 137 + $j = 0; 137 138 foreach ($row as $cell) { 138 - $cells[] = phutil_tag('td', array(), $cell); 139 + if ($j == 0) { 140 + $cells[] = phutil_tag( 141 + 'td', 142 + array( 143 + 'class' => 'phui-calendar-month-weekstart'), 144 + $cell); 145 + } else { 146 + $cells[] = phutil_tag('td', array(), $cell); 147 + } 148 + $j++; 139 149 } 140 150 $table[] = phutil_tag('tr', array(), $cells); 141 151 } 142 152 143 153 $header = phutil_tag( 144 154 'tr', 145 - array('class' => 'aphront-calendar-day-of-week-header'), 155 + array('class' => 'phui-calendar-day-of-week-header'), 146 156 array( 147 157 phutil_tag('th', array(), pht('Sun')), 148 158 phutil_tag('th', array(), pht('Mon')), ··· 155 165 156 166 $table = phutil_tag( 157 167 'table', 158 - array('class' => 'aphront-calendar-view'), 168 + array('class' => 'phui-calendar-view'), 159 169 array( 160 - $this->renderCalendarHeader($first), 161 170 $header, 162 171 phutil_implode_html("\n", $table), 163 172 )); 164 173 165 - return $table; 174 + $box = id(new PHUIObjectBoxView()) 175 + ->setHeader($this->renderCalendarHeader($first)) 176 + ->appendChild($table); 177 + 178 + return $box; 166 179 } 167 180 168 181 private function renderCalendarHeader(DateTime $date) { 169 - $colspan = 7; 170 - $left_th = ''; 171 - $right_th = ''; 182 + $button_bar = null; 172 183 173 184 // check for a browseURI, which means we need "fancy" prev / next UI 174 185 $uri = $this->getBrowseURI(); 175 186 if ($uri) { 176 - $colspan = 5; 177 187 $uri = new PhutilURI($uri); 178 188 list($prev_year, $prev_month) = $this->getPrevYearAndMonth(); 179 189 $query = array('year' => $prev_year, 'month' => $prev_month); 180 - $prev_link = phutil_tag( 181 - 'a', 182 - array('href' => (string) $uri->setQueryParams($query)), 183 - "\xE2\x86\x90"); 190 + $prev_uri = (string) $uri->setQueryParams($query); 184 191 185 192 list($next_year, $next_month) = $this->getNextYearAndMonth(); 186 193 $query = array('year' => $next_year, 'month' => $next_month); 187 - $next_link = phutil_tag( 188 - 'a', 189 - array('href' => (string) $uri->setQueryParams($query)), 190 - "\xE2\x86\x92"); 194 + $next_uri = (string) $uri->setQueryParams($query); 195 + 196 + $button_bar = new PHUIButtonBarView(); 197 + 198 + $left_icon = id(new PHUIIconView()) 199 + ->setSpriteSheet(PHUIIconView::SPRITE_BUTTONBAR) 200 + ->setSpriteIcon('chevron-left'); 201 + $left = id(new PHUIButtonView()) 202 + ->setTag('a') 203 + ->setColor(PHUIButtonView::GREY) 204 + ->setHref($prev_uri) 205 + ->setTitle(pht('Previous Month')) 206 + ->setIcon($left_icon); 207 + 208 + $right_icon = id(new PHUIIconView()) 209 + ->setSpriteSheet(PHUIIconView::SPRITE_BUTTONBAR) 210 + ->setSpriteIcon('chevron-right'); 211 + $right = id(new PHUIButtonView()) 212 + ->setTag('a') 213 + ->setColor(PHUIButtonView::GREY) 214 + ->setHref($next_uri) 215 + ->setTitle(pht('Next Month')) 216 + ->setIcon($right_icon); 217 + 218 + $button_bar->addButton($left); 219 + $button_bar->addButton($right); 191 220 192 - $left_th = phutil_tag('th', array(), $prev_link); 193 - $right_th = phutil_tag('th', array(), $next_link); 194 221 } 195 222 196 - return phutil_tag( 197 - 'tr', 198 - array('class' => 'aphront-calendar-month-year-header'), 199 - array( 200 - $left_th, 201 - phutil_tag('th', array('colspan' => $colspan), $date->format('F Y')), 202 - $right_th, 203 - )); 223 + $header = id(new PHUIHeaderView()) 224 + ->setHeader($date->format('F Y')); 225 + 226 + if ($button_bar) { 227 + $header->setButtonBar($button_bar); 228 + } 229 + 230 + return $header; 204 231 } 205 232 206 233 private function getNextYearAndMonth() { ··· 279 306 $classes = array(); 280 307 $when = array(); 281 308 282 - $classes[] = 'aphront-calendar-event'; 309 + $classes[] = 'phui-calendar-event'; 283 310 if ($event_start < $epoch_start) { 284 - $classes[] = 'aphront-calendar-event-continues-before'; 311 + $classes[] = 'phui-calendar-event-continues-before'; 285 312 $when[] = 'Started '.phabricator_datetime($event_start, $user); 286 313 } else { 287 314 $when[] = 'Starts at '.phabricator_time($event_start, $user); 288 315 } 289 316 290 317 if ($event_end > $epoch_end) { 291 - $classes[] = 'aphront-calendar-event-continues-after'; 318 + $classes[] = 'phui-calendar-event-continues-after'; 292 319 $when[] = 'Ends '.phabricator_datetime($event_end, $user); 293 320 } else { 294 321 $when[] = 'Ends at '.phabricator_time($event_end, $user); ··· 309 336 'tip' => $info."\n\n".implode("\n", $when), 310 337 'size' => 240, 311 338 ), 312 - 'class' => 'aphront-calendar-event-text', 339 + 'class' => 'phui-calendar-event-text', 313 340 'href' => '/calendar/event/view/'.$event->getEventID().'/', 314 341 ), 315 342 phutil_utf8_shorten($event->getName(), 32));

+15

src/view/phui/PHUIHeaderView.php

··· 14 14 private $bleedHeader; 15 15 private $properties = array(); 16 16 private $actionLinks = array(); 17 + private $buttonBar = null; 17 18 private $policyObject; 18 19 19 20 public function setHeader($header) { ··· 68 69 69 70 public function addActionLink(PHUIButtonView $button) { 70 71 $this->actionLinks[] = $button; 72 + return $this; 73 + } 74 + 75 + public function setButtonBar(PHUIButtonBarView $bb) { 76 + $this->buttonBar = $bb; 71 77 return $this; 72 78 } 73 79 ··· 204 210 'class' => 'phui-header-action-links', 205 211 ), 206 212 $actions); 213 + } 214 + 215 + if ($this->buttonBar) { 216 + $header[] = phutil_tag( 217 + 'div', 218 + array( 219 + 'class' => 'phui-header-action-links', 220 + ), 221 + $this->buttonBar); 207 222 } 208 223 209 224 return phutil_tag(

-124

webroot/rsrc/css/aphront/calendar-view.css

··· 1 - /** 2 - * @provides aphront-calendar-view-css 3 - */ 4 - 5 - .aphront-calendar-view { 6 - width: 100%; 7 - border-collapse: collapse; 8 - background: #fff; 9 - border: 2px solid #4f3612; 10 - box-shadow: 0px 2px 6px #ccc; 11 - } 12 - 13 - tr.aphront-calendar-month-year-header th { 14 - text-align: center; 15 - font-weight: bold; 16 - font-size: 20px; 17 - padding: 10px; 18 - color: white; 19 - background: #4f3612; 20 - height: 26px; 21 - 22 - } 23 - 24 - tr.aphront-calendar-month-year-header th a { 25 - color: white; 26 - font-weight: bold; 27 - text-decoration: none; 28 - display: block; 29 - } 30 - 31 - tr.aphront-calendar-month-year-header th a:hover { 32 - color: #feffd0; 33 - } 34 - 35 - tr.aphront-calendar-day-of-week-header th { 36 - text-align: center; 37 - font-size: 11px; 38 - padding: 3px; 39 - color: white; 40 - background: #896c45; 41 - } 42 - 43 - table.aphront-calendar-view td { 44 - border: 1px solid #dfdfdf; 45 - width: 14.2857%; /* This is one seventh, approximately. */ 46 - } 47 - 48 - table.aphront-calendar-view td div.aphront-calendar-day { 49 - min-height: 125px; 50 - } 51 - 52 - .aphront-calendar-holiday { 53 - color: {$greytext}; 54 - padding: .5em; 55 - max-height: 1em; 56 - overflow: hidden; 57 - } 58 - 59 - .aphront-calendar-date-number { 60 - font-weight: normal; 61 - color: {$lightgreytext}; 62 - padding: 4px; 63 - border-color: #dfdfdf; 64 - border-style: solid; 65 - border-width: 0 0 1px 1px; 66 - float: right; 67 - background: #ffffff; 68 - width: 1.25em; 69 - height: 1.25em; 70 - text-align: center; 71 - margin-bottom: 3px; 72 - } 73 - 74 - .aphront-calendar-not-work-day { 75 - background-color: #fdfae7; 76 - } 77 - 78 - .aphront-calendar-today { 79 - background-color: #A6FAAD; 80 - } 81 - 82 - .aphront-calendar-empty { 83 - background-color: #ededed; 84 - } 85 - 86 - .aphront-calendar-event { 87 - clear: both; 88 - 89 - background: #006799; 90 - font-size: 11px; 91 - margin: 2px 0; 92 - border-radius: 10px; 93 - padding: 3px 5%; 94 - width: 90%; 95 - overflow: hidden; 96 - } 97 - 98 - .aphront-calendar-event a:link { 99 - color: #fff; 100 - } 101 - 102 - .aphront-calendar-event-empty { 103 - border-color: transparent; 104 - background: transparent; 105 - } 106 - 107 - .aphront-calendar-event-text { 108 - color: #fff; 109 - overflow: hidden; 110 - white-space: nowrap; 111 - } 112 - 113 - 114 - .aphront-calendar-event-continues-before { 115 - border-top-left-radius: 0px; 116 - border-bottom-left-radius: 0px; 117 - border-left-width: 0px; 118 - } 119 - 120 - .aphront-calendar-event-continues-after { 121 - border-top-right-radius: 0px; 122 - border-bottom-right-radius: 0px; 123 - border-right-width: 0px; 124 - }

+102

webroot/rsrc/css/phui/phui-calendar-month.css

··· 1 + /** 2 + * @provides phui-calendar-month-css 3 + */ 4 + 5 + .phui-calendar-view { 6 + width: 100%; 7 + border-collapse: collapse; 8 + background: #fff; 9 + } 10 + 11 + tr.phui-calendar-day-of-week-header th { 12 + text-align: center; 13 + font-size: 11px; 14 + padding: 3px; 15 + color: {$lightbluetext}; 16 + background: {$lightgreybackground}; 17 + } 18 + 19 + table.phui-calendar-view td { 20 + border: 1px solid #dfdfdf; 21 + width: 14.2857%; /* This is one seventh, approximately. */ 22 + } 23 + 24 + table.phui-calendar-view td div.phui-calendar-day { 25 + min-height: 125px; 26 + } 27 + 28 + .phui-calendar-holiday { 29 + color: {$greytext}; 30 + padding: .5em; 31 + max-height: 1em; 32 + overflow: hidden; 33 + } 34 + 35 + table.phui-calendar-view td.phui-calendar-month-weekstart { 36 + border-left: none; 37 + } 38 + 39 + .phui-calendar-date-number { 40 + font-weight: normal; 41 + color: {$lightgreytext}; 42 + padding: 4px; 43 + border-color: {$thinblueborder}; 44 + border-style: solid; 45 + border-width: 0 0 1px 1px; 46 + float: right; 47 + background: #ffffff; 48 + width: 16px; 49 + height: 16px; 50 + text-align: center; 51 + margin-bottom: 3px; 52 + } 53 + 54 + .phui-calendar-not-work-day { 55 + background-color: {$lightgreybackground}; 56 + } 57 + 58 + .phui-calendar-today { 59 + background-color: {$lightgreen}; 60 + } 61 + 62 + .phui-calendar-empty { 63 + background-color: {$greybackground}; 64 + } 65 + 66 + .phui-calendar-event { 67 + clear: both; 68 + background: {$sky}; 69 + font-size: 11px; 70 + margin: 2px 0; 71 + border-radius: 3px; 72 + padding: 3px 5%; 73 + width: 90%; 74 + overflow: hidden; 75 + } 76 + 77 + .phui-calendar-event a:link { 78 + color: #fff; 79 + } 80 + 81 + .phui-calendar-event-empty { 82 + border-color: transparent; 83 + background: transparent; 84 + } 85 + 86 + .phui-calendar-event-text { 87 + color: #fff; 88 + overflow: hidden; 89 + white-space: nowrap; 90 + } 91 + 92 + .phui-calendar-event-continues-before { 93 + border-top-left-radius: 0px; 94 + border-bottom-left-radius: 0px; 95 + border-left-width: 0px; 96 + } 97 + 98 + .phui-calendar-event-continues-after { 99 + border-top-right-radius: 0px; 100 + border-bottom-right-radius: 0px; 101 + border-right-width: 0px; 102 + }

Configure Feed

Configure Feed