Update Settings/Config UI

Summary: Testing out a new 'nav' layout in Settings / Config. Spent a few days here and couldn't find much better overall.

Test Plan: View each page in Settings and in Config. Save some config options. Test mobile, desktop, tablet.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '03a2a623',
+    'core.pkg.css' => '82cefddc',
     'core.pkg.js' => 'e5484f37',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '7ba78475',
@@ -126,7 +126,7 @@ return array(
     'rsrc/css/phui/phui-box.css' => 'd909ea3d',
     'rsrc/css/phui/phui-button.css' => 'a64a8de6',
     'rsrc/css/phui/phui-chart.css' => '6bf6f78e',
-    'rsrc/css/phui/phui-crumbs-view.css' => '79d536e5',
+    'rsrc/css/phui/phui-crumbs-view.css' => '1a1265d4',
     'rsrc/css/phui/phui-curtain-view.css' => '7148ae25',
     'rsrc/css/phui/phui-document-pro.css' => '73e45fd2',
     'rsrc/css/phui/phui-document-summary.css' => '9ca48bdf',
@@ -156,7 +156,7 @@ return array(
     'rsrc/css/phui/phui-status.css' => '37309046',
     'rsrc/css/phui/phui-tag-view.css' => '6bbd83e2',
     'rsrc/css/phui/phui-timeline-view.css' => '6e342216',
-    'rsrc/css/phui/phui-two-column-view.css' => '691fec04',
+    'rsrc/css/phui/phui-two-column-view.css' => 'b9538af1',
     'rsrc/css/phui/workboards/phui-workboard-color.css' => 'ac6fe6a7',
     'rsrc/css/phui/workboards/phui-workboard.css' => 'e6d89647',
     'rsrc/css/phui/workboards/phui-workcard.css' => '3646fb96',
@@ -812,7 +812,7 @@ return array(
     'phui-calendar-list-css' => 'c1c7f338',
     'phui-calendar-month-css' => '476be7e0',
     'phui-chart-css' => '6bf6f78e',
-    'phui-crumbs-view-css' => '79d536e5',
+    'phui-crumbs-view-css' => '1a1265d4',
     'phui-curtain-view-css' => '7148ae25',
     'phui-document-summary-view-css' => '9ca48bdf',
     'phui-document-view-css' => '9c71d2bf',
@@ -846,7 +846,7 @@ return array(
     'phui-tag-view-css' => '6bbd83e2',
     'phui-theme-css' => '027ba77e',
     'phui-timeline-view-css' => '6e342216',
-    'phui-two-column-view-css' => '691fec04',
+    'phui-two-column-view-css' => 'b9538af1',
     'phui-workboard-color-css' => 'ac6fe6a7',
     'phui-workboard-view-css' => 'e6d89647',
     'phui-workcard-view-css' => '3646fb96',

src/applications/config/controller/PhabricatorConfigAllController.php

@@ -58,15 +58,19 @@ final class PhabricatorConfigAllController
     $panel->setHeaderText(pht('Current Settings'));
     $panel->setTable($table);
 
-
     $nav = $this->buildSideNavView();
     $nav->selectFilter('all/');
-    $nav->setCrumbs($crumbs);
+
-    $nav->appendChild($panel);
+    $view = id(new PHUITwoColumnView())
+      ->setNavigation($nav)
+      ->setMainColumn(array(
+        $panel,
+      ));
 
     return $this->newPage()
       ->setTitle($title)
-      ->appendChild($nav);
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
 
   }
 

src/applications/config/controller/PhabricatorConfigCacheController.php

@@ -18,16 +18,17 @@ final class PhabricatorConfigCacheController
     $code_box = $this->renderCodeBox();
     $data_box = $this->renderDataBox();
 
-    $nav->appendChild(
+    $view = id(new PHUITwoColumnView())
-      array(
+      ->setNavigation($nav)
-        $crumbs,
+      ->setMainColumn(array(
         $code_box,
         $data_box,
     ));
 
     return $this->newPage()
       ->setTitle($title)
-      ->appendChild($nav);
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
   }
 
   private function renderCodeBox() {

src/applications/config/controller/PhabricatorConfigDatabaseIssueController.php

@@ -153,15 +153,17 @@ final class PhabricatorConfigDatabaseIssueController
 
     $nav = $this->buildSideNavView();
     $nav->selectFilter('dbissue/');
-    $nav->appendChild(
+
-      array(
+    $view = id(new PHUITwoColumnView())
-        $crumbs,
+      ->setNavigation($nav)
+      ->setMainColumn(array(
         $table_box,
     ));
 
     return $this->newPage()
       ->setTitle($title)
-      ->appendChild($nav);
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
   }
 
 }

src/applications/config/controller/PhabricatorConfigDatabaseStatusController.php

@@ -91,12 +91,16 @@ final class PhabricatorConfigDatabaseStatusController
       $crumbs->addTextCrumb(pht('Database Status'));
     }
 
-    $nav->setCrumbs($crumbs);
+    $view = id(new PHUITwoColumnView())
-    $nav->appendChild($body);
+      ->setNavigation($nav)
+      ->setMainColumn(array(
+        $body,
+    ));
 
     return $this->newPage()
       ->setTitle($title)
-      ->appendChild($nav);
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
   }
 
 

src/applications/config/controller/PhabricatorConfigHistoryController.php

@@ -31,18 +31,22 @@ final class PhabricatorConfigHistoryController
     $title = pht('Settings History');
 
     $crumbs = $this->buildApplicationCrumbs();
-    $crumbs->setBorder(true);
     $crumbs->addTextCrumb('Config', $this->getApplicationURI());
     $crumbs->addTextCrumb($title, '/config/history/');
 
     $nav = $this->buildSideNavView();
     $nav->selectFilter('history/');
-    $nav->setCrumbs($crumbs);
+
-    $nav->appendChild($timeline);
+    $view = id(new PHUITwoColumnView())
+      ->setNavigation($nav)
+      ->setMainColumn(array(
+        $timeline,
+    ));
 
     return $this->newPage()
       ->setTitle($title)
-      ->appendChild($nav);
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
   }
 
 }

src/applications/config/controller/PhabricatorConfigIssueListController.php

@@ -56,19 +56,22 @@ final class PhabricatorConfigIssueListController
         ->setSeverity(PHUIInfoView::SEVERITY_NOTICE);
     }
 
-    $nav->appendChild($setup_issues);
-
     $title = pht('Setup Issues');
 
     $crumbs = $this
       ->buildApplicationCrumbs($nav)
       ->addTextCrumb(pht('Setup'), $this->getApplicationURI('issue/'));
 
-    $nav->setCrumbs($crumbs);
+    $view = id(new PHUITwoColumnView())
+      ->setNavigation($nav)
+      ->setMainColumn(array(
+        $setup_issues,
+    ));
 
     return $this->newPage()
       ->setTitle($title)
-      ->appendChild($nav);
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
   }
 
   private function buildIssueList(array $issues, $group) {

src/applications/config/controller/PhabricatorConfigListController.php

@@ -23,21 +23,21 @@ final class PhabricatorConfigListController
       ->setHeaderText(pht('Applications Configuration'))
       ->setObjectList($apps_list);
 
-    $nav->appendChild(
-      array(
-        $core,
-        $apps,
-      ));
-
     $crumbs = $this
       ->buildApplicationCrumbs()
       ->addTextCrumb(pht('Config'), $this->getApplicationURI());
 
-    $nav->setCrumbs($crumbs);
+    $view = id(new PHUITwoColumnView())
+      ->setNavigation($nav)
+      ->setMainColumn(array(
+        $core,
+        $apps,
+      ));
 
     return $this->newPage()
       ->setTitle($title)
-      ->appendChild($nav);
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
   }
 
   private function buildConfigOptionsList(array $groups, $type) {

src/applications/config/controller/PhabricatorConfigModuleController.php

@@ -21,15 +21,17 @@ final class PhabricatorConfigModuleController
 
     $nav = $this->buildSideNavView();
     $nav->selectFilter('module/'.$key.'/');
-    $nav->appendChild(
+
-      array(
+    $view = id(new PHUITwoColumnView())
-        $crumbs,
+      ->setNavigation($nav)
+      ->setMainColumn(array(
         $content,
       ));
 
     return $this->newPage()
       ->setTitle($title)
-      ->appendChild($nav);
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
   }
 
 }

src/applications/config/controller/PhabricatorConfigWelcomeController.php

@@ -15,12 +15,16 @@ final class PhabricatorConfigWelcomeController
       ->buildApplicationCrumbs()
       ->addTextCrumb(pht('Welcome'));
 
-    $nav->setCrumbs($crumbs);
+    $view = id(new PHUITwoColumnView())
-    $nav->appendChild($this->buildWelcomeScreen($request));
+      ->setNavigation($nav)
+      ->setMainColumn(array(
+        $this->buildWelcomeScreen($request),
+      ));
 
     return $this->newPage()
       ->setTitle($title)
-      ->appendChild($nav);
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
   }
 
   public function buildWelcomeScreen(AphrontRequest $request) {

src/applications/settings/controller/PhabricatorSettingsMainController.php

@@ -61,14 +61,17 @@ final class PhabricatorSettingsMainController
         '/p/'.$this->getUser()->getUsername().'/');
     }
     $crumbs->addTextCrumb($panel->getPanelName());
-    $nav->appendChild($response);
 
     $title = $panel->getPanelName();
 
+    $view = id(new PHUITwoColumnView())
+      ->setNavigation($nav)
+      ->setMainColumn($response);
+
     return $this->newPage()
       ->setTitle($title)
       ->setCrumbs($crumbs)
-      ->setNavigation($nav);
+      ->appendChild($view);
 
   }
 

src/view/phui/PHUITwoColumnView.php

@@ -4,6 +4,7 @@ final class PHUITwoColumnView extends AphrontTagView {
 
   private $mainColumn;
   private $sideColumn = null;
+  private $navigation;
   private $display;
   private $fluid;
   private $header;
@@ -25,6 +26,12 @@ final class PHUITwoColumnView extends AphrontTagView {
     return $this;
   }
 
+  public function setNavigation($nav) {
+    $this->navigation = $nav;
+    $this->display = self::DISPLAY_LEFT;
+    return $this;
+  }
+
   public function setHeader(PHUIHeaderView $header) {
     $this->header = $header;
     return $this;
@@ -162,14 +169,24 @@ final class PHUITwoColumnView extends AphrontTagView {
 
   private function buildSideColumn() {
 
+    $classes = array();
+    $classes[] = 'phui-side-column';
+    $navigation = null;
+    if ($this->navigation) {
+      $classes[] = 'side-has-nav';
+      $navigation = id(new PHUIObjectBoxView())
+        ->appendChild($this->navigation);
+    }
+
     $curtain = $this->getCurtain();
 
     return phutil_tag(
       'div',
       array(
-        'class' => 'phui-side-column',
+        'class' => implode($classes, ' '),
       ),
       array(
+        $navigation,
         $curtain,
         $this->sideColumn,
       ));

webroot/rsrc/css/phui/phui-crumbs-view.css

@@ -5,7 +5,7 @@
 .phui-crumbs-view {
   overflow: hidden;
   vertical-align: top;
-  padding: 0 8px 0 16px;
+  padding: 0 20px 0 28px;
   /* TODO: Position this over the slider for Differential's file tree view.
      Remove this once that gets sorted out. */
   position: relative;

webroot/rsrc/css/phui/phui-two-column-view.css

@@ -70,6 +70,16 @@
   width: 300px;
 }
 
+.device-desktop .phui-two-column-view.phui-side-column-left .phui-main-column {
+  float: right;
+  width: calc(100% - 280px);
+}
+
+.device-desktop .phui-two-column-view.phui-side-column-left .phui-side-column {
+  float: left;
+  width: 260px;
+}
+
 .device .phui-side-column {
   margin-bottom: 20px;
 }
@@ -202,3 +212,22 @@
   .phui-header-shell + .phui-info-view {
     margin: 16px;
 }
+
+/* Navigation */
+
+.phui-two-column-view .side-has-nav .phabricator-nav-local {
+  width: auto;
+  position: static;
+  margin: 0;
+}
+
+.device .phui-two-column-view .side-has-nav {
+  display: none;
+}
+
+/* Document View */
+
+.phui-two-column-view .phui-two-column-content .phui-document-fluid
+  .phui-document-view {
+    margin: 0 0 20px 0;
+}