From f2cec9f973d7264d6aaebb3672e5a4927619d1af Mon Sep 17 00:00:00 2001 From: Chad Little Date: Sun, 10 Mar 2013 19:20:01 -0700 Subject: [PATCH] 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 | 9 +++ src/__phutil_library_map__.php | 4 ++ .../examples/PhabricatorTwoColumnExample.php | 36 ++++++++++++ src/view/layout/AphrontTwoColumnView.php | 56 +++++++++++++++++++ webroot/rsrc/css/aphront/two-column.css | 26 +++++++++ 5 files changed, 131 insertions(+) create mode 100644 src/applications/uiexample/examples/PhabricatorTwoColumnExample.php create mode 100644 src/view/layout/AphrontTwoColumnView.php create mode 100644 webroot/rsrc/css/aphront/two-column.css diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index b4dc528588..62d470c934 100644 --- a/src/__celerity_resource_map__.php +++ b/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', diff --git a/src/__phutil_library_map__.php b/src/__phutil_library_map__.php index e9c13fb385..29b5f8e59b 100644 --- a/src/__phutil_library_map__.php +++ b/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', diff --git a/src/applications/uiexample/examples/PhabricatorTwoColumnExample.php b/src/applications/uiexample/examples/PhabricatorTwoColumnExample.php new file mode 100644 index 0000000000..a407ac3ebc --- /dev/null +++ b/src/applications/uiexample/examples/PhabricatorTwoColumnExample.php @@ -0,0 +1,36 @@ + '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; + } +} diff --git a/src/view/layout/AphrontTwoColumnView.php b/src/view/layout/AphrontTwoColumnView.php new file mode 100644 index 0000000000..93f98b5fe0 --- /dev/null +++ b/src/view/layout/AphrontTwoColumnView.php @@ -0,0 +1,56 @@ +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, + )); + } +} diff --git a/webroot/rsrc/css/aphront/two-column.css b/webroot/rsrc/css/aphront/two-column.css new file mode 100644 index 0000000000..3e6aa72a47 --- /dev/null +++ b/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; +}