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
