Page MenuHomePhabricator
Files F15332917

D14120.id34114.diff
No OneTemporary
Actions

D14120.id34114.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' => '714a6c2f',
+ 'rsrc/css/phui/phui-action-panel.css' => 'bac94b03',
'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' => '714a6c2f',
+ 'phui-action-panel-css' => 'bac94b03',
'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
@@ -21,7 +21,7 @@
->setHeader(pht('Read Documentation'))
->setHref('#')
->setSubHeader(pht('Reading is a common way to learn about things.'))
- ->setState(PHUIActionPanelView::STATE_INFO);
+ ->setState(PHUIActionPanelView::COLOR_BLUE);
$view->addColumn($panel1);
$panel2 = id(new PHUIActionPanelView())
@@ -29,7 +29,7 @@
->setHeader(pht('Launch Instance'))
->setHref('#')
->setSubHeader(pht("Maybe this is what you're likely here for."))
- ->setState(PHUIActionPanelView::STATE_ERROR);
+ ->setState(PHUIActionPanelView::COLOR_RED);
$view->addColumn($panel2);
$panel3 = id(new PHUIActionPanelView())
@@ -37,7 +37,7 @@
->setHeader(pht('Code with Friends'))
->setHref('#')
->setSubHeader(pht('Writing code is much more fun with friends!'))
- ->setState(PHUIActionPanelView::STATE_WARN);
+ ->setState(PHUIActionPanelView::COLOR_YELLOW);
$view->addColumn($panel3);
$panel4 = id(new PHUIActionPanelView())
@@ -45,7 +45,7 @@
->setHeader(pht('Download Data'))
->setHref('#')
->setSubHeader(pht('Need a backup of all your kitten memes?'))
- ->setState(PHUIActionPanelView::STATE_PROGRESS);
+ ->setState(PHUIActionPanelView::COLOR_PINK);
$view->addColumn($panel4);
$view2 = id(new AphrontMultiColumnView())
@@ -57,7 +57,7 @@
->setHeader(pht('Account Balance'))
->setHref('#')
->setSubHeader(pht('You were last billed $2,245.12 on Dec 12, 2014.'))
- ->setState(PHUIActionPanelView::STATE_SUCCESS);
+ ->setState(PHUIActionPanelView::COLOR_GREEN);
$view2->addColumn($panel1);
$panel2 = id(new PHUIActionPanelView())
@@ -74,14 +74,15 @@
->setHref('#')
->setSubHeader(
pht('March 12'))
- ->setState(PHUIActionPanelView::STATE_ERROR);
+ ->setState(PHUIActionPanelView::COLOR_ORANGE);
$view2->addColumn($panel3);
$panel4 = id(new PHUIActionPanelView())
->setBigText(true)
->setHeader(pht('Lines of Code'))
->setHref('#')
- ->setSubHeader(pht('1,113,377'));
+ ->setSubHeader(pht('1,113,377'))
+ ->setState(PHUIActionPanelView::COLOR_INDIGO);
$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
@@ -10,12 +10,14 @@
private $state;
private $status;
- const STATE_WARN = 'phui-action-panel-warn';
- const STATE_INFO = 'phui-action-panel-info';
- const STATE_ERROR = 'phui-action-panel-error';
- const STATE_SUCCESS = 'phui-action-panel-success';
- const STATE_PROGRESS = 'phui-action-panel-progress';
- const STATE_NONE = 'phui-action-panel-none';
+ const COLOR_RED = 'phui-action-panel-red';
+ const COLOR_ORANGE = 'phui-action-panel-orange';
+ const COLOR_YELLOW = 'phui-action-panel-yellow';
+ const COLOR_GREEN = 'phui-action-panel-green';
+ const COLOR_BLUE = 'phui-action-panel-blue';
+ const COLOR_INDIGO = 'phui-action-panel-indigo';
+ const COLOR_VIOLET = 'phui-action-panel-violet';
+ const COLOR_PINK = 'phui-action-panel-pink';
public function setHref($href) {
$this->href = $href;
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,11 +4,16 @@
.phui-action-panel {
position: relative;
- background-color: {$lightbluebackground};
- border: 1px solid {$lightgreyborder};
+ background-color: #fff;
+ border: 1px solid {$lightblueborder};
border-radius: 3px;
margin: 0 8px;
min-height: 108px;
+ overflow: hidden;
+}
+
+.device .phui-action-panel {
+ margin: 0;
}
.phui-action-panel-hitarea {
@@ -60,6 +65,9 @@
.phui-action-panel-header {
padding: 8px;
border-bottom: 1px solid {$thinblueborder};
+ font-weight: bold;
+ white-space: nowrap;
+ overflow: hidden;
}
.phui-action-panel-header a {
@@ -70,7 +78,7 @@
display: table-cell;
vertical-align: middle;
color: {$darkbluetext};
- padding: 0 8px 0 0;
+ padding: 8px 8px 8px 0;
}
.phui-action-panel-subheader a {
@@ -89,77 +97,122 @@
text-decoration: none;
}
-.phui-action-panel-none .phui-action-panel-status {
- background-color: {$lightgreybackground};
- border-left: 4px solid {$greyborder};
- color: {$greytext};
+/* - Red -------------------------------------------------------------------- */
+
+.phui-action-panel-red {
+ background-color: {$sh-redbackground};
+ border-color: {$sh-redborder};
}
-.phui-action-panel-warn .phui-action-panel-status .phui-icon-view {
- color: {$greytext};
+.phui-action-panel-red .phui-action-panel-icon .phui-icon-view {
+ color: {$sh-redicon};
}
-.phui-action-panel-warn {
+.phui-action-panel-red .phui-action-panel-header {
+ border-color: {$sh-lightredborder};
+}
+
+/* - Orange ----------------------------------------------------------------- */
+
+.phui-action-panel-orange {
+ background-color: {$sh-orangebackground};
+ border-color: {$sh-orangeborder};
+}
+
+.phui-action-panel-orange .phui-action-panel-icon .phui-icon-view {
+ color: {$sh-orangeicon};
+}
+
+.phui-action-panel-orange .phui-action-panel-header {
+ border-color: {$sh-lightorangeborder};
+}
+
+/* - Yellow ----------------------------------------------------------------- */
+
+.phui-action-panel-yellow {
background-color: {$sh-yellowbackground};
border-color: {$sh-yellowborder};
}
-.phui-action-panel-warn .phui-action-panel-icon .phui-icon-view {
+.phui-action-panel-yellow .phui-action-panel-icon .phui-icon-view {
color: {$sh-yellowicon};
}
-.phui-action-panel-warn .phui-action-panel-header {
+.phui-action-panel-yellow .phui-action-panel-header {
border-color: {$sh-lightyellowborder};
}
-.phui-action-panel-error {
- background-color: {$sh-redbackground};
- border-color: {$sh-redborder};
+/* - Green ------------------------------------------------------------------ */
+
+.phui-action-panel-green {
+ background-color: {$sh-greenbackground};
+ border-color: {$sh-greenborder};
}
-.phui-action-panel-error .phui-action-panel-icon .phui-icon-view {
- color: {$sh-redicon};
+.phui-action-panel-green .phui-action-panel-icon .phui-icon-view {
+ color: {$sh-greenicon};
}
-.phui-action-panel-error .phui-action-panel-header {
- border-color: {$sh-lightredborder};
+.phui-action-panel-green .phui-action-panel-header {
+ border-color: {$sh-lightgreenborder};
}
-.phui-action-panel-info {
+/* - Blue ------------------------------------------------------------------- */
+
+.phui-action-panel-blue {
background-color: {$sh-bluebackground};
border-color: {$sh-blueborder};
}
-.phui-action-panel-info .phui-action-panel-icon .phui-icon-view {
+.phui-action-panel-blue .phui-action-panel-icon .phui-icon-view {
color: {$sh-blueicon};
}
-.phui-action-panel-info .phui-action-panel-header {
+.phui-action-panel-blue .phui-action-panel-header {
border-color: {$sh-lightblueborder};
}
-.phui-action-panel-success {
- background-color: {$sh-greenbackground};
- border-color: {$sh-greenborder};
+/* - Indigo ----------------------------------------------------------------- */
+
+.phui-action-panel-indigo {
+ background-color: {$sh-indigobackground};
+ border-color: {$sh-indigoborder};
}
-.phui-action-panel-success .phui-action-panel-icon .phui-icon-view {
- color: {$sh-greenicon};
+.phui-action-panel-indigo .phui-action-panel-icon .phui-icon-view {
+ color: {$sh-indigoicon};
}
-.phui-action-panel-success .phui-action-panel-header {
- border-color: {$sh-lightgreenborder};
+.phui-action-panel-indigo .phui-action-panel-header {
+ border-color: {$sh-lightindigoborder};
}
-.phui-action-panel-progress {
+/* - Violet ----------------------------------------------------------------- */
+
+.phui-action-panel-violet {
background-color: {$sh-violetbackground};
border-color: {$sh-violetborder};
}
-.phui-action-panel-progress .phui-action-panel-icon .phui-icon-view {
+.phui-action-panel-violet .phui-action-panel-icon .phui-icon-view {
color: {$sh-violeticon};
}
-.phui-action-panel-progress .phui-action-panel-header {
+.phui-action-panel-violet .phui-action-panel-header {
border-color: {$sh-lightvioletborder};
}
+
+/* - Pink ------------------------------------------------------------------- */
+
+.phui-action-panel-pink {
+ background-color: {$sh-pinkbackground};
+ border-color: {$sh-violetborder};
+}
+
+.phui-action-panel-pink .phui-action-panel-icon .phui-icon-view {
+ color: {$sh-pinkicon};
+}
+
+.phui-action-panel-pink .phui-action-panel-header {
+ border-color: {$sh-lightpinkborder};
+}

File Metadata

Mime Type
text/plain
Expires
Sat, Mar 8, 10:07 PM (3 d, 14 h ago)
Storage Engine
blob
Storage Format
Encrypted (AES-256-CBC)
Storage Handle
7384643
Default Alt Text
D14120.id34114.diff (9 KB)

Event Timeline

Phabricator · Built by Phacility