Notifcation icons for Conpherence
Summary: Adds notification icons for Conpherence and re-writes the CSS a bit for the new icons and states. I removed the background bubble here and went straight CSS. I also seem to have a JS error and the notification menu doesn't display, but I'm tired and wanted to look at this in Differential. Will update after JS fix. Test Plan: Turned on notification numbers and conpherence numbers, turned them off. Made them big. Checked FF and IE. Reviewers: epriestley, btrahan Reviewed By: btrahan CC: aran, Korvin Maniphest Tasks: T2415 Differential Revision: https://secure.phabricator.com/D4666
|
@ -11,10 +11,20 @@
|
|||
"rule" : ".phabricator-crumb-divider",
|
||||
"hash" : "50180da0aed206c9db2bc1547c1a158c"
|
||||
},
|
||||
"bubble" : {
|
||||
"name" : "bubble",
|
||||
"rule" : ".phabricator-main-menu-alert-bubble.alert-unread",
|
||||
"hash" : "42f6a2337a584ce99c964021ff3450ca"
|
||||
"conf-hover" : {
|
||||
"name" : "conf-hover",
|
||||
"rule" : ".alert-notifications:hover .phabricator-main-menu-message-icon",
|
||||
"hash" : "febc4135b2821ae2d3f0b06aa295ca0d"
|
||||
},
|
||||
"conf-off" : {
|
||||
"name" : "conf-off",
|
||||
"rule" : ".alert-notifications .phabricator-main-menu-message-icon",
|
||||
"hash" : "dc1b05cb611eaef76a09e8cff698c99d"
|
||||
},
|
||||
"conf-unseen" : {
|
||||
"name" : "conf-unseen",
|
||||
"rule" : ".alert-notifications.message-unread .phabricator-main-menu-message-icon",
|
||||
"hash" : "1f7d54b2b9781099f867b100ebdd6c6a"
|
||||
},
|
||||
"eye" : {
|
||||
"name" : "eye",
|
||||
|
@ -26,11 +36,6 @@
|
|||
"rule" : ".phabricator-main-menu-logo-image",
|
||||
"hash" : "6eadea2c3dd2ada989eba22b6769b3eb"
|
||||
},
|
||||
"round_bubble" : {
|
||||
"name" : "round_bubble",
|
||||
"rule" : ".phabricator-main-menu-alert-bubble",
|
||||
"hash" : "9710a3fa4a5fbfde3d81ad66863cdde0"
|
||||
},
|
||||
"seen_have_unread" : {
|
||||
"name" : "seen_have_unread",
|
||||
"rule" : ".alert-notifications:hover .phabricator-main-menu-alert-icon",
|
||||
|
|
BIN
resources/sprite/menu_1x/conf-hover.png
Normal file
After Width: | Height: | Size: 1 KiB |
BIN
resources/sprite/menu_1x/conf-off.png
Normal file
After Width: | Height: | Size: 1 KiB |
BIN
resources/sprite/menu_1x/conf-unseen.png
Normal file
After Width: | Height: | Size: 1.1 KiB |
BIN
resources/sprite/menu_2x/conf-hover.png
Normal file
After Width: | Height: | Size: 1.1 KiB |
BIN
resources/sprite/menu_2x/conf-off.png
Normal file
After Width: | Height: | Size: 1.1 KiB |
BIN
resources/sprite/menu_2x/conf-unseen.png
Normal file
After Width: | Height: | Size: 1.1 KiB |
|
@ -499,15 +499,15 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'/rsrc/image/sprite-menu-X2.png' =>
|
||||
array(
|
||||
'hash' => '11017d94e949aa169361b966716e8729',
|
||||
'uri' => '/res/11017d94/rsrc/image/sprite-menu-X2.png',
|
||||
'hash' => 'ad544a9287ca73b9e0d3f549834701ee',
|
||||
'uri' => '/res/ad544a92/rsrc/image/sprite-menu-X2.png',
|
||||
'disk' => '/rsrc/image/sprite-menu-X2.png',
|
||||
'type' => 'png',
|
||||
),
|
||||
'/rsrc/image/sprite-menu.png' =>
|
||||
array(
|
||||
'hash' => 'ba0f7d61f49ea50e9c3ff93b160e14c5',
|
||||
'uri' => '/res/ba0f7d61/rsrc/image/sprite-menu.png',
|
||||
'hash' => '8a6822c29bfa6f33db1c1b8b02b5c6d3',
|
||||
'uri' => '/res/8a6822c2/rsrc/image/sprite-menu.png',
|
||||
'disk' => '/rsrc/image/sprite-menu.png',
|
||||
'type' => 'png',
|
||||
),
|
||||
|
@ -2712,7 +2712,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'phabricator-main-menu-view' =>
|
||||
array(
|
||||
'uri' => '/res/a38edb46/rsrc/css/application/base/main-menu-view.css',
|
||||
'uri' => '/res/38ec42d4/rsrc/css/application/base/main-menu-view.css',
|
||||
'type' => 'css',
|
||||
'requires' =>
|
||||
array(
|
||||
|
@ -3308,7 +3308,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'sprite-menu-css' =>
|
||||
array(
|
||||
'uri' => '/res/3d9f75af/rsrc/css/sprite-menu.css',
|
||||
'uri' => '/res/8e6624b0/rsrc/css/sprite-menu.css',
|
||||
'type' => 'css',
|
||||
'requires' =>
|
||||
array(
|
||||
|
@ -3345,7 +3345,7 @@ celerity_register_resource_map(array(
|
|||
), array(
|
||||
'packages' =>
|
||||
array(
|
||||
'd935fc46' =>
|
||||
'6031cfb4' =>
|
||||
array(
|
||||
'name' => 'core.pkg.css',
|
||||
'symbols' =>
|
||||
|
@ -3389,7 +3389,7 @@ celerity_register_resource_map(array(
|
|||
36 => 'phabricator-object-item-list-view-css',
|
||||
37 => 'global-drag-and-drop-css',
|
||||
),
|
||||
'uri' => '/res/pkg/d935fc46/core.pkg.css',
|
||||
'uri' => '/res/pkg/6031cfb4/core.pkg.css',
|
||||
'type' => 'css',
|
||||
),
|
||||
'66dca903' =>
|
||||
|
@ -3579,19 +3579,19 @@ celerity_register_resource_map(array(
|
|||
'reverse' =>
|
||||
array(
|
||||
'aphront-attached-file-view-css' => 'e30a3fa8',
|
||||
'aphront-crumbs-view-css' => 'd935fc46',
|
||||
'aphront-dialog-view-css' => 'd935fc46',
|
||||
'aphront-error-view-css' => 'd935fc46',
|
||||
'aphront-form-view-css' => 'd935fc46',
|
||||
'aphront-crumbs-view-css' => '6031cfb4',
|
||||
'aphront-dialog-view-css' => '6031cfb4',
|
||||
'aphront-error-view-css' => '6031cfb4',
|
||||
'aphront-form-view-css' => '6031cfb4',
|
||||
'aphront-headsup-action-list-view-css' => 'ec01d039',
|
||||
'aphront-headsup-view-css' => 'd935fc46',
|
||||
'aphront-list-filter-view-css' => 'd935fc46',
|
||||
'aphront-pager-view-css' => 'd935fc46',
|
||||
'aphront-panel-view-css' => 'd935fc46',
|
||||
'aphront-table-view-css' => 'd935fc46',
|
||||
'aphront-tokenizer-control-css' => 'd935fc46',
|
||||
'aphront-tooltip-css' => 'd935fc46',
|
||||
'aphront-typeahead-control-css' => 'd935fc46',
|
||||
'aphront-headsup-view-css' => '6031cfb4',
|
||||
'aphront-list-filter-view-css' => '6031cfb4',
|
||||
'aphront-pager-view-css' => '6031cfb4',
|
||||
'aphront-panel-view-css' => '6031cfb4',
|
||||
'aphront-table-view-css' => '6031cfb4',
|
||||
'aphront-tokenizer-control-css' => '6031cfb4',
|
||||
'aphront-tooltip-css' => '6031cfb4',
|
||||
'aphront-typeahead-control-css' => '6031cfb4',
|
||||
'differential-changeset-view-css' => 'ec01d039',
|
||||
'differential-core-view-css' => 'ec01d039',
|
||||
'differential-inline-comment-editor' => 'ac53d36a',
|
||||
|
@ -3605,7 +3605,7 @@ celerity_register_resource_map(array(
|
|||
'differential-table-of-contents-css' => 'ec01d039',
|
||||
'diffusion-commit-view-css' => 'c8ce2d88',
|
||||
'diffusion-icons-css' => 'c8ce2d88',
|
||||
'global-drag-and-drop-css' => 'd935fc46',
|
||||
'global-drag-and-drop-css' => '6031cfb4',
|
||||
'inline-comment-summary-css' => 'ec01d039',
|
||||
'javelin-aphlict' => '66dca903',
|
||||
'javelin-behavior' => 'fbeded59',
|
||||
|
@ -3675,48 +3675,48 @@ celerity_register_resource_map(array(
|
|||
'javelin-util' => 'fbeded59',
|
||||
'javelin-vector' => 'fbeded59',
|
||||
'javelin-workflow' => 'fbeded59',
|
||||
'lightbox-attachment-css' => 'd935fc46',
|
||||
'lightbox-attachment-css' => '6031cfb4',
|
||||
'maniphest-task-summary-css' => 'e30a3fa8',
|
||||
'maniphest-transaction-detail-css' => 'e30a3fa8',
|
||||
'phabricator-busy' => '66dca903',
|
||||
'phabricator-content-source-view-css' => 'ec01d039',
|
||||
'phabricator-core-buttons-css' => 'd935fc46',
|
||||
'phabricator-core-css' => 'd935fc46',
|
||||
'phabricator-crumbs-view-css' => 'd935fc46',
|
||||
'phabricator-directory-css' => 'd935fc46',
|
||||
'phabricator-core-buttons-css' => '6031cfb4',
|
||||
'phabricator-core-css' => '6031cfb4',
|
||||
'phabricator-crumbs-view-css' => '6031cfb4',
|
||||
'phabricator-directory-css' => '6031cfb4',
|
||||
'phabricator-drag-and-drop-file-upload' => 'ac53d36a',
|
||||
'phabricator-dropdown-menu' => '66dca903',
|
||||
'phabricator-file-upload' => '66dca903',
|
||||
'phabricator-filetree-view-css' => 'd935fc46',
|
||||
'phabricator-flag-css' => 'd935fc46',
|
||||
'phabricator-form-view-css' => 'd935fc46',
|
||||
'phabricator-header-view-css' => 'd935fc46',
|
||||
'phabricator-jump-nav' => 'd935fc46',
|
||||
'phabricator-filetree-view-css' => '6031cfb4',
|
||||
'phabricator-flag-css' => '6031cfb4',
|
||||
'phabricator-form-view-css' => '6031cfb4',
|
||||
'phabricator-header-view-css' => '6031cfb4',
|
||||
'phabricator-jump-nav' => '6031cfb4',
|
||||
'phabricator-keyboard-shortcut' => '66dca903',
|
||||
'phabricator-keyboard-shortcut-manager' => '66dca903',
|
||||
'phabricator-main-menu-view' => 'd935fc46',
|
||||
'phabricator-main-menu-view' => '6031cfb4',
|
||||
'phabricator-menu-item' => '66dca903',
|
||||
'phabricator-nav-view-css' => 'd935fc46',
|
||||
'phabricator-nav-view-css' => '6031cfb4',
|
||||
'phabricator-notification' => '66dca903',
|
||||
'phabricator-notification-css' => 'd935fc46',
|
||||
'phabricator-notification-menu-css' => 'd935fc46',
|
||||
'phabricator-object-item-list-view-css' => 'd935fc46',
|
||||
'phabricator-notification-css' => '6031cfb4',
|
||||
'phabricator-notification-menu-css' => '6031cfb4',
|
||||
'phabricator-object-item-list-view-css' => '6031cfb4',
|
||||
'phabricator-object-selector-css' => 'ec01d039',
|
||||
'phabricator-paste-file-upload' => '66dca903',
|
||||
'phabricator-prefab' => '66dca903',
|
||||
'phabricator-project-tag-css' => 'e30a3fa8',
|
||||
'phabricator-remarkup-css' => 'd935fc46',
|
||||
'phabricator-remarkup-css' => '6031cfb4',
|
||||
'phabricator-shaped-request' => 'ac53d36a',
|
||||
'phabricator-side-menu-view-css' => 'd935fc46',
|
||||
'phabricator-standard-page-view' => 'd935fc46',
|
||||
'phabricator-side-menu-view-css' => '6031cfb4',
|
||||
'phabricator-standard-page-view' => '6031cfb4',
|
||||
'phabricator-textareautils' => '66dca903',
|
||||
'phabricator-tooltip' => '66dca903',
|
||||
'phabricator-transaction-view-css' => 'd935fc46',
|
||||
'phabricator-zindex-css' => 'd935fc46',
|
||||
'sprite-apps-large-css' => 'd935fc46',
|
||||
'sprite-gradient-css' => 'd935fc46',
|
||||
'sprite-icon-css' => 'd935fc46',
|
||||
'sprite-menu-css' => 'd935fc46',
|
||||
'syntax-highlighting-css' => 'd935fc46',
|
||||
'phabricator-transaction-view-css' => '6031cfb4',
|
||||
'phabricator-zindex-css' => '6031cfb4',
|
||||
'sprite-apps-large-css' => '6031cfb4',
|
||||
'sprite-gradient-css' => '6031cfb4',
|
||||
'sprite-icon-css' => '6031cfb4',
|
||||
'sprite-menu-css' => '6031cfb4',
|
||||
'syntax-highlighting-css' => '6031cfb4',
|
||||
),
|
||||
));
|
||||
|
|
|
@ -87,16 +87,6 @@ final class CeleritySpriteGenerator {
|
|||
$sprites = array();
|
||||
|
||||
$sources = array(
|
||||
'round_bubble' => array(
|
||||
'x' => 26,
|
||||
'y' => 26,
|
||||
'css' => '.phabricator-main-menu-alert-bubble'
|
||||
),
|
||||
'bubble' => array(
|
||||
'x' => 46,
|
||||
'y' => 26,
|
||||
'css' => '.phabricator-main-menu-alert-bubble.alert-unread'
|
||||
),
|
||||
'seen_read_all' => array(
|
||||
'x' => 14,
|
||||
'y' => 14,
|
||||
|
@ -135,6 +125,25 @@ final class CeleritySpriteGenerator {
|
|||
'y' => 25,
|
||||
'css' => '.phabricator-main-menu-logo-image',
|
||||
),
|
||||
'conf-off' => array(
|
||||
'x' => 14,
|
||||
'y' => 14,
|
||||
'css' =>
|
||||
'.alert-notifications .phabricator-main-menu-message-icon',
|
||||
),
|
||||
'conf-hover' => array(
|
||||
'x' => 14,
|
||||
'y' => 14,
|
||||
'css' =>
|
||||
'.alert-notifications:hover .phabricator-main-menu-message-icon',
|
||||
),
|
||||
'conf-unseen' => array(
|
||||
'x' => 14,
|
||||
'y' => 14,
|
||||
'css' =>
|
||||
'.alert-notifications.message-unread '.
|
||||
'.phabricator-main-menu-message-icon',
|
||||
),
|
||||
);
|
||||
|
||||
$scales = array(
|
||||
|
|
|
@ -292,6 +292,59 @@ final class PhabricatorMainMenuView extends AphrontView {
|
|||
require_celerity_resource('phabricator-notification-menu-css');
|
||||
require_celerity_resource('sprite-menu-css');
|
||||
|
||||
$container_classes = array(
|
||||
'sprite-menu',
|
||||
'alert-notifications',
|
||||
);
|
||||
|
||||
$conpherence = id(new PhabricatorApplicationConpherence())->isBeta();
|
||||
$allow_beta =
|
||||
PhabricatorEnv::getEnvConfig('phabricator.show-beta-applications');
|
||||
$message_tag = '';
|
||||
|
||||
if (!$conpherence || $allow_beta) {
|
||||
$message_id = celerity_generate_unique_node_id();
|
||||
$message_count_id = celerity_generate_unique_node_id();
|
||||
|
||||
$unread_status = ConpherenceParticipationStatus::BEHIND;
|
||||
$unread = id(new ConpherenceParticipantQuery())
|
||||
->withParticipantPHIDs(array($user->getPHID()))
|
||||
->withParticipationStatus($unread_status)
|
||||
->execute();
|
||||
$message_count_number = count($unread);
|
||||
if ($message_count_number > 999) {
|
||||
$message_count_number = "\xE2\x88\x9E";
|
||||
}
|
||||
|
||||
$message_count_tag = phutil_render_tag(
|
||||
'span',
|
||||
array(
|
||||
'id' => $message_count_id,
|
||||
'class' => 'phabricator-main-menu-message-count'
|
||||
),
|
||||
phutil_escape_html($message_count_number));
|
||||
|
||||
$message_icon_tag = phutil_render_tag(
|
||||
'span',
|
||||
array(
|
||||
'class' => 'sprite-menu phabricator-main-menu-message-icon',
|
||||
),
|
||||
'');
|
||||
|
||||
if ($message_count_number) {
|
||||
$container_classes[] = 'message-unread';
|
||||
}
|
||||
|
||||
$message_tag = phutil_render_tag(
|
||||
'a',
|
||||
array(
|
||||
'href' => '/conpherence/',
|
||||
'class' => implode(' ', $container_classes),
|
||||
'id' => $message_id,
|
||||
),
|
||||
$message_icon_tag.$message_count_tag);
|
||||
}
|
||||
|
||||
$count_id = celerity_generate_unique_node_id();
|
||||
$dropdown_id = celerity_generate_unique_node_id();
|
||||
$bubble_id = celerity_generate_unique_node_id();
|
||||
|
@ -318,11 +371,6 @@ final class PhabricatorMainMenuView extends AphrontView {
|
|||
),
|
||||
'');
|
||||
|
||||
$container_classes = array(
|
||||
'phabricator-main-menu-alert-bubble',
|
||||
'sprite-menu',
|
||||
'alert-notifications',
|
||||
);
|
||||
if ($count_number) {
|
||||
$container_classes[] = 'alert-unread';
|
||||
}
|
||||
|
@ -354,7 +402,8 @@ final class PhabricatorMainMenuView extends AphrontView {
|
|||
),
|
||||
'');
|
||||
|
||||
return array($bubble_tag, $notification_dropdown);
|
||||
return array(
|
||||
$bubble_tag.$message_tag, $notification_dropdown);
|
||||
}
|
||||
|
||||
private function renderMenuIcon($name) {
|
||||
|
|
|
@ -41,8 +41,6 @@
|
|||
|
||||
.phabricator-main-menu-logo {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
height: 44px;
|
||||
width: 139px;
|
||||
margin-right: 6px;
|
||||
padding-right: 6px;
|
||||
|
@ -248,59 +246,45 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
|
|||
|
||||
*/
|
||||
|
||||
.device-desktop .phabricator-main-menu-alerts {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.device .phabricator-main-menu-alerts {
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
right: 60px;
|
||||
top: 10px;
|
||||
height: 34px;
|
||||
text-align: center;
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.phabricator-main-menu-alert-bubble {
|
||||
.phabricator-main-menu-alerts {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
margin-bottom: 9px;
|
||||
border-radius: 15px;
|
||||
background: rgba(0,0,0,.2);
|
||||
height: 20px;
|
||||
padding: 3px 10px;
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
.phabricator-main-menu-alert-bubble.alert-unread {
|
||||
width: 46px;
|
||||
}
|
||||
|
||||
.phabricator-main-menu-alert-icon {
|
||||
position: absolute;
|
||||
.phabricator-main-menu-alert-icon,
|
||||
.phabricator-main-menu-message-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
top: 5px;
|
||||
left: 6px;
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 2px 0 0 0;
|
||||
}
|
||||
|
||||
.phabricator-main-menu-alert-count {
|
||||
position: absolute;
|
||||
.alert-notifications .phabricator-main-menu-message-icon {
|
||||
margin: 3px 0 0 8px;
|
||||
}
|
||||
|
||||
.phabricator-main-menu-alert-count,
|
||||
.phabricator-main-menu-message-count {
|
||||
font-weight: bold;
|
||||
line-height: 22px;
|
||||
top: 1px;
|
||||
right: 8px;
|
||||
left: 20px;
|
||||
line-height: 20px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
display: none;
|
||||
float: left;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.phabricator-main-menu-alert-item {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
margin: 9px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.alert-unread .phabricator-main-menu-alert-count {
|
||||
.alert-unread .phabricator-main-menu-alert-count,
|
||||
.message-unread .phabricator-main-menu-message-count {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
|
@ -13,19 +13,11 @@ 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 127px;
|
||||
background-size: 140px 88px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.phabricator-main-menu-alert-bubble {
|
||||
background-position: 0px -68px;
|
||||
}
|
||||
|
||||
.phabricator-main-menu-alert-bubble.alert-unread {
|
||||
background-position: 0px -41px;
|
||||
}
|
||||
|
||||
.alert-notifications .phabricator-main-menu-alert-icon {
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
|
@ -35,21 +27,33 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
|
|||
}
|
||||
|
||||
.alert-notifications.alert-unread .phabricator-main-menu-alert-icon {
|
||||
background-position: -27px -68px;
|
||||
background-position: -30px 0px;
|
||||
}
|
||||
|
||||
.phabricator-crumb-divider {
|
||||
background-position: 0px -95px;
|
||||
background-position: 0px -56px;
|
||||
}
|
||||
|
||||
.menu-icon-eye {
|
||||
background-position: -47px -41px;
|
||||
background-position: -10px -56px;
|
||||
}
|
||||
|
||||
.menu-icon-app {
|
||||
background-position: -42px -68px;
|
||||
background-position: -35px -56px;
|
||||
}
|
||||
|
||||
.phabricator-main-menu-logo-image {
|
||||
background-position: 0px -30px;
|
||||
}
|
||||
|
||||
.alert-notifications .phabricator-main-menu-message-icon {
|
||||
background-position: 0px -15px;
|
||||
}
|
||||
|
||||
.alert-notifications:hover .phabricator-main-menu-message-icon {
|
||||
background-position: -15px -15px;
|
||||
}
|
||||
|
||||
.alert-notifications.message-unread .phabricator-main-menu-message-icon {
|
||||
background-position: -30px -15px;
|
||||
}
|
||||
|
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 5.7 KiB |
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 2.4 KiB |