Page MenuHomePhabricator
Files F15423260

D18200.id43777.diff
No OneTemporary
Actions

D18200.id43777.diff
View Options

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -166,6 +166,7 @@
'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
'rsrc/css/phui/phui-info-view.css' => '6e217679',
'rsrc/css/phui/phui-invisible-character-view.css' => '6993d9f0',
+ 'rsrc/css/phui/phui-left-right.css' => 'f60c67e7',
'rsrc/css/phui/phui-lightbox.css' => '0a035e40',
'rsrc/css/phui/phui-list.css' => 'dcafb463',
'rsrc/css/phui/phui-object-box.css' => '9cff003c',
@@ -855,6 +856,7 @@
'phui-info-view-css' => '6e217679',
'phui-inline-comment-view-css' => 'ffd1a542',
'phui-invisible-character-view-css' => '6993d9f0',
+ 'phui-left-right-css' => 'f60c67e7',
'phui-lightbox-css' => '0a035e40',
'phui-list-view-css' => 'dcafb463',
'phui-object-box-css' => '9cff003c',
diff --git a/src/__phutil_library_map__.php b/src/__phutil_library_map__.php
--- a/src/__phutil_library_map__.php
+++ b/src/__phutil_library_map__.php
@@ -1773,6 +1773,8 @@
'PHUIInfoView' => 'view/form/PHUIInfoView.php',
'PHUIInvisibleCharacterTestCase' => 'view/phui/__tests__/PHUIInvisibleCharacterTestCase.php',
'PHUIInvisibleCharacterView' => 'view/phui/PHUIInvisibleCharacterView.php',
+ 'PHUILeftRightExample' => 'applications/uiexample/examples/PHUILeftRightExample.php',
+ 'PHUILeftRightView' => 'view/phui/PHUILeftRightView.php',
'PHUIListExample' => 'applications/uiexample/examples/PHUIListExample.php',
'PHUIListItemView' => 'view/phui/PHUIListItemView.php',
'PHUIListView' => 'view/phui/PHUIListView.php',
@@ -6927,6 +6929,8 @@
'PHUIInfoView' => 'AphrontTagView',
'PHUIInvisibleCharacterTestCase' => 'PhabricatorTestCase',
'PHUIInvisibleCharacterView' => 'AphrontView',
+ 'PHUILeftRightExample' => 'PhabricatorUIExample',
+ 'PHUILeftRightView' => 'AphrontTagView',
'PHUIListExample' => 'PhabricatorUIExample',
'PHUIListItemView' => 'AphrontTagView',
'PHUIListView' => 'AphrontTagView',
diff --git a/src/applications/uiexample/examples/PHUILeftRightExample.php b/src/applications/uiexample/examples/PHUILeftRightExample.php
new file mode 100644
--- /dev/null
+++ b/src/applications/uiexample/examples/PHUILeftRightExample.php
@@ -0,0 +1,72 @@
+<?php
+
+final class PHUILeftRightExample extends PhabricatorUIExample {
+
+ public function getName() {
+ return pht('Responsive left-right table');
+ }
+
+ public function getDescription() {
+ return pht('Allows easily alignment of left/right UI elements.');
+ }
+
+ public function renderExample() {
+ $request = $this->getRequest();
+ $user = $request->getUser();
+
+ $text = pht('This is a sample of some text.');
+ $button = id(new PHUIButtonView())
+ ->setTag('a')
+ ->setText(pht('Actions'))
+ ->setIcon('fa-bars');
+
+ $content1 = id(new PHUILeftRightView())
+ ->setLeft($text)
+ ->setRight($button)
+ ->setVerticalAlign(PHUILeftRightView::ALIGN_TOP);
+
+ $content2 = id(new PHUILeftRightView())
+ ->setLeft($text)
+ ->setRight($button)
+ ->setVerticalAlign(PHUILeftRightView::ALIGN_MIDDLE);
+
+ $content3 = id(new PHUILeftRightView())
+ ->setLeft($text)
+ ->setRight($button)
+ ->setVerticalAlign(PHUILeftRightView::ALIGN_BOTTOM);
+
+
+ $head2 = id(new PHUIHeaderView())
+ ->setHeader('Align Top')
+ ->addClass('ml');
+
+ $head3 = id(new PHUIHeaderView())
+ ->setHeader(pht('Align Middle'))
+ ->addClass('ml');
+
+ $head4 = id(new PHUIHeaderView())
+ ->setHeader(pht('Align Bottom'))
+ ->addClass('ml');
+
+ $wrap2 = id(new PHUIBoxView())
+ ->appendChild($content1)
+ ->addMargin(PHUI::MARGIN_LARGE);
+
+ $wrap3 = id(new PHUIBoxView())
+ ->appendChild($content2)
+ ->addMargin(PHUI::MARGIN_LARGE);
+
+ $wrap4 = id(new PHUIBoxView())
+ ->appendChild($content3)
+ ->addMargin(PHUI::MARGIN_LARGE);
+
+ return array(
+ $head2,
+ $wrap2,
+ $head3,
+ $wrap3,
+ $head4,
+ $wrap4,
+ );
+ }
+}
diff --git a/src/view/phui/PHUILeftRightView.php b/src/view/phui/PHUILeftRightView.php
new file mode 100644
--- /dev/null
+++ b/src/view/phui/PHUILeftRightView.php
@@ -0,0 +1,51 @@
+<?php
+
+final class PHUILeftRightView extends AphrontTagView {
+
+ private $left;
+ private $right;
+ private $verticalAlign;
+
+ const ALIGN_TOP = 'top';
+ const ALIGN_MIDDLE = 'middle';
+ const ALIGN_BOTTOM = 'bottom';
+
+ public function setLeft($left) {
+ $this->left = $left;
+ return $this;
+ }
+
+ public function setRight($right) {
+ $this->right = $right;
+ return $this;
+ }
+
+ public function setVerticalAlign($align) {
+ $this->verticalAlign = $align;
+ return $this;
+ }
+
+ protected function getTagAttributes() {
+ require_celerity_resource('phui-left-right-css');
+
+ $classes = array();
+ $classes[] = 'phui-left-right-view';
+
+ if ($this->verticalAlign) {
+ $classes[] = 'phui-lr-view-'.$this->verticalAlign;
+ }
+
+ return array('class' => implode(' ', $classes));
+ }
+
+ protected function getTagName() {
+ return 'div';
+ }
+
+ protected function getTagContent() {
+ $left = phutil_tag_div('phui-left-view', $this->left);
+ $right = phutil_tag_div('phui-right-view', $this->right);
+
+ return phutil_tag_div('phui-lr-container', array($left, $right));
+ }
+}
diff --git a/webroot/rsrc/css/phui/phui-left-right.css b/webroot/rsrc/css/phui/phui-left-right.css
new file mode 100644
--- /dev/null
+++ b/webroot/rsrc/css/phui/phui-left-right.css
@@ -0,0 +1,32 @@
+/**
+ * @provides phui-left-right-css
+ */
+
+.phui-left-right-view {
+ display: table;
+ width: 100%;
+}
+
+.phui-lr-container {
+ display: table-row;
+}
+
+.phui-left-view {
+ display: table-cell;
+ text-align: left;
+}
+
+.phui-right-view {
+ display: table-cell;
+ text-align: right;
+}
+
+.phui-lr-view-top .phui-left-view,
+.phui-lr-view-top .phui-right-view {
+ vertical-align: top;
+}
+
+.phui-lr-view-bottom .phui-left-view,
+.phui-lr-view-bottom .phui-right-view {
+ vertical-align: bottom;
+}

File Metadata

Mime Type
text/plain
Expires
Sun, Mar 23, 2:19 PM (1 d, 5 h ago)
Storage Engine
blob
Storage Format
Encrypted (AES-256-CBC)
Storage Handle
7712598
Default Alt Text
D18200.id43777.diff (6 KB)

Event Timeline

Phabricator · Built by Phacility