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

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
This commit is contained in:
Chad Little 2013-01-26 17:04:18 -08:00
parent 251a7b0602
commit dca2048bab
14 changed files with 174 additions and 123 deletions

View file

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View file

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

View file

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

View file

@ -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) {

View file

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

View file

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB