jenkins-bot has submitted this change and it was merged.
Change subject: Provide infrastructure to allow showing a pointer when there's
something new in the menu
......................................................................
Provide infrastructure to allow showing a pointer when there's something new in
the menu
Changes:
* Allow alignment of pointer overlay to be left as well as center.
* PointerOverlays inside left menu are contained in the left menu.
* Add public advertiseNewFeature feature to allow extensions to advertise new
features
* Main menu now emits open event when opened
Bug: T101201
Change-Id: I66ebc2bf987a83196f3e410aae2f86e81207a32d
---
M resources/mobile.contentOverlays/PointerOverlay.js
M resources/mobile.contentOverlays/tutorials.less
M resources/mobile.mainMenu/MainMenu.js
M resources/mobile.mainMenu/mainmenu.less
4 files changed, 81 insertions(+), 7 deletions(-)
Approvals:
Bmansurov: Looks good to me, approved
jenkins-bot: Verified
diff --git a/resources/mobile.contentOverlays/PointerOverlay.js
b/resources/mobile.contentOverlays/PointerOverlay.js
index 8199f61..05bec81 100644
--- a/resources/mobile.contentOverlays/PointerOverlay.js
+++ b/resources/mobile.contentOverlays/PointerOverlay.js
@@ -26,6 +26,7 @@
* @cfg {String} defaults.cancelMsg Cancel message.
* @cfg {String} defaults.appendToElement Where pointer overlay
should be appended to.
* @cfg {String} defaults.target jQuery selector to point
tutorial at
+ * @cfg {String} [defaults.alignment] Determines where the
pointer should point to. Valid values 'left' or 'center'
* @cfg {String} [defaults.confirmMsg] Label for a confirm
message.
*/
defaults: {
@@ -34,6 +35,7 @@
cancelMsg: mw.msg( 'mobile-frontend-pointer-dismiss' ),
appendToElement: undefined,
target: undefined,
+ alignment: 'center',
confirmMsg: undefined
},
/**
@@ -91,16 +93,22 @@
* @param {jQuery.Object} $pa An element that should be pointed
at by the overlay
*/
addPointerArrow: function ( $pa ) {
- var paOffset = $pa.offset(),
+ var left,
+ paOffset = $pa.offset(),
overlayOffset = this.$el.offset(),
center = $pa.width() / 2;
this._position( $pa );
+ // Add half of the element width and subtract 10px for
half of the arrow
+ // remove the left offset of the overlay as margin auto
may be applied to it
+ left = paOffset.left + 10 - overlayOffset.left;
+ if ( this.alignment === 'center' ) {
+ left -= center;
+ }
+
this.$pointer = $( '<div class="tutorial-pointer">'
).css( {
top: -10,
- // Add half of the element width and subtract
10px for half of the arrow
- // remove the left offset of the overlay as
margin auto may be applied to it
- left: paOffset.left + center - 10 -
overlayOffset.left
+ left: left
} ).appendTo( this.$el );
this.options.skin.on( 'changed', $.proxy( this,
'refreshPointerArrow', this.options.target ) );
M.on( 'resize', $.proxy( this, 'refreshPointerArrow',
this.options.target ) );
diff --git a/resources/mobile.contentOverlays/tutorials.less
b/resources/mobile.contentOverlays/tutorials.less
index ec2922a..779825a 100644
--- a/resources/mobile.contentOverlays/tutorials.less
+++ b/resources/mobile.contentOverlays/tutorials.less
@@ -1,6 +1,13 @@
@import "minerva.variables";
@import "minerva.mixins";
+.navigation-drawer {
+ .pointer-overlay {
+ right: auto;
+ width: @menuWidth;
+ }
+}
+
.pointer-overlay {
position: absolute;
top: 0;
diff --git a/resources/mobile.mainMenu/MainMenu.js
b/resources/mobile.mainMenu/MainMenu.js
index f9f85ae..9cb0d5d 100644
--- a/resources/mobile.mainMenu/MainMenu.js
+++ b/resources/mobile.mainMenu/MainMenu.js
@@ -23,11 +23,49 @@
activator: undefined
},
+ /**
+ * Advertise a new feature in the main menu.
+ * @param {String} selector to an element inside the main menu
+ * @param {String} msg a message to show in the pointer
+ * @param {Skin} skin that the feature lives in, will allow
pointer to update when skin gets redrawn.
+ * @throws exception when you try to advertise more than one
feature.
+ */
+ advertiseNewFeature: function ( selector, msg, skin ) {
+ var self = this;
+ if ( this._hasNewFeature ) {
+ throw 'A new feature is already being
advertised.';
+ } else {
+ this._hasNewFeature = true;
+ }
+ $( function () {
+ var $activator = $( self.activator );
+ $activator.addClass( 'indicator-circle' );
+ mw.loader.using( 'mobile.contentOverlays'
).done( function () {
+ $activator.one( 'click', function () {
+ var po,
+ PointerOverlay =
M.require( 'mobile.contentOverlays/PointerOverlay' );
+
+ po = new PointerOverlay( {
+ appendToElement:
self.$el.parent(),
+ alignment: 'left',
+ skin: skin,
+ summary: msg,
+ target: self.$(
selector )
+ } );
+ po.show();
+ $activator.removeClass(
'indicator-circle' );
+ } );
+ } );
+ } );
+ },
+
/** @inheritdoc **/
initialize: function ( options ) {
- this.defaults = this._handleCachedMenuData(
- mw.config.get( 'wgMFMenuData' ) || {}
- );
+ var // FIXME: move to MainMenu.prototype.defaults when
we no longer care about cached data.
+ defaults = this._handleCachedMenuData(
+ mw.config.get( 'wgMFMenuData' ) || {}
+ );
+ $.extend( this.defaults, defaults );
this.activator = options.activator;
View.prototype.initialize.call( this, options );
@@ -147,6 +185,10 @@
// FIXME: We should be moving away from applying
classes to the body
$( 'body' ).toggleClass( 'navigation-enabled' )
.toggleClass( drawerType +
'-navigation-enabled' );
+ /**
+ * @event open emitted when navigation drawer is opened
+ */
+ this.emit( 'open' );
}
} );
diff --git a/resources/mobile.mainMenu/mainmenu.less
b/resources/mobile.mainMenu/mainmenu.less
index 68278cc..325902a 100644
--- a/resources/mobile.mainMenu/mainmenu.less
+++ b/resources/mobile.mainMenu/mainmenu.less
@@ -24,6 +24,23 @@
z-index: @z-indexMain;
}
+.main-menu-button {
+ &.indicator-circle {
+ overflow: initial;
+ &::after {
+ content: '';
+ background-color: @colorProgressive;
+ width: .9em;
+ height: .9em;
+ position: absolute;
+ top: -0.4em;
+ right: .6em;
+ border-radius: .5em;
+ border: solid .1em white;
+ }
+ }
+}
+
nav {
float: left;
}
--
To view, visit https://gerrit.wikimedia.org/r/221299
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I66ebc2bf987a83196f3e410aae2f86e81207a32d
Gerrit-PatchSet: 11
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org>
Gerrit-Reviewer: BarryTheBrowserTestBot <jdlrobson+ba...@gmail.com>
Gerrit-Reviewer: Bmansurov <bmansu...@wikimedia.org>
Gerrit-Reviewer: Phuedx <g...@samsmith.io>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
