Page Menu
Home
Phabricator
Search
Configure Global Search
Log In
Files
F13992255
D12162.id.diff
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Flag For Later
Size
8 KB
Referenced Files
None
Subscribers
None
D12162.id.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
@@ -7,7 +7,7 @@
*/
return array(
'names' => array(
- 'core.pkg.css' => 'ab12d75f',
+ 'core.pkg.css' => '02ae106f',
'core.pkg.js' => '75599122',
'darkconsole.pkg.js' => '8ab24e01',
'differential.pkg.css' => '217276e8',
@@ -124,7 +124,7 @@
'rsrc/css/phui/phui-action-list.css' => '9ee9910a',
'rsrc/css/phui/phui-action-panel.css' => '3ee9afd5',
'rsrc/css/phui/phui-box.css' => '7b3a2eed',
- 'rsrc/css/phui/phui-button.css' => '21cb97f9',
+ 'rsrc/css/phui/phui-button.css' => '57eaddc9',
'rsrc/css/phui/phui-crumbs-view.css' => '594d719e',
'rsrc/css/phui/phui-document.css' => '0f83a7df',
'rsrc/css/phui/phui-feed-story.css' => 'c9f3a0b5',
@@ -772,7 +772,7 @@
'phui-action-header-view-css' => '89c497e7',
'phui-action-panel-css' => '3ee9afd5',
'phui-box-css' => '7b3a2eed',
- 'phui-button-css' => '21cb97f9',
+ 'phui-button-css' => '57eaddc9',
'phui-calendar-css' => '8675968e',
'phui-calendar-day-css' => 'de035c8a',
'phui-calendar-list-css' => 'c1d0ca59',
diff --git a/src/applications/uiexample/examples/PHUIButtonBarExample.php b/src/applications/uiexample/examples/PHUIButtonBarExample.php
--- a/src/applications/uiexample/examples/PHUIButtonBarExample.php
+++ b/src/applications/uiexample/examples/PHUIButtonBarExample.php
@@ -21,7 +21,7 @@
'Edit View' => 'fa-pencil bluegrey',
'Go Forward' => 'fa-chevron-right bluegrey',
);
- $button_bar = new PHUIButtonBarView();
+ $button_bar1 = new PHUIButtonBarView();
foreach ($icons as $text => $icon) {
$image = id(new PHUIIconView())
->setIconFont($icon);
@@ -31,16 +31,52 @@
->setTitle($text)
->setIcon($image);
- $button_bar->addButton($button);
+ $button_bar1->addButton($button);
}
- $layout = id(new PHUIBoxView())
- ->appendChild($button_bar)
- ->addPadding(PHUI::PADDING_LARGE);
+ $button_bar2 = new PHUIButtonBarView();
+ foreach ($icons as $text => $icon) {
+ $image = id(new PHUIIconView())
+ ->setIconFont($icon);
+ $button = id(new PHUIButtonView())
+ ->setTag('a')
+ ->setColor(PHUIButtonView::SIMPLE)
+ ->setTitle($text)
+ ->setText($text);
+
+ $button_bar2->addButton($button);
+ }
+
+ $button_bar3 = new PHUIButtonBarView();
+ foreach ($icons as $text => $icon) {
+ $image = id(new PHUIIconView())
+ ->setIconFont($icon);
+ $button = id(new PHUIButtonView())
+ ->setTag('a')
+ ->setColor(PHUIButtonView::SIMPLE)
+ ->setTitle($text)
+ ->setIcon($image);
+
+ $button_bar3->addButton($button);
+ }
+
+ $layout1 = id(new PHUIBoxView())
+ ->appendChild($button_bar1)
+ ->addClass('ml');
+
+ $layout2 = id(new PHUIBoxView())
+ ->appendChild($button_bar2)
+ ->addClass('mlr mll mlb');
+
+ $layout3 = id(new PHUIBoxView())
+ ->appendChild($button_bar3)
+ ->addClass('mlr mll mlb');
$wrap1 = id(new PHUIObjectBoxView())
->setHeaderText('Button Bar Example')
- ->appendChild($layout);
+ ->appendChild($layout1)
+ ->appendChild($layout2)
+ ->appendChild($layout3);
return array($wrap1);
}
diff --git a/src/applications/uiexample/examples/PHUIButtonExample.php b/src/applications/uiexample/examples/PHUIButtonExample.php
--- a/src/applications/uiexample/examples/PHUIButtonExample.php
+++ b/src/applications/uiexample/examples/PHUIButtonExample.php
@@ -120,32 +120,44 @@
->addClass(PHUI::MARGIN_SMALL_RIGHT);
}
- $column2 = array();
+ $layout3 = id(new AphrontMultiColumnView())
+ ->addColumn($column)
+ ->setFluidLayout(true)
+ ->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM);
+
$icons = array(
'Subscribe' => 'fa-check-circle bluegrey',
'Edit' => 'fa-pencil bluegrey',
);
- foreach ($icons as $text => $icon) {
- $image = id(new PHUIIconView())
- ->setIconFont($icon);
- $column2[] = id(new PHUIButtonView())
- ->setTag('a')
- ->setColor(PHUIButtonView::SIMPLE)
- ->setIcon($image)
- ->setText($text)
- ->addClass(PHUI::MARGIN_SMALL_RIGHT);
+ $colors = array(
+ PHUIButtonView::SIMPLE,
+ PHUIButtonView::SIMPLE_YELLOW,
+ PHUIButtonView::SIMPLE_GREY,
+ PHUIButtonView::SIMPLE_BLUE,
+ );
+ $column = array();
+ foreach ($colors as $color) {
+ foreach ($icons as $text => $icon) {
+ $image = id(new PHUIIconView())
+ ->setIconFont($icon);
+ $column[] = id(new PHUIButtonView())
+ ->setTag('a')
+ ->setColor($color)
+ ->setIcon($image)
+ ->setText($text)
+ ->addClass(PHUI::MARGIN_SMALL_RIGHT);
+ }
}
- $layout3 = id(new AphrontMultiColumnView())
+ $layout4 = id(new AphrontMultiColumnView())
->addColumn($column)
- ->addColumn($column2)
->setFluidLayout(true)
->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM);
// Baby Got Back Buttons
- $column = array();
+ $column = array();
$icons = array('Asana', 'Github', 'Facebook', 'Google', 'LDAP');
foreach ($icons as $icon) {
$image = id(new PHUIIconView())
@@ -161,7 +173,7 @@
->addClass(PHUI::MARGIN_MEDIUM_RIGHT);
}
- $layout4 = id(new AphrontMultiColumnView())
+ $layout5 = id(new AphrontMultiColumnView())
->addColumn($column)
->setFluidLayout(true)
->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM);
@@ -179,6 +191,9 @@
->setHeader('Icon Buttons');
$head4 = id(new PHUIHeaderView())
+ ->setHeader('Simple Buttons');
+
+ $head5 = id(new PHUIHeaderView())
->setHeader('Big Icon Buttons');
$wrap1 = id(new PHUIBoxView())
@@ -197,8 +212,12 @@
->appendChild($layout4)
->addMargin(PHUI::MARGIN_LARGE);
+ $wrap5 = id(new PHUIBoxView())
+ ->appendChild($layout5)
+ ->addMargin(PHUI::MARGIN_LARGE);
+
return array($head1, $wrap1, $head2, $wrap2, $head3, $wrap3,
- $head4, $wrap4,
+ $head4, $wrap4, $head5, $wrap5,
);
}
}
diff --git a/src/view/phui/PHUIButtonView.php b/src/view/phui/PHUIButtonView.php
--- a/src/view/phui/PHUIButtonView.php
+++ b/src/view/phui/PHUIButtonView.php
@@ -6,7 +6,11 @@
const GREY = 'grey';
const BLACK = 'black';
const DISABLED = 'disabled';
+
const SIMPLE = 'simple';
+ const SIMPLE_YELLOW = 'simple simple-yellow';
+ const SIMPLE_GREY = 'simple simple-grey';
+ const SIMPLE_BLUE = 'simple simple-blue';
const SMALL = 'small';
const BIG = 'big';
diff --git a/webroot/rsrc/css/phui/phui-button.css b/webroot/rsrc/css/phui/phui-button.css
--- a/webroot/rsrc/css/phui/phui-button.css
+++ b/webroot/rsrc/css/phui/phui-button.css
@@ -104,7 +104,7 @@
body button:active,
body a.button:active {
- box-shadow: inset 0 0 8px rgba(0,0,0,.6);
+ box-shadow: inset 0 0 4px rgba(0,0,0,.4);
}
button.grey:active,
@@ -128,9 +128,9 @@
a.button.simple:hover,
button.simple:hover {
background-color: #fff;
- border: 1px solid {$lightgreyborder};
+ border-color: {$blueborder};
background-image: none;
- border-bottom: 1px solid {$greyborder};
+ border-bottom-color: {$darkblueborder};
box-shadow: none;
}
@@ -329,7 +329,7 @@
/* PHUI Button Bar */
-.phui-button-bar a.button {
+.phui-button-bar a.button.has-icon {
display: inline-block;
height: 16px;
width: 12px;
@@ -350,3 +350,68 @@
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
+
+.phui-button-bar .button.simple:hover {
+ border-color: {$lightblueborder};
+ color: {$sky};
+}
+
+.phui-button-bar .button.simple:hover .phui-icon-view {
+ border-color: {$lightblueborder};
+ color: {$sky};
+}
+
+/* Simple Button Colors */
+a.simple.simple-blue,
+button.simple.simple-blue {
+ border-color: {$blue};
+ background: {$lightblue};
+ color: {$blue};
+}
+
+a.simple.simple-blue:hover,
+button.simple.simple-blue:hover {
+ color: {$blue};
+ border-color: {$blue};
+}
+
+a.simple.simple-blue .phui-icon-view,
+button.simple.simple-blue .phui-icon-view {
+ color: {$blue};
+}
+
+a.simple.simple-yellow,
+button.simple.simple-yellow {
+ border-color: #bc7837;
+ background: {$lightyellow};
+ color: #bc7837;
+}
+
+a.simple.simple-yellow:hover,
+button.simple.simple-yellow:hover {
+ color: #bc7837;
+ border-color: #bc7837;
+}
+
+a.simple.simple-yellow .phui-icon-view,
+button.simple.simple-yellow .phui-icon-view {
+ color: #bc7837;
+}
+
+a.simple.simple-grey,
+button.simple.simple-grey {
+ border-color: {$greyborder};
+ background: {$lightgreybackground};
+ color: {$greytext};
+}
+
+a.simple.simple-grey:hover,
+button.simple.simple-grey:hover {
+ color: {$greytext};
+ border-color: {$greyborder};
+}
+
+a.simple.simple-grey .phui-icon-view,
+button.simple.simple-grey .phui-icon-view {
+ color: {$greytext};
+}
File Metadata
Details
Attached
Mime Type
text/plain
Expires
Wed, Oct 23, 3:28 PM (3 w, 5 d ago)
Storage Engine
blob
Storage Format
Encrypted (AES-256-CBC)
Storage Handle
6707964
Default Alt Text
D12162.id.diff (8 KB)
Attached To
Mode
D12162: More SIMPLE button styles for buttons and button bars
Attached
Detach File
Event Timeline
Log In to Comment