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 <kmu...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits