revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-26 16:52:41 +01:00
Code Issues Releases Wiki Activity

Apply AMAZING DESIGN SKILLS to notification menu

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

69
src/__celerity_resource_map__.php
View file

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

6
src/applications/notification/builder/PhabricatorNotificationBuilder.php
View file

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

22
src/applications/notification/view/PhabricatorNotificationStoryView.php
View file

@ -40,26 +40,20 @@ extends PhabricatorNotificationView {
public function render() { public function render() {
$title = $this->title; $classes = array(
'phabricator-notification',
);
if (!$this->viewed) { 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( return phutil_render_tag(
'div', 'div',
array( array(
'class' => 'class' => implode(' ', $classes),
'phabricator-notification '. ),
'phabricator-notification-story-one-line'), $this->title);
$head);
} }
} }

53
src/view/page/PhabricatorStandardPageView.php
View file

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

83
webroot/rsrc/css/application/base/standard-page-view.css
View file

@ -239,57 +239,70 @@ a.handle-disabled {
} }
#phabricator-notification-indicator { .phabricator-icon-menu {
background-color: #0069a6;
text-align: center;
font-size: 20px;
vertical-align: middle;
height: 40px; height: 40px;
width: 40px; width: 60px;
left: -22px;
-moz-user-select: -moz-none; position: relative;
-khtml-user-select: none; cursor: pointer;
-webkit-user-select: none;
-o-user-select: none;
} }
#phabricator-notification-indicator:hover { .phabricator-icon-menu-cell {
cursor: pointer; width: 60px;
background-color: #0089d9; }
.icon-menu-notifications {
background: url(/rsrc/image/notification_menu.png);
}
.phabricator-icon-menu:hover {
background-position: 0 -40px;
}
.phabricator-notification-indicator {
display: none;
} }
.phabricator-notification-indicator-unread { .phabricator-notification-indicator-unread {
font-weight: bold; display: block;
position: absolute;
right: 8px;
top: 2px;
padding: 1px 3px;
background: #dd3333;
border: 1px solid #aa0000;
font-size: 11px;
box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.75);
} }
#phabricator-notification-dropdown { #phabricator-notification-dropdown {
word-wrap: break-word;
overflow-y: auto;
position: absolute; position: absolute;
width: 600px; top: 40px;
height: 300px;
right: 0px;
border: 1px solid #99c4d7;
border-top-width: 0;
background: #fdfdff;
background-color: #f0f0f0; width: 360px;
border: 1px solid darkgrey; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
box-shadow: 3px 3px #ccc;
-webkit-box-shadow: 3px 3px #ccc; font-size: 11px;
-moz-box-shadow: 3px 3px #ccc;
z-index: 3; z-index: 3;
word-wrap: break-word;
overflow-y: auto;
} }
.phabricator-notification-story-head { .phabricator-notification {
border-bottom: 1px solid darkgray; padding: 6px 6px;
padding-top: 2px;
padding-bottom: 2px;
} }
.phabricator-notification-unread {
.phabricator-notification-frame { background: #aacfef;
padding-left: 5px;
padding-right: 10px;
} }

BIN
webroot/rsrc/image/notification_menu.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

15
webroot/rsrc/js/application/aphlict/behavior-aphlict-dropdown.js
View file

@ -1,15 +1,16 @@
/** /**
* @provides javelin-behavior-aphlict-dropdown * @provides javelin-behavior-aphlict-dropdown
* @requires javelin-behavior * @requires javelin-behavior
* javelin-aphlict
* javelin-util
* javelin-request * javelin-request
* javelin-stratcom * javelin-stratcom
* javelin-vector
* javelin-dom
*/ */
JX.behavior('aphlict-dropdown', function(config) { JX.behavior('aphlict-dropdown', function(config) {
var dropdown = JX.$('phabricator-notification-dropdown'); var dropdown = JX.$('phabricator-notification-dropdown');
var indicator = JX.$('phabricator-notification-indicator'); var indicator = JX.$('phabricator-notification-indicator');
var menu = JX.$('phabricator-notification-menu');
var visible = false; var visible = false;
var request = null; var request = null;
@ -52,16 +53,22 @@ JX.behavior('aphlict-dropdown', function(config) {
JX.DOM.listen( JX.DOM.listen(
indicator, menu,
'click', 'click',
null, null,
function(e) { function(e) {
if(visible) { if (visible) {
JX.DOM.hide(dropdown); JX.DOM.hide(dropdown);
} else { } else {
var p = JX.$V(menu);
p.y = null;
p.x -= 6;
p.setPos(dropdown);
JX.DOM.show(dropdown); JX.DOM.show(dropdown);
} }
visible = !visible; visible = !visible;
e.kill();
} }
) )