Update message and notification icons to use fonts
Summary: Cleans up spacing, updates to fonts instead of images. Fixed some mobile issues. Test Plan: Test with and without counts on desktop, tablet, mobile. Test layout in FF, Chrome, IE. {F246745} {F246746} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Differential Revision: https://secure.phabricator.com/D10948
|
@ -7,7 +7,7 @@
|
|||
*/
|
||||
return array(
|
||||
'names' => array(
|
||||
'core.pkg.css' => '78e368d3',
|
||||
'core.pkg.css' => 'a82ffdea',
|
||||
'core.pkg.js' => 'ef8f73ee',
|
||||
'darkconsole.pkg.js' => 'df001cab',
|
||||
'differential.pkg.css' => '8af45893',
|
||||
|
@ -35,7 +35,7 @@ return array(
|
|||
'rsrc/css/aphront/two-column.css' => '16ab3ad2',
|
||||
'rsrc/css/aphront/typeahead.css' => 'a989b5b3',
|
||||
'rsrc/css/application/auth/auth.css' => '1e655982',
|
||||
'rsrc/css/application/base/main-menu-view.css' => 'b2d8b1f8',
|
||||
'rsrc/css/application/base/main-menu-view.css' => 'de453b7c',
|
||||
'rsrc/css/application/base/notification-menu.css' => '6aa0a74b',
|
||||
'rsrc/css/application/base/phabricator-application-launch-view.css' => '5d71008f',
|
||||
'rsrc/css/application/base/standard-page-view.css' => '3f5b9311',
|
||||
|
@ -152,7 +152,7 @@ return array(
|
|||
'rsrc/css/sprite-gradient.css' => '4bdb98a7',
|
||||
'rsrc/css/sprite-login.css' => 'a355d921',
|
||||
'rsrc/css/sprite-main-header.css' => '92720ee2',
|
||||
'rsrc/css/sprite-menu.css' => 'afaf676d',
|
||||
'rsrc/css/sprite-menu.css' => '0ca5a908',
|
||||
'rsrc/css/sprite-payments.css' => 'cc085d44',
|
||||
'rsrc/css/sprite-projects.css' => '7578fa56',
|
||||
'rsrc/css/sprite-tokens.css' => '1706b943',
|
||||
|
@ -330,8 +330,8 @@ return array(
|
|||
'rsrc/image/sprite-login-X2.png' => '5ae6de3a',
|
||||
'rsrc/image/sprite-login.png' => '07f2c67c',
|
||||
'rsrc/image/sprite-main-header.png' => '83521873',
|
||||
'rsrc/image/sprite-menu-X2.png' => 'a54606dd',
|
||||
'rsrc/image/sprite-menu.png' => '34048681',
|
||||
'rsrc/image/sprite-menu-X2.png' => '89ae35f1',
|
||||
'rsrc/image/sprite-menu.png' => 'b912a047',
|
||||
'rsrc/image/sprite-payments.png' => 'd8576309',
|
||||
'rsrc/image/sprite-projects-X2.png' => '218fdc8b',
|
||||
'rsrc/image/sprite-projects.png' => '631ff9a7',
|
||||
|
@ -723,7 +723,7 @@ return array(
|
|||
'phabricator-hovercard-view-css' => '893f4783',
|
||||
'phabricator-keyboard-shortcut' => '1ae869f2',
|
||||
'phabricator-keyboard-shortcut-manager' => 'ad7a69ca',
|
||||
'phabricator-main-menu-view' => 'b2d8b1f8',
|
||||
'phabricator-main-menu-view' => 'de453b7c',
|
||||
'phabricator-nav-view-css' => '9283c2df',
|
||||
'phabricator-notification' => '0c6946e7',
|
||||
'phabricator-notification-css' => '9c279160',
|
||||
|
@ -820,7 +820,7 @@ return array(
|
|||
'sprite-gradient-css' => '4bdb98a7',
|
||||
'sprite-login-css' => 'a355d921',
|
||||
'sprite-main-header-css' => '92720ee2',
|
||||
'sprite-menu-css' => 'afaf676d',
|
||||
'sprite-menu-css' => '0ca5a908',
|
||||
'sprite-payments-css' => 'cc085d44',
|
||||
'sprite-projects-css' => '7578fa56',
|
||||
'sprite-tokens-css' => '1706b943',
|
||||
|
|
|
@ -1,50 +1,20 @@
|
|||
{
|
||||
"version" : 1,
|
||||
"sprites" : {
|
||||
"arrow-right" : {
|
||||
"arrow-right" : {
|
||||
"name" : "arrow-right",
|
||||
"rule" : ".phabricator-crumb-divider",
|
||||
"hash" : "87affa58adbe8da437a1cea6ffc5d8a4"
|
||||
},
|
||||
"conf-hover" : {
|
||||
"name" : "conf-hover",
|
||||
"rule" : ".alert-notifications:hover .phabricator-main-menu-message-icon",
|
||||
"hash" : "78795fbf2345fd8f54e66a3b3dea7bcd"
|
||||
},
|
||||
"conf-off" : {
|
||||
"name" : "conf-off",
|
||||
"rule" : ".alert-notifications .phabricator-main-menu-message-icon",
|
||||
"hash" : "85e76a1e5d717d7d7f0a4e4e92a0b543"
|
||||
},
|
||||
"conf-unseen" : {
|
||||
"name" : "conf-unseen",
|
||||
"rule" : ".alert-notifications.message-unread .phabricator-main-menu-message-icon",
|
||||
"hash" : "7edd6d68b36f2f46133eb3118f966c6b"
|
||||
},
|
||||
"eye" : {
|
||||
"eye" : {
|
||||
"name" : "eye",
|
||||
"rule" : ".phabricator-main-menu-eye",
|
||||
"hash" : "35f24014f23142275574136a63dcb73f"
|
||||
},
|
||||
"logo" : {
|
||||
"logo" : {
|
||||
"name" : "logo",
|
||||
"rule" : ".phabricator-main-menu-logo",
|
||||
"hash" : "668b04729a4b9460b0c89cb6ef6db4d4"
|
||||
},
|
||||
"seen_have_unread" : {
|
||||
"name" : "seen_have_unread",
|
||||
"rule" : ".alert-notifications:hover .phabricator-main-menu-alert-icon",
|
||||
"hash" : "7742f97d26f025542d6f162346557871"
|
||||
},
|
||||
"seen_read_all" : {
|
||||
"name" : "seen_read_all",
|
||||
"rule" : ".alert-notifications .phabricator-main-menu-alert-icon",
|
||||
"hash" : "94d4fea01dbb666bb794feec56f783e5"
|
||||
},
|
||||
"unseen_any" : {
|
||||
"name" : "unseen_any",
|
||||
"rule" : ".alert-notifications.alert-unread .phabricator-main-menu-alert-icon",
|
||||
"hash" : "6c577a4c2207f9e2250ca3f09fb4fac3"
|
||||
}
|
||||
},
|
||||
"scales" : [
|
||||
|
|
Before Width: | Height: | Size: 1 KiB |
Before Width: | Height: | Size: 1 KiB |
Before Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 1.7 KiB |
|
@ -6,24 +6,6 @@ final class CeleritySpriteGenerator {
|
|||
$sprites = array();
|
||||
|
||||
$sources = array(
|
||||
'seen_read_all' => array(
|
||||
'x' => 18,
|
||||
'y' => 18,
|
||||
'css' =>
|
||||
'.alert-notifications .phabricator-main-menu-alert-icon',
|
||||
),
|
||||
'seen_have_unread' => array(
|
||||
'x' => 18,
|
||||
'y' => 18,
|
||||
'css' =>
|
||||
'.alert-notifications:hover .phabricator-main-menu-alert-icon',
|
||||
),
|
||||
'unseen_any' => array(
|
||||
'x' => 18,
|
||||
'y' => 18,
|
||||
'css' =>
|
||||
'.alert-notifications.alert-unread .phabricator-main-menu-alert-icon',
|
||||
),
|
||||
'arrow-right' => array(
|
||||
'x' => 9,
|
||||
'y' => 31,
|
||||
|
@ -39,25 +21,6 @@ final class CeleritySpriteGenerator {
|
|||
'y' => 40,
|
||||
'css' => '.phabricator-main-menu-eye',
|
||||
),
|
||||
'conf-off' => array(
|
||||
'x' => 18,
|
||||
'y' => 18,
|
||||
'css' =>
|
||||
'.alert-notifications .phabricator-main-menu-message-icon',
|
||||
),
|
||||
'conf-hover' => array(
|
||||
'x' => 18,
|
||||
'y' => 18,
|
||||
'css' =>
|
||||
'.alert-notifications:hover .phabricator-main-menu-message-icon',
|
||||
),
|
||||
'conf-unseen' => array(
|
||||
'x' => 18,
|
||||
'y' => 18,
|
||||
'css' =>
|
||||
'.alert-notifications.message-unread '.
|
||||
'.phabricator-main-menu-message-icon',
|
||||
),
|
||||
);
|
||||
|
||||
$scales = array(
|
||||
|
|
|
@ -270,13 +270,8 @@ final class PhabricatorMainMenuView extends AphrontView {
|
|||
|
||||
require_celerity_resource('phabricator-notification-css');
|
||||
require_celerity_resource('phabricator-notification-menu-css');
|
||||
require_celerity_resource('sprite-menu-css');
|
||||
|
||||
$container_classes = array(
|
||||
'sprite-menu',
|
||||
'alert-notifications',
|
||||
);
|
||||
|
||||
$container_classes = array('alert-notifications');
|
||||
$aural = array();
|
||||
|
||||
$message_tag = '';
|
||||
|
@ -324,7 +319,8 @@ final class PhabricatorMainMenuView extends AphrontView {
|
|||
$message_icon_tag = phutil_tag(
|
||||
'span',
|
||||
array(
|
||||
'class' => 'sprite-menu phabricator-main-menu-message-icon',
|
||||
'class' => 'phabricator-main-menu-message-icon phui-icon-view '.
|
||||
'phui-font-fa fa-comments',
|
||||
),
|
||||
'');
|
||||
|
||||
|
@ -408,7 +404,8 @@ final class PhabricatorMainMenuView extends AphrontView {
|
|||
$icon_tag = phutil_tag(
|
||||
'span',
|
||||
array(
|
||||
'class' => 'sprite-menu phabricator-main-menu-alert-icon',
|
||||
'class' => 'phabricator-main-menu-alert-icon phui-icon-view '.
|
||||
'phui-font-fa fa-bell',
|
||||
),
|
||||
'');
|
||||
|
||||
|
|
|
@ -43,8 +43,7 @@
|
|||
width: 148px;
|
||||
height: 44px;
|
||||
float: left;
|
||||
margin-right: 6px;
|
||||
padding-right: 4px;
|
||||
margin-right: 4px;
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
|
@ -271,36 +270,58 @@
|
|||
|
||||
.phabricator-main-menu-alerts {
|
||||
display: inline-block;
|
||||
border-radius: 15px;
|
||||
float: left;
|
||||
background: rgba(0,0,0,.5);
|
||||
height: 20px;
|
||||
padding: 2px 10px 3px 8px;
|
||||
margin-top: 10px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.alert-notifications {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.alert-notifications:hover .phui-icon-view {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.alert-unread:hover .phabricator-main-menu-alert-icon.phui-icon-view,
|
||||
.message-unread:hover .phabricator-main-menu-message-icon.phui-icon-view {
|
||||
color: {$sky};
|
||||
}
|
||||
|
||||
.phabricator-main-menu-alert-icon,
|
||||
.phabricator-main-menu-message-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 2px 0 0 0;
|
||||
padding: 9px 6px 9px 4px;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.alert-notifications .phabricator-main-menu-message-icon {
|
||||
margin: 2px 0 0 6px;
|
||||
.phabricator-main-menu-alert-icon {
|
||||
font-size: 16px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.phabricator-main-menu-alert-count,
|
||||
.phabricator-main-menu-message-count {
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
color: #ffffff;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
display: none;
|
||||
float: left;
|
||||
margin-left: 3px;
|
||||
margin: 11px 6px 0 -2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.device-phone .alert-unread .phabricator-main-menu-alert-count,
|
||||
.device-phone .message-unread .phabricator-main-menu-message-count {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.alert-unread .phabricator-main-menu-alert-icon,
|
||||
.message-unread .phabricator-main-menu-message-icon {
|
||||
color: {$sky};
|
||||
}
|
||||
|
||||
.alert-unread .phabricator-main-menu-alert-count,
|
||||
|
|
|
@ -13,43 +13,19 @@ 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: 97px 138px;
|
||||
background-size: 97px 100px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.alert-notifications .phabricator-main-menu-alert-icon {
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
|
||||
.alert-notifications:hover .phabricator-main-menu-alert-icon {
|
||||
background-position: -19px 0px;
|
||||
}
|
||||
|
||||
.alert-notifications.alert-unread .phabricator-main-menu-alert-icon {
|
||||
background-position: -38px 0px;
|
||||
}
|
||||
|
||||
.phabricator-crumb-divider {
|
||||
background-position: 0px -65px;
|
||||
background-position: 0px -27px;
|
||||
}
|
||||
|
||||
.phabricator-main-menu-logo {
|
||||
background-position: 0px -38px;
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
|
||||
.phabricator-main-menu-eye {
|
||||
background-position: 0px -97px;
|
||||
}
|
||||
|
||||
.alert-notifications .phabricator-main-menu-message-icon {
|
||||
background-position: 0px -19px;
|
||||
}
|
||||
|
||||
.alert-notifications:hover .phabricator-main-menu-message-icon {
|
||||
background-position: -19px -19px;
|
||||
}
|
||||
|
||||
.alert-notifications.message-unread .phabricator-main-menu-message-icon {
|
||||
background-position: -38px -19px;
|
||||
background-position: 0px -59px;
|
||||
}
|
||||
|
|
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 6.6 KiB |
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.1 KiB |