jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/393851 )
Change subject: Reimplementing MobileOptions in OOUI
......................................................................
Reimplementing MobileOptions in OOUI
Special:MobileOptions is completely
written in OOUI.
The submit button is hidden in JavaScript and beta opt in/
value changes will now be managed by JavaScript.
I notice a 157.5kb increase in the introduction of this change.
134.2kb of this is JavaScript and 21.3kb of CSS (the CSS is
documented in T181108)
Other known issues:
* The select dropdown is not native so has various usability
problems (T180730)
Depends-On: I1dda3eb4d0e7ebbec544dc0f5763b079e38f5cc8
Change-Id: I70f68df9d2d305126444319b05675702af75de87
---
M extension.json
M i18n/en.json
M i18n/qqq.json
M includes/MobileFrontend.hooks.php
M includes/specials/SpecialMobileOptions.php
M jsduck.json
D resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.hogan
D resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.js
D resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.less
D resources/mobile.special.mobileoptions.scripts.fontchanger/init.js
D resources/mobile.special.mobileoptions.scripts/checkbox.mustache
M resources/mobile.special.mobileoptions.scripts/mobileoptions.js
M resources/mobile.special.mobileoptions.styles/mobileoptions.less
13 files changed, 253 insertions(+), 275 deletions(-)
Approvals:
Pmiazga: Looks good to me, approved
jenkins-bot: Verified
diff --git a/extension.json b/extension.json
index 85f05ce..4a57570 100644
--- a/extension.json
+++ b/extension.json
@@ -944,35 +944,20 @@
"targets": "mobile",
"position": "top",
"dependencies": [
+ "jquery.cookie",
"mobile.startup"
],
"scripts": [
"resources/mobile.special.mobileoptions.scripts/mobileoptions.js"
],
- "templates": {
- "Checkbox.hogan":
"resources/mobile.special.mobileoptions.scripts/checkbox.mustache"
- },
"messages": [
+ "mobile-frontend-settings-save",
+ "mobile-frontend-fontchanger-option-small",
+ "mobile-frontend-fontchanger-option-medium",
+ "mobile-frontend-fontchanger-option-large",
+ "mobile-frontend-fontchanger-option-xlarge",
"mobile-frontend-expand-sections-description",
- "mobile-frontend-expand-sections-status"
- ]
- },
- "mobile.special.mobileoptions.scripts.fontchanger": {
- "targets": "mobile",
- "dependencies": [
- "mobile.startup"
- ],
- "templates": {
- "FontChanger.hogan":
"resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.hogan"
- },
- "styles": [
-
"resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.less"
- ],
- "scripts": [
-
"resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.js",
-
"resources/mobile.special.mobileoptions.scripts.fontchanger/init.js"
- ],
- "messages": [
+ "mobile-frontend-expand-sections-status",
"mobile-frontend-fontchanger-desc",
"mobile-frontend-fontchanger-link"
]
diff --git a/i18n/en.json b/i18n/en.json
index 7b5ee71..2798c97 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -115,10 +115,14 @@
"mobile-frontend-editor-switch-visual-editor": "Switch to visual
editing",
"mobile-frontend-editor-viewing-source-page": "<strong>Viewing source
of</strong><span> $1</span>",
"mobile-frontend-editor-wait": "Saving edit, please wait.",
- "mobile-frontend-expand-sections-description": "Always expand all
sections when navigating to a new page.",
+ "mobile-frontend-expand-sections-description": "Always expand sections
of all articles by default.",
"mobile-frontend-expand-sections-status": "Expand all sections",
"mobile-frontend-fontchanger-link": "Font size",
- "mobile-frontend-fontchanger-desc": "Increase or decrease the size of
the text for readability.",
+ "mobile-frontend-fontchanger-desc": "Adjust article font size for
better readability.",
+ "mobile-frontend-fontchanger-option-small": "Small",
+ "mobile-frontend-fontchanger-option-medium": "Regular",
+ "mobile-frontend-fontchanger-option-large": "Large",
+ "mobile-frontend-fontchanger-option-xlarge": "Extra large",
"mobile-frontend-featured-article": "Today's featured content",
"mobile-frontend-generic-404-desc": "The page you are looking for could
not be found.",
"mobile-frontend-generic-404-title": "Error - Page not found",
@@ -174,7 +178,7 @@
"mobile-frontend-nearby-requirements-guidance": "Try a different
browser or enable JavaScript if you've disabled it.",
"mobile-frontend-nearby-title": "Nearby",
"mobile-frontend-news-items": "In the news",
- "mobile-frontend-opt-in-explain": "By joining the beta, you will get
access to the latest experimental features which may be subject to software
defects.",
+ "mobile-frontend-opt-in-explain": "Join {{SITENAME}} Beta to get access
to the latest experimental features!",
"mobile-frontend-overlay-close": "Close",
"mobile-frontend-overlay-continue": "Continue",
"mobile-frontend-page-edit-summary": "<span><strong>Edit
summary</strong> $1</span>",
@@ -197,6 +201,7 @@
"mobile-frontend-settings-beta": "Beta",
"mobile-frontend-settings-site-description": "{{SITENAME}} is available
in $1 {{PLURAL:$1|language|languages}}. All available versions are listed
below",
"mobile-frontend-settings-site-header": "{{SITENAME}} Languages",
+ "mobile-frontend-settings-save": "Settings were saved successfully.",
"mobile-frontend-talk-fullpage": "Read as wiki page",
"mobile-frontend-talk-add-overlay-content-placeholder": "What is on
your mind?",
"mobile-frontend-talk-add-overlay-subject-placeholder": "Subject",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 24867ab..68226a2 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -119,6 +119,10 @@
"mobile-frontend-expand-sections-description": "On settings page
description for turning on/off expansion of all sections on page load.\n\nSee
also:\n* {{msg-mw|Mobile-frontend-expand-sections-status}}",
"mobile-frontend-expand-sections-status": "On settings page label for
turning on/off expansion of all sections on page load.\n\nSee also:\n*
{{msg-mw|Mobile-frontend-expand-sections-description}}",
"mobile-frontend-fontchanger-link": "{{Identical|Font size}}",
+ "mobile-frontend-fontchanger-option-small": "Font size option",
+ "mobile-frontend-fontchanger-option-medium": "Font size option",
+ "mobile-frontend-fontchanger-option-large": "Font size option",
+ "mobile-frontend-fontchanger-option-xlarge": "Font size option",
"mobile-frontend-fontchanger-desc": "Link to open the font size change
menu out of [[Special:MobileMenu]]..",
"mobile-frontend-featured-article": "Label shown before a link or other
form of display of an area of the page (usually main page of the wiki) which
contains its \"featured content\", i.e. something contained in the wiki which
is considered particularly good and is promoted for a period of time in
prominent places of the wiki.",
"mobile-frontend-generic-404-desc": "Generic description of the HTTP
404 error shown to users",
@@ -198,6 +202,7 @@
"mobile-frontend-settings-beta": "Text for beta on settings
page.\n{{Identical|Beta}}",
"mobile-frontend-settings-site-description": "Shown on
[[Special:MobileOptions]]. Parameters:\n* $1 - the number of other language
versions for this wiki",
"mobile-frontend-settings-site-header": "Heading for the
Special:MobileOptions/Language page - only visible to non JavaScript users",
+ "mobile-frontend-settings-save": "Notification which shows to user when
settings are saved.",
"mobile-frontend-talk-fullpage": "Used as label for link to the talk
page (Talk:ArticleName) in Talk Overlay.",
"mobile-frontend-talk-add-overlay-content-placeholder": "Placeholder
text to prompt user to add content to talk page content",
"mobile-frontend-talk-add-overlay-subject-placeholder": "Placeholder
text to prompt user to add a new talk page topic subject. This corresponds to
{{msg-mw|subject}} in desktop MediaWiki.\n{{Identical|Subject}}",
diff --git a/includes/MobileFrontend.hooks.php
b/includes/MobileFrontend.hooks.php
index 7ece0ce..caa2491 100644
--- a/includes/MobileFrontend.hooks.php
+++ b/includes/MobileFrontend.hooks.php
@@ -1175,6 +1175,7 @@
$vars['wgMFExpandAllSectionsUserOption'] =
$context->getConfigVariable(
'MFExpandAllSectionsUserOption' );
+ $vars['wgMFEnableFontChanger'] = $context->getConfigVariable(
'MFEnableFontChanger' );
$vars += self::getWikibaseStaticConfigVars( $context );
return true;
diff --git a/includes/specials/SpecialMobileOptions.php
b/includes/specials/SpecialMobileOptions.php
index 662304b..4b8a130 100644
--- a/includes/specials/SpecialMobileOptions.php
+++ b/includes/specials/SpecialMobileOptions.php
@@ -16,8 +16,6 @@
private $options = [
'Language' => [ 'get' => 'chooseLanguage' ],
];
- /** @var boolean Whether the special page's content should be wrapped
in div.content */
- protected $unstyledContent = false;
/**
* Construct function
@@ -68,22 +66,6 @@
}
/**
- * Gets the Resource Loader modules that should be added to the output.
- *
- * @param MobileContext $context
- * @return string[]
- */
- private function getModules( MobileContext $context ) {
- $result = [];
-
- if ( $context->getConfigVariable( 'MFEnableFontChanger' ) ) {
- $result[] =
'mobile.special.mobileoptions.scripts.fontchanger';
- }
-
- return $result;
- }
-
- /**
* Render the settings form (with actual set settings) and add it to the
* output as well as any supporting modules.
*/
@@ -93,6 +75,7 @@
$user = $this->getUser();
$out->setPageTitle( $this->msg(
'mobile-frontend-main-menu-settings-heading' ) );
+ $out->enableOOUI();
if ( $this->getRequest()->getCheck( 'success' ) ) {
$out->wrapWikiMsg(
@@ -101,64 +84,62 @@
);
}
- $betaEnabled = $context->isBetaGroupMember();
-
- $imagesBeta = $betaEnabled ? 'checked' : '';
- $betaEnableMsg = $this->msg( 'mobile-frontend-settings-beta'
)->parse();
- $betaDescriptionMsg = $this->msg(
'mobile-frontend-opt-in-explain' )->parse();
-
- $saveSettings = $this->msg( 'mobile-frontend-save-settings'
)->escaped();
- $action = $this->getPageTitle()->getLocalURL();
- $html = Html::openElement( 'form',
- [ 'class' => 'mw-mf-settings', 'method' => 'POST',
'action' => $action ]
- );
- $token = $user->isLoggedIn() ? Html::hidden( 'token',
$user->getEditToken() ) : '';
- $returnto = Html::hidden( 'returnto',
$this->returnToTitle->getFullText() );
-
- // array to save the data of options, which should be displayed
here
- $options = [];
+ $fields = [];
+ $form = new OOUI\FormLayout( [
+ 'method' => 'POST',
+ 'id' => 'mobile-options',
+ 'action' => $this->getPageTitle()->getLocalURL(),
+ ] );
+ $form->addClasses( [ 'mw-mf-settings' ] );
// beta settings
if ( $this->getMFConfig()->get( 'MFEnableBeta' ) ) {
- $options['beta'] = [
- 'checked' => $imagesBeta,
- 'label' => $betaEnableMsg,
- 'description' => $betaDescriptionMsg,
- 'name' => 'enableBeta',
- 'id' => 'enable-beta-toggle',
- ];
+ $fields[] = new OOUI\FieldLayout(
+ new OOUI\CheckboxInputWidget( [
+ 'name' => 'enableBeta',
+ 'infusable' => true,
+ 'selected' =>
$context->isBetaGroupMember(),
+ 'id' => 'enable-beta-toggle',
+ 'value' => '1',
+ ] ),
+ [
+ 'label' => new OOUI\LabelWidget( [
+ 'label' => new OOUI\HtmlSnippet(
+ Html::openElement(
'div' ) .
+ Html::element(
'strong', [],
+ $this->msg(
'mobile-frontend-settings-beta' )->parse() ) .
+ Html::element( 'div', [
'class' => 'option-description' ],
+ $this->msg(
'mobile-frontend-opt-in-explain' )->parse()
+ ) .
+ Html::closeElement(
'div' )
+ )
+ ] ),
+ 'id' => 'beta-field',
+ ]
+ );
}
- $templateParser = new TemplateParser(
- __DIR__ .
'/../../resources/mobile.special.mobileoptions.scripts' );
- // @codingStandardsIgnoreStart Long line
- foreach( $options as $key => $data ) {
- if ( isset( $data['type'] ) && $data['type'] ===
'hidden' ) {
- $html .= Html::element( 'input',
- array(
- 'type' => 'hidden',
- 'name' => $data['name'],
- 'value' => $data['checked'],
- )
- );
- } else {
- $html .= $templateParser->processTemplate(
'checkbox', $data );
- }
+ $fields[] = new OOUI\ButtonInputWidget( [
+ 'id' => 'mw-mf-settings-save',
+ 'infusable' => true,
+ 'value' => $this->msg( 'mobile-frontend-save-settings'
)->escaped(),
+ 'label' => $this->msg( 'mobile-frontend-save-settings'
)->escaped(),
+ 'flags' => [ 'primary', 'progressive' ],
+ 'type' => 'submit',
+ ] );
+
+ if ( $user->isLoggedIn() ) {
+ $fields[] = new OOUI\HtmlSnippet( Html::hidden(
'token', $user->getEditToken() ) );
}
- $className = MobileUI::buttonClass( 'constructive' );
- $html .= <<<HTML
- <input type="submit" class="{$className}"
id="mw-mf-settings-save" value="{$saveSettings}">
- $token
- $returnto
- </form>
-HTML;
+ $fields[] = new OOUI\HtmlSnippet(
+ Html::hidden( 'returnto',
$this->returnToTitle->getFullText() )
+ );
+
// @codingStandardsIgnoreEnd
- $out->addHTML( $html );
-
- $modules = $this->getModules( $context );
-
- $this->getOutput()
- ->addModules( $modules );
+ $form->appendContent(
+ $fields
+ );
+ $out->addHTML( $form );
}
/**
diff --git a/jsduck.json b/jsduck.json
index 8e7de6c..dcdd64e 100644
--- a/jsduck.json
+++ b/jsduck.json
@@ -22,6 +22,7 @@
"OO.ui.ToolGroup",
"OO.ui.Tool",
"OO.ui.mixin.LookupElement",
+ "OO.ui.LabelWidget",
"OO.EventEmitter",
"ve.init.mw.MobileArticleTarget",
"mw.echo.dm.NotificationItem"
diff --git
a/resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.hogan
b/resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.hogan
deleted file mode 100644
index f52509b..0000000
---
a/resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.hogan
+++ /dev/null
@@ -1,9 +0,0 @@
-<span class="fontchanger enableMessage">{{enableMsg}}</span>
-<div class="mobileoption fontchanger">
- {{#minusButton}}{{>button}}{{/minusButton}}
- {{#valueButton}}{{>button}}{{/valueButton}}
- {{#plusButton}}{{>button}}{{/plusButton}}
- <div class="option-description">
- {{descriptionMsg}}
- </div>
-</div>
diff --git
a/resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.js
b/resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.js
deleted file mode 100644
index 857d643..0000000
--- a/resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.js
+++ /dev/null
@@ -1,92 +0,0 @@
-( function ( M ) {
- var View = M.require( 'mobile.startup/View' ),
- Button = M.require( 'mobile.startup/Button' );
-
- /**
- * FontChanger wrapper
- * @class FontChanger
- * @extends View
- */
- function FontChanger() {
- View.apply( this, arguments );
- }
-
- OO.mfExtend( FontChanger, View, {
- /**
- * @cfg {Object} defaults Default options hash.
- * @cfg {Object} defaults.viewLink Anchor options for a link to
wikidata page.
- */
- defaults: {
- plusButton: new Button( {
- progressive: true,
- additionalClassNames: 'fontchanger plus',
- label: '+'
- } ).options,
- minusButton: new Button( {
- progressive: true,
- additionalClassNames: 'fontchanger minus',
- label: '-'
- } ).options,
- valueButton: new Button( {
- additionalClassNames: 'fontchanger-value',
- label: '100%'
- } ).options
- },
- /** @inheritdoc */
- template: mw.template.get(
'mobile.special.mobileoptions.scripts.fontchanger', 'FontChanger.hogan' ),
- /** @inheritdoc */
- templatePartials: {
- button: Button.prototype.template
- },
- /**
- * Save the actual font size setting.
- * @method
- */
- save: function () {
- mw.storage.set( this.options.name,
this.fontchanger.val() );
- },
-
- /**
- * @inheritdoc
- */
- postRender: function () {
- var self = this;
-
- this.fontchanger = this.$( '.fontchanger-value' );
- this.changePlus = this.$( '.fontchanger.plus' );
- this.changeMinus = this.$( '.fontchanger.minus' );
- this.setPercentage( mw.storage.get( this.options.name )
|| 100 );
-
- this.fontchanger.on( 'click', function () {
- self.setPercentage( 100 );
- return false;
- } );
-
- this.changeMinus.on( 'click', function () {
- self.setPercentage( self.fontchanger.val() - 10
);
- return false;
- } );
-
- this.changePlus.on( 'click', function () {
- self.setPercentage( parseInt(
self.fontchanger.val() ) + 10 );
- return false;
- } );
- },
-
- /**
- * Set a new percentage (doesn't change the value higher then
200% and lower then 10%)
- * @param {number} percentage New percentage value
- */
- setPercentage: function ( percentage ) {
- // disallow changes under 10% and over 200%
- if ( percentage > 9 && percentage < 201 ) {
- this.fontchanger
- .text( percentage + '%' )
- .val( percentage );
- }
- }
- } );
-
- M.define( 'mobile.fontchanger/FontChanger', FontChanger );
-
-}( mw.mobileFrontend ) );
diff --git
a/resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.less
b/resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.less
deleted file mode 100644
index 0ccb791..0000000
---
a/resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.less
+++ /dev/null
@@ -1,16 +0,0 @@
-.mobileoption {
- &.fontchanger {
- text-align: center;
- }
-}
-
-.fontchanger {
- &.enableMessage {
- font-size: 18px;
- font-weight: bold;
- }
-
- .option-description {
- padding-top: 1em;
- }
-}
diff --git a/resources/mobile.special.mobileoptions.scripts.fontchanger/init.js
b/resources/mobile.special.mobileoptions.scripts.fontchanger/init.js
deleted file mode 100644
index 0bd5262..0000000
--- a/resources/mobile.special.mobileoptions.scripts.fontchanger/init.js
+++ /dev/null
@@ -1,15 +0,0 @@
-( function ( M, $ ) {
- var FontChanger = M.require( 'mobile.fontchanger/FontChanger' );
-
- $( function () {
- var saveLI = $( '#mw-mf-settings-save' ),
- fontChanger = new FontChanger( {
- name: 'userFontSize',
- enableMsg: mw.msg(
'mobile-frontend-fontchanger-link' ),
- descriptionMsg: mw.msg(
'mobile-frontend-fontchanger-desc' )
- } );
-
- fontChanger.insertBefore( saveLI );
- $( 'form.mw-mf-settings' ).on( 'submit', fontChanger.save.bind(
fontChanger ) );
- } );
-}( mw.mobileFrontend, jQuery ) );
diff --git a/resources/mobile.special.mobileoptions.scripts/checkbox.mustache
b/resources/mobile.special.mobileoptions.scripts/checkbox.mustache
deleted file mode 100644
index 4de95b9..0000000
--- a/resources/mobile.special.mobileoptions.scripts/checkbox.mustache
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="mobileoption">
- <div class="mw-ui-checkbox">
- <input type="checkbox" name="{{name}}" id="{{name}}-toggle"
{{checked}}>
- <label for="{{name}}-toggle">
- {{label}}
- </label>
- </div>
- <div class="option-description">
- {{description}}
- </div>
-</div>
diff --git a/resources/mobile.special.mobileoptions.scripts/mobileoptions.js
b/resources/mobile.special.mobileoptions.scripts/mobileoptions.js
index 56842ca..4f454f9 100644
--- a/resources/mobile.special.mobileoptions.scripts/mobileoptions.js
+++ b/resources/mobile.special.mobileoptions.scripts/mobileoptions.js
@@ -1,51 +1,146 @@
( function ( M, $ ) {
- var View = M.require( 'mobile.startup/View' );
+ var storage = mw.storage,
+ cookie = $.cookie,
+ notification,
+ toast = M.require( 'mobile.startup/toast' ),
+ EXPAND_SECTIONS_KEY = 'expandSections',
+ msg = mw.msg,
+ FONT_SIZE_KEY = 'userFontSize';
/**
- * Wrapper for checkboxes styled as in MediaWiki UI style guide
- * @class Checkbox
- * @extends View
+ * Notifies the user that settings were asynchronously saved.
+ * @method
+ * @ignore
*/
- function Checkbox() {
- View.apply( this, arguments );
+ function notify() {
+ if ( notification ) {
+ clearTimeout( notification );
+ }
+ notification = setTimeout( function () {
+ toast.show( msg( 'mobile-frontend-settings-save' ) );
+ }, 1000 );
+ }
+ /**
+ * Creates a label for use with a form input
+ * @method
+ * @ignore
+ * @param {String} heading
+ * @param {String} description
+ * @return {OO.ui.LabelWidget}
+ */
+ function createLabel( heading, description ) {
+ var $label = $( '<div>' );
+ $label.append( $( '<strong>' ).text( heading ) );
+ $label.append(
+ $( '<div class="option-description">' )
+ .text( description )
+ );
+
+ return new OO.ui.LabelWidget( {
+ label: $label
+ } );
}
- OO.mfExtend( Checkbox, View, {
- template: mw.template.get(
'mobile.special.mobileoptions.scripts', 'Checkbox.hogan' ),
- /**
- * Save the current state of the checkbox to the storage
- * @method
- */
- save: function () {
- mw.storage.set( this.options.name, this.cb.prop(
'checked' ) ? 'true' : 'false' );
- },
- /** @inheritdoc */
- postRender: function () {
- var cbview = this;
- this.cb = this.$( 'input[type=checkbox]' );
- this.cb.prop( 'checked', mw.storage.get(
this.options.name ) === 'true' );
- $( 'form.mw-mf-settings' ).on( 'submit', $.proxy(
cbview, 'save' ) );
- }
- } );
+ /**
+ * Adds a font changer field to the form
+ * @method
+ * @param {jQuery.Object} $form
+ * @ignore
+ */
+ function addFontChangerToForm( $form ) {
+ var fontChanger, fontChangerDropdown;
+
+ fontChangerDropdown = new OO.ui.DropdownInputWidget( {
+ value: parseInt( storage.get( FONT_SIZE_KEY ), 10 ),
+ options: [
+ {
+ data: 90,
+ label: msg(
'mobile-frontend-fontchanger-option-small' )
+ },
+ {
+ data: 100,
+ label: msg(
'mobile-frontend-fontchanger-option-medium' )
+ },
+ {
+ data: 120,
+ label: msg(
'mobile-frontend-fontchanger-option-large' )
+ },
+ {
+ data: 140,
+ label: msg(
'mobile-frontend-fontchanger-option-xlarge' )
+ }
+ ]
+ } );
+ fontChanger = new OO.ui.FieldLayout(
+ fontChangerDropdown,
+ {
+ label: createLabel( mw.msg(
'mobile-frontend-fontchanger-link' ),
+ mw.msg(
'mobile-frontend-fontchanger-desc' ) ).$element
+ }
+ );
+ fontChangerDropdown.on( 'change', function ( value ) {
+ storage.set( FONT_SIZE_KEY, value );
+ notify();
+ } );
+
+ fontChanger.$element.prependTo( $form );
+ }
+
+ /**
+ * Adds an expand all sections field to the form
+ * @param {jQuery.Object} $form
+ * @ignore
+ * @method
+ */
+ function addExpandAllSectionsToForm( $form ) {
+ var cb, cbField;
+
+ cb = new OO.ui.CheckboxInputWidget( {
+ name: EXPAND_SECTIONS_KEY,
+ selected: storage.get( EXPAND_SECTIONS_KEY ) === 'true'
+ } );
+ cbField = new OO.ui.FieldLayout(
+ cb,
+ {
+ label: createLabel(
+ mw.msg(
'mobile-frontend-expand-sections-status' ),
+ mw.msg(
'mobile-frontend-expand-sections-description' )
+ ).$element
+ }
+ );
+ cb.on( 'change', function () {
+ storage.set( EXPAND_SECTIONS_KEY, this.isSelected() ?
'true' : 'false' );
+ notify();
+ }.bind( cb ) );
+
+ cbField.$element.prependTo( $form );
+ }
/**
* Add features, that depends on localStorage, such as "exapnd all
sections" or "fontchanger".
* The checkbox is used for turning on/off expansion of all sections on
page load.
* @method
+ * @ignore
*/
function initLocalStorageElements() {
- var cb,
- saveLI = $( '#mw-mf-settings-save' );
+ var
+ enableToggle = OO.ui.infuse( $( '#enable-beta-toggle' )
),
+ $form = $( '#mobile-options' );
+
+ // The beta toggle will now work without clicking submit
+ enableToggle.on( 'change', function () {
+ cookie( 'optin', this.isSelected() ? 'beta' : '' );
+ notify();
+ }.bind( enableToggle ) );
if ( mw.config.get( 'wgMFExpandAllSectionsUserOption' ) ) {
- cb = new Checkbox( {
- name: 'expandSections',
- label: mw.msg(
'mobile-frontend-expand-sections-status' ),
- description: mw.msg(
'mobile-frontend-expand-sections-description' )
- } );
- cb.insertBefore( saveLI );
+ addExpandAllSectionsToForm( $form );
+ }
+
+ if ( mw.config.get( 'wgMFEnableFontChanger' ) ) {
+ addFontChangerToForm( $form );
}
}
- $( initLocalStorageElements );
+ mw.loader.using( 'oojs-ui-widgets' ).then( initLocalStorageElements );
}( mw.mobileFrontend, jQuery ) );
diff --git a/resources/mobile.special.mobileoptions.styles/mobileoptions.less
b/resources/mobile.special.mobileoptions.styles/mobileoptions.less
index cce9062..10b4b3a 100644
--- a/resources/mobile.special.mobileoptions.styles/mobileoptions.less
+++ b/resources/mobile.special.mobileoptions.styles/mobileoptions.less
@@ -1,25 +1,73 @@
+@import 'mobile.variables';
+
/*
SETTINGS PAGE
*/
+.client-js {
+
+ #mw-mf-settings-save {
+ display: none;
+ }
+}
+
form.mw-mf-settings {
margin: 0;
padding: 0;
padding-bottom: 40px;
- .mobileoption {
+ .oo-ui-fieldLayout-header strong {
font-size: 1.1em;
font-weight: bold;
- margin-bottom: 40px;
}
.option-description {
font-weight: normal;
font-size: 0.8em;
padding-right: 8px;
- line-height: 2em;
- vertical-align: middle;
- display: block;
- position: relative;
+ line-height: 1.4em;
}
+ .oo-ui-fieldLayout {
+ border-top: solid 1px @colorGray14;
+ padding-top: 12.5px;
+ }
+
+ #beta-field {
+ border-top: 0;
+ padding-top: 0;
+
+ &:before {
+ content: '';
+ width: 100%;
+ height: 10%;
+ background: @colorGray14;
+ padding-top: 20px;
+ margin-bottom: 10px;
+ display: block;
+ }
+
+ &:first-child {
+ border-top: solid 1px @colorGray14;
+
+ &:before {
+ background: none;
+ }
+ }
+ }
+
+ .oo-ui-fieldLayout-body {
+ margin-bottom: 40px;
+ }
+
+ // Work around for T180652
+ .oo-ui-fieldLayout-header {
+ width: 65% !important;
+ }
+ .oo-ui-fieldLayout-field {
+ width: 30% !important;
+ text-align: right;
+ .oo-ui-widget {
+ text-align: left;
+ }
+ }
}
--
To view, visit https://gerrit.wikimedia.org/r/393851
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I70f68df9d2d305126444319b05675702af75de87
Gerrit-PatchSet: 10
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: specialpages
Gerrit-Owner: Jdlrobson <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Pmiazga <[email protected]>
Gerrit-Reviewer: VolkerE <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
