Jdlrobson has uploaded a new change for review. https://gerrit.wikimedia.org/r/315426
Change subject: Hygiene: Allow a more generalised Overlay header ...................................................................... Hygiene: Allow a more generalised Overlay header Overlays can opt into the more flexible header template simply by passing useHeaderV2 as a template parameter Change-Id: Ia2ee1a99dae4befc748e2ad1159be487bb0d15c1 --- M extension.json M resources/mobile.overlays/Overlay.hogan M resources/mobile.overlays/Overlay.js M resources/mobile.overlays/OverlayHeader.hogan A resources/mobile.overlays/title.hogan 5 files changed, 51 insertions(+), 20 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend refs/changes/26/315426/1 diff --git a/extension.json b/extension.json index f3f9576..940409b 100644 --- a/extension.json +++ b/extension.json @@ -1018,6 +1018,7 @@ "mobile-frontend-overlay-continue" ], "templates": { + "title.hogan": "resources/mobile.overlays/title.hogan", "header.hogan": "resources/mobile.overlays/OverlayHeader.hogan", "Overlay.hogan": "resources/mobile.overlays/Overlay.hogan", "LoadingOverlay.hogan": "resources/mobile.overlays/LoadingOverlay.hogan" diff --git a/resources/mobile.overlays/Overlay.hogan b/resources/mobile.overlays/Overlay.hogan index 5ed256a..f65f81d 100644 --- a/resources/mobile.overlays/Overlay.hogan +++ b/resources/mobile.overlays/Overlay.hogan @@ -1,8 +1,13 @@ +{{^useHeaderV2}} <div class="overlay-header-container header-container{{#headerChrome}} header-chrome{{/headerChrome}}{{#fixedHeader}} position-fixed{{/fixedHeader}}"> <div class="overlay-header header"> {{>header}} </div> </div> +{{/useHeaderV2}} +{{#useHeaderV2}} +{{#headers}}{{>header}}{{/headers}} +{{/useHeaderV2}} <div class="overlay-content"> {{>content}} </div> diff --git a/resources/mobile.overlays/Overlay.js b/resources/mobile.overlays/Overlay.js index 8554660..5ef4e40 100644 --- a/resources/mobile.overlays/Overlay.js +++ b/resources/mobile.overlays/Overlay.js @@ -7,6 +7,12 @@ Anchor = M.require( 'mobile.startup/Anchor' ), icons = M.require( 'mobile.startup/icons' ), browser = M.require( 'mobile.browser/Browser' ).getSingleton(), + cancelButton = new Icon( { + tagName: 'button', + name: 'overlay-close', + additionalClassNames: 'cancel', + label: mw.msg( 'mobile-frontend-overlay-close' ) + } ).toHtmlString(), $window = $( window ); /** @@ -53,6 +59,7 @@ className: 'overlay', templatePartials: { header: mw.template.get( 'mobile.overlays', 'header.hogan' ), + title: mw.template.get( 'mobile.overlays', 'title.hogan' ), anchor: Anchor.prototype.template, button: Button.prototype.template }, @@ -64,20 +71,22 @@ * @cfg {String} defaults.cancelButton HTML of the cancel button. * @cfg {String} defaults.backButton HTML of the back button. * @cfg {String} defaults.headerButtonsListClassName A comma separated string of class - * names of the wrapper of the header buttons. + * names of the wrapper of the header buttons. [Deprecated] * @cfg {Boolean} defaults.headerChrome Whether the header has chrome. * @cfg {Boolean} defaults.fixedHeader Whether the header is fixed. * @cfg {String} defaults.spinner HTML of the spinner icon. * @cfg {Object} [defaults.footerAnchor] options for an optional Anchor that can appear in the footer + * @cfg {Boolean} defaults.useHeaderV2 Whether to use the more flexible header partial. + * In future this will default to true. + * @cfg {String} [defaults.primaryAction] HTML that will be rendered in the header when useHeaderV2 is true + * @cfg {String} [defaults.secondaryAction] HTML that will be rendered in the header when useHeaderV2 is true + * @cfg {String} [defaults.heading] HTML that will be rendered in the overlay header when useHeaderV2 is true */ defaults: { saveMsg: mw.msg( 'mobile-frontend-editor-save' ), - cancelButton: new Icon( { - tagName: 'button', - name: 'overlay-close', - additionalClassNames: 'cancel', - label: mw.msg( 'mobile-frontend-overlay-close' ) - } ).toHtmlString(), + useHeaderV2: false, + cancelButton: cancelButton, + primaryAction: cancelButton, backButton: new Icon( { tagName: 'button', name: 'back', @@ -90,8 +99,8 @@ spinner: icons.spinner().toHtmlString() }, events: { - // FIXME: Remove .initial-header selector when bug 71203 resolved. - 'click .cancel, .confirm, .initial-header .back': 'onExit', + // FIXME: Remove .back selector when bug T73203 resolved. + 'click .cancel, .confirm, .initial-header .back, .overlay-header-container .back': 'onExit', click: 'stopPropagation' }, /** diff --git a/resources/mobile.overlays/OverlayHeader.hogan b/resources/mobile.overlays/OverlayHeader.hogan index 4efb619..3ba2e38 100644 --- a/resources/mobile.overlays/OverlayHeader.hogan +++ b/resources/mobile.overlays/OverlayHeader.hogan @@ -1,15 +1,30 @@ -<ul> - <li>{{{cancelButton}}}</li> -</ul> -<div class="overlay-title"> - <h2>{{{heading}}}</h2> +{{#useHeaderV2}} +<div class="overlay-header-container header-container{{#headerChrome}} header-chrome{{/headerChrome}}{{#fixedHeader}} position-fixed{{/fixedHeader}} {{additionalClassNames}}"> + <div class="overlay-header header"> + <div>{{{primaryAction}}}</div> + <div class="overlay-title"> + {{>title}} + </div> + <div>{{{secondaryAction}}}</div> + </div> </div> -{{#headerButtons}} -<div class="{{headerButtonsListClassName}}"> +{{/useHeaderV2}} +{{^useHeaderV2}} +<div class="overlay-header header"> + <ul> + <li>{{{cancelButton}}}</li> + </ul> + <div class="overlay-title"> + <h2>{{{heading}}}</h2> + </div> {{#headerButtons}} - {{^href}}<button{{/href}} - {{#href}}<a href="{{href}}"{{/href}} - class="{{className}}">{{msg}}{{^href}}</button>{{/href}}{{#href}}</a>{{/href}} + <div class="{{headerButtonsListClassName}}"> + {{#headerButtons}} + {{^href}}<button{{/href}} + {{#href}}<a href="{{href}}"{{/href}} + class="{{className}}">{{msg}}{{^href}}</button>{{/href}}{{#href}}</a>{{/href}} + {{/headerButtons}} + </div> {{/headerButtons}} </div> -{{/headerButtons}} +{{/useHeaderV2}} \ No newline at end of file diff --git a/resources/mobile.overlays/title.hogan b/resources/mobile.overlays/title.hogan new file mode 100644 index 0000000..e0f88a2 --- /dev/null +++ b/resources/mobile.overlays/title.hogan @@ -0,0 +1 @@ +<h2><span>{{{heading}}}</span> -- To view, visit https://gerrit.wikimedia.org/r/315426 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Ia2ee1a99dae4befc748e2ad1159be487bb0d15c1 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/MobileFrontend Gerrit-Branch: master Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits