Page Menu
Home
Phabricator
Search
Configure Global Search
Log In
Files
F75657
D7398.diff
All Users
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Flag For Later
Size
9 KB
Referenced Files
None
Subscribers
None
D7398.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',
@@ -3044,6 +3046,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: '.(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,
+ ));
+ }
+}
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
Details
Attached
Mime Type
text/x-diff
Storage Engine
amazon-s3
Storage Format
Raw Data
Storage Handle
phabricator/u3/a5/xuxb635eakmq4kv5
Default Alt Text
D7398.diff (9 KB)
Attached To
Mode
D7398: PHUIInfoPanel
Attached
Detach File
Event Timeline
Log In to Comment