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
|
@ -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',
|
||||||
|
|
|
@ -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",
|
||||||
|
|
BIN
resources/sprite/menu_1x/eye.png
Normal file
After Width: | Height: | Size: 3 KiB |
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 2.1 KiB |
BIN
resources/sprite/menu_2x/eye.png
Normal file
After Width: | Height: | Size: 6 KiB |
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 2.8 KiB |
|
@ -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,
|
||||||
|
|
|
@ -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',
|
||||||
),
|
),
|
||||||
''),
|
''),
|
||||||
));
|
));
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 8.3 KiB After Width: | Height: | Size: 8.2 KiB |