From b987b4dd64f54c5bbd8deccc62564589f463ed5b Mon Sep 17 00:00:00 2001 From: Chad Little Date: Mon, 10 Jul 2017 16:01:43 -0700 Subject: [PATCH] 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 --- resources/celerity/map.php | 2 + src/__phutil_library_map__.php | 4 ++ .../examples/PHUILeftRightExample.php | 72 +++++++++++++++++++ src/view/phui/PHUILeftRightView.php | 51 +++++++++++++ webroot/rsrc/css/phui/phui-left-right.css | 32 +++++++++ 5 files changed, 161 insertions(+) create mode 100644 src/applications/uiexample/examples/PHUILeftRightExample.php create mode 100644 src/view/phui/PHUILeftRightView.php create mode 100644 webroot/rsrc/css/phui/phui-left-right.css diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 4dc65888b9..50200049a5 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -166,6 +166,7 @@ return array( '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 @@ return array( '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 index d99eb9e2f1..6d24871583 100644 --- a/src/__phutil_library_map__.php +++ b/src/__phutil_library_map__.php @@ -1773,6 +1773,8 @@ phutil_register_library_map(array( '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 @@ phutil_register_library_map(array( '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 index 0000000000..46d96ddc38 --- /dev/null +++ b/src/applications/uiexample/examples/PHUILeftRightExample.php @@ -0,0 +1,72 @@ +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 index 0000000000..c3873c4899 --- /dev/null +++ b/src/view/phui/PHUILeftRightView.php @@ -0,0 +1,51 @@ +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 index 0000000000..2d260758b4 --- /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; +}