mirror of
https://we.phorge.it/source/phorge.git
synced 2025-01-14 16:51:08 +01:00
Update PHUIActionPanelView
Summary: Making these a little more fun, a little more flexible and better looking. Will have an update for rSAAS in a bit.
Test Plan:
Make lots of them. Click.
{F815658}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D14115
This commit is contained in:
Chad Little
parent
0449a07f53
commit
a62337dcd8
4 changed files with 130 additions and 129 deletions
|
|
@ -121,7 +121,7 @@ return array(
|
|||
'rsrc/css/phui/calendar/phui-calendar-month.css' => '476be7e0',
|
||||
'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-action-panel.css' => '714a6c2f',
|
||||
'rsrc/css/phui/phui-badge.css' => 'f25c3476',
|
||||
'rsrc/css/phui/phui-box.css' => 'a5bb366d',
|
||||
'rsrc/css/phui/phui-button.css' => '16020a60',
|
||||
|
|
@ -764,7 +764,7 @@ return array(
|
|||
'phortune-css' => '9149f103',
|
||||
'phrequent-css' => 'ffc185ad',
|
||||
'phriction-document-css' => 'd1861e06',
|
||||
'phui-action-panel-css' => '3ee9afd5',
|
||||
'phui-action-panel-css' => '714a6c2f',
|
||||
'phui-badge-view-css' => 'f25c3476',
|
||||
'phui-box-css' => 'a5bb366d',
|
||||
'phui-button-css' => '16020a60',
|
||||
|
|
|
|||
|
|
@ -13,8 +13,7 @@ final class PHUIActionPanelExample extends PhabricatorUIExample {
|
|||
public function renderExample() {
|
||||
|
||||
$view = id(new AphrontMultiColumnView())
|
||||
->setFluidLayout(true)
|
||||
->setBorder(true);
|
||||
->setFluidLayout(true);
|
||||
|
||||
/* Action Panels */
|
||||
$panel1 = id(new PHUIActionPanelView())
|
||||
|
|
@ -22,8 +21,7 @@ final class PHUIActionPanelExample extends PhabricatorUIExample {
|
|||
->setHeader(pht('Read Documentation'))
|
||||
->setHref('#')
|
||||
->setSubHeader(pht('Reading is a common way to learn about things.'))
|
||||
->setStatus(pht('Carrots help you see better.'))
|
||||
->setState(PHUIActionPanelView::STATE_NONE);
|
||||
->setState(PHUIActionPanelView::STATE_INFO);
|
||||
$view->addColumn($panel1);
|
||||
|
||||
$panel2 = id(new PHUIActionPanelView())
|
||||
|
|
@ -31,7 +29,6 @@ final class PHUIActionPanelExample extends PhabricatorUIExample {
|
|||
->setHeader(pht('Launch Instance'))
|
||||
->setHref('#')
|
||||
->setSubHeader(pht("Maybe this is what you're likely here for."))
|
||||
->setStatus(pht('You have no instances.'))
|
||||
->setState(PHUIActionPanelView::STATE_ERROR);
|
||||
$view->addColumn($panel2);
|
||||
|
||||
|
|
@ -40,7 +37,6 @@ final class PHUIActionPanelExample extends PhabricatorUIExample {
|
|||
->setHeader(pht('Code with Friends'))
|
||||
->setHref('#')
|
||||
->setSubHeader(pht('Writing code is much more fun with friends!'))
|
||||
->setStatus(pht('You need more friends.'))
|
||||
->setState(PHUIActionPanelView::STATE_WARN);
|
||||
$view->addColumn($panel3);
|
||||
|
||||
|
|
@ -49,13 +45,11 @@ final class PHUIActionPanelExample extends PhabricatorUIExample {
|
|||
->setHeader(pht('Download Data'))
|
||||
->setHref('#')
|
||||
->setSubHeader(pht('Need a backup of all your kitten memes?'))
|
||||
->setStatus(pht('Building Download'))
|
||||
->setState(PHUIActionPanelView::STATE_PROGRESS);
|
||||
$view->addColumn($panel4);
|
||||
|
||||
$view2 = id(new AphrontMultiColumnView())
|
||||
->setFluidLayout(true)
|
||||
->setBorder(true);
|
||||
->setFluidLayout(true);
|
||||
|
||||
/* Action Panels */
|
||||
$panel1 = id(new PHUIActionPanelView())
|
||||
|
|
@ -63,33 +57,31 @@ final class PHUIActionPanelExample extends PhabricatorUIExample {
|
|||
->setHeader(pht('Account Balance'))
|
||||
->setHref('#')
|
||||
->setSubHeader(pht('You were last billed $2,245.12 on Dec 12, 2014.'))
|
||||
->setStatus(pht('Account in good standing.'))
|
||||
->setState(PHUIActionPanelView::STATE_SUCCESS);
|
||||
$view2->addColumn($panel1);
|
||||
|
||||
$panel2 = id(new PHUIActionPanelView())
|
||||
->setBigText('148')
|
||||
->setBigText(true)
|
||||
->setHeader(pht('Instance Users'))
|
||||
->setHref('#')
|
||||
->setSubHeader(
|
||||
pht('You currently have 140 active and 8 inactive accounts'));
|
||||
pht('148'));
|
||||
$view2->addColumn($panel2);
|
||||
|
||||
$panel3 = id(new PHUIActionPanelView())
|
||||
->setBigText('March 12')
|
||||
->setBigText(true)
|
||||
->setHeader(pht('Next Maintenance Window'))
|
||||
->setHref('#')
|
||||
->setSubHeader(
|
||||
pht('At 6:00 am PST, Phacility will conduct weekly maintenence.'))
|
||||
->setStatus(pht('Very Important!'))
|
||||
pht('March 12'))
|
||||
->setState(PHUIActionPanelView::STATE_ERROR);
|
||||
$view2->addColumn($panel3);
|
||||
|
||||
$panel4 = id(new PHUIActionPanelView())
|
||||
->setBigText('1,113,377')
|
||||
->setBigText(true)
|
||||
->setHeader(pht('Lines of Code'))
|
||||
->setHref('#')
|
||||
->setSubHeader(pht('Your team has reviewed lots of code!'));
|
||||
->setSubHeader(pht('1,113,377'));
|
||||
$view2->addColumn($panel4);
|
||||
|
||||
$view = phutil_tag_div('mlb', $view);
|
||||
|
|
|
|||
|
|
@ -52,29 +52,8 @@ final class PHUIActionPanelView extends AphrontTagView {
|
|||
return $this;
|
||||
}
|
||||
|
||||
protected function getStateIcon() {
|
||||
$icon = new PHUIIconView();
|
||||
switch ($this->state) {
|
||||
case self::STATE_WARN:
|
||||
$icon->setIconFont('fa-exclamation-circle msr');
|
||||
break;
|
||||
case self::STATE_INFO:
|
||||
$icon->setIconFont('fa-info-circle msr');
|
||||
break;
|
||||
case self::STATE_ERROR:
|
||||
$icon->setIconFont('fa-exclamation-triangle msr');
|
||||
break;
|
||||
case self::STATE_PROGRESS:
|
||||
$icon->setIconFont('fa-refresh ph-spin msr');
|
||||
break;
|
||||
case self::STATE_SUCCESS:
|
||||
$icon->setIconFont('fa-check msr');
|
||||
break;
|
||||
case self::STATE_NONE:
|
||||
return null;
|
||||
break;
|
||||
}
|
||||
return $icon;
|
||||
protected function getTagName() {
|
||||
return 'div';
|
||||
}
|
||||
|
||||
protected function getTagAttributes() {
|
||||
|
|
@ -82,43 +61,26 @@ final class PHUIActionPanelView extends AphrontTagView {
|
|||
|
||||
$classes = array();
|
||||
$classes[] = 'phui-action-panel';
|
||||
if ($this->status) {
|
||||
$classes[] = 'phui-action-panel-has-status';
|
||||
if ($this->state) {
|
||||
$classes[] = $this->state;
|
||||
|
||||
}
|
||||
if ($this->bigText) {
|
||||
$classes[] = 'phui-action-panel-bigtext';
|
||||
}
|
||||
|
||||
return array(
|
||||
'class' => implode(' ', $classes),
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
protected function getTagContent() {
|
||||
|
||||
$icon = null;
|
||||
if ($this->fontIcon || $this->bigText) {
|
||||
if ($this->fontIcon) {
|
||||
$fonticon = id(new PHUIIconView())
|
||||
->setIconFont($this->fontIcon);
|
||||
} else {
|
||||
$fonticon = phutil_tag(
|
||||
'span',
|
||||
array(
|
||||
'class' => 'phui-action-panel-bigtext',
|
||||
),
|
||||
$this->bigText);
|
||||
}
|
||||
if ($this->href) {
|
||||
$fonticon = phutil_tag(
|
||||
'a',
|
||||
array(
|
||||
'href' => $this->href,
|
||||
),
|
||||
$fonticon);
|
||||
}
|
||||
if ($this->fontIcon) {
|
||||
$fonticon = id(new PHUIIconView())
|
||||
->setIconFont($this->fontIcon);
|
||||
$icon = phutil_tag(
|
||||
'div',
|
||||
'span',
|
||||
array(
|
||||
'class' => 'phui-action-panel-icon',
|
||||
),
|
||||
|
|
@ -147,26 +109,39 @@ final class PHUIActionPanelView extends AphrontTagView {
|
|||
$subheader = null;
|
||||
if ($this->subHeader) {
|
||||
$subheader = phutil_tag(
|
||||
'div',
|
||||
'span',
|
||||
array(
|
||||
'class' => 'phui-action-panel-subheader',
|
||||
),
|
||||
$this->subHeader);
|
||||
}
|
||||
|
||||
$status = null;
|
||||
if ($this->status && $this->state) {
|
||||
$state_icon = $this->getStateIcon();
|
||||
$status = phutil_tag(
|
||||
($this->href) ? 'a' : 'div',
|
||||
array(
|
||||
'class' => 'phui-action-panel-status',
|
||||
'href' => ($this->href) ? $this->href : null,
|
||||
),
|
||||
array($state_icon, $this->status));
|
||||
}
|
||||
$row = phutil_tag(
|
||||
'span',
|
||||
array(
|
||||
'class' => 'phui-action-panel-row',
|
||||
),
|
||||
array(
|
||||
$icon,
|
||||
$subheader,
|
||||
));
|
||||
|
||||
return array($icon, $header, $subheader, $status);
|
||||
$table = phutil_tag(
|
||||
'span',
|
||||
array(
|
||||
'class' => 'phui-action-panel-table',
|
||||
),
|
||||
$row);
|
||||
|
||||
$content = phutil_tag(
|
||||
'a',
|
||||
array(
|
||||
'href' => $this->href,
|
||||
'class' => 'phui-action-panel-hitarea',
|
||||
),
|
||||
$table);
|
||||
|
||||
return array($header, $content);
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,23 +4,39 @@
|
|||
|
||||
.phui-action-panel {
|
||||
position: relative;
|
||||
background-color: {$lightbluebackground};
|
||||
border: 1px solid {$lightgreyborder};
|
||||
border-radius: 3px;
|
||||
margin: 0 8px;
|
||||
min-height: 108px;
|
||||
}
|
||||
|
||||
.phui-action-panel-has-status.phui-action-panel {
|
||||
padding-bottom: 44px;
|
||||
.phui-action-panel-hitarea {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.phui-action-panel-table {
|
||||
display: table;
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.phui-action-panel-row {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.phui-action-panel-icon {
|
||||
height: 128px;
|
||||
line-height: 160px;
|
||||
width: 64px;
|
||||
text-align: center;
|
||||
vertical-align: bottom;
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.phui-action-panel-bigtext {
|
||||
font-size: 40px;
|
||||
color: {$lightgreytext};
|
||||
line-height: 96px;
|
||||
.phui-action-panel-bigtext .phui-action-panel-subheader {
|
||||
font-size: 28px;
|
||||
color: {$darkbluetext};
|
||||
text-align: center;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.phui-action-panel-icon a {
|
||||
|
|
@ -37,25 +53,28 @@
|
|||
}
|
||||
|
||||
.phui-action-panel-icon .phui-icon-view {
|
||||
font-size: 64px;
|
||||
color: {$lightgreytext};
|
||||
font-size: 36px;
|
||||
color: {$lightbluetext};
|
||||
}
|
||||
|
||||
.phui-action-panel-header {
|
||||
padding: 0 8px 4px 8px;
|
||||
font-weight: bold;
|
||||
font-size: {$biggerfontsize};
|
||||
color: {$darkbluetext};
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid {$thinblueborder};
|
||||
}
|
||||
|
||||
.phui-action-panel-header a {
|
||||
color: {$blue};
|
||||
color: {$darkbluetext};
|
||||
}
|
||||
|
||||
.phui-action-panel-subheader {
|
||||
padding: 0 8px 4px 8px;
|
||||
font-size: {$normalfontsize};
|
||||
color: {$bluetext};
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
color: {$darkbluetext};
|
||||
padding: 0 8px 0 0;
|
||||
}
|
||||
|
||||
.phui-action-panel-subheader a {
|
||||
text-decoraction: none;
|
||||
}
|
||||
|
||||
.phui-action-panel-status {
|
||||
|
|
@ -80,52 +99,67 @@
|
|||
color: {$greytext};
|
||||
}
|
||||
|
||||
.phui-action-panel-warn .phui-action-panel-status {
|
||||
background-color: {$lightyellow};
|
||||
border-left: 4px solid #bc7837;
|
||||
color: #bc7837;
|
||||
.phui-action-panel-warn {
|
||||
background-color: {$sh-yellowbackground};
|
||||
border-color: {$sh-yellowborder};
|
||||
}
|
||||
|
||||
.phui-action-panel-warn .phui-action-panel-status .phui-icon-view {
|
||||
color: #bc7837;
|
||||
.phui-action-panel-warn .phui-action-panel-icon .phui-icon-view {
|
||||
color: {$sh-yellowicon};
|
||||
}
|
||||
|
||||
.phui-action-panel-error .phui-action-panel-status {
|
||||
background-color: {$lightred};
|
||||
border-left: 4px solid {$red};
|
||||
color: {$red};
|
||||
.phui-action-panel-warn .phui-action-panel-header {
|
||||
border-color: {$sh-lightyellowborder};
|
||||
}
|
||||
|
||||
.phui-action-panel-error .phui-action-panel-status .phui-icon-view {
|
||||
color: {$red};
|
||||
.phui-action-panel-error {
|
||||
background-color: {$sh-redbackground};
|
||||
border-color: {$sh-redborder};
|
||||
}
|
||||
|
||||
.phui-action-panel-info .phui-action-panel-status {
|
||||
background-color: {$lightblue};
|
||||
border-left: 4px solid {$blue};
|
||||
color: {$blue};
|
||||
.phui-action-panel-error .phui-action-panel-icon .phui-icon-view {
|
||||
color: {$sh-redicon};
|
||||
}
|
||||
|
||||
.phui-action-panel-info .phui-action-panel-status .phui-icon-view {
|
||||
color: {$blue};
|
||||
.phui-action-panel-error .phui-action-panel-header {
|
||||
border-color: {$sh-lightredborder};
|
||||
}
|
||||
|
||||
.phui-action-panel-success .phui-action-panel-status {
|
||||
background-color: {$lightgreen};
|
||||
color: {$green};
|
||||
border-left: 4px solid {$green};
|
||||
.phui-action-panel-info {
|
||||
background-color: {$sh-bluebackground};
|
||||
border-color: {$sh-blueborder};
|
||||
}
|
||||
|
||||
.phui-action-panel-success .phui-action-panel-status .phui-icon-view {
|
||||
color: {$green};
|
||||
.phui-action-panel-info .phui-action-panel-icon .phui-icon-view {
|
||||
color: {$sh-blueicon};
|
||||
}
|
||||
|
||||
.phui-action-panel-progress .phui-action-panel-status {
|
||||
background-color: {$lightblue};
|
||||
color: {$blue};
|
||||
border-left: 4px solid {$blue};
|
||||
.phui-action-panel-info .phui-action-panel-header {
|
||||
border-color: {$sh-lightblueborder};
|
||||
}
|
||||
|
||||
.phui-action-panel-progress .phui-action-panel-status .phui-icon-view {
|
||||
color: {$blue};
|
||||
.phui-action-panel-success {
|
||||
background-color: {$sh-greenbackground};
|
||||
border-color: {$sh-greenborder};
|
||||
}
|
||||
|
||||
.phui-action-panel-success .phui-action-panel-icon .phui-icon-view {
|
||||
color: {$sh-greenicon};
|
||||
}
|
||||
|
||||
.phui-action-panel-success .phui-action-panel-header {
|
||||
border-color: {$sh-lightgreenborder};
|
||||
}
|
||||
|
||||
.phui-action-panel-progress {
|
||||
background-color: {$sh-violetbackground};
|
||||
border-color: {$sh-violetborder};
|
||||
}
|
||||
|
||||
.phui-action-panel-progress .phui-action-panel-icon .phui-icon-view {
|
||||
color: {$sh-violeticon};
|
||||
}
|
||||
|
||||
.phui-action-panel-progress .phui-action-panel-header {
|
||||
border-color: {$sh-lightvioletborder};
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue