mirror of
https://we.phorge.it/source/phorge.git
synced 2025-02-05 03:18:25 +01:00
More SIMPLE button styles for buttons and button bars
Summary: Ref T1460, this adds additional buttons colors and styles for use in inline comments. Will also backport to Calendar and PHUIInfoView Test Plan: Review new buttons and hover states in UI Examples. {F350549} {F350550} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T1460 Differential Revision: https://secure.phabricator.com/D12162
This commit is contained in:
Chad Little
parent
42a0229a52
commit
47114513b0
5 changed files with 152 additions and 28 deletions
|
|
@ -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 @@ return array(
|
|||
'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 @@ return array(
|
|||
'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',
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ final class PHUIButtonBarExample extends PhabricatorUIExample {
|
|||
'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 @@ final class PHUIButtonBarExample extends PhabricatorUIExample {
|
|||
->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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -120,32 +120,44 @@ final class PHUIButtonExample extends PhabricatorUIExample {
|
|||
->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 @@ final class PHUIButtonExample extends PhabricatorUIExample {
|
|||
->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 @@ final class PHUIButtonExample extends PhabricatorUIExample {
|
|||
->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 @@ final class PHUIButtonExample extends PhabricatorUIExample {
|
|||
->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,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,11 @@ final class PHUIButtonView extends AphrontTagView {
|
|||
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';
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ button[disabled] {
|
|||
|
||||
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 @@ button:hover {
|
|||
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 @@ a.toggle-fixed {
|
|||
|
||||
/* 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 @@ a.toggle-fixed {
|
|||
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};
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue