Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/95482
Change subject: Story 1345: Redesign notifications overlay
......................................................................
Story 1345: Redesign notifications overlay
* Separate notification code out into mobile.notifications module
* Override in beta
* Use OverlayNew
* Support back behaviour
Change-Id: I0edb2a2cf7167554ecd14f40665411e05c305d52
---
M includes/Resources.php
M includes/skins/SkinMinerva.php
M includes/skins/SkinMobileBeta.php
M javascripts/modules/notifications/NotificationsOverlay.js
A javascripts/modules/notifications/NotificationsOverlayNew.js
M javascripts/modules/notifications/notifications.js
M less/common/OverlayNew.less
M less/modules/NotificationsOverlay.less
M templates/OverlayNew.html
9 files changed, 117 insertions(+), 18 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/82/95482/1
diff --git a/includes/Resources.php b/includes/Resources.php
index ddfacf9..dacbad2 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -686,7 +686,6 @@
'javascripts/common/ContentOverlay.js',
'javascripts/modules/tutorials/PageActionOverlay.js',
'javascripts/modules/tutorials/newbieEditor.js',
- 'javascripts/modules/notifications/notifications.js',
),
'messages' => array(
// for mf-toggle.js
@@ -902,6 +901,25 @@
'echo-load-more-error',
),
),
+
+ 'mobile.notifications' => $wgMFMobileResourceBoilerplate + array(
+ 'dependencies' => array(
+ 'mobile.overlays',
+ ),
+ 'scripts' => array(
+ 'javascripts/modules/notifications/notifications.js',
+ ),
+ ),
+
+ 'mobile.notifications.beta' => $wgMFMobileResourceBoilerplate + array(
+ 'dependencies' => array(
+ 'mobile.overlays.beta',
+ ),
+ 'scripts' => array(
+ 'javascripts/modules/notifications/notifications.js',
+ ),
+ ),
+
'mobile.notifications.overlay' => $wgMFMobileResourceBoilerplate +
array(
'dependencies' => array(
'mobile.stable',
@@ -923,6 +941,17 @@
'echo-overlay-link',
),
),
+
+ 'mobile.notifications.overlay.beta' => $wgMFMobileResourceBoilerplate +
array(
+ 'dependencies' => array(
+ 'mobile.overlays.beta',
+ 'mobile.notifications.overlay',
+ ),
+ 'scripts' => array(
+
'javascripts/modules/notifications/NotificationsOverlayNew.js',
+ ),
+ ),
+
'mobile.search.styles' => $wgMFMobileSpecialPageResourceBoilerplate +
array(
'styles' => array(
'less/specials/search.less',
diff --git a/includes/skins/SkinMinerva.php b/includes/skins/SkinMinerva.php
index 187c8d9..3f155a7 100644
--- a/includes/skins/SkinMinerva.php
+++ b/includes/skins/SkinMinerva.php
@@ -486,6 +486,7 @@
'mobile.stable',
);
+ $modules['notifications'] = array( 'mobile.notifications' );
$modules['watch'] = array();
$modules['search'] = array();
$modules['stableonly'] = array( 'mobile.lastEdited.stable' );
diff --git a/includes/skins/SkinMobileBeta.php
b/includes/skins/SkinMobileBeta.php
index 535a7b3..a09bf13 100644
--- a/includes/skins/SkinMobileBeta.php
+++ b/includes/skins/SkinMobileBeta.php
@@ -53,6 +53,7 @@
public function getDefaultModules() {
$modules = parent::getDefaultModules();
$modules['beta'] = array( 'mobile.beta' );
+ $modules['notifications'] = array( 'mobile.notifications.beta'
);
$modules['beta'][] = 'mobile.geonotahack';
$modules['issues'] = array( 'mobile.issues.beta' );
// turn off stable only modules
diff --git a/javascripts/modules/notifications/NotificationsOverlay.js
b/javascripts/modules/notifications/NotificationsOverlay.js
index 2d98a64..f08c67c 100644
--- a/javascripts/modules/notifications/NotificationsOverlay.js
+++ b/javascripts/modules/notifications/NotificationsOverlay.js
@@ -1,11 +1,11 @@
( function( M, $ ) {
var Overlay = M.require( 'Overlay' ),
api = M.require( 'api' ),
+ prototype,
NotificationsOverlay;
- NotificationsOverlay = Overlay.extend( {
+ prototype = {
active: false,
- className: 'mw-mf-overlay',
templatePartials: {
content: M.template.get(
'modules/notifications/NotificationsOverlay' )
},
@@ -96,8 +96,10 @@
this.updateCount( 0 );
}
}
- } );
+ };
+ NotificationsOverlay = Overlay.extend( prototype );
M.define( 'modules/notifications/NotificationsOverlay',
NotificationsOverlay );
+ M.define( 'modules/notifications/prototype', prototype );
}( mw.mobileFrontend, jQuery ) );
diff --git a/javascripts/modules/notifications/NotificationsOverlayNew.js
b/javascripts/modules/notifications/NotificationsOverlayNew.js
new file mode 100644
index 0000000..14acca7
--- /dev/null
+++ b/javascripts/modules/notifications/NotificationsOverlayNew.js
@@ -0,0 +1,14 @@
+( function( M ) {
+ M.assertMode( [ 'beta', 'alpha' ] );
+ var OverlayNew = M.require( 'OverlayNew' ),
+ prototype = M.require( 'modules/notifications/prototype' ),
+ NotificationsOverlayNew;
+
+ NotificationsOverlayNew = OverlayNew.extend( prototype );
+ NotificationsOverlayNew = NotificationsOverlayNew.extend( {
+ closeOnBack: true
+ } );
+
+ M.define( 'modules/notifications/NotificationsOverlayNew',
NotificationsOverlayNew );
+
+}( mw.mobileFrontend ) );
diff --git a/javascripts/modules/notifications/notifications.js
b/javascripts/modules/notifications/notifications.js
index 7d063ab..e905b8e 100644
--- a/javascripts/modules/notifications/notifications.js
+++ b/javascripts/modules/notifications/notifications.js
@@ -1,21 +1,47 @@
( function( M, $ ) {
- var LoadingOverlay = M.require( 'LoadingOverlay' );
+ var useNewOverlays = mw.config.get( 'wgMFMode' ) !== 'stable',
+ LoadingOverlay = useNewOverlays ? M.require(
'LoadingOverlayNew' ) : M.require( 'LoadingOverlay' );
+
+ /**
+ * Loads a ResourceLoader module script. Shows ajax loader whilst
loading.
+ *
+ * FIXME: Upstream to mw.mobileFrontend and reuse elsewhere
+ * @param {string} moduleName: Name of a module to fetch
+ * @returns {jQuery.Deferred}
+ */
+ function loadModuleScript( moduleName ) {
+ var d = $.Deferred(),
+ loadingOverlay = new LoadingOverlay();
+ loadingOverlay.show();
+ mw.loader.using( moduleName, function() {
+ loadingOverlay.hide();
+ d.resolve();
+ } );
+ return d;
+ }
// Once the DOM is loaded hijack the notifications button to display an
overlay rather
// than linking to Special:Notifications.
$( function () {
- $( '#secondary-button.user-button' ).on( 'click', function( ev
) {
- var loadingOverlay = new LoadingOverlay();
+ var $btn = $( '#secondary-button.user-button' );
- loadingOverlay.show();
- ev.preventDefault();
-
- mw.loader.using( 'mobile.notifications.overlay',
function() {
- var NotificationsOverlay = M.require(
'modules/notifications/NotificationsOverlay' );
-
- loadingOverlay.hide();
- new NotificationsOverlay( { $badge: $( this ) }
).show();
+ if ( useNewOverlays ) {
+ $btn.attr( 'href', '#notifications' );
+ M.router.route( /^notifications$/, function() {
+ loadModuleScript(
'mobile.notifications.overlay.beta' ).done( function() {
+ var NotificationsOverlayNew =
M.require( 'modules/notifications/NotificationsOverlayNew' );
+ new NotificationsOverlayNew( { $badge:
$btn, headerContext: $btn.find( 'span' ).text() } ).show();
+ } );
} );
- } );
+
+ } else {
+ $btn.on( 'click', function( ev ) {
+ ev.preventDefault();
+ loadModuleScript(
'mobile.notifications.overlay' ).done( function() {
+ var NotificationsOverlay =
M.require( 'modules/notifications/NotificationsOverlay' );
+ new NotificationsOverlay( {
$badge: $btn } ).show();
+ } );
+ } );
+ }
} );
}( mw.mobileFrontend, jQuery ) );
diff --git a/less/common/OverlayNew.less b/less/common/OverlayNew.less
index 8aef893..ac5c6d4 100644
--- a/less/common/OverlayNew.less
+++ b/less/common/OverlayNew.less
@@ -29,6 +29,14 @@
width: 100%;
.box-sizing(border-box);
+ h2 {
+ span {
+ margin-left: 6px;
+ color: @grayMediumDark;
+ font-size: 0.8em;
+ }
+ }
+
> ul, h2 {
display: table-cell;
vertical-align: bottom;
diff --git a/less/modules/NotificationsOverlay.less
b/less/modules/NotificationsOverlay.less
index 5034030..bb2caa0 100644
--- a/less/modules/NotificationsOverlay.less
+++ b/less/modules/NotificationsOverlay.less
@@ -1,6 +1,7 @@
// FIXME: some of this could be removed if we reused .page-list styling
@import "../mixins.less";
+.overlay,
.mw-mf-overlay {
.mw-mf-notifications {
padding-bottom: 0;
@@ -38,3 +39,13 @@
padding: 0 0 1em 10px;
}
}
+
+// FIXME: Merge both of these rules with above padding definitions when goes
to stable
+.overlay {
+ .mw-echo-notification {
+ padding-right: @overlayHeadingIndent;
+ }
+ .notifications-archive-link {
+ padding-left: @overlayHeadingIndent;
+ }
+}
diff --git a/templates/OverlayNew.html b/templates/OverlayNew.html
index 58ecea0..6b4a4e3 100644
--- a/templates/OverlayNew.html
+++ b/templates/OverlayNew.html
@@ -2,10 +2,17 @@
<ul>
<li><button class="cancel icon">{{closeMsg}}</button></li>
</ul>
- <h2>{{{heading}}}</h2>
+ <h2>{{{heading}}}
{{#headerContext}}<span>{{headerContext}}</span>{{/headerContext}}</h2>
<ul>
{{#headerButtons}}
- <li><button class="{{className}}">{{msg}}</button></li>
+ <li class="{{parentClassName}}">
+ {{^isLabel}}
+ <button class="{{className}}">{{msg}}</button>
+ {{/isLabel}}
+ {{#isLabel}}
+ <span class="{{className}}">{{msg}}</span>
+ {{/isLabel}}
+ </li>
{{/headerButtons}}
</ul>
</div>
--
To view, visit https://gerrit.wikimedia.org/r/95482
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I0edb2a2cf7167554ecd14f40665411e05c305d52
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
