Allow pages to use new "flexible" nav

Summary:
This allows the nav to be laid out with divs instead of tables and for the navigation column to be made flexible. Design is non-final, this is just a step toward reactive menus that work on tablets/phones and an application menu.

I'm going to play around with flexible nav and document navigation and see if that goes anywhere.

Test Plan: Will attach screenshots.

Reviewers: btrahan, vrana, chad

Reviewed By: btrahan

CC: aran

Maniphest Tasks: T1569

Differential Revision: https://secure.phabricator.com/D3114

src/__celerity_resource_map__.php

@@ -35,6 +35,13 @@ celerity_register_resource_map(array(
     'disk' => '/rsrc/image/credit_cards.png',
     'type' => 'png',
   ),
+  '/rsrc/image/divot.png' =>
+  array(
+    'hash' => '3be267bd11ea375bf68e808893718e0e',
+    'uri' => '/res/3be267bd/rsrc/image/divot.png',
+    'disk' => '/rsrc/image/divot.png',
+    'type' => 'png',
+  ),
   '/rsrc/image/glyph_sprite.png' =>
   array(
     'hash' => '0a1ea7c048be9f0b76ab2c807a9a1c0d',
@@ -1402,6 +1409,20 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/js/application/core/behavior-keyboard-shortcuts.js',
   ),
+  'javelin-behavior-phabricator-nav' =>
+  array(
+    'uri' => '/res/adaae8ae/rsrc/js/application/core/behavior-phabricator-nav.js',
+    'type' => 'js',
+    'requires' =>
+    array(
+      0 => 'javelin-behavior',
+      1 => 'javelin-stratcom',
+      2 => 'javelin-dom',
+      3 => 'javelin-magical-init',
+      4 => 'javelin-vector',
+    ),
+    'disk' => '/rsrc/js/application/core/behavior-phabricator-nav.js',
+  ),
   'javelin-behavior-phabricator-notification-example' =>
   array(
     'uri' => '/res/df97e4b3/rsrc/js/application/uiexample/notification-example.js',
@@ -2285,6 +2306,15 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/js/application/core/DropdownMenuItem.js',
   ),
+  'phabricator-nav-view-css' =>
+  array(
+    'uri' => '/res/3443576d/rsrc/css/aphront/phabricator-nav-view.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/aphront/phabricator-nav-view.css',
+  ),
   'phabricator-notification' =>
   array(
     'uri' => '/res/cacd79f1/rsrc/js/application/core/Notification.js',

src/view/layout/AphrontSideNavFilterView.php

@@ -40,6 +40,18 @@ final class AphrontSideNavFilterView extends AphrontView {
   private $items = array();
   private $baseURI;
   private $selectedFilter = false;
+  private $flexNav;
+  private $flexible;
+
+  public function setFlexNav($flex_nav) {
+    $this->flexNav = $flex_nav;
+    return $this;
+  }
+
+  public function setFlexible($flexible) {
+    $this->flexible = $flexible;
+    return $this;
+  }
 
   public function addFilter($key, $name, $uri = null, $relative = false) {
     $this->items[] = array(
@@ -102,6 +114,8 @@ final class AphrontSideNavFilterView extends AphrontView {
     }
 
     $view = new AphrontSideNavView();
+    $view->setFlexNav($this->flexNav);
+    $view->setFlexible($this->flexible);
     foreach ($this->items as $item) {
       list($type, $key, $name) = $item;
       switch ($type) {

src/view/layout/AphrontSideNavView.php

@@ -1,7 +1,7 @@
 <?php
 
 /*
- * Copyright 2011 Facebook, Inc.
+ * Copyright 2012 Facebook, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,29 +19,88 @@
 final class AphrontSideNavView extends AphrontView {
 
   protected $items = array();
+  protected $flexNav;
+  protected $isFlexible;
 
   public function addNavItem($item) {
     $this->items[] = $item;
     return $this;
   }
 
+  public function setFlexNav($flex) {
+    $this->flexNav = $flex;
+    return $this;
+  }
+
+  public function setFlexible($flexible) {
+    $this->flexible = $flexible;
+    return $this;
+  }
+
   public function render() {
     $view = new AphrontNullView();
     $view->appendChild($this->items);
 
-    require_celerity_resource('aphront-side-nav-view-css');
+    if ($this->flexNav) {
+      require_celerity_resource('phabricator-nav-view-css');
 
-    return
-      '<table class="aphront-side-nav-view">'.
-        '<tr>'.
-          '<th class="aphront-side-nav-navigation">'.
-            $view->render().
-          '</th>'.
-          '<td class="aphront-side-nav-content">'.
-            $this->renderChildren().
-          '</td>'.
-        '</tr>'.
-      '</table>';
+      $nav_id = celerity_generate_unique_node_id();
+      $drag_id = celerity_generate_unique_node_id();
+      $content_id = celerity_generate_unique_node_id();
+
+      if ($this->flexible) {
+        Javelin::initBehavior(
+          'phabricator-nav',
+          array(
+            'navID'     => $nav_id,
+            'dragID'    => $drag_id,
+            'contentID' => $content_id,
+          ));
+        $flex_bar = phutil_render_tag(
+          'div',
+          array(
+            'class' => 'phabricator-nav-drag',
+            'id' => $drag_id,
+          ),
+          '');
+      } else {
+        $flex_bar = null;
+      }
+
+      return
+        '<div class="phabricator-nav">'.
+          phutil_render_tag(
+            'div',
+            array(
+              'class' => 'phabricator-nav-col',
+              'id'    => $nav_id,
+            ),
+            $view->render()).
+          $flex_bar.
+          phutil_render_tag(
+            'div',
+            array(
+              'class' => 'phabricator-nav-content',
+              'id' => $content_id,
+            ),
+            $this->renderChildren()).
+        '</div>';
+    } else {
+
+      require_celerity_resource('aphront-side-nav-view-css');
+
+      return
+        '<table class="aphront-side-nav-view">'.
+          '<tr>'.
+            '<th class="aphront-side-nav-navigation">'.
+              $view->render().
+            '</th>'.
+            '<td class="aphront-side-nav-content">'.
+              $this->renderChildren().
+            '</td>'.
+          '</tr>'.
+        '</table>';
+    }
   }
 
 }