diff --git a/resources/celerity/map.php b/resources/celerity/map.php --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -9,7 +9,7 @@ '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 @@ '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 @@ '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 @@ '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 @@ '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 --- a/src/view/phui/PHUITwoColumnView.php +++ b/src/view/phui/PHUITwoColumnView.php @@ -10,6 +10,7 @@ private $header; private $subheader; private $footer; + private $tabs; private $propertySection = array(); private $curtain; @@ -42,6 +43,12 @@ 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 @@ $classes[] = 'phui-two-column-fluid'; } + if ($this->tabs) { + $classes[] = 'with-tabs'; + } + if ($this->subheader) { $classes[] = 'with-subheader'; } @@ -124,6 +135,12 @@ '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 @@ ), array( $header, + $tabs, $subheader, $table, $footer, diff --git a/webroot/rsrc/css/phui/phui-list.css b/webroot/rsrc/css/phui/phui-list.css --- 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 --- 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 {