1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-10 00:42:41 +01:00

Add Badges to PHUIHeaderView

Summary: Adds the ability to add Badges to Headers

Test Plan: UIExamples.

Reviewers: epriestley, btrahan

Subscribers:
This commit is contained in:
Chad Little 2015-07-11 11:59:00 -07:00
parent 183dd2a627
commit d082c33a5d
5 changed files with 46 additions and 8 deletions

View file

@ -7,7 +7,7 @@
*/
return array(
'names' => array(
'core.pkg.css' => '288cae1c',
'core.pkg.css' => '0e143972',
'core.pkg.js' => 'a590b451',
'darkconsole.pkg.js' => 'e7393ebb',
'differential.pkg.css' => '9451634c',
@ -126,7 +126,7 @@ return array(
'rsrc/css/phui/calendar/phui-calendar.css' => 'ccabe893',
'rsrc/css/phui/phui-action-list.css' => 'c5eba19d',
'rsrc/css/phui/phui-action-panel.css' => '3ee9afd5',
'rsrc/css/phui/phui-badge.css' => '9be0c352',
'rsrc/css/phui/phui-badge.css' => 'b6218fa8',
'rsrc/css/phui/phui-box.css' => 'a5bb366d',
'rsrc/css/phui/phui-button.css' => '16020a60',
'rsrc/css/phui/phui-crumbs-view.css' => 'd842f867',
@ -135,7 +135,7 @@ return array(
'rsrc/css/phui/phui-fontkit.css' => 'cb8ae7ad',
'rsrc/css/phui/phui-form-view.css' => '621b21c5',
'rsrc/css/phui/phui-form.css' => 'afdb2c6e',
'rsrc/css/phui/phui-header-view.css' => '4d09d68f',
'rsrc/css/phui/phui-header-view.css' => '87fd6d74',
'rsrc/css/phui/phui-icon.css' => 'b0a6b1b6',
'rsrc/css/phui/phui-image-mask.css' => '5a8b09c8',
'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
@ -775,7 +775,7 @@ return array(
'phrequent-css' => 'ffc185ad',
'phriction-document-css' => 'd1861e06',
'phui-action-panel-css' => '3ee9afd5',
'phui-badge-view-css' => '9be0c352',
'phui-badge-view-css' => 'b6218fa8',
'phui-box-css' => 'a5bb366d',
'phui-button-css' => '16020a60',
'phui-calendar-css' => 'ccabe893',
@ -789,7 +789,7 @@ return array(
'phui-fontkit-css' => 'cb8ae7ad',
'phui-form-css' => 'afdb2c6e',
'phui-form-view-css' => '621b21c5',
'phui-header-view-css' => '4d09d68f',
'phui-header-view-css' => '87fd6d74',
'phui-icon-view-css' => 'b0a6b1b6',
'phui-image-mask-css' => '5a8b09c8',
'phui-info-panel-css' => '27ea50a1',

View file

@ -70,9 +70,21 @@ final class PHUIBoxExample extends PhabricatorUIExample {
->setText(pht('Such Wow'))
->addClass(PHUI::MARGIN_SMALL_RIGHT);
$badge1 = id(new PHUIBadgeMiniView())
->setIcon('fa-bug')
->setHeader(pht('Bugmeister'));
$badge2 = id(new PHUIBadgeMiniView())
->setIcon('fa-heart')
->setHeader(pht('Funder'))
->setQuality(PHUIBadgeView::UNCOMMON);
$header = id(new PHUIHeaderView())
->setHeader(pht('Fancy Box'))
->addActionLink($button);
->addActionLink($button)
->setSubheader(pht('Much Features'))
->addBadge($badge1)
->addBadge($badge2);
$obj4 = id(new PHUIObjectBoxView())
->setHeader($header)

View file

@ -20,6 +20,7 @@ final class PHUIHeaderView extends AphrontTagView {
private $policyObject;
private $epoch;
private $actionIcons = array();
private $badges = array();
public function setHeader($header) {
$this->header = $header;
@ -46,6 +47,11 @@ final class PHUIHeaderView extends AphrontTagView {
return $this;
}
public function addBadge(PHUIBadgeMiniView $badge) {
$this->badges[] = $badge;
return $this;
}
public function setImage($uri) {
$this->image = $uri;
return $this;
@ -264,13 +270,23 @@ final class PHUIHeaderView extends AphrontTagView {
),
$this->header);
if ($this->subheader) {
if ($this->subheader || $this->badges) {
$badges = null;
if ($this->badges) {
$badges = new PHUIBadgeBoxView();
$badges->addItems($this->badges);
$badges->setCollapsed(true);
}
$left[] = phutil_tag(
'div',
array(
'class' => 'phui-header-subheader',
),
$this->subheader);
array(
$badges,
$this->subheader,
));
}
if ($this->properties || $this->policyObject) {

View file

@ -186,6 +186,7 @@
.phui-badge-mini .phui-icon-view {
color: #fff;
font-size: 12px;
margin: 0;
}
.phui-badge-mini-grey {

View file

@ -239,3 +239,12 @@ body .phui-header-shell.phui-bleed-header
.spaces-name .phui-handle {
color: {$sh-redtext};
}
.phui-header-subheader .phui-badge-flex-view {
display: inline;
margin-right: 4px;
}
.phui-header-subheader .phui-badge-flex-view:after {
display: inline;
}