diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index 15b0ec79f2..a19bbfbe19 100644 --- a/src/__celerity_resource_map__.php +++ b/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', diff --git a/src/__phutil_library_map__.php b/src/__phutil_library_map__.php index b1fbb007ec..6972a8e1a3 100644 --- a/src/__phutil_library_map__.php +++ b/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', diff --git a/src/applications/uiexample/examples/PHUIInfoPanelExample.php b/src/applications/uiexample/examples/PHUIInfoPanelExample.php new file mode 100644 index 0000000000..efdc8d0dc9 --- /dev/null +++ b/src/applications/uiexample/examples/PHUIInfoPanelExample.php @@ -0,0 +1,139 @@ +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 index 0000000000..182398c858 --- /dev/null +++ b/src/view/phui/PHUIInfoPanelView.php @@ -0,0 +1,118 @@ +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 index 0000000000..a182292a89 --- /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; +}