Bmansurov has uploaded a new change for review.
https://gerrit.wikimedia.org/r/221603
Change subject: Promote references drawer beta to stable
......................................................................
Promote references drawer beta to stable
Bug: T101434
Change-Id: I9b606b0639160ac74f03a6a211f0afbf85c6130f
---
M includes/Resources.php
D resources/mobile.references.beta/ReferencesDrawerBeta.hogan
D resources/mobile.references.beta/ReferencesDrawerBeta.js
M resources/mobile.references/ReferencesDrawer.hogan
M resources/mobile.references/ReferencesDrawer.js
M resources/mobile.references/init.js
M resources/mobile.references/references.less
M tests/qunit/mobile.references/test_init.js
8 files changed, 114 insertions(+), 190 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/03/221603/1
diff --git a/includes/Resources.php b/includes/Resources.php
index 1670005..513f5cb 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -981,25 +981,13 @@
),
),
- 'mobile.references.beta' => $wgMFResourceFileModuleBoilerplate + array(
- 'dependencies' => array(
- 'mobile.references',
- ),
- 'messages' => array(
- 'mobile-frontend-references-citation',
- ),
- 'templates' => array(
- 'DrawerBeta.hogan' =>
'resources/mobile.references.beta/ReferencesDrawerBeta.hogan',
- ),
- 'scripts' => array(
-
'resources/mobile.references.beta/ReferencesDrawerBeta.js',
- ),
- ),
-
'mobile.references' => $wgMFResourceFileModuleBoilerplate + array(
'dependencies' => array(
'mobile.drawers',
'mobile.loggingSchemas',
+ ),
+ 'messages' => array(
+ 'mobile-frontend-references-citation',
),
'styles' => array(
'resources/mobile.references/references.less',
@@ -1833,7 +1821,6 @@
// Feature modules that should be loaded in beta should
be listed below here.
// These modules should only setup routes/events or
// load code under certain conditions.
- 'mobile.references.beta',
'mobile.bannerImage',
'mobile.search.beta',
),
diff --git a/resources/mobile.references.beta/ReferencesDrawerBeta.hogan
b/resources/mobile.references.beta/ReferencesDrawerBeta.hogan
deleted file mode 100644
index 6f05c4e..0000000
--- a/resources/mobile.references.beta/ReferencesDrawerBeta.hogan
+++ /dev/null
@@ -1,6 +0,0 @@
-<div class="cite">
- {{{citation}}}
- {{{cancelButton}}}
-</div>
-<sup>{{title}}</sup>
-{{{text}}}
diff --git a/resources/mobile.references.beta/ReferencesDrawerBeta.js
b/resources/mobile.references.beta/ReferencesDrawerBeta.js
deleted file mode 100644
index ab7d423..0000000
--- a/resources/mobile.references.beta/ReferencesDrawerBeta.js
+++ /dev/null
@@ -1,65 +0,0 @@
-( function ( M, $ ) {
- var ReferencesDrawer = M.require( 'modules/references/ReferencesDrawer'
),
- Icon = M.require( 'Icon' ),
- Drawer = M.require( 'Drawer' ),
- ReferencesDrawerBeta;
-
- /**
- * Drawer for references (beta)
- * @inheritdoc
- * @class ReferencesDrawerBeta
- * @extends ReferencesDrawer
- */
- ReferencesDrawerBeta = ReferencesDrawer.extend( {
- /**
- * Inherits from Drawer rather than ReferencesDrawer until
T101434
- * is resolved.
- * @inheritdoc
- * @cfg {Object} defaults Default options hash.
- * @cfg {String} defaults.citation HTML of the citation icon.
- */
- defaults: $.extend( {}, Drawer.prototype.defaults, {
- citation: new Icon( {
- name: 'citation',
- additionalClassNames: 'text',
- hasText: true,
- label: mw.msg(
'mobile-frontend-references-citation' )
- } ).toHtmlString()
- } ),
- /**
- * @inheritdoc
- */
- closeOnScroll: false,
- template: mw.template.get( 'mobile.references.beta',
'DrawerBeta.hogan' ),
- /**
- * @inheritdoc
- */
- postRender: function () {
- var windowHeight = $( window ).height();
-
- ReferencesDrawer.prototype.postRender.apply( this );
-
- // make sure the drawer doesn't take up more than 50%
of the viewport height
- if ( windowHeight / 2 < 400 ) {
- this.$el.css( 'max-height', windowHeight / 2 );
- }
-
- this.on( 'show', $.proxy( this, 'onShow' ) );
- this.on( 'hide', $.proxy( this, 'onHide' ) );
- },
- /**
- * Make body not scrollable
- */
- onShow: function () {
- $( 'body' ).addClass( 'drawer-enabled' );
- },
- /**
- * Restore body scroll
- */
- onHide: function () {
- $( 'body' ).removeClass( 'drawer-enabled' );
- }
- } );
-
- M.define( 'modules/references/ReferencesDrawerBeta',
ReferencesDrawerBeta );
-}( mw.mobileFrontend, jQuery ) );
diff --git a/resources/mobile.references/ReferencesDrawer.hogan
b/resources/mobile.references/ReferencesDrawer.hogan
index 8adf9b7..6f05c4e 100644
--- a/resources/mobile.references/ReferencesDrawer.hogan
+++ b/resources/mobile.references/ReferencesDrawer.hogan
@@ -1,3 +1,6 @@
-{{{cancelButton}}}
-<h3>{{title}}</h3>
+<div class="cite">
+ {{{citation}}}
+ {{{cancelButton}}}
+</div>
+<sup>{{title}}</sup>
{{{text}}}
diff --git a/resources/mobile.references/ReferencesDrawer.js
b/resources/mobile.references/ReferencesDrawer.js
index 944d16d..cbc771a 100644
--- a/resources/mobile.references/ReferencesDrawer.js
+++ b/resources/mobile.references/ReferencesDrawer.js
@@ -17,11 +17,16 @@
* @cfg {String} defaults.cancelButton HTML of the button that
closes the drawer.
*/
defaults: $.extend( {}, Drawer.prototype.defaults, {
- // FIXME: Use a dark icon until T101434 resolved.
cancelButton: new Icon( {
- name: 'close',
+ name: 'close-gray',
additionalClassNames: 'cancel',
label: mw.msg( 'mobile-frontend-overlay-close' )
+ } ).toHtmlString(),
+ citation: new Icon( {
+ name: 'citation',
+ additionalClassNames: 'text',
+ hasText: true,
+ label: mw.msg(
'mobile-frontend-references-citation' )
} ).toHtmlString()
} ),
/** @inheritdoc */
@@ -32,7 +37,39 @@
return Drawer.prototype.show.apply( this, arguments );
},
className: 'drawer position-fixed text references',
- template: mw.template.get( 'mobile.references', 'Drawer.hogan' )
+ template: mw.template.get( 'mobile.references', 'Drawer.hogan'
),
+ /**
+ * @inheritdoc
+ */
+ closeOnScroll: false,
+ /**
+ * @inheritdoc
+ */
+ postRender: function () {
+ var windowHeight = $( window ).height();
+
+ Drawer.prototype.postRender.apply( this );
+
+ // make sure the drawer doesn't take up more than 50%
of the viewport height
+ if ( windowHeight / 2 < 400 ) {
+ this.$el.css( 'max-height', windowHeight / 2 );
+ }
+
+ this.on( 'show', $.proxy( this, 'onShow' ) );
+ this.on( 'hide', $.proxy( this, 'onHide' ) );
+ },
+ /**
+ * Make body not scrollable
+ */
+ onShow: function () {
+ $( 'body' ).addClass( 'drawer-enabled' );
+ },
+ /**
+ * Restore body scroll
+ */
+ onHide: function () {
+ $( 'body' ).removeClass( 'drawer-enabled' );
+ }
} );
M.define( 'modules/references/ReferencesDrawer', ReferencesDrawer );
diff --git a/resources/mobile.references/init.js
b/resources/mobile.references/init.js
index eaa1dfb..2505189 100644
--- a/resources/mobile.references/init.js
+++ b/resources/mobile.references/init.js
@@ -1,6 +1,5 @@
( function ( M, $ ) {
- var ReferencesDrawer, drawer,
- context = M.require( 'context' );
+ var ReferencesDrawer, drawer;
/**
* Return the matched reference among the children of ol.references
@@ -52,19 +51,10 @@
* @param {Page} [page] Defaults to $( '#content' )
*/
function setup( page ) {
- var $container = page ? page.$el : $( '#content' ),
- module, view;
+ var $container = page ? page.$el : $( '#content' );
- if ( context.isBetaGroupMember() ) {
- module = 'mobile.references.beta';
- view = 'modules/references/ReferencesDrawerBeta';
- } else {
- module = 'mobile.references';
- view = 'modules/references/ReferencesDrawer';
- }
-
- mw.loader.using( module ).done( function () {
- ReferencesDrawer = M.require( view );
+ mw.loader.using( 'mobile.references' ).done( function () {
+ ReferencesDrawer = M.require(
'modules/references/ReferencesDrawer' );
$container.find( 'sup a' ).off( 'click' ).on( 'click',
showReference );
$container.find( '.mw-cite-backlink a' ).off( 'click' );
} );
diff --git a/resources/mobile.references/references.less
b/resources/mobile.references/references.less
index 92d5f31..d91d951 100644
--- a/resources/mobile.references/references.less
+++ b/resources/mobile.references/references.less
@@ -3,94 +3,67 @@
@betaDrawerPadding: 20px;
+// prevent body from scrolling
+// won't work on firefox for android because of this bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=886969
+.drawer-enabled {
+ overflow: hidden;
+}
+
.drawer.references {
- max-height: 10em;
+ background-color: @colorGray1;
+ color: @colorGray12;
+ max-height: 400px; // or half of window height, whichever is smaller
(see ReferencesDrawerBeta.js)
overflow-y: auto;
-}
-
-.stable {
- .references {
- h3 {
- margin: 0;
- padding-right: 4px;
- display: inline;
- }
-
- .mw-cite-backlink {
- display: none;
- }
-
- // FIXME: Don't use mw-ui-icon class here.
- .mw-ui-icon {
- float: right;
- line-height: normal;
- }
- }
-}
-
-.alpha,
-.beta {
- // prevent body from scrolling
- // won't work on firefox for android because of this bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=886969
- &.drawer-enabled {
- overflow: hidden;
+ padding: @betaDrawerPadding;
+ &.text {
+ font-size: 1em;
}
- .drawer.references {
- background-color: @colorGray1;
- color: @colorGray12;
- max-height: 400px; // or half of window height, whichever is
smaller (see ReferencesDrawerBeta.js)
- padding: @betaDrawerPadding;
- &.text {
- font-size: 1em;
+ a {
+ background-image: none;
+ color: #5880C0;
+ }
+
+ .cite {
+ padding-bottom: 20px;
+
+ &:after {
+ content: "";
+ display: table;
+ clear: both;
}
- a {
- background-image: none;
- color: #5880C0;
+ .text {
+ color: @colorGray8;
+ cursor: default;
+ letter-spacing: .2em;
+ float: left;
+ font-size: 0.75em;
+ padding-top: .25em;
+ text-transform: uppercase;
}
-
- .cite {
- padding-bottom: 20px;
-
- &:after {
- content: "";
- display: table;
- clear: both;
- }
-
- .text {
- color: @colorGray8;
- cursor: default;
- letter-spacing: .2em;
- float: left;
- font-size: 0.75em;
- padding-top: .25em;
- text-transform: uppercase;
- }
- .cancel {
- @extraPadding: 1em;
- cursor: pointer;
- font-size: 0.8em; // we want a smaller icon
- // Compensate for the padding.
- // Top and bottom margins are for the padding
we're adding below.
- // The right margin is for the 1em margin of
icon:before
- margin: -@extraPadding -@extraPadding
-@extraPadding 0;
- // Make the tappable area bigger. No need to
add left and right paddings because
- // the icon:before already has 1em margin on
both sides
- padding: @extraPadding 0;
- position: absolute;
- right: @betaDrawerPadding;
- top: @betaDrawerPadding;
- }
+ .cancel {
+ @extraPadding: 1em;
+ cursor: pointer;
+ font-size: 0.8em; // we want a smaller icon
+ // Compensate for the padding.
+ // Top and bottom margins are for the padding we're
adding below.
+ // The right margin is for the 1em margin of icon:before
+ margin: -@extraPadding -@extraPadding -@extraPadding 0;
+ // Make the tappable area bigger. No need to add left
and right paddings because
+ // the icon:before already has 1em margin on both sides
+ padding: @extraPadding 0;
+ position: absolute;
+ right: @betaDrawerPadding;
+ top: @betaDrawerPadding;
}
+ }
- .mw-cite-backlink {
- display: none;
- }
+ .mw-cite-backlink {
+ display: none;
+ }
- .reference-text {
- line-height: 1.4;
- }
+ .reference-text {
+ line-height: 1.4;
}
}
diff --git a/tests/qunit/mobile.references/test_init.js
b/tests/qunit/mobile.references/test_init.js
index 77d75fa..10e0acf 100644
--- a/tests/qunit/mobile.references/test_init.js
+++ b/tests/qunit/mobile.references/test_init.js
@@ -1,15 +1,20 @@
( function ( $, M ) {
var R = mw.mobileFrontend.require( 'references' ),
- context = M.require( 'context' ),
ReferencesDrawer = M.require(
'modules/references/ReferencesDrawer' );
QUnit.module( 'MobileFrontend references.js', {
setup: function () {
- $( '<div id="mfe-test-references"><sup><a
href="#ref-foo">[1]</a></sup></div><ol class="references"><li
id="ref-foo"><a>test reference</a></li></ol>' ).appendTo( '#qunit-fixture' );
+ $( '<div id="mfe-test-references">' +
+ '<sup id="cite_ref-1" class="reference"><a
href="#cite_note-1">[1]</a></sup>' +
+ '<ol class="references">' +
+ '<li id="cite_note-1">' +
+ '<span
class="mw-cite-backlink"><a href="#cite_ref-1">↑</a></span> <span
class="reference-text">hello</span>' +
+ '</li>' +
+ '</ol>'
+ ).appendTo( '#qunit-fixture' );
// prevent events from being logged.
this.sandbox.stub( ReferencesDrawer.prototype, 'show' );
- this.sandbox.stub( context, 'isBetaGroupMember'
).returns( false );
},
teardown: function () {
$( '#mfe-test-references' ).remove();
@@ -21,8 +26,8 @@
$el: $( '#mfe-test-references' )
} );
$( '#mfe-test-references sup a' ).trigger( 'click' );
- assert.strictEqual( $( '.drawer.references h3' ).text(), '[1]'
);
- assert.strictEqual( $( '.drawer.references a' ).text(), 'test
reference' );
+ assert.strictEqual( $( '.drawer.references sup' ).text(), '[1]'
);
+ assert.strictEqual( $( '.drawer.references .reference-text'
).text(), 'hello' );
} );
} )( jQuery, mw.mobileFrontend );
--
To view, visit https://gerrit.wikimedia.org/r/221603
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I9b606b0639160ac74f03a6a211f0afbf85c6130f
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Bmansurov <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
