PHUIInfoPanel

Summary: First cut of an 'info panel' for phabricator. Basic concept is for display a list of items with a bit more info and depth and an object item list. Projects could be a good first example.

Test Plan: UIExamples

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: Korvin, epriestley, aran

Differential Revision: https://secure.phabricator.com/D7398

src/__celerity_resource_map__.php

@@ -3883,6 +3883,15 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/css/phui/phui-icon.css',
   ),
+  'phui-info-panel-css' =>
+  array(
+    'uri' => '/res/0a9c55c3/rsrc/css/phui/phui-info-panel.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/phui/phui-info-panel.css',
+  ),
   'phui-list-view-css' =>
   array(
     'uri' => '/res/fbf42225/rsrc/css/phui/phui-list.css',

src/__phutil_library_map__.php

@@ -819,6 +819,8 @@ phutil_register_library_map(array(
     'PHUIHeaderView' => 'view/phui/PHUIHeaderView.php',
     'PHUIIconExample' => 'applications/uiexample/examples/PHUIIconExample.php',
     'PHUIIconView' => 'view/phui/PHUIIconView.php',
+    'PHUIInfoPanelExample' => 'applications/uiexample/examples/PHUIInfoPanelExample.php',
+    'PHUIInfoPanelView' => 'view/phui/PHUIInfoPanelView.php',
     'PHUIListExample' => 'applications/uiexample/examples/PHUIListExample.php',
     'PHUIListItemView' => 'view/phui/PHUIListItemView.php',
     'PHUIListView' => 'view/phui/PHUIListView.php',
@@ -3044,6 +3046,8 @@ phutil_register_library_map(array(
     'PHUIHeaderView' => 'AphrontView',
     'PHUIIconExample' => 'PhabricatorUIExample',
     'PHUIIconView' => 'AphrontTagView',
+    'PHUIInfoPanelExample' => 'PhabricatorUIExample',
+    'PHUIInfoPanelView' => 'AphrontView',
     'PHUIListExample' => 'PhabricatorUIExample',
     'PHUIListItemView' => 'AphrontTagView',
     'PHUIListView' => 'AphrontTagView',

src/applications/uiexample/examples/PHUIInfoPanelExample.php

@@ -0,0 +1,139 @@
+<?php
+
+final class PHUIInfoPanelExample extends PhabricatorUIExample {
+
+  public function getName() {
+    return 'Info Panel';
+  }
+
+  public function getDescription() {
+    return 'A medium sized box with bits of gooey information.';
+  }
+
+  public function renderExample() {
+
+    $header1 = id(new PHUIHeaderView())
+      ->setHeader(pht('Conpherence'));
+
+    $header2 = id(new PHUIHeaderView())
+      ->setHeader(pht('Diffusion'));
+
+    $header3 = id(new PHUIHeaderView())
+      ->setHeader(pht('Backend Ops Projects'));
+
+    $header4 = id(new PHUIHeaderView())
+      ->setHeader(pht('Revamp Liberty'))
+      ->setSubHeader(pht('For great justice'))
+      ->setImage(
+        celerity_get_resource_uri('/rsrc/image/people/washington.png'));
+
+    $header5 = id(new PHUIHeaderView())
+      ->setHeader(pht('Phacility Redesign'))
+      ->setSubHeader(pht('Move them pixels'))
+      ->setImage(
+        celerity_get_resource_uri('/rsrc/image/people/harding.png'));
+
+    $header6 = id(new PHUIHeaderView())
+      ->setHeader(pht('Python Phlux'))
+      ->setSubHeader(pht('No. Sleep. Till Brooklyn.'))
+      ->setImage(
+      celerity_get_resource_uri('/rsrc/image/people/taft.png'));
+
+    $column1 = id(new PHUIInfoPanelView())
+      ->setHeader($header1)
+      ->setColumns(3)
+      ->addInfoBlock(3, 'Needs Triage')
+      ->addInfoBlock(5, 'Unbreak Now')
+      ->addInfoBlock(0, 'High')
+      ->addInfoBlock(0, 'Normal')
+      ->addInfoBlock(12, 'Low')
+      ->addInfoBlock(123, 'Wishlist');
+
+    $column2 = id(new PHUIInfoPanelView())
+      ->setHeader($header2)
+      ->setColumns(3)
+      ->addInfoBlock(3, 'Needs Triage')
+      ->addInfoBlock(5, 'Unbreak Now')
+      ->addInfoBlock(0, 'High')
+      ->addInfoBlock(0, 'Normal')
+      ->addInfoBlock(12, 'Low')
+      ->addInfoBlock(123, 'Wishlist');
+
+    $column3 = id(new PHUIInfoPanelView())
+      ->setHeader($header3)
+      ->setColumns(3)
+      ->addInfoBlock(3, 'Needs Triage')
+      ->addInfoBlock(5, 'Unbreak Now')
+      ->addInfoBlock(0, 'High')
+      ->addInfoBlock(0, 'Normal')
+      ->addInfoBlock(12, 'Low')
+      ->addInfoBlock(123, 'Wishlist');
+
+    $column4 = id(new PHUIInfoPanelView())
+      ->setHeader($header4)
+      ->setColumns(3)
+      ->setProgress(90)
+      ->addInfoBlock(3, 'Needs Triage')
+      ->addInfoBlock(5, 'Unbreak Now')
+      ->addInfoBlock(0, 'High')
+      ->addInfoBlock(0, 'Normal')
+      ->addInfoBlock(0, 'Wishlist');
+
+    $column5 = id(new PHUIInfoPanelView())
+      ->setHeader($header5)
+      ->setColumns(2)
+      ->setProgress(25)
+      ->addInfoBlock(3, 'Needs Triage')
+      ->addInfoBlock(5, 'Unbreak Now')
+      ->addInfoBlock(0, 'High')
+      ->addInfoBlock(0, 'Normal');
+
+    $column6 = id(new PHUIInfoPanelView())
+      ->setHeader($header6)
+      ->setColumns(2)
+      ->setProgress(50)
+      ->addInfoBlock(3, 'Needs Triage')
+      ->addInfoBlock(5, 'Unbreak Now')
+      ->addInfoBlock(0, 'High')
+      ->addInfoBlock(0, 'Normal');
+
+    $layout1 = id(new AphrontMultiColumnView())
+      ->addColumn($column1)
+      ->addColumn($column2)
+      ->addColumn($column3)
+      ->setFluidLayout(true);
+
+    $layout2 = id(new AphrontMultiColumnView())
+      ->addColumn($column4)
+      ->addColumn($column5)
+      ->addColumn($column6)
+      ->setFluidLayout(true);
+
+
+    $head1 = id(new PHUIHeaderView())
+      ->setHeader(pht('Flagged'));
+
+    $head2 = id(new PHUIHeaderView())
+      ->setHeader(pht('Sprints'));
+
+
+    $wrap1 = id(new PHUIBoxView())
+      ->appendChild($layout1)
+      ->addMargin(PHUI::MARGIN_LARGE_BOTTOM);
+
+    $wrap2 = id(new PHUIBoxView())
+      ->appendChild($layout2)
+      ->addMargin(PHUI::MARGIN_LARGE_BOTTOM);
+
+
+    return phutil_tag(
+      'div',
+        array(),
+        array(
+          $head1,
+          $wrap1,
+          $head2,
+          $wrap2
+        ));
+        }
+}

src/view/phui/PHUIInfoPanelView.php

@@ -0,0 +1,118 @@
+<?php
+
+final class PHUIInfoPanelView extends AphrontView {
+
+  private $header;
+  private $progress = null;
+  private $columns = 3;
+  private $infoblock = array();
+
+  protected function canAppendChild() {
+    return false;
+  }
+
+  public function setHeader(PHUIHeaderView $header) {
+    $this->header = $header;
+    return $this;
+  }
+
+  public function setProgress($progress) {
+    $this->progress = $progress;
+    return $this;
+  }
+
+  public function setColumns($columns) {
+    $this->columns = $columns;
+    return $this;
+  }
+
+  public function addInfoblock($num, $text) {
+    $this->infoblock[] = array($num, $text);
+    return $this;
+  }
+
+  public function render() {
+    require_celerity_resource('phui-info-panel-css');
+
+    $trs = array();
+    $rows = ceil(count($this->infoblock) / $this->columns);
+    for ($i = 0; $i < $rows; $i++) {
+      $tds = array();
+      $ii = 1;
+      foreach ($this->infoblock as $key => $cell) {
+        $tds[] = $this->renderCell($cell);
+        unset($this->infoblock[$key]);
+        $ii++;
+        if ($ii > $this->columns) break;
+      }
+      $trs[] = phutil_tag(
+        'tr',
+        array(
+          'class' => 'phui-info-panel-table-row',
+        ),
+        $tds);
+    }
+
+    $table = phutil_tag(
+      'table',
+      array(
+        'class' => 'phui-info-panel-table',
+      ),
+      $trs);
+
+    $table = id(new PHUIBoxView())
+      ->addPadding(PHUI::PADDING_MEDIUM)
+      ->appendChild($table);
+
+    $progress = null;
+    if ($this->progress) {
+      $progress = phutil_tag(
+        'div',
+        array(
+          'class' => 'phui-info-panel-progress',
+          'style' => 'width: '.(int)$this->progress.'%;',
+        ),
+        null);
+    }
+
+    $box = id(new PHUIObjectBoxView())
+      ->setHeader($this->header)
+      ->appendChild($table)
+      ->appendChild($progress);
+
+    return phutil_tag(
+      'div',
+      array(
+        'class' => 'phui-info-panel',
+      ),
+      $box);
+  }
+
+  private function renderCell($cell) {
+    $number = phutil_tag(
+      'div',
+      array(
+        'class' => 'phui-info-panel-number',
+      ),
+      $cell[0]);
+
+    $text = phutil_tag(
+      'div',
+      array(
+        'class' => 'phui-info-panel-text',
+      ),
+      $cell[1]);
+
+    return phutil_tag(
+      'td',
+      array(
+        'class' => 'phui-info-panel-table-cell',
+        'align' => 'center',
+        'width' => floor(100 / $this->columns).'%',
+      ),
+      array(
+        $number,
+        $text,
+      ));
+  }
+}

webroot/rsrc/css/phui/phui-info-panel.css

@@ -0,0 +1,50 @@
+/**
+ * @provides phui-info-panel-css
+ */
+
+.phui-info-panel .phui-object-box .phui-header-has-image {
+  padding: 2px 0 0 2px;
+}
+
+.phui-info-panel .phui-object-box .phui-header-image {
+  margin: 0 8px 0 0;
+}
+
+.phui-info-panel-table {
+  border-collapse: collapse;
+  border-style: hidden;
+  width: 100%;
+}
+
+.phui-info-panel-table td,
+.phui-info-panel-table th {
+  border: 1px solid {$thinblueborder};
+}
+
+.phui-info-panel-table-cell {
+  padding: 8px;
+}
+
+.phui-info-panel-number,
+.phui-info-panel-number a {
+  font-size: 30px;
+  font-weight: bold;
+  color: {$lightgreytext};
+  -webkit-font-smoothing: antialiased;
+}
+
+.phui-info-panel-text,
+.phui-info-panel-text a {
+  color: {$lightgreytext};
+}
+
+.phui-info-panel-number a:hover,
+.phui-info-panel-text a:hover {
+  color: {$greytext};
+  text-decoration: none;
+}
+
+.phui-info-panel-progress {
+  background: {$green};
+  height: 6px;
+}