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