Page MenuHomePhabricator
Files F92320

D7398.id16665.diff
All Users
Actions

D7398.id16665.diff
View Options

diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php
--- a/src/__celerity_resource_map__.php
+++ b/src/__celerity_resource_map__.php
@@ -3883,6 +3883,15 @@
),
'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',
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
@@ -819,6 +819,8 @@
'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',
@@ -3042,6 +3044,8 @@
'PHUIHeaderView' => 'AphrontView',
'PHUIIconExample' => 'PhabricatorUIExample',
'PHUIIconView' => 'AphrontTagView',
+ 'PHUIInfoPanelExample' => 'PhabricatorUIExample',
+ 'PHUIInfoPanelView' => 'AphrontView',
'PHUIListExample' => 'PhabricatorUIExample',
'PHUIListItemView' => 'AphrontTagView',
'PHUIListView' => 'AphrontTagView',
diff --git a/src/applications/uiexample/examples/PHUIInfoPanelExample.php b/src/applications/uiexample/examples/PHUIInfoPanelExample.php
new file mode 100644
--- /dev/null
+++ b/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
+ ));
+ }
+}
diff --git a/src/view/phui/PHUIInfoPanelView.php b/src/view/phui/PHUIInfoPanelView.php
new file mode 100644
--- /dev/null
+++ b/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: '.$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,
+ ));
+ }
+}
diff --git a/webroot/rsrc/css/phui/phui-info-panel.css b/webroot/rsrc/css/phui/phui-info-panel.css
new file mode 100644
--- /dev/null
+++ b/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;
+}

File Metadata

Mime Type
text/x-diff
Storage Engine
amazon-s3
Storage Format
Raw Data
Storage Handle
phabricator/jb/y5/wp6rrqt4ofobfnia
Default Alt Text
D7398.id16665.diff (9 KB)

Event Timeline

Phabricator · Built by Phacility