mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-28 16:30:59 +01:00
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
This commit is contained in:
parent
fbb032c710
commit
f2cec9f973
5 changed files with 131 additions and 0 deletions
|
@ -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',
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
56
src/view/layout/AphrontTwoColumnView.php
Normal file
56
src/view/layout/AphrontTwoColumnView.php
Normal file
|
@ -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,
|
||||
));
|
||||
}
|
||||
}
|
26
webroot/rsrc/css/aphront/two-column.css
Normal file
26
webroot/rsrc/css/aphront/two-column.css
Normal file
|
@ -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;
|
||||
}
|
Loading…
Reference in a new issue