@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
Rudamentary PHUILeftRightView
Summary: First pass at providing a skeleton framework for laying out basic items in a left/right view. Will likely add some mobile-responsive options.
Test Plan: UIExamples
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D18200
+161
+2
resources/celerity/map.php
+2
resources/celerity/map.php
···
166
166
'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
167
167
'rsrc/css/phui/phui-info-view.css' => '6e217679',
168
168
'rsrc/css/phui/phui-invisible-character-view.css' => '6993d9f0',
169
+
'rsrc/css/phui/phui-left-right.css' => 'f60c67e7',
169
170
'rsrc/css/phui/phui-lightbox.css' => '0a035e40',
170
171
'rsrc/css/phui/phui-list.css' => 'dcafb463',
171
172
'rsrc/css/phui/phui-object-box.css' => '9cff003c',
···
855
856
'phui-info-view-css' => '6e217679',
856
857
'phui-inline-comment-view-css' => 'ffd1a542',
857
858
'phui-invisible-character-view-css' => '6993d9f0',
859
+
'phui-left-right-css' => 'f60c67e7',
858
860
'phui-lightbox-css' => '0a035e40',
859
861
'phui-list-view-css' => 'dcafb463',
860
862
'phui-object-box-css' => '9cff003c',
+4
src/__phutil_library_map__.php
+4
src/__phutil_library_map__.php
···
1773
1773
'PHUIInfoView' => 'view/form/PHUIInfoView.php',
1774
1774
'PHUIInvisibleCharacterTestCase' => 'view/phui/__tests__/PHUIInvisibleCharacterTestCase.php',
1775
1775
'PHUIInvisibleCharacterView' => 'view/phui/PHUIInvisibleCharacterView.php',
1776
+
'PHUILeftRightExample' => 'applications/uiexample/examples/PHUILeftRightExample.php',
1777
+
'PHUILeftRightView' => 'view/phui/PHUILeftRightView.php',
1776
1778
'PHUIListExample' => 'applications/uiexample/examples/PHUIListExample.php',
1777
1779
'PHUIListItemView' => 'view/phui/PHUIListItemView.php',
1778
1780
'PHUIListView' => 'view/phui/PHUIListView.php',
···
6927
6929
'PHUIInfoView' => 'AphrontTagView',
6928
6930
'PHUIInvisibleCharacterTestCase' => 'PhabricatorTestCase',
6929
6931
'PHUIInvisibleCharacterView' => 'AphrontView',
6932
+
'PHUILeftRightExample' => 'PhabricatorUIExample',
6933
+
'PHUILeftRightView' => 'AphrontTagView',
6930
6934
'PHUIListExample' => 'PhabricatorUIExample',
6931
6935
'PHUIListItemView' => 'AphrontTagView',
6932
6936
'PHUIListView' => 'AphrontTagView',
+72
src/applications/uiexample/examples/PHUILeftRightExample.php
+72
src/applications/uiexample/examples/PHUILeftRightExample.php
···
1
+
<?php
2
+
3
+
final class PHUILeftRightExample extends PhabricatorUIExample {
4
+
5
+
public function getName() {
6
+
return pht('Responsive left-right table');
7
+
}
8
+
9
+
public function getDescription() {
10
+
return pht('Allows easily alignment of left/right UI elements.');
11
+
}
12
+
13
+
public function renderExample() {
14
+
$request = $this->getRequest();
15
+
$user = $request->getUser();
16
+
17
+
$text = pht('This is a sample of some text.');
18
+
$button = id(new PHUIButtonView())
19
+
->setTag('a')
20
+
->setText(pht('Actions'))
21
+
->setIcon('fa-bars');
22
+
23
+
$content1 = id(new PHUILeftRightView())
24
+
->setLeft($text)
25
+
->setRight($button)
26
+
->setVerticalAlign(PHUILeftRightView::ALIGN_TOP);
27
+
28
+
$content2 = id(new PHUILeftRightView())
29
+
->setLeft($text)
30
+
->setRight($button)
31
+
->setVerticalAlign(PHUILeftRightView::ALIGN_MIDDLE);
32
+
33
+
$content3 = id(new PHUILeftRightView())
34
+
->setLeft($text)
35
+
->setRight($button)
36
+
->setVerticalAlign(PHUILeftRightView::ALIGN_BOTTOM);
37
+
38
+
39
+
$head2 = id(new PHUIHeaderView())
40
+
->setHeader('Align Top')
41
+
->addClass('ml');
42
+
43
+
$head3 = id(new PHUIHeaderView())
44
+
->setHeader(pht('Align Middle'))
45
+
->addClass('ml');
46
+
47
+
$head4 = id(new PHUIHeaderView())
48
+
->setHeader(pht('Align Bottom'))
49
+
->addClass('ml');
50
+
51
+
$wrap2 = id(new PHUIBoxView())
52
+
->appendChild($content1)
53
+
->addMargin(PHUI::MARGIN_LARGE);
54
+
55
+
$wrap3 = id(new PHUIBoxView())
56
+
->appendChild($content2)
57
+
->addMargin(PHUI::MARGIN_LARGE);
58
+
59
+
$wrap4 = id(new PHUIBoxView())
60
+
->appendChild($content3)
61
+
->addMargin(PHUI::MARGIN_LARGE);
62
+
63
+
return array(
64
+
$head2,
65
+
$wrap2,
66
+
$head3,
67
+
$wrap3,
68
+
$head4,
69
+
$wrap4,
70
+
);
71
+
}
72
+
}
+51
src/view/phui/PHUILeftRightView.php
+51
src/view/phui/PHUILeftRightView.php
···
1
+
<?php
2
+
3
+
final class PHUILeftRightView extends AphrontTagView {
4
+
5
+
private $left;
6
+
private $right;
7
+
private $verticalAlign;
8
+
9
+
const ALIGN_TOP = 'top';
10
+
const ALIGN_MIDDLE = 'middle';
11
+
const ALIGN_BOTTOM = 'bottom';
12
+
13
+
public function setLeft($left) {
14
+
$this->left = $left;
15
+
return $this;
16
+
}
17
+
18
+
public function setRight($right) {
19
+
$this->right = $right;
20
+
return $this;
21
+
}
22
+
23
+
public function setVerticalAlign($align) {
24
+
$this->verticalAlign = $align;
25
+
return $this;
26
+
}
27
+
28
+
protected function getTagAttributes() {
29
+
require_celerity_resource('phui-left-right-css');
30
+
31
+
$classes = array();
32
+
$classes[] = 'phui-left-right-view';
33
+
34
+
if ($this->verticalAlign) {
35
+
$classes[] = 'phui-lr-view-'.$this->verticalAlign;
36
+
}
37
+
38
+
return array('class' => implode(' ', $classes));
39
+
}
40
+
41
+
protected function getTagName() {
42
+
return 'div';
43
+
}
44
+
45
+
protected function getTagContent() {
46
+
$left = phutil_tag_div('phui-left-view', $this->left);
47
+
$right = phutil_tag_div('phui-right-view', $this->right);
48
+
49
+
return phutil_tag_div('phui-lr-container', array($left, $right));
50
+
}
51
+
}
+32
webroot/rsrc/css/phui/phui-left-right.css
+32
webroot/rsrc/css/phui/phui-left-right.css
···
1
+
/**
2
+
* @provides phui-left-right-css
3
+
*/
4
+
5
+
.phui-left-right-view {
6
+
display: table;
7
+
width: 100%;
8
+
}
9
+
10
+
.phui-lr-container {
11
+
display: table-row;
12
+
}
13
+
14
+
.phui-left-view {
15
+
display: table-cell;
16
+
text-align: left;
17
+
}
18
+
19
+
.phui-right-view {
20
+
display: table-cell;
21
+
text-align: right;
22
+
}
23
+
24
+
.phui-lr-view-top .phui-left-view,
25
+
.phui-lr-view-top .phui-right-view {
26
+
vertical-align: top;
27
+
}
28
+
29
+
.phui-lr-view-bottom .phui-left-view,
30
+
.phui-lr-view-bottom .phui-right-view {
31
+
vertical-align: bottom;
32
+
}