From 58df1b7d3be21a12ccb93cea537ff8a92a6fd703 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Thu, 22 Jun 2017 21:10:48 +0200 Subject: [PATCH] Add a top level tab navigation option to PHUITwoColumnView Summary: Builds out a responsive tab bar system for PHUITwoColumnView pages Test Plan: Tested at mobile, tablet, and desktop breakpoints {F5012429} {F5012430} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D18148 --- resources/celerity/map.php | 10 +-- src/view/phui/PHUITwoColumnView.php | 18 +++++ webroot/rsrc/css/phui/phui-list.css | 71 +++++++++++++++++++ .../rsrc/css/phui/phui-two-column-view.css | 12 ++++ 4 files changed, 106 insertions(+), 5 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 3e80c99baa..0619fc34f8 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -9,7 +9,7 @@ return array( 'names' => array( 'conpherence.pkg.css' => 'ff161f2d', 'conpherence.pkg.js' => 'b5b51108', - 'core.pkg.css' => '6d40b714', + 'core.pkg.css' => '37dd219b', 'core.pkg.js' => '5d80e0db', 'darkconsole.pkg.js' => '1f9a31bc', 'differential.pkg.css' => '4ec4a37a', @@ -166,7 +166,7 @@ return array( 'rsrc/css/phui/phui-info-view.css' => '6e217679', 'rsrc/css/phui/phui-invisible-character-view.css' => '6993d9f0', 'rsrc/css/phui/phui-lightbox.css' => '0a035e40', - 'rsrc/css/phui/phui-list.css' => '12eb8ce6', + 'rsrc/css/phui/phui-list.css' => 'dcafb463', 'rsrc/css/phui/phui-object-box.css' => '9cff003c', 'rsrc/css/phui/phui-pager.css' => 'edcbc226', 'rsrc/css/phui/phui-pinboard-view.css' => '2495140e', @@ -177,7 +177,7 @@ return array( 'rsrc/css/phui/phui-status.css' => 'd5263e49', 'rsrc/css/phui/phui-tag-view.css' => '93b084cf', 'rsrc/css/phui/phui-timeline-view.css' => '313c7f22', - 'rsrc/css/phui/phui-two-column-view.css' => 'ce9fa0b7', + 'rsrc/css/phui/phui-two-column-view.css' => '5b8cd553', 'rsrc/css/phui/workboards/phui-workboard-color.css' => '783cdff5', 'rsrc/css/phui/workboards/phui-workboard.css' => '3bc85455', 'rsrc/css/phui/workboards/phui-workcard.css' => 'cca5fa92', @@ -854,7 +854,7 @@ return array( 'phui-inline-comment-view-css' => 'ffd1a542', 'phui-invisible-character-view-css' => '6993d9f0', 'phui-lightbox-css' => '0a035e40', - 'phui-list-view-css' => '12eb8ce6', + 'phui-list-view-css' => 'dcafb463', 'phui-object-box-css' => '9cff003c', 'phui-oi-big-ui-css' => '19f9369b', 'phui-oi-color-css' => 'cd2b9b77', @@ -872,7 +872,7 @@ return array( 'phui-tag-view-css' => '93b084cf', 'phui-theme-css' => '9f261c6b', 'phui-timeline-view-css' => '313c7f22', - 'phui-two-column-view-css' => 'ce9fa0b7', + 'phui-two-column-view-css' => '5b8cd553', 'phui-workboard-color-css' => '783cdff5', 'phui-workboard-view-css' => '3bc85455', 'phui-workcard-view-css' => 'cca5fa92', diff --git a/src/view/phui/PHUITwoColumnView.php b/src/view/phui/PHUITwoColumnView.php index 1c56886f7a..d0443280b6 100644 --- a/src/view/phui/PHUITwoColumnView.php +++ b/src/view/phui/PHUITwoColumnView.php @@ -10,6 +10,7 @@ final class PHUITwoColumnView extends AphrontTagView { private $header; private $subheader; private $footer; + private $tabs; private $propertySection = array(); private $curtain; @@ -42,6 +43,12 @@ final class PHUITwoColumnView extends AphrontTagView { return $this; } + public function setTabs(PHUIListView $tabs) { + $tabs->setType(PHUIListView::TABBAR_LIST); + $this->tabs = $tabs; + return $this; + } + public function setFooter($footer) { $this->footer = $footer; return $this; @@ -91,6 +98,10 @@ final class PHUITwoColumnView extends AphrontTagView { $classes[] = 'phui-two-column-fluid'; } + if ($this->tabs) { + $classes[] = 'with-tabs'; + } + if ($this->subheader) { $classes[] = 'with-subheader'; } @@ -124,6 +135,12 @@ final class PHUITwoColumnView extends AphrontTagView { 'phui-two-column-header', $this->header); } + $tabs = null; + if ($this->tabs) { + $tabs = phutil_tag_div( + 'phui-two-column-tabs', $this->tabs); + } + $subheader = null; if ($this->subheader) { $subheader = phutil_tag_div( @@ -137,6 +154,7 @@ final class PHUITwoColumnView extends AphrontTagView { ), array( $header, + $tabs, $subheader, $table, $footer, diff --git a/webroot/rsrc/css/phui/phui-list.css b/webroot/rsrc/css/phui/phui-list.css index e571e228d8..5df6f4a210 100644 --- a/webroot/rsrc/css/phui/phui-list.css +++ b/webroot/rsrc/css/phui/phui-list.css @@ -144,6 +144,77 @@ border: none; } +/* - Two Column View, Responsive Navigations ----------------------------------- + + Sets a two column page with a responsive, top navbar + +*/ + +.phui-list-view.phui-list-tabbar { + list-style: none; + overflow: hidden; +} + +.phui-list-view.phui-list-tabbar > li { + list-style: none; + float: left; + display: block; +} + +.phui-list-view.phui-list-tabbar > li > * { + display: block; +} + +.phui-list-tabbar .phui-list-item-href { + color: {$bluetext}; + padding: 8px 24px; + line-height: 24px; + font-weight: bold; + font-size: {$biggerfontsize}; + border-top: 4px solid #fff; +} + +.phui-list-tabbar .phui-list-item-selected .phui-list-item-href { + color: {$sky}; + border-bottom: 4px solid {$sky}; +} + +.phui-list-tabbar .phui-list-item-selected .phui-list-item-href + .phui-icon-view { + color: {$sky}; +} + +.device-desktop .phui-list-tabbar .phui-list-item-href:hover { + color: {$sky}; + border-bottom: 4px solid $fff; + text-decoration: none; +} + +.phui-list-tabbar .phui-list-item-icon { + height: 20px; + width: 20px; + display: none; + font-size: 20px; + text-align: center; +} + +.device-phone .phui-list-tabbar .phui-list-item-icon { + display: inline-block; +} + +.device-phone .phui-list-tabbar .phui-list-item-name { + display: none; +} + +.device-phone .phui-list-tabbar .phui-list-item-href { + padding: 8px 16px; +} + +.device-phone .phui-list-view.phui-list-navbar > li { + float: none; + border: none; +} + /* - Status Colors ------------------------------------------------------------- Colors for navbars diff --git a/webroot/rsrc/css/phui/phui-two-column-view.css b/webroot/rsrc/css/phui/phui-two-column-view.css index d910cf71a0..7728980268 100644 --- a/webroot/rsrc/css/phui/phui-two-column-view.css +++ b/webroot/rsrc/css/phui/phui-two-column-view.css @@ -12,6 +12,7 @@ margin-bottom: 12px; } +.phui-two-column-view.with-tabs .phui-two-column-header, .phui-two-column-view.with-subheader .phui-two-column-header { margin-bottom: 0; } @@ -168,6 +169,17 @@ margin: 0 8px; } +.phui-two-column-tabs { + padding: 0 32px; + margin-bottom: 32px; + background: #fff; + box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2); +} + +.device-phone .phui-two-column-tabs { + padding: 0 12px; +} + /* Info View */ .phui-two-column-view .phui-info-view {