Add Shadow Panels to PhabricatorMultiColumnView

Summary: This adds the ability to have a multi-column full height container that is responsive based on PHUIBox's shadow box. Test Plan: Tested new examples in UIExamples and Workboards. Reviewers: epriestley, edward, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D5996
2025-02-20 10:48:40 +01:00 · 2013-05-21 15:28:43 -07:00 · 2013-05-21 15:28:43 -07:00 · 6cd624384a
commit 6cd624384a
parent c48f64b391
5 changed files with 219 additions and 64 deletions
--- a/src/__celerity_resource_map__.php
+++ b/src/__celerity_resource_map__.php
@ -800,7 +800,7 @@ celerity_register_resource_map(array(
  ),
  'aphront-form-view-css' =>
  array(
-    'uri' => '/res/cc40cdff/rsrc/css/aphront/form-view.css',
+    'uri' => '/res/70404bd5/rsrc/css/aphront/form-view.css',
    'type' => 'css',
    'requires' =>
    array(
@ -818,7 +818,7 @@ celerity_register_resource_map(array(
  ),
  'aphront-multi-column-view-css' =>
  array(
-    'uri' => '/res/4e5ae0f3/rsrc/css/aphront/multi-column.css',
+    'uri' => '/res/972551b3/rsrc/css/aphront/multi-column.css',
    'type' => 'css',
    'requires' =>
    array(
@ -3705,7 +3705,7 @@ celerity_register_resource_map(array(
  ),
  'ponder-comment-table-css' =>
  array(
-    'uri' => '/res/cf9c686f/rsrc/css/application/ponder/comments.css',
+    'uri' => '/res/15cb54fb/rsrc/css/application/ponder/comments.css',
    'type' => 'css',
    'requires' =>
    array(
@ -3732,7 +3732,7 @@ celerity_register_resource_map(array(
  ),
  'ponder-vote-css' =>
  array(
-    'uri' => '/res/104d54ba/rsrc/css/application/ponder/vote.css',
+    'uri' => '/res/26945177/rsrc/css/application/ponder/vote.css',
    'type' => 'css',
    'requires' =>
    array(
@ -3994,7 +3994,7 @@ celerity_register_resource_map(array(
 ), array(
  'packages' =>
  array(
-    '9680585d' =>
+    '190fa563' =>
    array(
      'name' => 'core.pkg.css',
      'symbols' =>
@ -4043,7 +4043,7 @@ celerity_register_resource_map(array(
        41 => 'phabricator-property-list-view-css',
        42 => 'phabricator-tag-view-css',
      ),
-      'uri' => '/res/pkg/9680585d/core.pkg.css',
+      'uri' => '/res/pkg/190fa563/core.pkg.css',
      'type' => 'css',
    ),
    'eb74a94b' =>
@ -4237,16 +4237,16 @@ celerity_register_resource_map(array(
  'reverse' =>
  array(
    'aphront-attached-file-view-css' => '6b1fccc6',
-    'aphront-dialog-view-css' => '9680585d',
-    'aphront-error-view-css' => '9680585d',
-    'aphront-form-view-css' => '9680585d',
-    'aphront-list-filter-view-css' => '9680585d',
-    'aphront-pager-view-css' => '9680585d',
-    'aphront-panel-view-css' => '9680585d',
-    'aphront-table-view-css' => '9680585d',
-    'aphront-tokenizer-control-css' => '9680585d',
-    'aphront-tooltip-css' => '9680585d',
-    'aphront-typeahead-control-css' => '9680585d',
+    'aphront-dialog-view-css' => '190fa563',
+    'aphront-error-view-css' => '190fa563',
+    'aphront-form-view-css' => '190fa563',
+    'aphront-list-filter-view-css' => '190fa563',
+    'aphront-pager-view-css' => '190fa563',
+    'aphront-panel-view-css' => '190fa563',
+    'aphront-table-view-css' => '190fa563',
+    'aphront-tokenizer-control-css' => '190fa563',
+    'aphront-tooltip-css' => '190fa563',
+    'aphront-typeahead-control-css' => '190fa563',
    'differential-changeset-view-css' => 'dd27a69b',
    'differential-core-view-css' => 'dd27a69b',
    'differential-inline-comment-editor' => '9488bb69',
@ -4260,7 +4260,7 @@ celerity_register_resource_map(array(
    'differential-table-of-contents-css' => 'dd27a69b',
    'diffusion-commit-view-css' => 'c8ce2d88',
    'diffusion-icons-css' => 'c8ce2d88',
-    'global-drag-and-drop-css' => '9680585d',
+    'global-drag-and-drop-css' => '190fa563',
    'inline-comment-summary-css' => 'dd27a69b',
    'javelin-aphlict' => 'eb74a94b',
    'javelin-behavior' => 'c1359b5d',
@ -4334,56 +4334,56 @@ celerity_register_resource_map(array(
    'javelin-util' => 'c1359b5d',
    'javelin-vector' => 'c1359b5d',
    'javelin-workflow' => 'c1359b5d',
-    'lightbox-attachment-css' => '9680585d',
+    'lightbox-attachment-css' => '190fa563',
    'maniphest-task-summary-css' => '6b1fccc6',
    'maniphest-transaction-detail-css' => '6b1fccc6',
-    'phabricator-action-list-view-css' => '9680585d',
-    'phabricator-application-launch-view-css' => '9680585d',
+    'phabricator-action-list-view-css' => '190fa563',
+    'phabricator-application-launch-view-css' => '190fa563',
    'phabricator-busy' => 'eb74a94b',
    'phabricator-content-source-view-css' => 'dd27a69b',
-    'phabricator-core-buttons-css' => '9680585d',
-    'phabricator-core-css' => '9680585d',
-    'phabricator-crumbs-view-css' => '9680585d',
-    'phabricator-directory-css' => '9680585d',
+    'phabricator-core-buttons-css' => '190fa563',
+    'phabricator-core-css' => '190fa563',
+    'phabricator-crumbs-view-css' => '190fa563',
+    'phabricator-directory-css' => '190fa563',
    'phabricator-drag-and-drop-file-upload' => '9488bb69',
    'phabricator-dropdown-menu' => 'eb74a94b',
    'phabricator-file-upload' => 'eb74a94b',
-    'phabricator-filetree-view-css' => '9680585d',
-    'phabricator-flag-css' => '9680585d',
-    'phabricator-form-view-css' => '9680585d',
-    'phabricator-header-view-css' => '9680585d',
+    'phabricator-filetree-view-css' => '190fa563',
+    'phabricator-flag-css' => '190fa563',
+    'phabricator-form-view-css' => '190fa563',
+    'phabricator-header-view-css' => '190fa563',
    'phabricator-hovercard' => 'eb74a94b',
-    'phabricator-jump-nav' => '9680585d',
+    'phabricator-jump-nav' => '190fa563',
    'phabricator-keyboard-shortcut' => 'eb74a94b',
    'phabricator-keyboard-shortcut-manager' => 'eb74a94b',
-    'phabricator-main-menu-view' => '9680585d',
+    'phabricator-main-menu-view' => '190fa563',
    'phabricator-menu-item' => 'eb74a94b',
-    'phabricator-nav-view-css' => '9680585d',
+    'phabricator-nav-view-css' => '190fa563',
    'phabricator-notification' => 'eb74a94b',
-    'phabricator-notification-css' => '9680585d',
-    'phabricator-notification-menu-css' => '9680585d',
-    'phabricator-object-item-list-view-css' => '9680585d',
+    'phabricator-notification-css' => '190fa563',
+    'phabricator-notification-menu-css' => '190fa563',
+    'phabricator-object-item-list-view-css' => '190fa563',
    'phabricator-object-selector-css' => 'dd27a69b',
    'phabricator-phtize' => 'eb74a94b',
    'phabricator-prefab' => 'eb74a94b',
    'phabricator-project-tag-css' => '6b1fccc6',
-    'phabricator-property-list-view-css' => '9680585d',
-    'phabricator-remarkup-css' => '9680585d',
+    'phabricator-property-list-view-css' => '190fa563',
+    'phabricator-remarkup-css' => '190fa563',
    'phabricator-shaped-request' => '9488bb69',
-    'phabricator-side-menu-view-css' => '9680585d',
-    'phabricator-standard-page-view' => '9680585d',
-    'phabricator-tag-view-css' => '9680585d',
+    'phabricator-side-menu-view-css' => '190fa563',
+    'phabricator-standard-page-view' => '190fa563',
+    'phabricator-tag-view-css' => '190fa563',
    'phabricator-textareautils' => 'eb74a94b',
    'phabricator-tooltip' => 'eb74a94b',
-    'phabricator-transaction-view-css' => '9680585d',
-    'phabricator-zindex-css' => '9680585d',
-    'phui-form-css' => '9680585d',
-    'phui-icon-view-css' => '9680585d',
-    'spacing-css' => '9680585d',
-    'sprite-apps-large-css' => '9680585d',
-    'sprite-gradient-css' => '9680585d',
-    'sprite-icons-css' => '9680585d',
-    'sprite-menu-css' => '9680585d',
-    'syntax-highlighting-css' => '9680585d',
+    'phabricator-transaction-view-css' => '190fa563',
+    'phabricator-zindex-css' => '190fa563',
+    'phui-form-css' => '190fa563',
+    'phui-icon-view-css' => '190fa563',
+    'spacing-css' => '190fa563',
+    'sprite-apps-large-css' => '190fa563',
+    'sprite-gradient-css' => '190fa563',
+    'sprite-icons-css' => '190fa563',
+    'sprite-menu-css' => '190fa563',
+    'syntax-highlighting-css' => '190fa563',
  ),
 ));
--- a/src/applications/uiexample/examples/PhabricatorMultiColumnExample.php
+++ b/src/applications/uiexample/examples/PhabricatorMultiColumnExample.php
@ -12,6 +12,8 @@ final class PhabricatorMultiColumnExample extends PhabricatorUIExample {
  }

  public function renderExample() {
+    $request = $this->getRequest();
+    $user = $request->getUser();

    $column1 = phutil_tag(
      'div',
@ -63,17 +65,102 @@ final class PhabricatorMultiColumnExample extends PhabricatorUIExample {
      ->setFluidLayout(true)
      ->setGutter(AphrontMultiColumnView::GUTTER_SMALL);

+    $sunday = hsprintf('<strong>Sunday</strong><br /><br />Watch Football'.
+      '<br />Code<br />Eat<br />Sleep');
+
+    $monday = hsprintf('<strong>Monday</strong><br /><br />Code'.
+      '<br />Eat<br />Sleep');
+
+    $tuesday = hsprintf('<strong>Tuesday</strong><br />'.
+      '<br />Code<br />Eat<br />Sleep');
+
+    $wednesday = hsprintf('<strong>Wednesday</strong><br /><br />Code'.
+      '<br />Eat<br />Sleep');
+
+    $thursday = hsprintf('<strong>Thursday</strong><br />'.
+      '<br />Code<br />Eat<br />Sleep');
+
+    $friday = hsprintf('<strong>Friday</strong><br /><br />Code'.
+      '<br />Eat<br />Sleep');
+
+    $saturday = hsprintf('<strong>Saturday</strong><br /><br />StarCraft II'.
+      '<br />All<br />Damn<br />Day');
+
    $head5 = id(new PhabricatorHeaderView())
      ->setHeader(pht('7 Column Fluid'));
    $layout5 = id(new AphrontMultiColumnView())
-      ->addColumn('Sunday')
-      ->addColumn('Monday')
-      ->addColumn('Tuesday')
-      ->addColumn('Wednesday')
-      ->addColumn('Thursday')
-      ->addColumn('Friday')
-      ->addColumn('Saturday')
-      ->setFluidLayout(true);
+      ->addColumn($sunday)
+      ->addColumn($monday)
+      ->addColumn($tuesday)
+      ->addColumn($wednesday)
+      ->addColumn($thursday)
+      ->addColumn($friday)
+      ->addColumn($saturday)
+      ->setFluidLayout(true)
+      ->setShadow(true);
+
+    $shipping = id(new AphrontFormLayoutView())
+      ->setUser($user)
+      ->setFullWidth(true)
+      ->appendChild(
+        id(new AphrontFormTextControl())
+        ->setLabel('Name')
+        ->setDisableAutocomplete(true)
+        ->setSigil('name-input'))
+      ->appendChild(
+        id(new AphrontFormTextControl())
+        ->setLabel('Address')
+        ->setDisableAutocomplete(true)
+        ->setSigil('address-input'))
+      ->appendChild(
+        id(new AphrontFormTextControl())
+        ->setLabel('City/State')
+        ->setDisableAutocomplete(true)
+        ->setSigil('city-input'))
+      ->appendChild(
+        id(new AphrontFormTextControl())
+        ->setLabel('Country')
+        ->setDisableAutocomplete(true)
+        ->setSigil('country-input'))
+      ->appendChild(
+        id(new AphrontFormTextControl())
+        ->setLabel('Postal Code')
+        ->setDisableAutocomplete(true)
+        ->setSigil('postal-input'));
+
+    $cc = id(new AphrontFormLayoutView())
+      ->setUser($user)
+      ->setFullWidth(true)
+      ->appendChild(
+        id(new AphrontFormTextControl())
+        ->setLabel('Card Number')
+        ->setDisableAutocomplete(true)
+        ->setSigil('number-input')
+        ->setError(''))
+      ->appendChild(
+        id(new AphrontFormTextControl())
+        ->setLabel('CVC')
+        ->setDisableAutocomplete(true)
+        ->setSigil('cvc-input')
+        ->setError(''))
+      ->appendChild(
+        id(new PhortuneMonthYearExpiryControl())
+        ->setLabel('Expiration')
+        ->setUser($user)
+        ->setError(''));
+
+    $shipping_title = pht('Shipping Address');
+    $billing_title = pht('Billing Address');
+    $cc_title = pht('Payment Information');
+
+    $head6 = id(new PhabricatorHeaderView())
+      ->setHeader(pht('Let\'s Go Shopping'));
+    $layout6 = id(new AphrontMultiColumnView())
+      ->addColumn(hsprintf('<h1>%s</h1>%s', $shipping_title, $shipping))
+      ->addColumn(hsprintf('<h1>%s</h1>%s', $billing_title, $shipping))
+      ->addColumn(hsprintf('<h1>%s</h1>%s', $cc_title, $cc))
+      ->setFluidLayout(true)
+      ->setShadow(true);

    $wrap1 = phutil_tag(
      'div',
@ -110,6 +197,13 @@ final class PhabricatorMultiColumnExample extends PhabricatorUIExample {
        ),
        $layout5);

+    $wrap6 = phutil_tag(
+      'div',
+        array(
+          'class' => 'ml'
+        ),
+        $layout6);
+
    return phutil_tag(
      'div',
        array(),
@ -123,7 +217,9 @@ final class PhabricatorMultiColumnExample extends PhabricatorUIExample {
          $head4,
          $wrap4,
          $head5,
-          $wrap5
+          $wrap5,
+          $head6,
+          $wrap6
        ));
  }
 }
--- a/src/view/layout/AphrontMultiColumnView.php
+++ b/src/view/layout/AphrontMultiColumnView.php
@ -9,6 +9,7 @@ final class AphrontMultiColumnView extends AphrontView {
  private $column = array();
  private $fluidLayout = false;
  private $gutter;
+  private $shadow;

  public function addColumn($column) {
    $this->columns[] = $column;
@ -25,6 +26,11 @@ final class AphrontMultiColumnView extends AphrontView {
    return $this;
  }

+  public function setShadow($shadow) {
+    $this->shadow = $shadow;
+    return $this;
+  }
+
  public function render() {
    require_celerity_resource('aphront-multi-column-view-css');

@ -41,6 +47,8 @@ final class AphrontMultiColumnView extends AphrontView {
    $columns = array();
    $column_class = array();
    $column_class[] = 'aphront-multi-column-column';
+    $outer_class = array();
+    $outer_class[] = 'aphront-multi-column-column-outer';
    if ($this->gutter) {
      $column_class[] = $this->gutter;
    }
@ -48,6 +56,7 @@ final class AphrontMultiColumnView extends AphrontView {
    foreach ($this->columns as $column) {
      if (++$i === count($this->columns)) {
        $column_class[] = 'aphront-multi-column-column-last';
+        $outer_class[] = 'aphront-multi-colum-column-outer-last';
      }
      $column_inner = phutil_tag(
        'div',
@ -58,7 +67,7 @@ final class AphrontMultiColumnView extends AphrontView {
      $columns[] = phutil_tag(
        'div',
          array(
-          'class' => 'aphront-multi-column-column-outer'
+          'class' => implode(' ', $outer_class)
          ),
        $column_inner);
    }
@ -87,6 +96,14 @@ final class AphrontMultiColumnView extends AphrontView {
        ),
        $view);

+    if ($this->shadow) {
+      $board = id(new PHUIBoxView())
+        ->setShadow(true)
+        ->appendChild($board)
+        ->addPadding(PHUI::PADDING_MEDIUM_TOP)
+        ->addPadding(PHUI::PADDING_MEDIUM_BOTTOM);
+    }
+
    return phutil_tag(
      'div',
        array(
--- a/webroot/rsrc/css/aphront/form-view.css
+++ b/webroot/rsrc/css/aphront/form-view.css
@ -90,6 +90,10 @@
  padding: 4px;
 }

+.aphront-form-full-width .aphront-form-control {
+  padding: 4px 0;
+}
+
 .aphront-form-control-submit button,
 .aphront-form-control-submit a.button {
  float: right;
--- a/webroot/rsrc/css/aphront/multi-column.css
+++ b/webroot/rsrc/css/aphront/multi-column.css
@ -12,10 +12,6 @@
  width: 100%;
 }

-.aphront-multi-column-column-outer {
-  float: left;
-}
-
 .aphront-multi-column-inner .aphront-multi-column-column-last,
 .device-phone .aphront-multi-column-column {
  margin: 0;
@ -23,7 +19,7 @@

 .device-phone .aphront-multi-column-outer
  div.aphront-multi-column-column-outer {
-  width: 100%;
+  width: auto;
  margin-bottom: 20px;
 }

@ -123,3 +119,45 @@
  .aphront-multi-column-column-outer {
  width: 14.2857%;
 }
+
+/* Shadow Panels */
+
+.aphront-multi-column-inner {
+  display: table;
+  width: 100%;
+}
+
+.device-phone .aphront-multi-column-inner {
+  display: block;
+  width: auto;
+}
+
+.aphront-multi-column-column-outer {
+  display: table-cell;
+  height: 100%;
+}
+
+.phui-box-shadow .aphront-multi-column-column-outer {
+  border-right: 1px solid #e7e7e7;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.phui-box-shadow .aphront-multi-colum-column-outer-last {
+  border: none;
+}
+
+.device-phone .aphront-multi-column-column-outer {
+  display: block;
+  border: none;
+}
+
+.device-phone .phui-box-shadow .aphront-multi-column-column-outer {
+  padding-bottom: 20px;
+  border-bottom: 1px solid #e7e7e7;
+}
+
+.device-phone .phui-box-shadow .aphront-multi-colum-column-outer-last {
+  border: none;
+  padding-bottom: 0;
+}