Mooeypoo has uploaded a new change for review.
https://gerrit.wikimedia.org/r/237509
Change subject: [wip] OOUIfying Echo in MobileFrontend
......................................................................
[wip] OOUIfying Echo in MobileFrontend
Change-Id: I48ab73f9bb96c57230c7a3488ce40a6e9c476619
---
M includes/Resources.php
M resources/mobile.notifications.overlay/NotificationsOverlay.js
M resources/mobile.notifications.overlay/NotificationsOverlay.less
3 files changed, 76 insertions(+), 136 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/09/237509/1
diff --git a/includes/Resources.php b/includes/Resources.php
index 08f493e..aa64cba 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -282,6 +282,7 @@
'mobile.mainMenu' => $wgMFResourceFileModuleBoilerplate + array(
'dependencies' => array(
'mobile.view',
+ 'mobile.browser'
),
'position' => 'bottom',
'styles' => array(
@@ -1402,7 +1403,8 @@
'mobile.notifications.overlay' => $wgMFResourceFileModuleBoilerplate +
array(
'dependencies' => array(
'mobile.overlays',
- 'ext.echo.logger',
+ 'ext.echo.ui',
+ // 'ext.echo.logger',
),
'scripts' => array(
'resources/mobile.notifications.overlay/NotificationsOverlay.js',
diff --git a/resources/mobile.notifications.overlay/NotificationsOverlay.js
b/resources/mobile.notifications.overlay/NotificationsOverlay.js
index 2276654..1453fa6 100644
--- a/resources/mobile.notifications.overlay/NotificationsOverlay.js
+++ b/resources/mobile.notifications.overlay/NotificationsOverlay.js
@@ -12,9 +12,6 @@
*/
NotificationsOverlay = Overlay.extend( {
className: 'overlay notifications-overlay navigation-drawer',
- templatePartials: {
- content: mw.template.get(
'mobile.notifications.overlay', 'content.hogan' )
- },
/**
* @inheritdoc
* @cfg {Object} defaults Default options hash.
@@ -45,93 +42,29 @@
},
/** @inheritdoc */
initialize: function ( options ) {
- var self = this;
- Overlay.prototype.initialize.apply( this, options );
- // Anchor tag that corresponds to a notifications badge
- this.$badge = options.$badge;
- // On error use the url as a fallback
- if ( options.error ) {
- this.onError();
- } else {
- // FIXME: Move to NotificationApi class
- api.get( {
- action: 'query',
- meta: 'notifications',
- notformat: 'flyout',
- notprop: 'index|list|count',
- uselang: 'user'
- } ).done( function ( result ) {
- var notifications;
- if ( result.query &&
result.query.notifications ) {
- notifications = $.map(
result.query.notifications.list, function ( a ) {
- return {
- message: a['*'],
- timestamp:
a.timestamp.mw
- };
- } ).sort( function ( a, b ) {
- return a.timestamp <
b.timestamp ? 1 : -1;
- } );
- if ( notifications.length ) {
- options.notifications =
notifications;
- } else {
- options.errorMessage =
mw.msg( 'echo-none' );
- }
-
- self.render( options );
- self.$( '.mw-echo-notification'
).each( function () {
- var $notification = $(
this ),
- $primaryLink =
$notification.find( '.mw-echo-notification-primary-link' ),
- eventId =
$notification.attr( 'data-notification-event' ),
- eventType =
$notification.attr( 'data-notification-type' );
-
- // If there is a
primary link, make the entire notification clickable.
- if (
$primaryLink.length ) {
-
$notification.addClass( 'mw-echo-linked-notification' );
-
$notification.on( 'click', function () {
-
mw.echo.logger.logInteraction(
-
mw.echo.Logger.static.actions.notificationClick,
-
'mobile-overlay',
-
eventId,
-
eventType,
-
true
- );
-
window.location.href = $primaryLink.attr( 'href' );
- } );
- }
- // Log notification
impression
-
mw.echo.logger.logInteraction(
-
mw.echo.Logger.static.actions.notificationImpression,
-
'mobile-overlay',
- eventId,
- eventType,
- true
- );
- } );
- // Only fire 'mark as read' API
call when unread notification
- // count is not zero.
Question: why does this fire an API call
- // for 'mark all as read', the
overlay may not load all unread
- // notifications
- if (
result.query.notifications.rawcount !== 0 ) {
- self.markAllAsRead();
- }
- } else {
- self.onError();
+ var model = new mw.echo.dm.NotificationsModel( {
+ type: 'alert',
+ limit: 25,
+ userLang: mw.config.get(
'wgUserLanguage' )
+ } ),
+ // Notifications widget
+ notificationsWidget = new
mw.echo.ui.NotificationsWidget(
+ model,
+ {
+ type: 'alert'
+ // markReadWhenSeen:
this.markReadWhenSeen
}
- } ).fail( function () {
- self.onError();
+ );
+ // var self = this;
+ Overlay.prototype.initialize.apply( this, options );
+
+ this.$( '.overlay-content' ).append(
notificationsWidget.$element );
+
+ notificationsWidget.pushPending();
+ model.fetchNotifications()
+ .then( function () {
+ notificationsWidget.popPending();
} );
- }
- },
- /**
- * Mark notifications as read in the server. Make an API
request.
- * @method
- */
- markAllAsRead: function () {
- // FIXME: Move to NotificationApi class
- api.postWithToken( 'edit', {
- action: 'echomarkread',
- all: true
- } );
},
/** @inheritdoc */
preRender: function () {
@@ -141,11 +74,11 @@
postRender: function () {
Overlay.prototype.postRender.apply( this );
- if ( this.options.notifications ||
this.options.errorMessage ) {
- this.$( '.loading' ).remove();
- // Reset the badge
- this.markAsRead();
- }
+ // if ( this.options.notifications ||
this.options.errorMessage ) {
+ // this.$( '.loading' ).remove();
+ // // Reset the badge
+ // this.markAsRead();
+ // }
}
} );
diff --git a/resources/mobile.notifications.overlay/NotificationsOverlay.less
b/resources/mobile.notifications.overlay/NotificationsOverlay.less
index 8f25b39..93a19c5 100644
--- a/resources/mobile.notifications.overlay/NotificationsOverlay.less
+++ b/resources/mobile.notifications.overlay/NotificationsOverlay.less
@@ -20,54 +20,59 @@
bottom: @headerHeight;
width: 100%;
margin-top: 1px;
- }
+ padding-bottom: 0;
- .mw-echo-icon {
- width: 30px;
- height: 30px;
- float: left;
- margin: 0 10px 0 0;
- }
-
- .mw-echo-content {
- margin-left: 40px;
- font-size: .9em;
- line-height: 1.4;
- }
-
- .mw-echo-notification-footer {
- margin-top: .6em;
- font-size: .9em;
- }
-
- .mw-echo-notification-primary-link {
- display: none;
- }
-
- .mw-echo-notification {
- padding: 1.2em 1em 1em;
- border-bottom: 1px solid @colorGray14;
- // FIXME: ARgghghghg more grays - think of the children!
- background: #F8F8F8;
-
- &:hover {
- // FIXME: Yet another gray..
- background-color: @colorGray15;
+ .mw-echo-ui-notificationsWidget {
+ top: @headerHeight;
+ height: 100%;
}
}
- .mw-echo-linked-notification {
- cursor: pointer;
- }
+ // .mw-echo-icon {
+ // width: 30px;
+ // height: 30px;
+ // float: left;
+ // margin: 0 10px 0 0;
+ // }
- .mw-echo-title {
- font-size: 1em;
- line-height: 1.4;
- }
+ // .mw-echo-content {
+ // margin-left: 40px;
+ // line-height: 1.4;
+ // }
- .mw-echo-payload {
- margin-top: .4em
- }
+ // .mw-echo-notification-footer {
+ // margin-top: .6em;
+ // font-size: .9em;
+ // }
+
+ // .mw-echo-notification-primary-link {
+ // display: none;
+ // }
+
+ // // .mw-echo-notification {
+ // // padding: 1.2em 1em 1em;
+ // // border-bottom: 1px solid @colorGray14;
+ // // // FIXME: ARgghghghg more grays - think of the children!
+ // // background: #F8F8F8;
+
+ // // &:hover {
+ // // // FIXME: Yet another gray..
+ // // background-color: @colorGray15;
+ // // }
+ // // }
+
+ // // .mw-echo-linked-notification {
+ // // cursor: pointer;
+ // // }
+
+ // .mw-echo-title {
+ // font-size: 1em;
+ // line-height: 1.4;
+ // }
+
+ // .mw-echo-payload {
+ // margin-top: .4em
+ // }
.user-button {
position: absolute;
--
To view, visit https://gerrit.wikimedia.org/r/237509
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I48ab73f9bb96c57230c7a3488ce40a6e9c476619
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
