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

@@ -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',

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,

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

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 {