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

@@ -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',

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',

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,
+    );
+  }
+}

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));
+  }
+}

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;
+}