Kmuthu has uploaded a new change for review.
https://gerrit.wikimedia.org/r/323348
Change subject: [WIP]Make mobile-friendly version of the Notifications page
left nav
......................................................................
[WIP]Make mobile-friendly version of the Notifications page left nav
Bug: T139525
Change-Id: I94d43fc59b259fce844c7391c0dbcf995c7c3e89
---
M includes/MobileFrontend.hooks.php
A resources/mobile.notifications.filter.overlay/NotificationsFilterOverlay.js
A resources/mobile.notifications.filter.overlay/NotificationsFilterOverlay.less
A resources/mobile.notifications.overlay/SpecialNotificationsOverlay.less
M resources/skins.minerva.notifications/init.js
M resources/skins.minerva.special.styles/common.less
6 files changed, 304 insertions(+), 2 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/48/323348/1
diff --git a/includes/MobileFrontend.hooks.php
b/includes/MobileFrontend.hooks.php
index 3fd6889..e4ac3ce 100644
--- a/includes/MobileFrontend.hooks.php
+++ b/includes/MobileFrontend.hooks.php
@@ -1081,6 +1081,9 @@
'scripts' => [
'resources/skins.minerva.notifications/init.js',
],
+ 'styles' => [
+
'resources/mobile.notifications.overlay/SpecialNotificationsOverlay.less',
+ ],
'targets' => [ 'mobile', 'desktop' ],
],
'mobile.notifications.overlay' =>
$resourceBoilerplate + [
@@ -1108,6 +1111,46 @@
] );
};
+ // add Echo, if it's installed
+ if ( class_exists( 'MWEchoNotifUser' ) ) {
+ $resourceLoader->register( [
+ 'skins.minerva.notifications.filter' =>
$resourceBoilerplate + [
+ 'dependencies' => [
+ 'mobile.overlays',
+ 'mediawiki.router',
+ 'skins.minerva.scripts',
+ 'mediawiki.ui.anchor'
+ ],
+ 'scripts' => [
+
'resources/skins.minerva.notifications/init.js',
+ ],
+ 'targets' => [ 'mobile', 'desktop' ],
+ ],
+ 'mobile.notifications.filter.overlay'
=> $resourceBoilerplate + [
+ 'dependencies' => [
+ 'mediawiki.util',
+ 'mobile.overlays',
+ 'ext.echo.ui',
+ 'ext.echo.badgeicons',
+ ],
+ 'scripts' => [
+
'resources/mobile.notifications.filter.overlay/NotificationsFilterOverlay.js',
+ ],
+ 'styles' => [
+
'resources/mobile.notifications.filter.overlay/NotificationsFilterOverlay.less',
+ ],
+ 'messages' => [
+ // defined in Echo
+ 'echo-none',
+ 'notifications',
+ 'echo-overlay-link',
+
'echo-mark-all-as-read-confirmation',
+ ],
+ 'targets' => [ 'mobile', 'desktop' ],
+ ],
+ ] );
+ };
+
return true;
}
diff --git
a/resources/mobile.notifications.filter.overlay/NotificationsFilterOverlay.js
b/resources/mobile.notifications.filter.overlay/NotificationsFilterOverlay.js
new file mode 100644
index 0000000..14e698d
--- /dev/null
+++
b/resources/mobile.notifications.filter.overlay/NotificationsFilterOverlay.js
@@ -0,0 +1,63 @@
+( function ( M, $ ) {
+ var Overlay = M.require( 'mobile.overlays/Overlay' ),
+ NotificationsFilterOverlay,
+ router = require( 'mediawiki.router' ),
+ $readStateButton = $(
'.mw-echo-ui-notificationsInboxWidget-main-toolbar-readState' ).find(
'.oo-ui-buttonElement' ),
+ $filterLabels = $( '.mw-echo-ui-pageFilterWidget' ).find(
'.oo-ui-optionWidget' );
+
+ /**
+ * Overlay for notifications filter
+ * @class NotificationsFilterOverlay
+ * @extend Overlay
+ */
+ NotificationsFilterOverlay = function ( options ) {
+
+ Overlay.apply( this, options );
+
+ // Initialize
+ this.$( '.overlay-content' ).append(
+ $( '<div>' )
+ .addClass(
'notifications-filter-overlay-read-state' )
+ .append(
+ options.$notifReadState
+ ),
+ options.$crossWikiUnreadFilter
+ );
+ $readStateButton.on( 'click', function () {
+ router.navigate( 'Special:Notifications' );
+ // Important that we also prevent propagation
to avoid interference with events that may be
+ // binded on #mw-mf-page-center that close
overlay
+ return false;
+ } );
+ $filterLabels.on( 'click', function () {
+ router.navigate( 'Special:Notifications' );
+ // Important that we also prevent propagation
to avoid interference with events that may be
+ // binded on #mw-mf-page-center that close
overlay
+ return false;
+ } );
+ };
+
+ OO.mfExtend( NotificationsFilterOverlay, Overlay, {
+ className: 'overlay notifications-filter-overlay
navigation-drawer',
+ /**
+ * @inheritdoc
+ * @cfg {Object} defaults Default options hash.
+ * @cfg {String} defaults.heading Heading text.
+ */
+ defaults: $.extend( {}, Overlay.prototype.defaults, {
+ heading: mw.msg( 'notifications-filter' )
+ } ),
+
+ /** @inheritdoc */
+ preRender: function () {
+ this.options.heading = 'Filter notifications';
+ },
+ /** @inheritdoc */
+ postRender: function () {
+ Overlay.prototype.postRender.apply( this );
+ }
+ } );
+
+ M.define(
'mobile.notifications.filter.overlay/NotificationsFilterOverlay',
NotificationsFilterOverlay );
+
+}( mw.mobileFrontend, jQuery ) );
diff --git
a/resources/mobile.notifications.filter.overlay/NotificationsFilterOverlay.less
b/resources/mobile.notifications.filter.overlay/NotificationsFilterOverlay.less
new file mode 100644
index 0000000..d24dfd9
--- /dev/null
+++
b/resources/mobile.notifications.filter.overlay/NotificationsFilterOverlay.less
@@ -0,0 +1,57 @@
+@import 'minerva.variables';
+
+.notifications-filter-overlay {
+ padding-top: 0;
+
+ &-read-state {
+ padding-top: 5em;
+ padding-bottom: 1.5em;
+ text-align: center;
+ }
+
+ .overlay-content {
+ // this is needed not only on iOS, that's why we repeat it here
even though
+ // it's in Overlay.less too
+ overflow-y: scroll; // has to be scroll, not auto
+ position: absolute;
+ width: 100%;
+ margin-top: 1px;
+ padding-bottom: 0;
+
+ .mw-echo-ui-crossWikiUnreadFilterWidget {
+ border: 1px solid @colorGray13;
+ width: 100%;
+ margin-left: 0;
+ padding: 0;
+
+ &-title {
+ display: block;
+ font-size: 1.3em;
+ font-weight: bold;
+ margin-left: 0.7em;
+ }
+
+ &-subtitle {
+ display: block;
+ color: @colorGray1;
+ margin-left: 0.9em;
+ }
+ }
+
+ .mw-echo-ui-pageNotificationsOptionWidget {
+ box-sizing: border-box;
+ border: 1px solid @colorGray13;
+ padding: 0.7em 1.5em 1em 1em;
+ width: 100%;
+ }
+
+ .mw-echo-ui-notificationsInboxWidget-row {
+ display: table;
+ text-align: center;
+ }
+
+ .mw-echo-ui-notificationsInboxWidget-main-toolbar-readState {
+ display: block;
+ }
+ }
+}
diff --git
a/resources/mobile.notifications.overlay/SpecialNotificationsOverlay.less
b/resources/mobile.notifications.overlay/SpecialNotificationsOverlay.less
new file mode 100644
index 0000000..6b2ffb9
--- /dev/null
+++ b/resources/mobile.notifications.overlay/SpecialNotificationsOverlay.less
@@ -0,0 +1,56 @@
+.mw-echo-ui-notificationsInboxWidget {
+ &-cell {
+ &-placeholder {
+ display: table-cell;
+ width: 100%;
+ }
+ }
+
+ &-sidebar {
+ display: none;
+ }
+
+ &-main {
+ &-toolbar {
+ &-top {
+ display: table;
+ width: 100%;
+ .mw-echo-ui-notificationsInboxWidget-row {
+ display: table-row;
+ width: 100%;
+ }
+ }
+
+ &-affixed {
+ position: fixed;
+ z-index: 2;
+ top: 0;
+ background: #fff;
+ padding-top: 0.5em;
+ padding-bottom: 0.5em;
+ box-shadow: 0 2px 0 0 rgba( 0, 0, 0, 0.1 );
+ }
+
+ &-readState {
+ display: none;
+ }
+
+ &-settings,
+ &-pagination {
+ display: table-cell;
+ }
+
+ &-settings {
+ padding-left: 0;
+ }
+
+ &-nav-filter {
+ display: table-cell;
+ }
+ }
+ }
+
+ &-toolbarWrapper {
+ height: 4em;
+ }
+}
diff --git a/resources/skins.minerva.notifications/init.js
b/resources/skins.minerva.notifications/init.js
index aa7a8bf..d035e60 100644
--- a/resources/skins.minerva.notifications/init.js
+++ b/resources/skins.minerva.notifications/init.js
@@ -3,12 +3,16 @@
* with the Toast notifications defined by common/toast.js.
*/
( function ( M, $, mw ) {
+
var mainMenu = M.require( 'skins.minerva.scripts/skin' ).getMainMenu(),
$btn = $( '#secondary-button.user-button' ).parent(),
router = require( 'mediawiki.router' ),
overlayManager = M.require(
'skins.minerva.scripts/overlayManager' ),
- icons = M.require( 'mobile.startup/icons' );
-
+ icons = M.require( 'mobile.startup/icons' ),
+ initialized = false,
+ $notifReadState,
+ $crossWikiUnreadFilter,
+ filterStatusButton;
/**
* Loads a ResourceLoader module script. Shows ajax loader whilst
loading.
* @method
@@ -79,4 +83,82 @@
} );
} );
} );
+ /**
+ * Load the notification overlay.
+ * @method
+ * @ignore
+ * @private
+ * @uses NotificationsFilterOverlay
+ * @returns {jQuery.Deferred} with an instance of
NotificationsFilterOverlay
+ */
+ function loadNotificationFilterOverlay() {
+ var result = $.Deferred();
+ loadModuleScript( 'mobile.notifications.filter.overlay' ).done(
function () {
+ var NotificationsFilterOverlay = M.require(
'mobile.notifications.filter.overlay/NotificationsFilterOverlay' );
+ result.resolve(
+ new NotificationsFilterOverlay( {
+ $notifReadState: $notifReadState,
+ $crossWikiUnreadFilter:
$crossWikiUnreadFilter
+ } )
+ );
+ } );
+
+ return result;
+ }
+
+ /**
+ * Fire the echo special page hook
+ * Load the notifications filter overlay
+ */
+ $( function () {
+ mw.hook( 'ext.echo.special.onInitialize' ).add(
function () {
+ return
loadNotificationFilterOverlay().then( function () {
+ if ( initialized ) {
+ return;
+ }
+ $crossWikiUnreadFilter = $(
'.mw-echo-ui-crossWikiUnreadFilterWidget' );
+ $notifReadState = $(
'.mw-echo-ui-notificationsInboxWidget-main-toolbar-readState' );
+
+ filterStatusButton = new
OO.ui.ButtonWidget(
+ {
+ classes: [
'mw-echo-ui-notificationsInboxWidget-main-toolbar-nav-filter-placeholder' ],
+ icon: 'funnel',
+ label: 'Filter'
+ }
+ );
+
+ $(
'.mw-echo-ui-notificationsInboxWidget-main-toolbar-nav-filter-placeholder'
).append(
+ $( '<div>' )
+ .addClass(
'mw-echo-ui-notificationsInboxWidget-main-toolbar-nav-filter' )
+ .addClass(
'mw-echo-ui-notificationsInboxWidget-cell' )
+ .append(
filterStatusButton.$element )
+ );
+
+ filterStatusButton.$element.on(
'click', function () {
+ router.navigate(
'#/notifications-filter' );
+ return false;
+
+ } );
+ initialized = true;
+
+ } ).then(
+ function () {
+ overlayManager.add(
/^\/notifications-filter$/, function () {
+ return
loadNotificationFilterOverlay()
+ .done(
function ( overlay ) {
+
mainMenu.openNavigationDrawer( 'secondary' );
+
overlay.on( 'hide', function () {
+
mainMenu.closeNavigationDrawers();
+
$( '#mw-mf-page-center' ).off( '.secondary' );
+ } );
+
+ $(
'#mw-mf-page-center' ).one( 'click.secondary', function () {
+
router.back();
+ } );
+ } );
+ } );
+ } );
+ } );
+ } );
+
}( mw.mobileFrontend, jQuery, mw ) );
diff --git a/resources/skins.minerva.special.styles/common.less
b/resources/skins.minerva.special.styles/common.less
index 5d2d0c7..cd5aeb8 100644
--- a/resources/skins.minerva.special.styles/common.less
+++ b/resources/skins.minerva.special.styles/common.less
@@ -61,3 +61,4 @@
}
}
}
+
--
To view, visit https://gerrit.wikimedia.org/r/323348
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I94d43fc59b259fce844c7391c0dbcf995c7c3e89
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Kmuthu <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
