@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
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
+131
+9
src/__celerity_resource_map__.php
+9
src/__celerity_resource_map__.php
···
763
763
),
764
764
'disk' => '/rsrc/css/aphront/tooltip.css',
765
765
),
766
+
'aphront-two-column-view-css' =>
767
+
array(
768
+
'uri' => '/res/7afa129f/rsrc/css/aphront/two-column.css',
769
+
'type' => 'css',
770
+
'requires' =>
771
+
array(
772
+
),
773
+
'disk' => '/rsrc/css/aphront/two-column.css',
774
+
),
766
775
'aphront-typeahead-control-css' =>
767
776
array(
768
777
'uri' => '/res/ef59c20c/rsrc/css/aphront/typeahead.css',
+4
src/__phutil_library_map__.php
+4
src/__phutil_library_map__.php
···
87
87
'AphrontTableView' => 'view/control/AphrontTableView.php',
88
88
'AphrontTagView' => 'view/AphrontTagView.php',
89
89
'AphrontTokenizerTemplateView' => 'view/control/AphrontTokenizerTemplateView.php',
90
+
'AphrontTwoColumnView' => 'view/layout/AphrontTwoColumnView.php',
90
91
'AphrontTypeaheadTemplateView' => 'view/control/AphrontTypeaheadTemplateView.php',
91
92
'AphrontURIMapper' => 'aphront/AphrontURIMapper.php',
92
93
'AphrontUsageException' => 'aphront/exception/AphrontUsageException.php',
···
1373
1374
'PhabricatorTranslation' => 'infrastructure/internationalization/PhabricatorTranslation.php',
1374
1375
'PhabricatorTranslationsConfigOptions' => 'applications/config/option/PhabricatorTranslationsConfigOptions.php',
1375
1376
'PhabricatorTrivialTestCase' => 'infrastructure/testing/__tests__/PhabricatorTrivialTestCase.php',
1377
+
'PhabricatorTwoColumnExample' => 'applications/uiexample/examples/PhabricatorTwoColumnExample.php',
1376
1378
'PhabricatorTypeaheadCommonDatasourceController' => 'applications/typeahead/controller/PhabricatorTypeaheadCommonDatasourceController.php',
1377
1379
'PhabricatorTypeaheadDatasourceController' => 'applications/typeahead/controller/PhabricatorTypeaheadDatasourceController.php',
1378
1380
'PhabricatorTypeaheadResult' => 'applications/typeahead/storage/PhabricatorTypeaheadResult.php',
···
1653
1655
'AphrontTableView' => 'AphrontView',
1654
1656
'AphrontTagView' => 'AphrontView',
1655
1657
'AphrontTokenizerTemplateView' => 'AphrontView',
1658
+
'AphrontTwoColumnView' => 'AphrontView',
1656
1659
'AphrontTypeaheadTemplateView' => 'AphrontView',
1657
1660
'AphrontUsageException' => 'AphrontException',
1658
1661
'AphrontView' =>
···
2867
2870
'PhabricatorTransformedFile' => 'PhabricatorFileDAO',
2868
2871
'PhabricatorTranslationsConfigOptions' => 'PhabricatorApplicationConfigOptions',
2869
2872
'PhabricatorTrivialTestCase' => 'PhabricatorTestCase',
2873
+
'PhabricatorTwoColumnExample' => 'PhabricatorUIExample',
2870
2874
'PhabricatorTypeaheadCommonDatasourceController' => 'PhabricatorTypeaheadDatasourceController',
2871
2875
'PhabricatorTypeaheadDatasourceController' => 'PhabricatorController',
2872
2876
'PhabricatorUIExampleRenderController' => 'PhabricatorController',
+36
src/applications/uiexample/examples/PhabricatorTwoColumnExample.php
+36
src/applications/uiexample/examples/PhabricatorTwoColumnExample.php
···
1
+
<?php
2
+
3
+
final class PhabricatorTwoColumnExample extends PhabricatorUIExample {
4
+
5
+
public function getName() {
6
+
return 'Two Column Layout';
7
+
}
8
+
9
+
public function getDescription() {
10
+
return 'Two Column mobile friendly layout';
11
+
}
12
+
13
+
public function renderExample() {
14
+
15
+
$main = phutil_tag(
16
+
'div',
17
+
array(
18
+
'style' => 'border: 1px solid blue; padding: 20px;'
19
+
),
20
+
'Mary, mary quite contrary.');
21
+
22
+
$side = phutil_tag(
23
+
'div',
24
+
array(
25
+
'style' => 'border: 1px solid red; padding: 20px;'
26
+
),
27
+
'How does your garden grow?');
28
+
29
+
30
+
$content = id(new AphrontTwoColumnView)
31
+
->setMainColumn($main)
32
+
->setSideColumn($side);
33
+
34
+
return $content;
35
+
}
36
+
}
+56
src/view/layout/AphrontTwoColumnView.php
+56
src/view/layout/AphrontTwoColumnView.php
···
1
+
<?php
2
+
3
+
final class AphrontTwoColumnView extends AphrontView {
4
+
5
+
private $mainColumn;
6
+
private $sideColumn;
7
+
private $padding = true;
8
+
9
+
public function setMainColumn($main) {
10
+
$this->mainColumn = $main;
11
+
return $this;
12
+
}
13
+
14
+
public function setSideColumn($side) {
15
+
$this->sideColumn = $side;
16
+
return $this;
17
+
}
18
+
19
+
public function setNoPadding($padding) {
20
+
$this->padding = $padding;
21
+
return $this;
22
+
}
23
+
24
+
public function render() {
25
+
require_celerity_resource('aphront-two-column-view-css');
26
+
27
+
$main = phutil_tag(
28
+
'div',
29
+
array(
30
+
'class' => 'aphront-main-column'
31
+
),
32
+
$this->mainColumn);
33
+
34
+
$side = phutil_tag(
35
+
'div',
36
+
array(
37
+
'class' => 'aphront-side-column'
38
+
),
39
+
$this->sideColumn);
40
+
41
+
$classes = array('aphront-two-column');
42
+
if ($this->padding) {
43
+
$classes[] = 'aphront-two-column-padded';
44
+
}
45
+
46
+
return phutil_tag(
47
+
'div',
48
+
array(
49
+
'class' => implode(' ', $classes)
50
+
),
51
+
array(
52
+
$main,
53
+
$side,
54
+
));
55
+
}
56
+
}
+26
webroot/rsrc/css/aphront/two-column.css
+26
webroot/rsrc/css/aphront/two-column.css
···
1
+
/**
2
+
* @provides aphront-two-column-view-css
3
+
*/
4
+
5
+
.aphront-two-column {
6
+
position: relative;
7
+
}
8
+
9
+
.device-desktop .aphront-two-column.aphront-two-column-padded {
10
+
margin: 20px;
11
+
}
12
+
13
+
.device-desktop .aphront-main-column {
14
+
margin-right: 300px;
15
+
}
16
+
17
+
.device-desktop .aphront-side-column {
18
+
width: 300px;
19
+
position: absolute;
20
+
top: 0;
21
+
right: 0;
22
+
}
23
+
24
+
.device-phone .aphront-two-column.aphront-two-column-padded {
25
+
margin: 10px;
26
+
}