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

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
This commit is contained in:
Chad Little 2014-12-08 13:53:29 -08:00
parent 4506018339
commit 34fb98da66
20 changed files with 55 additions and 128 deletions

View file

@ -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',

View file

@ -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" : [

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -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(

View file

@ -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',
),
'');

View file

@ -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,

View file

@ -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;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.6 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB