Apply AMAZING DESIGN SKILLS to notification menu

Summary:
I am a fancy designer!

{F12665} {F12666}

Test Plan: Opened/closed menu. Viewed with-notification-count and without-notification count states.

Reviewers: allenjohnashton, ddfisher, keebuhm

Reviewed By: ddfisher

CC: aran, chad, joe

Maniphest Tasks: T974

Differential Revision: https://secure.phabricator.com/D2735
This commit is contained in:
epriestley
2012-06-14 06:13:53 -07:00
parent 86040227b0
commit 2d7705ea30
7 changed files with 147 additions and 107 deletions

View File

@@ -357,6 +357,13 @@ celerity_register_resource_map(array(
'disk' => '/rsrc/image/icon/unsubscribe.png',
'type' => 'png',
),
'/rsrc/image/notification_menu.png' =>
array(
'hash' => 'f3834ad08a16fc631cd46ceb5db4fb0e',
'uri' => '/res/f3834ad0/rsrc/image/notification_menu.png',
'disk' => '/rsrc/image/notification_menu.png',
'type' => 'png',
),
'/rsrc/image/phabricator_logo.png' =>
array(
'hash' => '7e62ff4001914cb3c87893a228f400c4',
@@ -758,15 +765,15 @@ celerity_register_resource_map(array(
),
'javelin-behavior-aphlict-dropdown' =>
array(
'uri' => '/res/c0b06adb/rsrc/js/application/aphlict/behavior-aphlict-dropdown.js',
'uri' => '/res/425c08fd/rsrc/js/application/aphlict/behavior-aphlict-dropdown.js',
'type' => 'js',
'requires' =>
array(
0 => 'javelin-behavior',
1 => 'javelin-aphlict',
2 => 'javelin-util',
3 => 'javelin-request',
4 => 'javelin-stratcom',
1 => 'javelin-request',
2 => 'javelin-stratcom',
3 => 'javelin-vector',
4 => 'javelin-dom',
),
'disk' => '/rsrc/js/application/aphlict/behavior-aphlict-dropdown.js',
),
@@ -2304,7 +2311,7 @@ celerity_register_resource_map(array(
),
'phabricator-standard-page-view' =>
array(
'uri' => '/res/abebf8a7/rsrc/css/application/base/standard-page-view.css',
'uri' => '/res/fe757493/rsrc/css/application/base/standard-page-view.css',
'type' => 'css',
'requires' =>
array(
@@ -2559,7 +2566,7 @@ celerity_register_resource_map(array(
), array(
'packages' =>
array(
'040e796f' =>
'59b02d20' =>
array(
'name' => 'core.pkg.css',
'symbols' =>
@@ -2588,7 +2595,7 @@ celerity_register_resource_map(array(
21 => 'phabricator-flag-css',
22 => 'aphront-error-view-css',
),
'uri' => '/res/pkg/040e796f/core.pkg.css',
'uri' => '/res/pkg/59b02d20/core.pkg.css',
'type' => 'css',
),
'0c96375e' =>
@@ -2755,20 +2762,20 @@ celerity_register_resource_map(array(
'reverse' =>
array(
'aphront-attached-file-view-css' => '7839ae2d',
'aphront-crumbs-view-css' => '040e796f',
'aphront-dialog-view-css' => '040e796f',
'aphront-error-view-css' => '040e796f',
'aphront-form-view-css' => '040e796f',
'aphront-crumbs-view-css' => '59b02d20',
'aphront-dialog-view-css' => '59b02d20',
'aphront-error-view-css' => '59b02d20',
'aphront-form-view-css' => '59b02d20',
'aphront-headsup-action-list-view-css' => '32f461a4',
'aphront-headsup-view-css' => '040e796f',
'aphront-list-filter-view-css' => '040e796f',
'aphront-pager-view-css' => '040e796f',
'aphront-panel-view-css' => '040e796f',
'aphront-side-nav-view-css' => '040e796f',
'aphront-table-view-css' => '040e796f',
'aphront-tokenizer-control-css' => '040e796f',
'aphront-tooltip-css' => '040e796f',
'aphront-typeahead-control-css' => '040e796f',
'aphront-headsup-view-css' => '59b02d20',
'aphront-list-filter-view-css' => '59b02d20',
'aphront-pager-view-css' => '59b02d20',
'aphront-panel-view-css' => '59b02d20',
'aphront-side-nav-view-css' => '59b02d20',
'aphront-table-view-css' => '59b02d20',
'aphront-tokenizer-control-css' => '59b02d20',
'aphront-tooltip-css' => '59b02d20',
'aphront-typeahead-control-css' => '59b02d20',
'differential-changeset-view-css' => '32f461a4',
'differential-core-view-css' => '32f461a4',
'differential-inline-comment-editor' => '1662d764',
@@ -2834,15 +2841,15 @@ celerity_register_resource_map(array(
'javelin-workflow' => '0c96375e',
'maniphest-task-summary-css' => '7839ae2d',
'maniphest-transaction-detail-css' => '7839ae2d',
'phabricator-app-buttons-css' => '040e796f',
'phabricator-app-buttons-css' => '59b02d20',
'phabricator-content-source-view-css' => '32f461a4',
'phabricator-core-buttons-css' => '040e796f',
'phabricator-core-css' => '040e796f',
'phabricator-directory-css' => '040e796f',
'phabricator-core-buttons-css' => '59b02d20',
'phabricator-core-css' => '59b02d20',
'phabricator-directory-css' => '59b02d20',
'phabricator-drag-and-drop-file-upload' => '1662d764',
'phabricator-dropdown-menu' => '0c96375e',
'phabricator-flag-css' => '040e796f',
'phabricator-jump-nav' => '040e796f',
'phabricator-flag-css' => '59b02d20',
'phabricator-jump-nav' => '59b02d20',
'phabricator-keyboard-shortcut' => '0c96375e',
'phabricator-keyboard-shortcut-manager' => '0c96375e',
'phabricator-menu-item' => '0c96375e',
@@ -2850,11 +2857,11 @@ celerity_register_resource_map(array(
'phabricator-paste-file-upload' => '0c96375e',
'phabricator-prefab' => '0c96375e',
'phabricator-project-tag-css' => '7839ae2d',
'phabricator-remarkup-css' => '040e796f',
'phabricator-remarkup-css' => '59b02d20',
'phabricator-shaped-request' => '1662d764',
'phabricator-standard-page-view' => '040e796f',
'phabricator-standard-page-view' => '59b02d20',
'phabricator-tooltip' => '0c96375e',
'phabricator-transaction-view-css' => '040e796f',
'syntax-highlighting-css' => '040e796f',
'phabricator-transaction-view-css' => '59b02d20',
'syntax-highlighting-css' => '59b02d20',
),
));

View File

@@ -46,10 +46,6 @@ final class PhabricatorNotificationBuilder {
$null_view->appendChild($view);
}
return id(new AphrontNullView())->appendChild(
'<div class="phabricator-notification-frame">'.
$null_view->render().
'</div>');
return $null_view;
}
}

View File

@@ -40,26 +40,20 @@ extends PhabricatorNotificationView {
public function render() {
$title = $this->title;
$classes = array(
'phabricator-notification',
);
if (!$this->viewed) {
$title = '<b>'.$title.'</b>';
$classes[] = 'phabricator-notification-unread';
}
$head = phutil_render_tag(
'div',
array(
'class' => 'phabricator-notification-story-head',
),
nonempty($title, 'Untitled Story'));
return phutil_render_tag(
'div',
array(
'class' =>
'phabricator-notification '.
'phabricator-notification-story-one-line'),
$head);
'class' => implode(' ', $classes),
),
$this->title);
}
}

View File

@@ -381,8 +381,9 @@ final class PhabricatorStandardPageView extends AphrontPageView {
' ');
}
$notification_header = '';
$notification_indicator = '';
$notification_dropdown = '';
$notification_container = '';
if (PhabricatorEnv::getEnvConfig('notification.enabled') &&
$user->isLoggedIn()) {
@@ -404,22 +405,43 @@ final class PhabricatorStandardPageView extends AphrontPageView {
Javelin::initBehavior('aphlict-dropdown', array());
$notification_indicator =
javelin_render_tag(
'td',
array(
'sigil' => 'aphlict-indicator',
'id' => 'phabricator-notification-indicator',
),
id(new PhabricatorFeedStoryNotification)
->countUnread($user));
$notification_count = id(new PhabricatorFeedStoryNotification())
->countUnread($user);
$notification_header =
$notification_indicator.
'<td>'.
'<div id="aphlictswf-container" style="height:1px; width:1px;">'.
'</div>'.
'</td>';
$indicator_classes = array(
'phabricator-notification-indicator',
);
if ($notification_count) {
$indicator_classes[] = 'phabricator-notification-indicator-unread';
}
$notification_indicator = javelin_render_tag(
'div',
array(
'id' => 'phabricator-notification-indicator',
'class' => implode(' ', $indicator_classes),
),
$notification_count);
$notification_indicator = javelin_render_tag(
'div',
array(
'id' => 'phabricator-notification-menu',
'class' => 'phabricator-icon-menu icon-menu-notifications',
'sigil' => 'aphlict-indicator',
),
$notification_indicator);
$notification_indicator = javelin_render_tag(
'td',
array(
'class' => 'phabricator-icon-menu-cell',
),
$notification_indicator);
$notification_container =
'<div id="aphlictswf-container" style="height:0px; width:0px;">'.
'</div>';
$notification_dropdown =
javelin_render_tag(
'div',
@@ -441,6 +463,7 @@ final class PhabricatorStandardPageView extends AphrontPageView {
$custom_logo.
'<a class="logo-standard" href="/"> </a>'.
'</td>'.
$notification_indicator.
'<td>'.
'<table class="phabricator-primary-navigation">'.
'<tr>'.
@@ -460,10 +483,10 @@ final class PhabricatorStandardPageView extends AphrontPageView {
'<td class="phabricator-login-details">'.
$login_stuff.
'</td>'.
$notification_header.
'</tr>'.
'</table>'.
$notification_dropdown;
$notification_dropdown.
$notification_container;
$footer_chrome =
'<div class="phabricator-page-foot">'.
$foot_links.