1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-26 00:32:42 +01:00

Update mobile menu icons

Summary: Simplify the look of the mobile menu, provide active states for the menu icons.

Test Plan: iOS Simulator and Chrome.

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Maniphest Tasks: T2426

Differential Revision: https://secure.phabricator.com/D5189
This commit is contained in:
Chad Little 2013-03-03 08:17:57 -08:00
parent c9b96f82bf
commit 752055a45c
12 changed files with 112 additions and 91 deletions

View file

@ -6,6 +6,11 @@
"rule" : ".menu-icon-app",
"hash" : "fc525b5b3e3ecaeda3baccc18ace5a0a"
},
"app_blue" : {
"name" : "app_blue",
"rule" : ".menu-icon-app-blue",
"hash" : "b92f3961cf38ba4d95fa26d7a54031c0"
},
"arrow-right" : {
"name" : "arrow-right",
"rule" : ".phabricator-crumb-divider",
@ -31,6 +36,11 @@
"rule" : ".menu-icon-eye",
"hash" : "553eb617c19b74b428558e606ff9b066"
},
"eye_blue" : {
"name" : "eye_blue",
"rule" : ".menu-icon-eye-blue",
"hash" : "3ae3de9e694152bd6dbba58aebc46a45"
},
"logo" : {
"name" : "logo",
"rule" : ".phabricator-main-menu-logo-image",

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -520,15 +520,15 @@ celerity_register_resource_map(array(
),
'/rsrc/image/sprite-menu-X2.png' =>
array(
'hash' => '6a0ec72979ef10ec18b281f410a38238',
'uri' => '/res/6a0ec729/rsrc/image/sprite-menu-X2.png',
'hash' => '9f5cae08146fbe3b7e865b60c64121d1',
'uri' => '/res/9f5cae08/rsrc/image/sprite-menu-X2.png',
'disk' => '/rsrc/image/sprite-menu-X2.png',
'type' => 'png',
),
'/rsrc/image/sprite-menu.png' =>
array(
'hash' => '1e8c45c75496a415854328645b9cee9d',
'uri' => '/res/1e8c45c7/rsrc/image/sprite-menu.png',
'hash' => 'cc82b64d031dafa2b2a62cc8effa62f6',
'uri' => '/res/cc82b64d/rsrc/image/sprite-menu.png',
'disk' => '/rsrc/image/sprite-menu.png',
'type' => 'png',
),
@ -626,7 +626,7 @@ celerity_register_resource_map(array(
),
'aphront-dark-console-css' =>
array(
'uri' => '/res/63841304/rsrc/css/aphront/dark-console.css',
'uri' => '/res/0d316573/rsrc/css/aphront/dark-console.css',
'type' => 'css',
'requires' =>
array(
@ -1053,7 +1053,7 @@ celerity_register_resource_map(array(
),
'javelin-behavior-aphront-drag-and-drop' =>
array(
'uri' => '/res/3d809b40/rsrc/js/application/core/behavior-drag-and-drop.js',
'uri' => '/res/8dd5fd78/rsrc/js/application/core/behavior-drag-and-drop.js',
'type' => 'js',
'requires' =>
array(
@ -1873,7 +1873,7 @@ celerity_register_resource_map(array(
),
'javelin-behavior-pholio-mock-view' =>
array(
'uri' => '/res/296e0325/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
'uri' => '/res/06c92cdf/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
'type' => 'js',
'requires' =>
array(
@ -2766,7 +2766,7 @@ celerity_register_resource_map(array(
),
'phabricator-main-menu-view' =>
array(
'uri' => '/res/f920805f/rsrc/css/application/base/main-menu-view.css',
'uri' => '/res/c1a73bc2/rsrc/css/application/base/main-menu-view.css',
'type' => 'css',
'requires' =>
array(
@ -3218,7 +3218,7 @@ celerity_register_resource_map(array(
),
'pholio-css' =>
array(
'uri' => '/res/5cff78f4/rsrc/css/application/pholio/pholio.css',
'uri' => '/res/94883ddc/rsrc/css/application/pholio/pholio.css',
'type' => 'css',
'requires' =>
array(
@ -3380,7 +3380,7 @@ celerity_register_resource_map(array(
),
'sprite-menu-css' =>
array(
'uri' => '/res/f1ee7101/rsrc/css/sprite-menu.css',
'uri' => '/res/50bb9cc5/rsrc/css/sprite-menu.css',
'type' => 'css',
'requires' =>
array(
@ -3435,7 +3435,7 @@ celerity_register_resource_map(array(
), array(
'packages' =>
array(
'7a869165' =>
'9094ccaa' =>
array(
'name' => 'core.pkg.css',
'symbols' =>
@ -3478,7 +3478,7 @@ celerity_register_resource_map(array(
35 => 'phabricator-object-item-list-view-css',
36 => 'global-drag-and-drop-css',
),
'uri' => '/res/pkg/7a869165/core.pkg.css',
'uri' => '/res/pkg/9094ccaa/core.pkg.css',
'type' => 'css',
),
'd29c1557' =>
@ -3556,7 +3556,7 @@ celerity_register_resource_map(array(
'uri' => '/res/pkg/8aaacd1b/differential.pkg.css',
'type' => 'css',
),
'fafc8cdb' =>
'd2447f72' =>
array(
'name' => 'differential.pkg.js',
'symbols' =>
@ -3581,7 +3581,7 @@ celerity_register_resource_map(array(
17 => 'javelin-behavior-differential-toggle-files',
18 => 'javelin-behavior-differential-user-select',
),
'uri' => '/res/pkg/fafc8cdb/differential.pkg.js',
'uri' => '/res/pkg/d2447f72/differential.pkg.js',
'type' => 'js',
),
'c8ce2d88' =>
@ -3666,20 +3666,20 @@ celerity_register_resource_map(array(
'reverse' =>
array(
'aphront-attached-file-view-css' => 'e30a3fa8',
'aphront-crumbs-view-css' => '7a869165',
'aphront-dialog-view-css' => '7a869165',
'aphront-error-view-css' => '7a869165',
'aphront-form-view-css' => '7a869165',
'aphront-list-filter-view-css' => '7a869165',
'aphront-pager-view-css' => '7a869165',
'aphront-panel-view-css' => '7a869165',
'aphront-table-view-css' => '7a869165',
'aphront-tokenizer-control-css' => '7a869165',
'aphront-tooltip-css' => '7a869165',
'aphront-typeahead-control-css' => '7a869165',
'aphront-crumbs-view-css' => '9094ccaa',
'aphront-dialog-view-css' => '9094ccaa',
'aphront-error-view-css' => '9094ccaa',
'aphront-form-view-css' => '9094ccaa',
'aphront-list-filter-view-css' => '9094ccaa',
'aphront-pager-view-css' => '9094ccaa',
'aphront-panel-view-css' => '9094ccaa',
'aphront-table-view-css' => '9094ccaa',
'aphront-tokenizer-control-css' => '9094ccaa',
'aphront-tooltip-css' => '9094ccaa',
'aphront-typeahead-control-css' => '9094ccaa',
'differential-changeset-view-css' => '8aaacd1b',
'differential-core-view-css' => '8aaacd1b',
'differential-inline-comment-editor' => 'fafc8cdb',
'differential-inline-comment-editor' => 'd2447f72',
'differential-local-commits-view-css' => '8aaacd1b',
'differential-results-table-css' => '8aaacd1b',
'differential-revision-add-comment-css' => '8aaacd1b',
@ -3690,31 +3690,31 @@ celerity_register_resource_map(array(
'differential-table-of-contents-css' => '8aaacd1b',
'diffusion-commit-view-css' => 'c8ce2d88',
'diffusion-icons-css' => 'c8ce2d88',
'global-drag-and-drop-css' => '7a869165',
'global-drag-and-drop-css' => '9094ccaa',
'inline-comment-summary-css' => '8aaacd1b',
'javelin-aphlict' => 'd29c1557',
'javelin-behavior' => 'cd1d650a',
'javelin-behavior-aphlict-dropdown' => 'd29c1557',
'javelin-behavior-aphlict-listen' => 'd29c1557',
'javelin-behavior-aphront-basic-tokenizer' => 'd29c1557',
'javelin-behavior-aphront-drag-and-drop' => 'fafc8cdb',
'javelin-behavior-aphront-drag-and-drop-textarea' => 'fafc8cdb',
'javelin-behavior-aphront-drag-and-drop' => 'd2447f72',
'javelin-behavior-aphront-drag-and-drop-textarea' => 'd2447f72',
'javelin-behavior-aphront-form-disable-on-submit' => 'd29c1557',
'javelin-behavior-audit-preview' => 'f96657b8',
'javelin-behavior-dark-console' => 'dca4a03d',
'javelin-behavior-device' => 'd29c1557',
'javelin-behavior-differential-accept-with-errors' => 'fafc8cdb',
'javelin-behavior-differential-add-reviewers-and-ccs' => 'fafc8cdb',
'javelin-behavior-differential-comment-jump' => 'fafc8cdb',
'javelin-behavior-differential-diff-radios' => 'fafc8cdb',
'javelin-behavior-differential-dropdown-menus' => 'fafc8cdb',
'javelin-behavior-differential-edit-inline-comments' => 'fafc8cdb',
'javelin-behavior-differential-feedback-preview' => 'fafc8cdb',
'javelin-behavior-differential-keyboard-navigation' => 'fafc8cdb',
'javelin-behavior-differential-populate' => 'fafc8cdb',
'javelin-behavior-differential-show-more' => 'fafc8cdb',
'javelin-behavior-differential-toggle-files' => 'fafc8cdb',
'javelin-behavior-differential-user-select' => 'fafc8cdb',
'javelin-behavior-differential-accept-with-errors' => 'd2447f72',
'javelin-behavior-differential-add-reviewers-and-ccs' => 'd2447f72',
'javelin-behavior-differential-comment-jump' => 'd2447f72',
'javelin-behavior-differential-diff-radios' => 'd2447f72',
'javelin-behavior-differential-dropdown-menus' => 'd2447f72',
'javelin-behavior-differential-edit-inline-comments' => 'd2447f72',
'javelin-behavior-differential-feedback-preview' => 'd2447f72',
'javelin-behavior-differential-keyboard-navigation' => 'd2447f72',
'javelin-behavior-differential-populate' => 'd2447f72',
'javelin-behavior-differential-show-more' => 'd2447f72',
'javelin-behavior-differential-toggle-files' => 'd2447f72',
'javelin-behavior-differential-user-select' => 'd2447f72',
'javelin-behavior-diffusion-commit-graph' => 'f96657b8',
'javelin-behavior-diffusion-pull-lastmodified' => 'f96657b8',
'javelin-behavior-error-log' => 'dca4a03d',
@ -3730,7 +3730,7 @@ celerity_register_resource_map(array(
'javelin-behavior-phabricator-autofocus' => 'd29c1557',
'javelin-behavior-phabricator-keyboard-shortcuts' => 'd29c1557',
'javelin-behavior-phabricator-nav' => 'd29c1557',
'javelin-behavior-phabricator-object-selector' => 'fafc8cdb',
'javelin-behavior-phabricator-object-selector' => 'd2447f72',
'javelin-behavior-phabricator-oncopy' => 'd29c1557',
'javelin-behavior-phabricator-remarkup-assist' => 'd29c1557',
'javelin-behavior-phabricator-reveal-content' => 'd29c1557',
@ -3738,7 +3738,7 @@ celerity_register_resource_map(array(
'javelin-behavior-phabricator-tooltips' => 'd29c1557',
'javelin-behavior-phabricator-watch-anchor' => 'd29c1557',
'javelin-behavior-refresh-csrf' => 'd29c1557',
'javelin-behavior-repository-crossreference' => 'fafc8cdb',
'javelin-behavior-repository-crossreference' => 'd2447f72',
'javelin-behavior-toggle-class' => 'd29c1557',
'javelin-behavior-workflow' => 'd29c1557',
'javelin-dom' => 'cd1d650a',
@ -3759,48 +3759,48 @@ celerity_register_resource_map(array(
'javelin-util' => 'cd1d650a',
'javelin-vector' => 'cd1d650a',
'javelin-workflow' => 'cd1d650a',
'lightbox-attachment-css' => '7a869165',
'lightbox-attachment-css' => '9094ccaa',
'maniphest-task-summary-css' => 'e30a3fa8',
'maniphest-transaction-detail-css' => 'e30a3fa8',
'phabricator-busy' => 'd29c1557',
'phabricator-content-source-view-css' => '8aaacd1b',
'phabricator-core-buttons-css' => '7a869165',
'phabricator-core-css' => '7a869165',
'phabricator-crumbs-view-css' => '7a869165',
'phabricator-directory-css' => '7a869165',
'phabricator-drag-and-drop-file-upload' => 'fafc8cdb',
'phabricator-core-buttons-css' => '9094ccaa',
'phabricator-core-css' => '9094ccaa',
'phabricator-crumbs-view-css' => '9094ccaa',
'phabricator-directory-css' => '9094ccaa',
'phabricator-drag-and-drop-file-upload' => 'd2447f72',
'phabricator-dropdown-menu' => 'd29c1557',
'phabricator-file-upload' => 'd29c1557',
'phabricator-filetree-view-css' => '7a869165',
'phabricator-flag-css' => '7a869165',
'phabricator-form-view-css' => '7a869165',
'phabricator-header-view-css' => '7a869165',
'phabricator-jump-nav' => '7a869165',
'phabricator-filetree-view-css' => '9094ccaa',
'phabricator-flag-css' => '9094ccaa',
'phabricator-form-view-css' => '9094ccaa',
'phabricator-header-view-css' => '9094ccaa',
'phabricator-jump-nav' => '9094ccaa',
'phabricator-keyboard-shortcut' => 'd29c1557',
'phabricator-keyboard-shortcut-manager' => 'd29c1557',
'phabricator-main-menu-view' => '7a869165',
'phabricator-main-menu-view' => '9094ccaa',
'phabricator-menu-item' => 'd29c1557',
'phabricator-nav-view-css' => '7a869165',
'phabricator-nav-view-css' => '9094ccaa',
'phabricator-notification' => 'd29c1557',
'phabricator-notification-css' => '7a869165',
'phabricator-notification-menu-css' => '7a869165',
'phabricator-object-item-list-view-css' => '7a869165',
'phabricator-notification-css' => '9094ccaa',
'phabricator-notification-menu-css' => '9094ccaa',
'phabricator-object-item-list-view-css' => '9094ccaa',
'phabricator-object-selector-css' => '8aaacd1b',
'phabricator-paste-file-upload' => 'd29c1557',
'phabricator-prefab' => 'd29c1557',
'phabricator-project-tag-css' => 'e30a3fa8',
'phabricator-remarkup-css' => '7a869165',
'phabricator-shaped-request' => 'fafc8cdb',
'phabricator-side-menu-view-css' => '7a869165',
'phabricator-standard-page-view' => '7a869165',
'phabricator-remarkup-css' => '9094ccaa',
'phabricator-shaped-request' => 'd2447f72',
'phabricator-side-menu-view-css' => '9094ccaa',
'phabricator-standard-page-view' => '9094ccaa',
'phabricator-textareautils' => 'd29c1557',
'phabricator-tooltip' => 'd29c1557',
'phabricator-transaction-view-css' => '7a869165',
'phabricator-zindex-css' => '7a869165',
'sprite-apps-large-css' => '7a869165',
'sprite-gradient-css' => '7a869165',
'sprite-icon-css' => '7a869165',
'sprite-menu-css' => '7a869165',
'syntax-highlighting-css' => '7a869165',
'phabricator-transaction-view-css' => '9094ccaa',
'phabricator-zindex-css' => '9094ccaa',
'sprite-apps-large-css' => '9094ccaa',
'sprite-gradient-css' => '9094ccaa',
'sprite-icon-css' => '9094ccaa',
'sprite-menu-css' => '9094ccaa',
'syntax-highlighting-css' => '9094ccaa',
),
));

View file

@ -115,11 +115,21 @@ final class CeleritySpriteGenerator {
'y' => 20,
'css' => '.menu-icon-eye',
),
'eye_blue' => array(
'x' => 24,
'y' => 20,
'css' => '.menu-icon-eye-blue',
),
'app' => array(
'x' => 24,
'y' => 20,
'css' => '.menu-icon-app',
),
'app_blue' => array(
'x' => 24,
'y' => 20,
'css' => '.menu-icon-app-blue',
),
'logo' => array(
'x' => 139,
'y' => 25,

View file

@ -119,6 +119,7 @@ final class PhabricatorMainMenuView extends AphrontView {
}
private function renderPhabricatorMenuButton($header_id) {
$button_id = celerity_generate_unique_node_id();
return javelin_tag(
'a',
array(
@ -128,6 +129,7 @@ final class PhabricatorMainMenuView extends AphrontView {
'meta' => array(
'map' => array(
$header_id => 'phabricator-core-menu-expanded',
$button_id => 'menu-icon-eye-blue',
),
),
),
@ -135,11 +137,13 @@ final class PhabricatorMainMenuView extends AphrontView {
'span',
array(
'class' => 'phabricator-menu-button-icon sprite-menu menu-icon-eye',
'id' => $button_id,
),
''));
}
public function renderApplicationMenuButton($header_id) {
$button_id = celerity_generate_unique_node_id();
return javelin_tag(
'a',
array(
@ -149,6 +153,7 @@ final class PhabricatorMainMenuView extends AphrontView {
'meta' => array(
'map' => array(
$header_id => 'phabricator-application-menu-expanded',
$button_id => 'menu-icon-app-blue',
),
),
),
@ -156,6 +161,7 @@ final class PhabricatorMainMenuView extends AphrontView {
'span',
array(
'class' => 'phabricator-menu-button-icon sprite-menu menu-icon-app',
'id' => $button_id,
),
''));
}

View file

@ -77,12 +77,6 @@
display: block;
width: 40px;
height: 28px;
background-color: #22292d;
border-radius: 6px;
border: 1px solid #111111;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 1px 0 rgba(255, 255, 255, 0.075);
}
.phabricator-menu-button-icon {
@ -94,11 +88,11 @@
}
.phabricator-expand-core-menu {
left: 10px;
left: 5px;
}
.phabricator-expand-application-menu {
right: 10px;
right: 5px;
}
.device-desktop .phabricator-main-menu-expand-button {
@ -109,13 +103,6 @@
display: block;
}
.phabricator-core-menu-expanded .phabricator-expand-core-menu,
.phabricator-application-menu-expanded .phabricator-expand-application-menu {
background-color: #55595d;
}
/* - Search --------------------------------------------------------------------
@ -155,7 +142,7 @@
.device .phabricator-main-menu-search-container {
padding: 0;
margin: 0 18px 0 60px;
margin: 0 8px 0 52px;
}
.phabricator-main-menu-search input {

View file

@ -13,7 +13,7 @@ only screen and (min-device-pixel-ratio: 1.5),
only screen and (-webkit-min-device-pixel-ratio: 1.5) {
.sprite-menu {
background-image: url(/rsrc/image/sprite-menu-X2.png);
background-size: 140px 96px;
background-size: 140px 117px;
}
}
@ -31,19 +31,27 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
}
.phabricator-crumb-divider {
background-position: 0px -64px;
background-position: 0px -85px;
}
.menu-icon-eye {
background-position: -10px -64px;
background-position: 0px -38px;
}
.menu-icon-eye-blue {
background-position: -25px -38px;
}
.menu-icon-app {
background-position: -35px -64px;
background-position: -10px -85px;
}
.menu-icon-app-blue {
background-position: -35px -85px;
}
.phabricator-main-menu-logo-image {
background-position: 0px -38px;
background-position: 0px -59px;
}
.alert-notifications .phabricator-main-menu-message-icon {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 3 KiB