revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2025-01-31 00:48:21 +01:00
Code Issues Releases Wiki Activity

Rework buttons with new gradients, rounded corners.

Browse source 
Summary:
This adds a green/blue/grey gradient and new button CSS.

Updated.

Test Plan: Clicked through various pages in my install, but would like more feedback.

Reviewers: btrahan, epriestley

Reviewed By: epriestley

CC: vrana, aran, Korvin

Differential Revision: https://secure.phabricator.com/D3919
This commit is contained in:
Chad Little 2012-11-08 15:47:11 -08:00
parent 726a4912bd
commit ead96f467b
5 changed files with 81 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
src/__celerity_resource_map__.php
View file

@ -84,6 +84,13 @@ celerity_register_resource_map(array(
'disk' => '/rsrc/image/button_content.png', 'disk' => '/rsrc/image/button_content.png',
'type' => 'png', 'type' => 'png',
), ),
'/rsrc/image/button_gradients.png' =>
array(
'hash' => '9157bc3cc3321e0d04e94532dfe50ce7',
'uri' => '/res/9157bc3c/rsrc/image/button_gradients.png',
'disk' => '/rsrc/image/button_gradients.png',
'type' => 'png',
),
'/rsrc/image/button_menu.png' => '/rsrc/image/button_menu.png' =>
array( array(
'hash' => '5742857c7734d9d25be1125f5737fe0e', 'hash' => '5742857c7734d9d25be1125f5737fe0e',
@ -2415,7 +2422,7 @@ celerity_register_resource_map(array(
), ),
'phabricator-core-buttons-css' => 'phabricator-core-buttons-css' =>
array( array(
'uri' => '/res/427fac91/rsrc/css/core/buttons.css', 'uri' => '/res/9916e65f/rsrc/css/core/buttons.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -2573,7 +2580,7 @@ celerity_register_resource_map(array(
), ),
'phabricator-main-menu-view' => 'phabricator-main-menu-view' =>
array( array(
'uri' => '/res/3280629d/rsrc/css/application/base/main-menu-view.css', 'uri' => '/res/8c3aaa49/rsrc/css/application/base/main-menu-view.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -3098,7 +3105,7 @@ celerity_register_resource_map(array(
), array( ), array(
'packages' => 'packages' =>
array( array(
'10a01616' => '01a9b810' =>
array( array(
'name' => 'core.pkg.css', 'name' => 'core.pkg.css',
'symbols' => 'symbols' =>
@ -3127,7 +3134,7 @@ celerity_register_resource_map(array(
21 => 'phabricator-flag-css', 21 => 'phabricator-flag-css',
22 => 'aphront-error-view-css', 22 => 'aphront-error-view-css',
), ),
'uri' => '/res/pkg/10a01616/core.pkg.css', 'uri' => '/res/pkg/01a9b810/core.pkg.css',
'type' => 'css', 'type' => 'css',
), ),
'805a58d7' => '805a58d7' =>
@ -3294,20 +3301,20 @@ celerity_register_resource_map(array(
'reverse' => 'reverse' =>
array( array(
'aphront-attached-file-view-css' => '7839ae2d', 'aphront-attached-file-view-css' => '7839ae2d',
'aphront-crumbs-view-css' => '10a01616', 'aphront-crumbs-view-css' => '01a9b810',
'aphront-dialog-view-css' => '10a01616', 'aphront-dialog-view-css' => '01a9b810',
'aphront-error-view-css' => '10a01616', 'aphront-error-view-css' => '01a9b810',
'aphront-form-view-css' => '10a01616', 'aphront-form-view-css' => '01a9b810',
'aphront-headsup-action-list-view-css' => '7d861806', 'aphront-headsup-action-list-view-css' => '7d861806',
'aphront-headsup-view-css' => '10a01616', 'aphront-headsup-view-css' => '01a9b810',
'aphront-list-filter-view-css' => '10a01616', 'aphront-list-filter-view-css' => '01a9b810',
'aphront-pager-view-css' => '10a01616', 'aphront-pager-view-css' => '01a9b810',
'aphront-panel-view-css' => '10a01616', 'aphront-panel-view-css' => '01a9b810',
'aphront-side-nav-view-css' => '10a01616', 'aphront-side-nav-view-css' => '01a9b810',
'aphront-table-view-css' => '10a01616', 'aphront-table-view-css' => '01a9b810',
'aphront-tokenizer-control-css' => '10a01616', 'aphront-tokenizer-control-css' => '01a9b810',
'aphront-tooltip-css' => '10a01616', 'aphront-tooltip-css' => '01a9b810',
'aphront-typeahead-control-css' => '10a01616', 'aphront-typeahead-control-css' => '01a9b810',
'differential-changeset-view-css' => '7d861806', 'differential-changeset-view-css' => '7d861806',
'differential-core-view-css' => '7d861806', 'differential-core-view-css' => '7d861806',
'differential-inline-comment-editor' => 'cab76945', 'differential-inline-comment-editor' => 'cab76945',
@ -3373,15 +3380,15 @@ celerity_register_resource_map(array(
'javelin-workflow' => '805a58d7', 'javelin-workflow' => '805a58d7',
'maniphest-task-summary-css' => '7839ae2d', 'maniphest-task-summary-css' => '7839ae2d',
'maniphest-transaction-detail-css' => '7839ae2d', 'maniphest-transaction-detail-css' => '7839ae2d',
'phabricator-app-buttons-css' => '10a01616', 'phabricator-app-buttons-css' => '01a9b810',
'phabricator-content-source-view-css' => '7d861806', 'phabricator-content-source-view-css' => '7d861806',
'phabricator-core-buttons-css' => '10a01616', 'phabricator-core-buttons-css' => '01a9b810',
'phabricator-core-css' => '10a01616', 'phabricator-core-css' => '01a9b810',
'phabricator-directory-css' => '10a01616', 'phabricator-directory-css' => '01a9b810',
'phabricator-drag-and-drop-file-upload' => 'cab76945', 'phabricator-drag-and-drop-file-upload' => 'cab76945',
'phabricator-dropdown-menu' => '805a58d7', 'phabricator-dropdown-menu' => '805a58d7',
'phabricator-flag-css' => '10a01616', 'phabricator-flag-css' => '01a9b810',
'phabricator-jump-nav' => '10a01616', 'phabricator-jump-nav' => '01a9b810',
'phabricator-keyboard-shortcut' => '805a58d7', 'phabricator-keyboard-shortcut' => '805a58d7',
'phabricator-keyboard-shortcut-manager' => '805a58d7', 'phabricator-keyboard-shortcut-manager' => '805a58d7',
'phabricator-menu-item' => '805a58d7', 'phabricator-menu-item' => '805a58d7',
@ -3389,11 +3396,11 @@ celerity_register_resource_map(array(
'phabricator-paste-file-upload' => '805a58d7', 'phabricator-paste-file-upload' => '805a58d7',
'phabricator-prefab' => '805a58d7', 'phabricator-prefab' => '805a58d7',
'phabricator-project-tag-css' => '7839ae2d', 'phabricator-project-tag-css' => '7839ae2d',
'phabricator-remarkup-css' => '10a01616', 'phabricator-remarkup-css' => '01a9b810',
'phabricator-shaped-request' => 'cab76945', 'phabricator-shaped-request' => 'cab76945',
'phabricator-standard-page-view' => '10a01616', 'phabricator-standard-page-view' => '01a9b810',
'phabricator-tooltip' => '805a58d7', 'phabricator-tooltip' => '805a58d7',
'phabricator-transaction-view-css' => '10a01616', 'phabricator-transaction-view-css' => '01a9b810',
'syntax-highlighting-css' => '10a01616', 'syntax-highlighting-css' => '01a9b810',
), ),
)); ));

2
src/applications/uiexample/examples/PhabricatorButtonsExample.php
View file

@ -14,7 +14,7 @@ final class PhabricatorButtonsExample extends PhabricatorUIExample {
$request = $this->getRequest(); $request = $this->getRequest();
$user = $request->getUser(); $user = $request->getUser();
$colors = array('', 'green', 'grey', 'disabled'); $colors = array('', 'green', 'grey', 'black', 'disabled');
$sizes = array('', 'small'); $sizes = array('', 'small');
$tags = array('a', 'button'); $tags = array('a', 'button');

2
webroot/rsrc/css/application/base/main-menu-view.css
View file

@ -256,6 +256,8 @@
border: none; border: none;
outline: none; outline: none;
box-shadow: none; box-shadow: none;
text-shadow: none;
min-width: 0;
height: 20px; height: 20px;
width: 20px; width: 20px;

142
webroot/rsrc/css/core/buttons.css
View file

@ -7,34 +7,24 @@ button,
a.button, a.button,
a.button:visited, a.button:visited,
input.inputsubmit { input.inputsubmit {
background: #5e77aa url('/rsrc/image/sprite.png') 0 0 repeat-x; background-color: #19558D;
border: 1px solid #29447e; background-image: url('/rsrc/image/button_gradients.png');
border-bottom-color: #1a356e; background-position: 0 -26px;
color: #fff;
color: white;
min-width: 60px;
text-shadow: 0 -1px #19558D;
border: 1px solid #19558D;
cursor: pointer; cursor: pointer;
font-weight: bold; font-weight: bold;
display: inline-block;
padding: 3px 10px 4px;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
display: inline-block;
font-size: 13px;
overflow: visible;
padding: 2px 8px 3px 8px;
line-height: 18px;
vertical-align: baseline;
width: auto;
box-shadow: 0px 1px 0px rgba(0,0,0,.12);
-moz-box-shadow: 0px 1px 0px rgba(0,0,0,.12);
-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,.12);
}
button { border-radius: 3px;
*padding: 2px 4px 1px 8px; -webkit-border-radius: 3px;
_padding-right: 6px; -moz-border-radius: 3px;
}
a.button,
a.button:visited {
*padding: 3px 8px 4px;
} }
/* Buttons with images (full size only) */ /* Buttons with images (full size only) */
@ -46,33 +36,40 @@ a.icon:visited {
text-indent: 29px; text-indent: 29px;
} }
/* Fix for IE7 within table cells ? */
td button {
*width: 100%;
*padding-right: 8px;
}
button:active, button:active,
a.button:active { a.button:active {
background-color: #4f6aa3; background-color: #19558D;
background-position: 0 -100px; background-position: 0 0;
border-bottom-color: #29447e; }
button.black,
a.black,
a.black:visited {
background-color: #383838;
background-position: 0 -182px;
border: 1px solid #333;
text-shadow: 0 -1px #000;
border-bottom-color: #000;
}
button.black:active,
a.black:active {
background-position: 0 -156px;
} }
button.green, button.green,
a.green, a.green,
a.green:visited { a.green:visited {
background-color: #6da952; background-color: #006600;
background-position: 0 -50px; background-position: 0 -130px;
border: 1px solid #3b6e22; border: 1px solid #3b6e22;
text-shadow: 0 -1px #006600;
border-bottom-color: #2c5a15; border-bottom-color: #2c5a15;
} }
button.green:active, button.green:active,
a.green:active { a.green:active {
background-color: #5e9d43; background-position: 0 -104px;
background-position: 0 -150px;
border-bottom-color: #3b6e22;
} }
button.grey, button.grey,
@ -82,14 +79,13 @@ a.grey:visited,
a.button.disabled, a.button.disabled,
button[disabled], /* Set by JX.Workflow. */ button[disabled], /* Set by JX.Workflow. */
button.disabled { button.disabled {
background-color: #e4e5e5; background-color: #f7f7f7;
background-position: 0 -250px; background-image: url('/rsrc/image/button_gradients.png');
border: 1px solid #999; background-position: 0 -52px;
border-bottom-color: #888; border-color: #aaa;
color: #333; color: #333;
box-shadow: 0px 1px 0px rgba(0,0,0,.07); border-bottom-color: #999;
-moz-box-shadow: 0px 1px 0px rgba(0,0,0,.07); text-shadow: none;
-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,.07);
} }
a.disabled, a.disabled,
@ -104,24 +100,9 @@ button.grey:active,
a.grey:active, a.grey:active,
button.grey_active, button.grey_active,
a.dropdown-open { a.dropdown-open {
background-color: #dddddd; background-color: #7d7d7d;
background-position: 0 -200px; background-position: 0 -78px;
border-bottom-color: #999; color: #777;
}
button:active::-moz-focus-inner,
button:focus::-moz-focus-inner {
border-color: #405071;
}
button.green:active::-moz-focus-inner,
button.green:focus::-moz-focus-inner {
border-color: #4c713b;
}
button.grey:active::-moz-focus-inner,
button.grey:focus::-moz-focus-inner {
border-color: #666;
} }
a.button:hover { a.button:hover {
@ -147,6 +128,7 @@ button.link {
font-size: inherit; font-size: inherit;
border-bottom: none; border-bottom: none;
text-decoration: none; text-decoration: none;
text-shadow: none;
color: #3b5998; color: #3b5998;
-webkit-box-shadow: none; -webkit-box-shadow: none;
-moz-box-shadow: none; -moz-box-shadow: none;
@ -157,42 +139,6 @@ button.link:hover {
text-decoration: underline; text-decoration: underline;
} }
a.toggle {
background: #d3d3d3;
padding: 2px 6px 3px;
font-weight: bold;
margin-right: 4px;
margin-bottom: 5px;
display: block;
float: left;
color: #777777;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
text-decoration: none;
}
a.toggle:hover {
background: #b0b0b0;
color: white;
}
a.toggle-selected {
background: #909090;
color: white;
}
a.toggle-fixed {
cursor: default;
}
a.toggle-fixed:hover {
background: #909090;
}
a.dropdown-open {
}
.dropdown-menu-frame { .dropdown-menu-frame {
z-index: 32; z-index: 32;

BIN
webroot/rsrc/image/button_gradients.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB