Apront Two Column View

Summary: Wanted to pull this out in case we don't use it in Maniphest, still useful perhaps in the future. Creates a sidebar that wraps when on mobile.

Test Plan: Tested UIExample

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

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

src/__celerity_resource_map__.php

@@ -763,6 +763,15 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/css/aphront/tooltip.css',
   ),
+  'aphront-two-column-view-css' =>
+  array(
+    'uri' => '/res/7afa129f/rsrc/css/aphront/two-column.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/aphront/two-column.css',
+  ),
   'aphront-typeahead-control-css' =>
   array(
     'uri' => '/res/ef59c20c/rsrc/css/aphront/typeahead.css',

src/__phutil_library_map__.php

@@ -87,6 +87,7 @@ phutil_register_library_map(array(
     'AphrontTableView' => 'view/control/AphrontTableView.php',
     'AphrontTagView' => 'view/AphrontTagView.php',
     'AphrontTokenizerTemplateView' => 'view/control/AphrontTokenizerTemplateView.php',
+    'AphrontTwoColumnView' => 'view/layout/AphrontTwoColumnView.php',
     'AphrontTypeaheadTemplateView' => 'view/control/AphrontTypeaheadTemplateView.php',
     'AphrontURIMapper' => 'aphront/AphrontURIMapper.php',
     'AphrontUsageException' => 'aphront/exception/AphrontUsageException.php',
@@ -1373,6 +1374,7 @@ phutil_register_library_map(array(
     'PhabricatorTranslation' => 'infrastructure/internationalization/PhabricatorTranslation.php',
     'PhabricatorTranslationsConfigOptions' => 'applications/config/option/PhabricatorTranslationsConfigOptions.php',
     'PhabricatorTrivialTestCase' => 'infrastructure/testing/__tests__/PhabricatorTrivialTestCase.php',
+    'PhabricatorTwoColumnExample' => 'applications/uiexample/examples/PhabricatorTwoColumnExample.php',
     'PhabricatorTypeaheadCommonDatasourceController' => 'applications/typeahead/controller/PhabricatorTypeaheadCommonDatasourceController.php',
     'PhabricatorTypeaheadDatasourceController' => 'applications/typeahead/controller/PhabricatorTypeaheadDatasourceController.php',
     'PhabricatorTypeaheadResult' => 'applications/typeahead/storage/PhabricatorTypeaheadResult.php',
@@ -1653,6 +1655,7 @@ phutil_register_library_map(array(
     'AphrontTableView' => 'AphrontView',
     'AphrontTagView' => 'AphrontView',
     'AphrontTokenizerTemplateView' => 'AphrontView',
+    'AphrontTwoColumnView' => 'AphrontView',
     'AphrontTypeaheadTemplateView' => 'AphrontView',
     'AphrontUsageException' => 'AphrontException',
     'AphrontView' =>
@@ -2867,6 +2870,7 @@ phutil_register_library_map(array(
     'PhabricatorTransformedFile' => 'PhabricatorFileDAO',
     'PhabricatorTranslationsConfigOptions' => 'PhabricatorApplicationConfigOptions',
     'PhabricatorTrivialTestCase' => 'PhabricatorTestCase',
+    'PhabricatorTwoColumnExample' => 'PhabricatorUIExample',
     'PhabricatorTypeaheadCommonDatasourceController' => 'PhabricatorTypeaheadDatasourceController',
     'PhabricatorTypeaheadDatasourceController' => 'PhabricatorController',
     'PhabricatorUIExampleRenderController' => 'PhabricatorController',

src/applications/uiexample/examples/PhabricatorTwoColumnExample.php

@@ -0,0 +1,36 @@
+<?php
+
+final class PhabricatorTwoColumnExample extends PhabricatorUIExample {
+
+  public function getName() {
+    return 'Two Column Layout';
+  }
+
+  public function getDescription() {
+    return 'Two Column mobile friendly layout';
+  }
+
+  public function renderExample() {
+
+    $main = phutil_tag(
+      'div',
+      array(
+        'style' => 'border: 1px solid blue; padding: 20px;'
+      ),
+      'Mary, mary quite contrary.');
+
+    $side = phutil_tag(
+      'div',
+      array(
+        'style' => 'border: 1px solid red; padding: 20px;'
+      ),
+      'How does your garden grow?');
+
+
+    $content = id(new AphrontTwoColumnView)
+          ->setMainColumn($main)
+          ->setSideColumn($side);
+
+    return $content;
+  }
+}

src/view/layout/AphrontTwoColumnView.php

@@ -0,0 +1,56 @@
+<?php
+
+final class AphrontTwoColumnView extends AphrontView {
+
+  private $mainColumn;
+  private $sideColumn;
+  private $padding = true;
+
+  public function setMainColumn($main) {
+    $this->mainColumn = $main;
+    return $this;
+  }
+
+  public function setSideColumn($side) {
+    $this->sideColumn = $side;
+    return $this;
+  }
+
+  public function setNoPadding($padding) {
+    $this->padding = $padding;
+    return $this;
+  }
+
+  public function render() {
+    require_celerity_resource('aphront-two-column-view-css');
+
+    $main = phutil_tag(
+      'div',
+      array(
+        'class' => 'aphront-main-column'
+      ),
+      $this->mainColumn);
+
+    $side = phutil_tag(
+      'div',
+      array(
+        'class' => 'aphront-side-column'
+      ),
+      $this->sideColumn);
+
+    $classes = array('aphront-two-column');
+    if ($this->padding) {
+      $classes[] = 'aphront-two-column-padded';
+    }
+
+    return phutil_tag(
+      'div',
+      array(
+        'class' => implode(' ', $classes)
+      ),
+      array(
+        $main,
+        $side,
+      ));
+  }
+}

webroot/rsrc/css/aphront/two-column.css

@@ -0,0 +1,26 @@
+/**
+ * @provides aphront-two-column-view-css
+ */
+
+.aphront-two-column {
+  position: relative;
+}
+
+.device-desktop .aphront-two-column.aphront-two-column-padded {
+  margin: 20px;
+}
+
+.device-desktop .aphront-main-column {
+  margin-right: 300px;
+}
+
+.device-desktop .aphront-side-column {
+  width: 300px;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.device-phone .aphront-two-column.aphront-two-column-padded {
+  margin: 10px;
+}