Bartosz Dziewoński has uploaded a new change for review.
https://gerrit.wikimedia.org/r/93115
Change subject: ext.echo.overlay: Show a spinner while waiting for data [WIP]
......................................................................
ext.echo.overlay: Show a spinner while waiting for data [WIP]
The behavior is a little wonky right now, I'll have to think about it.
Bug: 54486
Change-Id: I2c78043e7a8ec699531143abe78e724112ce4e41
---
M Echo.php
M modules/overlay/ext.echo.overlay.css
M modules/overlay/ext.echo.overlay.js
3 files changed, 92 insertions(+), 77 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Echo
refs/changes/15/93115/1
diff --git a/Echo.php b/Echo.php
index 1b604b5..6970a52 100644
--- a/Echo.php
+++ b/Echo.php
@@ -173,6 +173,7 @@
),
'dependencies' => array(
'ext.echo.desktop',
+ 'jquery.spinner',
'mediawiki.util',
'mediawiki.language',
),
diff --git a/modules/overlay/ext.echo.overlay.css
b/modules/overlay/ext.echo.overlay.css
index 8cc7e7e..ca6a2d3 100644
--- a/modules/overlay/ext.echo.overlay.css
+++ b/modules/overlay/ext.echo.overlay.css
@@ -27,6 +27,9 @@
margin: 0;
padding: 0;
overflow: auto;
+ -webkit-transition: max-height 0.2s;
+ -moz-transition: max-height 0.2s;
+ transition: max-height 0.2s;
}
#p-personal .mw-echo-overlay li.mw-echo-notification {
display: block;
@@ -99,6 +102,11 @@
opacity: 1.0;
}
+#mw-echo-overlay-spinner {
+ margin-top: 3em;
+ margin-bottom: 3em;
+}
+
#mw-echo-overlay-footer {
padding: 0px;
border-top: 1px solid #DDDDDD;
diff --git a/modules/overlay/ext.echo.overlay.js
b/modules/overlay/ext.echo.overlay.js
index 6b46223..fe7a7b8 100644
--- a/modules/overlay/ext.echo.overlay.js
+++ b/modules/overlay/ext.echo.overlay.js
@@ -27,9 +27,14 @@
);
},
- buildOverlay: function ( callback ) {
+ buildOverlay: function ( callbackBuilt, callbackFinished ) {
var notificationLimit,
$overlay = $( '<div>' ).addClass(
'mw-echo-overlay' ),
+ $title = $( '<div>' ).addClass(
'mw-echo-overlay-title' ),
+ $ul = $( '<ul>' ).addClass(
'mw-echo-notifications' ),
+ $overlayFooter = $( '<div>' ).attr( 'id',
'mw-echo-overlay-footer' ),
+ $titleAreaHeader,
+ $spinner,
$prefLink = $( '#pt-preferences a' ),
count = 0,
apiData,
@@ -52,22 +57,86 @@
'notprop' : 'index|list|count'
};
+
+ // Build the overlay
+
+ // Add the header to the title area
+ $titleAreaHeader = $( '<div>' )
+ .attr( 'id', 'mw-echo-overlay-title-text' )
+ .appendTo( $title );
+
+ // Add help button
+ $( '<a>' )
+ .attr( 'href', mw.config.get( 'wgEchoHelpPage'
) )
+ .attr( 'title', mw.msg( 'echo-more-info' ) )
+ .attr( 'id', 'mw-echo-overlay-moreinfo-link' )
+ .attr( 'target', '_blank' )
+ .click( function () {
+ mw.echo.logInteraction(
'ui-help-click', 'flyout' );
+ } )
+ .appendTo( $title );
+
+ // add link to notifications archive
+ $( '<a>' )
+ .attr( 'id', 'mw-echo-overlay-link' )
+ .addClass( 'mw-echo-grey-link' )
+ .attr( 'href', mw.util.wikiGetlink(
'Special:Notifications' ) )
+ .text( mw.msg( 'echo-overlay-link' ) )
+ .click( function () {
+ mw.echo.logInteraction(
'ui-archive-link-click', 'flyout' );
+ } )
+ .hover(
+ function() {
+ $( this ).removeClass(
'mw-echo-grey-link' );
+ },
+ function() {
+ $( this ).addClass(
'mw-echo-grey-link' );
+ }
+ )
+ .appendTo( $overlayFooter );
+
+ // add link to notification preferences
+ $( '<a>' )
+ .html( $prefLink.html() )
+ .attr( 'id', 'mw-echo-overlay-pref-link' )
+ .addClass( 'mw-echo-grey-link' )
+ .attr( 'href', $prefLink.attr( 'href' ) +
'#mw-prefsection-echo' )
+ .click( function () {
+ mw.echo.logInteraction(
'ui-prefs-click', 'flyout' );
+ } )
+ .hover(
+ function() {
+ $( this ).removeClass(
'mw-echo-grey-link' );
+ },
+ function() {
+ $( this ).addClass(
'mw-echo-grey-link' );
+ }
+ )
+ .appendTo( $overlayFooter );
+
+ $spinner = $.createSpinner({ size: 'large', type:
'block' })
+ .css({ marginTop: '3em', marginBottom: '3em' })
+ .attr( 'id', 'mw-echo-overlay-spinner' );
+
+ $title.hide();
+ $ul.css( 'max-height', 0 );
+ $overlay.append( $title, $ul, $spinner, $overlayFooter
);
+
+ callbackBuilt( $overlay );
+
api.get( mw.echo.desktop.appendUseLang( apiData )
).done( function ( result ) {
var notifications = result.query.notifications,
unread = [],
unreadTotalCount =
result.query.notifications.count,
unreadRawTotalCount =
result.query.notifications.rawcount,
- $title = $( '<div>' ).addClass(
'mw-echo-overlay-title' ),
- $ul = $( '<ul>' ).addClass(
'mw-echo-notifications' ),
titleText,
overflow,
- $overlayFooter,
$markReadButton;
if ( unreadTotalCount !== undefined ) {
mw.echo.overlay.updateCount(
unreadTotalCount, unreadRawTotalCount );
}
- $ul.css( 'max-height', notificationLimit * 95 +
'px' );
+
$.each( notifications.index, function ( index,
id ) {
var $wrapper,
data = notifications.list[id],
@@ -143,6 +212,12 @@
titleText = mw.msg( 'echo-none' );
}
+ $titleAreaHeader.html( titleText );
+
+ $spinner.remove();
+ $title.show();
+ $ul.css( 'max-height', notificationLimit * 95 +
'px' );
+
// If there are more unread notifications than
can fit in the overlay,
// but fewer than the maximum count, show the
'mark all as read' button.
// The only reason we limit it to the maximum
is to prevent expensive
@@ -166,83 +241,14 @@
count =
result.query.echomarkread.count;
mw.echo.overlay.updateCount( count, result.query.echomarkread.rawcount );
//
Reset header to 'Notifications'
- $(
'#mw-echo-overlay-title-text' ).html( mw.msg( 'echo-overlay-title' ) );
+
$titleAreaHeader.html( mw.msg( 'echo-overlay-title' ) );
}
} );
} );
- $title.append( $markReadButton );
+ $title.prepend( $markReadButton );
}
- // Add the header to the title area
- $( '<div>' )
- .attr( 'id', 'mw-echo-overlay-title-text' )
- .html( titleText )
- .appendTo( $title );
-
- // Add help button
- $( '<a>' )
- .attr( 'href', mw.config.get(
'wgEchoHelpPage' ) )
- .attr( 'title', mw.msg(
'echo-more-info' ) )
- .attr( 'id',
'mw-echo-overlay-moreinfo-link' )
- .attr( 'target', '_blank' )
- .click( function () {
- mw.echo.logInteraction(
'ui-help-click', 'flyout' );
- } )
- .appendTo( $title );
-
- // Insert the title area into the overlay
- $title.appendTo( $overlay );
-
- if ( $ul.find( 'li' ).length ) {
- $ul.appendTo( $overlay );
- }
-
- $overlayFooter = $( '<div>' )
- .attr( 'id', 'mw-echo-overlay-footer' );
-
- // add link to notifications archive
- $overlayFooter.append(
- $( '<a>' )
- .attr( 'id',
'mw-echo-overlay-link' )
- .addClass( 'mw-echo-grey-link' )
- .attr( 'href',
mw.util.wikiGetlink( 'Special:Notifications' ) )
- .text( mw.msg(
'echo-overlay-link' ) )
- .click( function () {
- mw.echo.logInteraction(
'ui-archive-link-click', 'flyout' );
- } )
- .hover(
- function() {
- $( this
).removeClass( 'mw-echo-grey-link' );
- },
- function() {
- $( this
).addClass( 'mw-echo-grey-link' );
- }
- )
- );
-
- // add link to notification preferences
- $overlayFooter.append(
- $( '<a>' )
- .html( $prefLink.html() )
- .attr( 'id',
'mw-echo-overlay-pref-link' )
- .addClass( 'mw-echo-grey-link' )
- .attr( 'href', $prefLink.attr(
'href' ) + '#mw-prefsection-echo' )
- .click( function () {
- mw.echo.logInteraction(
'ui-prefs-click', 'flyout' );
- } )
- .hover(
- function() {
- $( this
).removeClass( 'mw-echo-grey-link' );
- },
- function() {
- $( this
).addClass( 'mw-echo-grey-link' );
- }
- )
- );
-
- $overlay.append( $overlayFooter );
-
- callback( $overlay );
+ callbackFinished( $overlay );
// only need to mark as read if there is unread
item
if ( unread.length > 0 ) {
--
To view, visit https://gerrit.wikimedia.org/r/93115
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I2c78043e7a8ec699531143abe78e724112ce4e41
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Echo
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
