Page Menu
Home
Phabricator
Search
Configure Global Search
Log In
Files
F13815419
D14115.id34108.diff
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Flag For Later
Size
12 KB
Referenced Files
None
Subscribers
None
D14115.id34108.diff
View Options
diff --git a/resources/celerity/map.php b/resources/celerity/map.php
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -121,7 +121,7 @@
'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 @@
'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',
diff --git a/src/applications/uiexample/examples/PHUIActionPanelExample.php b/src/applications/uiexample/examples/PHUIActionPanelExample.php
--- a/src/applications/uiexample/examples/PHUIActionPanelExample.php
+++ b/src/applications/uiexample/examples/PHUIActionPanelExample.php
@@ -13,8 +13,7 @@
public function renderExample() {
$view = id(new AphrontMultiColumnView())
- ->setFluidLayout(true)
- ->setBorder(true);
+ ->setFluidLayout(true);
/* Action Panels */
$panel1 = id(new PHUIActionPanelView())
@@ -22,8 +21,7 @@
->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 @@
->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 @@
->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 @@
->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 @@
->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);
diff --git a/src/view/phui/PHUIActionPanelView.php b/src/view/phui/PHUIActionPanelView.php
--- a/src/view/phui/PHUIActionPanelView.php
+++ b/src/view/phui/PHUIActionPanelView.php
@@ -52,29 +52,8 @@
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 @@
$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 @@
$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));
- }
-
- return array($icon, $header, $subheader, $status);
+ $row = phutil_tag(
+ 'span',
+ array(
+ 'class' => 'phui-action-panel-row',
+ ),
+ array(
+ $icon,
+ $subheader,
+ ));
+
+ $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);
}
diff --git a/webroot/rsrc/css/phui/phui-action-panel.css b/webroot/rsrc/css/phui/phui-action-panel.css
--- a/webroot/rsrc/css/phui/phui-action-panel.css
+++ b/webroot/rsrc/css/phui/phui-action-panel.css
@@ -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};
}
File Metadata
Details
Attached
Mime Type
text/plain
Expires
Fri, Sep 20, 9:48 AM (14 h, 32 m)
Storage Engine
blob
Storage Format
Encrypted (AES-256-CBC)
Storage Handle
6623251
Default Alt Text
D14115.id34108.diff (12 KB)
Attached To
Mode
D14115: Update PHUIActionPanelView
Attached
Detach File
Event Timeline
Log In to Comment