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

Break logo/name into replaceable parts

Summary: Ref T4214, this breaks the 'eye' out as a separate image 40px x 40px. We also now show the eye on mobile, as we have enough room for both currently.

Test Plan: Tested default and nightmaremoon colors, tested mobile, tablet and desktop layouts.

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T4214

Differential Revision: https://secure.phabricator.com/D10794
This commit is contained in:
Chad Little 2014-11-06 09:23:17 -08:00
parent 351f4722d9
commit 3ea31c92b9
12 changed files with 51 additions and 30 deletions

View file

@ -7,7 +7,7 @@
*/ */
return array( return array(
'names' => array( 'names' => array(
'core.pkg.css' => '33952f78', 'core.pkg.css' => 'f933e4df',
'core.pkg.js' => 'cbdbd552', 'core.pkg.js' => 'cbdbd552',
'darkconsole.pkg.js' => 'df001cab', 'darkconsole.pkg.js' => 'df001cab',
'differential.pkg.css' => '8af45893', 'differential.pkg.css' => '8af45893',
@ -35,7 +35,7 @@ return array(
'rsrc/css/aphront/two-column.css' => '16ab3ad2', 'rsrc/css/aphront/two-column.css' => '16ab3ad2',
'rsrc/css/aphront/typeahead.css' => 'a989b5b3', 'rsrc/css/aphront/typeahead.css' => 'a989b5b3',
'rsrc/css/application/auth/auth.css' => '1e655982', 'rsrc/css/application/auth/auth.css' => '1e655982',
'rsrc/css/application/base/main-menu-view.css' => 'aceca0e9', 'rsrc/css/application/base/main-menu-view.css' => 'cebeecc4',
'rsrc/css/application/base/notification-menu.css' => '6aa0a74b', 'rsrc/css/application/base/notification-menu.css' => '6aa0a74b',
'rsrc/css/application/base/phabricator-application-launch-view.css' => '5d71008f', 'rsrc/css/application/base/phabricator-application-launch-view.css' => '5d71008f',
'rsrc/css/application/base/standard-page-view.css' => '3f5b9311', 'rsrc/css/application/base/standard-page-view.css' => '3f5b9311',
@ -152,7 +152,7 @@ return array(
'rsrc/css/sprite-gradient.css' => '4bdb98a7', 'rsrc/css/sprite-gradient.css' => '4bdb98a7',
'rsrc/css/sprite-login.css' => 'a355d921', 'rsrc/css/sprite-login.css' => 'a355d921',
'rsrc/css/sprite-main-header.css' => '92720ee2', 'rsrc/css/sprite-main-header.css' => '92720ee2',
'rsrc/css/sprite-menu.css' => '28281e16', 'rsrc/css/sprite-menu.css' => '1e5b7537',
'rsrc/css/sprite-payments.css' => 'cc085d44', 'rsrc/css/sprite-payments.css' => 'cc085d44',
'rsrc/css/sprite-projects.css' => '7578fa56', 'rsrc/css/sprite-projects.css' => '7578fa56',
'rsrc/css/sprite-tokens.css' => '1706b943', 'rsrc/css/sprite-tokens.css' => '1706b943',
@ -324,8 +324,8 @@ return array(
'rsrc/image/sprite-login-X2.png' => '5ae6de3a', 'rsrc/image/sprite-login-X2.png' => '5ae6de3a',
'rsrc/image/sprite-login.png' => '07f2c67c', 'rsrc/image/sprite-login.png' => '07f2c67c',
'rsrc/image/sprite-main-header.png' => '83521873', 'rsrc/image/sprite-main-header.png' => '83521873',
'rsrc/image/sprite-menu-X2.png' => '39d78f97', 'rsrc/image/sprite-menu-X2.png' => '162d7d2b',
'rsrc/image/sprite-menu.png' => '259dab45', 'rsrc/image/sprite-menu.png' => '3734edad',
'rsrc/image/sprite-payments.png' => 'd8576309', 'rsrc/image/sprite-payments.png' => 'd8576309',
'rsrc/image/sprite-projects-X2.png' => '218fdc8b', 'rsrc/image/sprite-projects-X2.png' => '218fdc8b',
'rsrc/image/sprite-projects.png' => '631ff9a7', 'rsrc/image/sprite-projects.png' => '631ff9a7',
@ -717,7 +717,7 @@ return array(
'phabricator-hovercard-view-css' => '893f4783', 'phabricator-hovercard-view-css' => '893f4783',
'phabricator-keyboard-shortcut' => '1ae869f2', 'phabricator-keyboard-shortcut' => '1ae869f2',
'phabricator-keyboard-shortcut-manager' => 'ad7a69ca', 'phabricator-keyboard-shortcut-manager' => 'ad7a69ca',
'phabricator-main-menu-view' => 'aceca0e9', 'phabricator-main-menu-view' => 'cebeecc4',
'phabricator-nav-view-css' => '9283c2df', 'phabricator-nav-view-css' => '9283c2df',
'phabricator-notification' => '0c6946e7', 'phabricator-notification' => '0c6946e7',
'phabricator-notification-css' => '9c279160', 'phabricator-notification-css' => '9c279160',
@ -814,7 +814,7 @@ return array(
'sprite-gradient-css' => '4bdb98a7', 'sprite-gradient-css' => '4bdb98a7',
'sprite-login-css' => 'a355d921', 'sprite-login-css' => 'a355d921',
'sprite-main-header-css' => '92720ee2', 'sprite-main-header-css' => '92720ee2',
'sprite-menu-css' => '28281e16', 'sprite-menu-css' => '1e5b7537',
'sprite-payments-css' => 'cc085d44', 'sprite-payments-css' => 'cc085d44',
'sprite-projects-css' => '7578fa56', 'sprite-projects-css' => '7578fa56',
'sprite-tokens-css' => '1706b943', 'sprite-tokens-css' => '1706b943',

View file

@ -31,6 +31,11 @@
"rule" : ".alert-notifications.message-unread .phabricator-main-menu-message-icon", "rule" : ".alert-notifications.message-unread .phabricator-main-menu-message-icon",
"hash" : "7edd6d68b36f2f46133eb3118f966c6b" "hash" : "7edd6d68b36f2f46133eb3118f966c6b"
}, },
"eye" : {
"name" : "eye",
"rule" : ".phabricator-main-menu-eye",
"hash" : "35f24014f23142275574136a63dcb73f"
},
"info-sm" : { "info-sm" : {
"name" : "info-sm", "name" : "info-sm",
"rule" : ".menu-icon-info-sm", "rule" : ".menu-icon-info-sm",
@ -38,8 +43,8 @@
}, },
"logo" : { "logo" : {
"name" : "logo", "name" : "logo",
"rule" : ".phabricator-main-menu-logo-image", "rule" : ".phabricator-main-menu-logo",
"hash" : "b03901ae5dff3ec840b88f8335819598" "hash" : "668b04729a4b9460b0c89cb6ef6db4d4"
}, },
"logout-sm" : { "logout-sm" : {
"name" : "logout-sm", "name" : "logout-sm",

Binary file not shown.

After

Width:  |  Height:  |  Size: 3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

View file

@ -85,9 +85,14 @@ final class CeleritySpriteGenerator {
'css' => '.menu-icon-app-blue', 'css' => '.menu-icon-app-blue',
), ),
'logo' => array( 'logo' => array(
'x' => 149, 'x' => 96,
'y' => 26, 'y' => 26,
'css' => '.phabricator-main-menu-logo-image', 'css' => '.phabricator-main-menu-logo',
),
'eye' => array(
'x' => 40,
'y' => 40,
'css' => '.phabricator-main-menu-eye',
), ),
'conf-off' => array( 'conf-off' => array(
'x' => 18, 'x' => 18,

View file

@ -238,12 +238,11 @@ final class PhabricatorMainMenuView extends AphrontView {
} }
private function renderPhabricatorLogo() { private function renderPhabricatorLogo() {
$class = 'phabricator-main-menu-logo-image';
return phutil_tag( return phutil_tag(
'a', 'a',
array( array(
'class' => 'phabricator-main-menu-logo', 'class' => 'phabricator-main-menu-brand',
'href' => '/', 'href' => '/',
), ),
array( array(
@ -256,7 +255,13 @@ final class PhabricatorMainMenuView extends AphrontView {
phutil_tag( phutil_tag(
'span', 'span',
array( array(
'class' => 'sprite-menu menu-logo-image '.$class, 'class' => 'sprite-menu phabricator-main-menu-eye',
),
''),
phutil_tag(
'span',
array(
'class' => 'sprite-menu phabricator-main-menu-logo',
), ),
''), ''),
)); ));

View file

@ -38,29 +38,34 @@
float: left; float: left;
} }
.phabricator-main-menu-logo { .phabricator-main-menu-brand {
display: inline-block; display: inline-block;
width: 149px; width: 148px;
height: 44px; height: 44px;
float: left; float: left;
margin-right: 6px; margin-right: 6px;
padding-right: 6px; padding-right: 4px;
padding-left: 6px; padding-left: 6px;
} }
.menu-logo-image { .phabricator-main-menu-logo {
position: absolute; position: absolute;
width: 149px; width: 96px;
height: 26px; height: 26px;
left: 52px;
top: 9px; top: 9px;
} }
.device-phone .phabricator-main-menu-logo { .phabricator-main-menu-eye {
margin-left: -45px; position: absolute;
width: 40px;
height: 40px;
top: 2px;
} }
.device .phabricator-main-menu-logo:hover { .device .phabricator-main-menu-brand:hover {
background-color: transparent; background-color: rgba(0,0,0,.6);
cursor: hand;
} }
/* - Expand/Collapse Button ---------------------------------------------------- /* - Expand/Collapse Button ----------------------------------------------------
@ -385,15 +390,12 @@
} }
.device-desktop .main-header-dark .phabricator-application-menu .device-desktop .main-header-dark .phabricator-application-menu
.core-menu-item.phui-list-item-view:hover, .core-menu-item.phui-list-item-view:hover {
.device-desktop .main-header-dark .phabricator-main-menu-logo:hover {
background-color: rgba(0,0,0,.6); background-color: rgba(0,0,0,.6);
} }
.device-desktop .phabricator-application-menu .device-desktop .phabricator-application-menu
.core-menu-item.phui-list-item-view:hover, .core-menu-item.phui-list-item-view:hover {
.device-desktop .phabricator-main-menu-logo:hover {
background-color: rgba(0,0,0,.3);
box-shadow: inset 0 5px 10px rgba(0,0,0,0.5); box-shadow: inset 0 5px 10px rgba(0,0,0,0.5);
border-radius: 3px; border-radius: 3px;
} }

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) { only screen and (-webkit-min-device-pixel-ratio: 1.5) {
.sprite-menu { .sprite-menu {
background-image: url(/rsrc/image/sprite-menu-X2.png); background-image: url(/rsrc/image/sprite-menu-X2.png);
background-size: 150px 151px; background-size: 116px 192px;
} }
} }
@ -78,10 +78,14 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
background-position: -35px -119px; background-position: -35px -119px;
} }
.phabricator-main-menu-logo-image { .phabricator-main-menu-logo {
background-position: 0px -63px; background-position: 0px -63px;
} }
.phabricator-main-menu-eye {
background-position: 0px -151px;
}
.alert-notifications .phabricator-main-menu-message-icon { .alert-notifications .phabricator-main-menu-message-icon {
background-position: 0px -19px; background-position: 0px -19px;
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.3 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB