From 6cd624384a4cd7c5e8e682bed739d877f711647b Mon Sep 17 00:00:00 2001 From: Chad Little Date: Tue, 21 May 2013 15:28:43 -0700 Subject: [PATCH] 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 --- src/__celerity_resource_map__.php | 98 +++++++-------- .../PhabricatorMultiColumnExample.php | 114 ++++++++++++++++-- src/view/layout/AphrontMultiColumnView.php | 19 ++- webroot/rsrc/css/aphront/form-view.css | 4 + webroot/rsrc/css/aphront/multi-column.css | 48 +++++++- 5 files changed, 219 insertions(+), 64 deletions(-) diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index 721a597dc7..e2c8cd3510 100644 --- 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', ), )); diff --git a/src/applications/uiexample/examples/PhabricatorMultiColumnExample.php b/src/applications/uiexample/examples/PhabricatorMultiColumnExample.php index 0d04b40d56..bd87e7e2e0 100644 --- 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('Sunday

Watch Football'. + '
Code
Eat
Sleep'); + + $monday = hsprintf('Monday

Code'. + '
Eat
Sleep'); + + $tuesday = hsprintf('Tuesday
'. + '
Code
Eat
Sleep'); + + $wednesday = hsprintf('Wednesday

Code'. + '
Eat
Sleep'); + + $thursday = hsprintf('Thursday
'. + '
Code
Eat
Sleep'); + + $friday = hsprintf('Friday

Code'. + '
Eat
Sleep'); + + $saturday = hsprintf('Saturday

StarCraft II'. + '
All
Damn
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('

%s

%s', $shipping_title, $shipping)) + ->addColumn(hsprintf('

%s

%s', $billing_title, $shipping)) + ->addColumn(hsprintf('

%s

%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 )); } } diff --git a/src/view/layout/AphrontMultiColumnView.php b/src/view/layout/AphrontMultiColumnView.php index f90c596b85..57a36fd4c5 100644 --- 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( diff --git a/webroot/rsrc/css/aphront/form-view.css b/webroot/rsrc/css/aphront/form-view.css index b1f537ce6c..96c002f0b5 100644 --- 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; diff --git a/webroot/rsrc/css/aphront/multi-column.css b/webroot/rsrc/css/aphront/multi-column.css index 4e7d07847f..5cff0b1024 100644 --- 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; +}