mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-23 05:50:55 +01:00
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
This commit is contained in:
parent
af71c990ee
commit
b987b4dd64
5 changed files with 161 additions and 0 deletions
|
@ -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',
|
||||
|
|
|
@ -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',
|
||||
|
|
72
src/applications/uiexample/examples/PHUILeftRightExample.php
Normal file
72
src/applications/uiexample/examples/PHUILeftRightExample.php
Normal file
|
@ -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,
|
||||
);
|
||||
}
|
||||
}
|
51
src/view/phui/PHUILeftRightView.php
Normal file
51
src/view/phui/PHUILeftRightView.php
Normal file
|
@ -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));
|
||||
}
|
||||
}
|
32
webroot/rsrc/css/phui/phui-left-right.css
Normal file
32
webroot/rsrc/css/phui/phui-left-right.css
Normal file
|
@ -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;
|
||||
}
|
Loading…
Reference in a new issue