1
0
Fork 0
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:
Chad Little 2013-03-10 19:20:01 -07:00
parent fbb032c710
commit f2cec9f973
5 changed files with 131 additions and 0 deletions

View file

@ -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',

View file

@ -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',

View file

@ -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;
}
}

View 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,
));
}
}

View 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;
}