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

Add loading state to notification menu.

Browse source 
Summary: Notification menu shows a loading message before the menu is populated with the actual response.

Test Plan: Checked by having the function sleep between getting the response and populating the menu.

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D4696
This commit is contained in:
Bryan Cuccioli 2013-01-28 17:34:59 -08:00 committed by epriestley
parent 13eb77fe6c
commit 15e284caa9
3 changed files with 28 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/view/page/menu/PhabricatorMainMenuView.php
View file

@ -390,6 +390,7 @@ final class PhabricatorMainMenuView extends AphrontView {
'bubbleID' => $bubble_id,
'countID' => $count_id,
'dropdownID' => $dropdown_id,
'loadingText' => pht('Loading...'),
));
$notification_dropdown = javelin_render_tag(

6
webroot/rsrc/css/application/base/notification-menu.css
View file

@ -9,6 +9,12 @@
overflow-y: auto;
}
.phabricator-notification-menu-loading {
text-align: center;
padding: 10px 0;
color: #888888;
}
.device-desktop .phabricator-notification-menu {
position: fixed;
width: 360px;

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

@ -14,8 +14,17 @@ JX.behavior('aphlict-dropdown', function(config) {
var bubble = JX.$(config.bubbleID);
var visible = false;
var request = null;
var dirty = true;
function refresh() {
if (dirty) {
JX.DOM.setContent(dropdown, config.loadingText);
JX.DOM.alterClass(
dropdown,
'phabricator-notification-menu-loading',
true);
}
if (request) { //already fetching
return;
}
@ -30,6 +39,11 @@ JX.behavior('aphlict-dropdown', function(config) {
} else {
JX.DOM.alterClass(bubble, 'alert-unread', true);
}
dirty = false;
JX.DOM.alterClass(
dropdown,
'phabricator-notification-menu-loading',
false);
JX.DOM.setContent(dropdown, JX.$H(response.content));
request = null;
});
@ -74,7 +88,9 @@ JX.behavior('aphlict-dropdown', function(config) {
if (visible) {
JX.DOM.hide(dropdown);
} else {
if (dirty) {
refresh();
}
var p = JX.$V(bubble);
p.y = null;
@ -88,5 +104,8 @@ JX.behavior('aphlict-dropdown', function(config) {
}
)
JX.Stratcom.listen('notification-panel-update', null, refresh);
JX.Stratcom.listen('notification-panel-update', null, function() {
dirty = true;
refresh();
});
});