mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-26 08:42:41 +01:00
Improve style of notifications
Summary:
- Gets about 25% of the way toward @chad's notification mocks.
- YES: Hover states, entire notification is a click target, border, header, footer.
- NO: Profile pictures (lazy), timestamps (want to refactor time code before introducing a new formatting style), app icons (they'd look funny without timestamps I think)
- Deletes some old files.
- Mostly trying to get this good enough to turn on by default.
Test Plan: Looked at notifications. Clicked some notifications.
Reviewers: chad, btrahan
Reviewed By: btrahan
CC: aran
Differential Revision: https://secure.phabricator.com/D4119
This commit is contained in:
epriestley
parent
0bd3f3c53e
commit
92678eb050
13 changed files with 149 additions and 89 deletions
|
|
@ -942,7 +942,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'javelin-behavior-aphlict-dropdown' =>
|
||||
array(
|
||||
'uri' => '/res/e9b6fd18/rsrc/js/application/aphlict/behavior-aphlict-dropdown.js',
|
||||
'uri' => '/res/f09bc90d/rsrc/js/application/aphlict/behavior-aphlict-dropdown.js',
|
||||
'type' => 'js',
|
||||
'requires' =>
|
||||
array(
|
||||
|
|
@ -951,6 +951,7 @@ celerity_register_resource_map(array(
|
|||
2 => 'javelin-stratcom',
|
||||
3 => 'javelin-vector',
|
||||
4 => 'javelin-dom',
|
||||
5 => 'javelin-uri',
|
||||
),
|
||||
'disk' => '/rsrc/js/application/aphlict/behavior-aphlict-dropdown.js',
|
||||
),
|
||||
|
|
@ -2638,7 +2639,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'phabricator-notification-menu-css' =>
|
||||
array(
|
||||
'uri' => '/res/b0d1caec/rsrc/css/application/base/notification-menu.css',
|
||||
'uri' => '/res/a9ff4f31/rsrc/css/application/base/notification-menu.css',
|
||||
'type' => 'css',
|
||||
'requires' =>
|
||||
array(
|
||||
|
|
@ -3192,7 +3193,7 @@ celerity_register_resource_map(array(
|
|||
), array(
|
||||
'packages' =>
|
||||
array(
|
||||
'668bdb91' =>
|
||||
'6e75f775' =>
|
||||
array(
|
||||
'name' => 'core.pkg.css',
|
||||
'symbols' =>
|
||||
|
|
@ -3236,10 +3237,10 @@ celerity_register_resource_map(array(
|
|||
36 => 'phabricator-crumbs-view-css',
|
||||
37 => 'phabricator-object-item-list-view-css',
|
||||
),
|
||||
'uri' => '/res/pkg/668bdb91/core.pkg.css',
|
||||
'uri' => '/res/pkg/6e75f775/core.pkg.css',
|
||||
'type' => 'css',
|
||||
),
|
||||
'5673560d' =>
|
||||
'5bcc25b6' =>
|
||||
array(
|
||||
'name' => 'core.pkg.js',
|
||||
'symbols' =>
|
||||
|
|
@ -3276,7 +3277,7 @@ celerity_register_resource_map(array(
|
|||
29 => 'phabricator-textareautils',
|
||||
30 => 'phabricator-file-upload',
|
||||
),
|
||||
'uri' => '/res/pkg/5673560d/core.pkg.js',
|
||||
'uri' => '/res/pkg/5bcc25b6/core.pkg.js',
|
||||
'type' => 'js',
|
||||
),
|
||||
'3c5efda9' =>
|
||||
|
|
@ -3424,20 +3425,20 @@ celerity_register_resource_map(array(
|
|||
'reverse' =>
|
||||
array(
|
||||
'aphront-attached-file-view-css' => '7839ae2d',
|
||||
'aphront-crumbs-view-css' => '668bdb91',
|
||||
'aphront-dialog-view-css' => '668bdb91',
|
||||
'aphront-error-view-css' => '668bdb91',
|
||||
'aphront-form-view-css' => '668bdb91',
|
||||
'aphront-crumbs-view-css' => '6e75f775',
|
||||
'aphront-dialog-view-css' => '6e75f775',
|
||||
'aphront-error-view-css' => '6e75f775',
|
||||
'aphront-form-view-css' => '6e75f775',
|
||||
'aphront-headsup-action-list-view-css' => 'c904bbee',
|
||||
'aphront-headsup-view-css' => '668bdb91',
|
||||
'aphront-list-filter-view-css' => '668bdb91',
|
||||
'aphront-pager-view-css' => '668bdb91',
|
||||
'aphront-panel-view-css' => '668bdb91',
|
||||
'aphront-side-nav-view-css' => '668bdb91',
|
||||
'aphront-table-view-css' => '668bdb91',
|
||||
'aphront-tokenizer-control-css' => '668bdb91',
|
||||
'aphront-tooltip-css' => '668bdb91',
|
||||
'aphront-typeahead-control-css' => '668bdb91',
|
||||
'aphront-headsup-view-css' => '6e75f775',
|
||||
'aphront-list-filter-view-css' => '6e75f775',
|
||||
'aphront-pager-view-css' => '6e75f775',
|
||||
'aphront-panel-view-css' => '6e75f775',
|
||||
'aphront-side-nav-view-css' => '6e75f775',
|
||||
'aphront-table-view-css' => '6e75f775',
|
||||
'aphront-tokenizer-control-css' => '6e75f775',
|
||||
'aphront-tooltip-css' => '6e75f775',
|
||||
'aphront-typeahead-control-css' => '6e75f775',
|
||||
'differential-changeset-view-css' => 'c904bbee',
|
||||
'differential-core-view-css' => 'c904bbee',
|
||||
'differential-inline-comment-editor' => '7ecd31fa',
|
||||
|
|
@ -3452,18 +3453,18 @@ celerity_register_resource_map(array(
|
|||
'diffusion-commit-view-css' => 'c8ce2d88',
|
||||
'diffusion-icons-css' => 'c8ce2d88',
|
||||
'inline-comment-summary-css' => 'c904bbee',
|
||||
'javelin-aphlict' => '5673560d',
|
||||
'javelin-aphlict' => '5bcc25b6',
|
||||
'javelin-behavior' => 'db6d724d',
|
||||
'javelin-behavior-aphlict-dropdown' => '5673560d',
|
||||
'javelin-behavior-aphlict-listen' => '5673560d',
|
||||
'javelin-behavior-aphront-basic-tokenizer' => '5673560d',
|
||||
'javelin-behavior-aphlict-dropdown' => '5bcc25b6',
|
||||
'javelin-behavior-aphlict-listen' => '5bcc25b6',
|
||||
'javelin-behavior-aphront-basic-tokenizer' => '5bcc25b6',
|
||||
'javelin-behavior-aphront-drag-and-drop' => '7ecd31fa',
|
||||
'javelin-behavior-aphront-drag-and-drop-textarea' => '7ecd31fa',
|
||||
'javelin-behavior-aphront-form-disable-on-submit' => '5673560d',
|
||||
'javelin-behavior-aphront-form-disable-on-submit' => '5bcc25b6',
|
||||
'javelin-behavior-audit-preview' => '5e68be89',
|
||||
'javelin-behavior-dark-console' => '3c5efda9',
|
||||
'javelin-behavior-dark-console-ajax' => '3c5efda9',
|
||||
'javelin-behavior-device' => '5673560d',
|
||||
'javelin-behavior-device' => '5bcc25b6',
|
||||
'javelin-behavior-differential-accept-with-errors' => '7ecd31fa',
|
||||
'javelin-behavior-differential-add-reviewers-and-ccs' => '7ecd31fa',
|
||||
'javelin-behavior-differential-comment-jump' => '7ecd31fa',
|
||||
|
|
@ -3479,27 +3480,27 @@ celerity_register_resource_map(array(
|
|||
'javelin-behavior-diffusion-commit-graph' => '5e68be89',
|
||||
'javelin-behavior-diffusion-pull-lastmodified' => '5e68be89',
|
||||
'javelin-behavior-error-log' => '3c5efda9',
|
||||
'javelin-behavior-konami' => '5673560d',
|
||||
'javelin-behavior-lightbox-attachments' => '5673560d',
|
||||
'javelin-behavior-konami' => '5bcc25b6',
|
||||
'javelin-behavior-lightbox-attachments' => '5bcc25b6',
|
||||
'javelin-behavior-maniphest-batch-selector' => '7707de41',
|
||||
'javelin-behavior-maniphest-subpriority-editor' => '7707de41',
|
||||
'javelin-behavior-maniphest-transaction-controls' => '7707de41',
|
||||
'javelin-behavior-maniphest-transaction-expand' => '7707de41',
|
||||
'javelin-behavior-maniphest-transaction-preview' => '7707de41',
|
||||
'javelin-behavior-phabricator-active-nav' => '5673560d',
|
||||
'javelin-behavior-phabricator-autofocus' => '5673560d',
|
||||
'javelin-behavior-phabricator-keyboard-shortcuts' => '5673560d',
|
||||
'javelin-behavior-phabricator-nav' => '5673560d',
|
||||
'javelin-behavior-phabricator-active-nav' => '5bcc25b6',
|
||||
'javelin-behavior-phabricator-autofocus' => '5bcc25b6',
|
||||
'javelin-behavior-phabricator-keyboard-shortcuts' => '5bcc25b6',
|
||||
'javelin-behavior-phabricator-nav' => '5bcc25b6',
|
||||
'javelin-behavior-phabricator-object-selector' => '7ecd31fa',
|
||||
'javelin-behavior-phabricator-oncopy' => '5673560d',
|
||||
'javelin-behavior-phabricator-remarkup-assist' => '5673560d',
|
||||
'javelin-behavior-phabricator-search-typeahead' => '5673560d',
|
||||
'javelin-behavior-phabricator-tooltips' => '5673560d',
|
||||
'javelin-behavior-phabricator-watch-anchor' => '5673560d',
|
||||
'javelin-behavior-refresh-csrf' => '5673560d',
|
||||
'javelin-behavior-phabricator-oncopy' => '5bcc25b6',
|
||||
'javelin-behavior-phabricator-remarkup-assist' => '5bcc25b6',
|
||||
'javelin-behavior-phabricator-search-typeahead' => '5bcc25b6',
|
||||
'javelin-behavior-phabricator-tooltips' => '5bcc25b6',
|
||||
'javelin-behavior-phabricator-watch-anchor' => '5bcc25b6',
|
||||
'javelin-behavior-refresh-csrf' => '5bcc25b6',
|
||||
'javelin-behavior-repository-crossreference' => '7ecd31fa',
|
||||
'javelin-behavior-toggle-class' => '5673560d',
|
||||
'javelin-behavior-workflow' => '5673560d',
|
||||
'javelin-behavior-toggle-class' => '5bcc25b6',
|
||||
'javelin-behavior-workflow' => '5bcc25b6',
|
||||
'javelin-dom' => 'db6d724d',
|
||||
'javelin-event' => 'db6d724d',
|
||||
'javelin-install' => 'db6d724d',
|
||||
|
|
@ -3518,48 +3519,48 @@ celerity_register_resource_map(array(
|
|||
'javelin-util' => 'db6d724d',
|
||||
'javelin-vector' => 'db6d724d',
|
||||
'javelin-workflow' => 'db6d724d',
|
||||
'lightbox-attachment-css' => '668bdb91',
|
||||
'lightbox-attachment-css' => '6e75f775',
|
||||
'maniphest-task-summary-css' => '7839ae2d',
|
||||
'maniphest-transaction-detail-css' => '7839ae2d',
|
||||
'phabricator-app-buttons-css' => '668bdb91',
|
||||
'phabricator-busy' => '5673560d',
|
||||
'phabricator-app-buttons-css' => '6e75f775',
|
||||
'phabricator-busy' => '5bcc25b6',
|
||||
'phabricator-content-source-view-css' => 'c904bbee',
|
||||
'phabricator-core-buttons-css' => '668bdb91',
|
||||
'phabricator-core-css' => '668bdb91',
|
||||
'phabricator-crumbs-view-css' => '668bdb91',
|
||||
'phabricator-directory-css' => '668bdb91',
|
||||
'phabricator-core-buttons-css' => '6e75f775',
|
||||
'phabricator-core-css' => '6e75f775',
|
||||
'phabricator-crumbs-view-css' => '6e75f775',
|
||||
'phabricator-directory-css' => '6e75f775',
|
||||
'phabricator-drag-and-drop-file-upload' => '7ecd31fa',
|
||||
'phabricator-dropdown-menu' => '5673560d',
|
||||
'phabricator-file-upload' => '5673560d',
|
||||
'phabricator-filetree-view-css' => '668bdb91',
|
||||
'phabricator-flag-css' => '668bdb91',
|
||||
'phabricator-form-view-css' => '668bdb91',
|
||||
'phabricator-header-view-css' => '668bdb91',
|
||||
'phabricator-jump-nav' => '668bdb91',
|
||||
'phabricator-keyboard-shortcut' => '5673560d',
|
||||
'phabricator-keyboard-shortcut-manager' => '5673560d',
|
||||
'phabricator-main-menu-view' => '668bdb91',
|
||||
'phabricator-menu-item' => '5673560d',
|
||||
'phabricator-nav-view-css' => '668bdb91',
|
||||
'phabricator-notification' => '5673560d',
|
||||
'phabricator-notification-css' => '668bdb91',
|
||||
'phabricator-notification-menu-css' => '668bdb91',
|
||||
'phabricator-object-item-list-view-css' => '668bdb91',
|
||||
'phabricator-dropdown-menu' => '5bcc25b6',
|
||||
'phabricator-file-upload' => '5bcc25b6',
|
||||
'phabricator-filetree-view-css' => '6e75f775',
|
||||
'phabricator-flag-css' => '6e75f775',
|
||||
'phabricator-form-view-css' => '6e75f775',
|
||||
'phabricator-header-view-css' => '6e75f775',
|
||||
'phabricator-jump-nav' => '6e75f775',
|
||||
'phabricator-keyboard-shortcut' => '5bcc25b6',
|
||||
'phabricator-keyboard-shortcut-manager' => '5bcc25b6',
|
||||
'phabricator-main-menu-view' => '6e75f775',
|
||||
'phabricator-menu-item' => '5bcc25b6',
|
||||
'phabricator-nav-view-css' => '6e75f775',
|
||||
'phabricator-notification' => '5bcc25b6',
|
||||
'phabricator-notification-css' => '6e75f775',
|
||||
'phabricator-notification-menu-css' => '6e75f775',
|
||||
'phabricator-object-item-list-view-css' => '6e75f775',
|
||||
'phabricator-object-selector-css' => 'c904bbee',
|
||||
'phabricator-paste-file-upload' => '5673560d',
|
||||
'phabricator-prefab' => '5673560d',
|
||||
'phabricator-paste-file-upload' => '5bcc25b6',
|
||||
'phabricator-prefab' => '5bcc25b6',
|
||||
'phabricator-project-tag-css' => '7839ae2d',
|
||||
'phabricator-remarkup-css' => '668bdb91',
|
||||
'phabricator-remarkup-css' => '6e75f775',
|
||||
'phabricator-shaped-request' => '7ecd31fa',
|
||||
'phabricator-side-menu-view-css' => '668bdb91',
|
||||
'phabricator-standard-page-view' => '668bdb91',
|
||||
'phabricator-textareautils' => '5673560d',
|
||||
'phabricator-tooltip' => '5673560d',
|
||||
'phabricator-transaction-view-css' => '668bdb91',
|
||||
'sprite-apps-large-css' => '668bdb91',
|
||||
'sprite-gradient-css' => '668bdb91',
|
||||
'sprite-icon-css' => '668bdb91',
|
||||
'sprite-menu-css' => '668bdb91',
|
||||
'syntax-highlighting-css' => '668bdb91',
|
||||
'phabricator-side-menu-view-css' => '6e75f775',
|
||||
'phabricator-standard-page-view' => '6e75f775',
|
||||
'phabricator-textareautils' => '5bcc25b6',
|
||||
'phabricator-tooltip' => '5bcc25b6',
|
||||
'phabricator-transaction-view-css' => '6e75f775',
|
||||
'sprite-apps-large-css' => '6e75f775',
|
||||
'sprite-gradient-css' => '6e75f775',
|
||||
'sprite-icon-css' => '6e75f775',
|
||||
'sprite-menu-css' => '6e75f775',
|
||||
'syntax-highlighting-css' => '6e75f775',
|
||||
),
|
||||
));
|
||||
|
|
|
|||
|
|
@ -16,6 +16,9 @@ final class PhabricatorFeedStoryDifferential extends PhabricatorFeedStory {
|
|||
$view->setTitle($line);
|
||||
$view->setEpoch($data->getEpoch());
|
||||
|
||||
$href = $this->getHandle($data->getValue('revision_phid'))->getURI();
|
||||
$view->setHref($href);
|
||||
|
||||
$action = $data->getValue('action');
|
||||
switch ($action) {
|
||||
case DifferentialAction::ACTION_CREATE:
|
||||
|
|
|
|||
|
|
@ -59,6 +59,9 @@ final class PhabricatorFeedStoryDifferentialAggregate
|
|||
$view->setViewed($this->getHasViewed());
|
||||
$view->setTitle($title);
|
||||
|
||||
$href = $this->getHandle($data->getValue('revision_phid'))->getURI();
|
||||
$view->setHref($href);
|
||||
|
||||
return $view;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -41,6 +41,9 @@ final class PhabricatorFeedStoryManiphest
|
|||
$view->setOneLineStory(true);
|
||||
}
|
||||
|
||||
$href = $this->getHandle($data->getValue('taskPHID'))->getURI();
|
||||
$view->setHref($href);
|
||||
|
||||
return $view;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -59,6 +59,9 @@ final class PhabricatorFeedStoryManiphestAggregate
|
|||
$view->setViewed($this->getHasViewed());
|
||||
$view->setTitle($title);
|
||||
|
||||
$href = $this->getHandle($data->getValue('taskPHID'))->getURI();
|
||||
$view->setHref($href);
|
||||
|
||||
return $view;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ final class PhabricatorFeedStoryView extends PhabricatorFeedView {
|
|||
private $epoch;
|
||||
private $viewer;
|
||||
private $viewed;
|
||||
private $href;
|
||||
|
||||
private $oneLine;
|
||||
|
||||
|
|
@ -45,6 +46,15 @@ final class PhabricatorFeedStoryView extends PhabricatorFeedView {
|
|||
return $this->viewed;
|
||||
}
|
||||
|
||||
public function setHref($href) {
|
||||
$this->href = $href;
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function getHref() {
|
||||
return $this->href;
|
||||
}
|
||||
|
||||
public function renderNotification() {
|
||||
$classes = array(
|
||||
'phabricator-notification',
|
||||
|
|
@ -54,10 +64,14 @@ final class PhabricatorFeedStoryView extends PhabricatorFeedView {
|
|||
$classes[] = 'phabricator-notification-unread';
|
||||
}
|
||||
|
||||
return phutil_render_tag(
|
||||
return javelin_render_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => implode(' ', $classes),
|
||||
'sigil' => 'notification',
|
||||
'meta' => array(
|
||||
'href' => $this->getHref(),
|
||||
),
|
||||
),
|
||||
$this->title);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,8 +26,12 @@ final class PhabricatorNotificationPanelController
|
|||
'</div>';
|
||||
}
|
||||
|
||||
$content .=
|
||||
'<div class="phabricator-notification view-all-notifications">'.
|
||||
$content =
|
||||
'<div class="phabricator-notification-header">'.
|
||||
pht('Notifications').
|
||||
'</div>'.
|
||||
$content.
|
||||
'<div class="phabricator-notification-view-all">'.
|
||||
phutil_render_tag(
|
||||
'a',
|
||||
array(
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
|
@ -16,18 +16,26 @@
|
|||
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
|
||||
z-index: 9;
|
||||
|
||||
border: 1px solid #33393d;
|
||||
border: 2px solid #33393d;
|
||||
border-top-width: 0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.device .phabricator-notification-menu {
|
||||
border-bottom: 1px solid #222222;
|
||||
}
|
||||
|
||||
|
||||
.phabricator-notification {
|
||||
padding: 6px 6px;
|
||||
margin: 1px 0;
|
||||
padding: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.device-desktop .phabricator-notification:hover {
|
||||
background: #f4f6f9;
|
||||
}
|
||||
|
||||
.phabricator-notification + .phabricator-notification {
|
||||
border-top: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
.no-notifications {
|
||||
|
|
@ -43,9 +51,17 @@
|
|||
background: #aacfef;
|
||||
}
|
||||
|
||||
.view-all-notifications {
|
||||
.phabricator-notification-header {
|
||||
font-weight: bold;
|
||||
padding: 6px;
|
||||
font-size: 12px;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
.phabricator-notification-view-all {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
background: #eeeeee;
|
||||
border-top: 1px solid #dddddd;
|
||||
background: #f7f7f7;
|
||||
border-top: 1px solid #e9e9e9;
|
||||
padding: 6px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
* javelin-stratcom
|
||||
* javelin-vector
|
||||
* javelin-dom
|
||||
* javelin-uri
|
||||
*/
|
||||
|
||||
JX.behavior('aphlict-dropdown', function(config) {
|
||||
|
|
@ -39,13 +40,25 @@ JX.behavior('aphlict-dropdown', function(config) {
|
|||
'click',
|
||||
null,
|
||||
function(e) {
|
||||
if(e.getNode('phabricator-notification-menu')) {
|
||||
// Click is inside the dropdown.
|
||||
if (!e.getNode('phabricator-notification-menu')) {
|
||||
// Click outside the dropdown; hide it.
|
||||
JX.DOM.hide(dropdown);
|
||||
visible = false;
|
||||
return;
|
||||
}
|
||||
|
||||
JX.DOM.hide(dropdown);
|
||||
visible = false;
|
||||
if (e.getNode('tag:a')) {
|
||||
// User clicked a link, just follow the link.
|
||||
return;
|
||||
}
|
||||
|
||||
// If the user clicked a notification (but missed a link) and it has a
|
||||
// primary URI, go there.
|
||||
var href = e.getNodeData('notification').href;
|
||||
if (href) {
|
||||
JX.$U(href).go();
|
||||
e.kill();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue