jenkins-bot has submitted this change and it was merged.
Change subject: settings: Add help dialog
......................................................................
settings: Add help dialog
Change-Id: I5f4cf435356748a1aceb05fcaf8c8980b8267804
---
M Popups.hooks.php
M Popups.php
M i18n/en.json
M i18n/qqq.json
M resources/ext.popups.settings.js
M resources/ext.popups.settings.less
A resources/footer-ltr.png
A resources/footer-ltr.svg
A resources/footer-rtl.png
A resources/footer-rtl.svg
10 files changed, 144 insertions(+), 36 deletions(-)
Approvals:
AndyRussG: Looks good to me, approved
jenkins-bot: Verified
diff --git a/Popups.hooks.php b/Popups.hooks.php
index 98d4acf..ed6e5a2 100644
--- a/Popups.hooks.php
+++ b/Popups.hooks.php
@@ -91,6 +91,8 @@
"popups-settings-save",
"popups-settings-cancel",
"popups-settings-enable",
+ "popups-settings-help",
+ "popups-settings-help-ok",
),
'remoteExtPath' => 'Popups',
'localBasePath' => __DIR__,
diff --git a/Popups.php b/Popups.php
index 7ee79dc..b294cd7 100644
--- a/Popups.php
+++ b/Popups.php
@@ -40,4 +40,4 @@
$wgHooks['BeforePageDisplay'][] = 'PopupsHooks::onBeforePageDisplay';
$wgHooks['ResourceLoaderTestModules'][] =
'PopupsHooks::onResourceLoaderTestModules';
$wgHooks['EventLoggingRegisterSchemas'][] =
'PopupsHooks::onEventLoggingRegisterSchemas';
-$wgHooks[ 'ResourceLoaderRegisterModules' ][] =
'PopupsHooks::onResourceLoaderRegisterModules';
+$wgHooks[ 'ResourceLoaderRegisterModules' ][] =
'PopupsHooks::onResourceLoaderRegisterModules';
\ No newline at end of file
diff --git a/i18n/en.json b/i18n/en.json
index 2b8a7a4..0b14cb1 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -7,14 +7,16 @@
"popups-last-edited": "Last edited $1",
"popups-redirects": "redirects to <h3>$1</h3>",
"popups-settings-title": "Page preview",
- "popups-settings-description": "This tool lets you preview blue links and
references",
+ "popups-settings-description": "This tool lets you preview blue links and
references.",
"popups-settings-option-simple": "Simple",
- "popups-settings-option-simple-description": "See the lead sentence of a
page and a preview image. This is recommended for readers",
+ "popups-settings-option-simple-description": "See the lead sentence of a
page and a preview image. This is recommended for readers.",
"popups-settings-option-advanced": "Advanced",
"popups-settings-option-advanced-description": "See link previews and
access editing function menus. This is used by many editors.",
"popups-settings-option-off": "Disable previews",
- "popups-settings-option-off-description": "You can change this setting
using the link in the footer of the page",
+ "popups-settings-option-off-description": "You can change this setting
using the link in the footer of the page.",
"popups-settings-save": "Save",
+ "popups-settings-help-ok": "OK",
"popups-settings-cancel": "Cancel",
+ "popups-settings-help": "You can turn previews back on using a link in the
footer of the page.",
"popups-settings-enable": "Enable previews"
}
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 8777f01..81e2cf4 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -18,6 +18,8 @@
"popups-settings-option-off": "Title to turn off hovercards
option.\n\nSee also:\n* {{msg-mw|Popups-settings-enable}}",
"popups-settings-option-off-description": "Description for turn off
hovercards option",
"popups-settings-save": "Save buttton for the setting's
dialoag\n{{Identical|Save}}",
+ "popups-settings-help-okay": "Button to close help dialog",
"popups-settings-cancel": "Cancel button for the setting's
dialog\n{{Identical|Cancel}}",
+ "popups-settings-help": "Help text explaining how to re-enable
previews",
"popups-settings-enable": "Link on the footer to enable hovercards if
its disabled.\n\nSee also:\n* {{msg-mw|Popups-settings-option-off}}"
}
diff --git a/resources/ext.popups.settings.js b/resources/ext.popups.settings.js
index 7217c6a..636d9f0 100644
--- a/resources/ext.popups.settings.js
+++ b/resources/ext.popups.settings.js
@@ -14,10 +14,11 @@
settings.navPopEnabled = ( typeof disablePopups !== 'undefined' );
/**
- * The settings' dialog's section element
+ * The settings' dialog's section element.
+ * Defined in settings.open
* @property $element
*/
- settings.$element = $( '<section> ' ).attr( 'id', 'mwe-popups-settings'
);
+ settings.$element = null;
/**
* Renders the relevant form and labels in the settings dialog
@@ -31,29 +32,65 @@
$title = $( '<header>' ).append( $closeIcon, $titleText
),
$description = $( '<p>' ).text( mw.message(
'popups-settings-description' ).text() ),
$radioGroup = $( '<radiogroup>' ),
- $cancelButton = $( '<button>' ).addClass( 'mw-ui-button
mw-ui-quiet' ).text( mw.message( 'popups-settings-cancel' ).text() ).attr(
'type', 'button' ),
- $saveButton = $( '<button>' ).addClass( 'mw-ui-button
mw-ui-constructive' ).text( mw.message( 'popups-settings-save' ).text() ).attr(
'type', 'button' ),
- $actions = $( '<div>' ).addClass(
'mwe-popups-settings-actions' ).append( $cancelButton, $saveButton ),
+ $cancelButton = $( '<button>' )
+ .addClass( 'mw-ui-button mw-ui-quiet' )
+ .text( mw.message( 'popups-settings-cancel'
).text() )
+ .attr( 'type', 'button' ),
+ $saveButton = $( '<button>' )
+ .addClass( 'mw-ui-button mw-ui-constructive' )
+ .text( mw.message( 'popups-settings-save'
).text() )
+ .attr( 'type', 'button' ),
+ $actions = $( '<div>' )
+ .addClass( 'mwe-popups-settings-actions' )
+ .append( $cancelButton, $saveButton ),
+ $okayButton = $( '<button>' )
+ .addClass( 'mw-ui-button mw-ui-constructive' )
+ .text( mw.message( 'popups-settings-help-ok'
).text() )
+ .attr( 'type', 'button' ),
+ $help = $( '<div>' )
+ .attr( 'id', 'mwe-popups-settings-help' )
+ .append(
+ $( '<p>' ).text( mw.message(
'popups-settings-help' ).text() ),
+ $( '<div>' ).addClass(
'mwe-popups-settings-help-image' ),
+ $( '<div>' ).addClass(
'mwe-popups-settings-actions' ).append( $okayButton )
+ )
+ .hide(),
$form = $( '<form>' ).append( $radioGroup, $actions ),
- $main = $( '<main>' ).append( $description, $form ),
- options = [
- [ mw.message( 'popups-settings-option-simple'
).text(), mw.message( 'popups-settings-option-simple-description' ).text(),
'hovercard.svg' ],
- [ mw.message( 'popups-settings-option-advanced'
).text(), mw.message( 'popups-settings-option-advanced-description' ).text(),
'navpop.svg' ],
- [ mw.message( 'popups-settings-option-off'
).text(), mw.message( 'popups-settings-option-off-description' ).text() ]
- ];
+ $main = $( '<main>' ).attr( 'id',
'mwe-popups-settings-form' ).append( $description, $form ),
+ options = {
+ 'simple': [
+ mw.message(
'popups-settings-option-simple' ).text(),
+ mw.message(
'popups-settings-option-simple-description' ).text(),
+ 'hovercard.svg'
+ ],
+ 'advanced': [
+ mw.message(
'popups-settings-option-advanced' ).text(),
+ mw.message(
'popups-settings-option-advanced-description' ).text(),
+ 'navpop.svg'
+ ],
+ 'off': [
+ mw.message(
'popups-settings-option-off' ).text(),
+ mw.message(
'popups-settings-option-off-description' ).text()
+ ]
+ };
$( $closeIcon ).add( $cancelButton ).click( settings.close );
$saveButton.click( settings.save );
+ $okayButton.click( function () {
+ settings.close();
+ location.reload();
+ } );
- $radioGroup.append( settings.renderOption( 0, options[ 0 ],
true ) );
+ $radioGroup.append( settings.renderOption( 'simple',
options.simple, true ) );
if ( settings.navPopEnabled ) {
- $radioGroup.append( settings.renderOption( 1, options[
1 ] ) );
+ $radioGroup.append( settings.renderOption( 'advanced',
options.advanced ) );
}
- $radioGroup.append( settings.renderOption( 2, options[ 2 ] ) );
+ $radioGroup.append( settings.renderOption( 'off', options.off )
);
+ settings.$element = $( '<section> ' ).attr( 'id',
'mwe-popups-settings' );
settings.$element
.hide()
- .append( $title, $main );
+ .append( $title, $main, $help );
$( 'body' ).append( settings.$element );
};
@@ -103,15 +140,15 @@
*/
settings.save = function () {
var v =
$('input[name=mwe-popups-setting]:checked','#mwe-popups-settings').val();
- if ( v === '0' ) {
+ if ( v === 'simple' ) {
$.jStorage.set( 'mwe-popups-enabled', 'true' );
location.reload();
+ settings.close();
} else {
$.jStorage.set( 'mwe-popups-enabled', 'false' );
- location.reload();
+ $( '#mwe-popups-settings-form' ).hide();
+ $( '#mwe-popups-settings-help' ).show();
}
-
- settings.close();
};
/**
@@ -126,6 +163,10 @@
$( 'body' ).append( $( '<div>' ).addClass( 'mwe-popups-overlay'
) );
+ if ( !settings.$element ) {
+ settings.render();
+ }
+
settings.$element
.show()
.css( 'left', ( w - 600 ) / 2 )
@@ -135,13 +176,19 @@
};
/**
- * Close the setting dialoag and remove the overlay
+ * Close the setting dialoag and remove the overlay.
+ * If the close button is clicked on the help dialog
+ * save the setting and reload the page.
*
* @method close
*/
settings.close = function () {
- $( '.mwe-popups-overlay' ).remove();
- settings.$element.hide();
+ if ( $( '#mwe-popups-settings-help' ).is( ':visible' ) ) {
+ location.reload();
+ } else {
+ $( '.mwe-popups-overlay' ).remove();
+ settings.$element.hide();
+ }
};
/**
@@ -172,9 +219,6 @@
}
$footer.append( $setting );
};
-
-
- settings.render();
$( function () {
if( !mw.popups.enabled ) {
diff --git a/resources/ext.popups.settings.less
b/resources/ext.popups.settings.less
index 061ce64..0b5692b 100644
--- a/resources/ext.popups.settings.less
+++ b/resources/ext.popups.settings.less
@@ -1,3 +1,5 @@
+@import "mediawiki.mixins.less";
+
#mwe-popups-settings {
position: fixed;
z-index: 1000;
@@ -92,17 +94,45 @@
font-weight: 100;
}
}
-
- .mwe-popups-settings-actions {
- clear: both;
- text-align: right;
- margin: 10px;
- margin-bottom: 20px;
- }
}
}
}
+#mwe-popups-settings-help {
+ font-size: 18px;
+ font-weight: 800;
+ margin: 50px;
+ margin-bottom: 20px;
+ margin-right: 0;
+
+ p {
+ margin-right: 150px;
+ }
+
+ div.mwe-popups-settings-help-image {
+ margin-left: -55px;
+ margin-top: 20px;
+ margin-bottom: 50px;
+ background: #eee;
+ height: 65px;
+ width: 450px;
+ .background-image-svg( "footer-ltr.svg", "footer-ltr.png" );
+ background-position: center;
+ background-repeat: no-repeat;
+ }
+}
+
+.rtl #mwe-popups-settings-help div.mwe-popups-settings-help-image {
+ .background-image-svg( "footer-rtl.svg", "footer-rtl.png" );
+}
+
+.mwe-popups-settings-actions {
+ clear: both;
+ text-align: right;
+ margin: 10px;
+ margin-bottom: 20px;
+}
+
.mwe-popups-overlay {
background: rgba( 0, 0, 0, 0.3 );
z-index: 999;
diff --git a/resources/footer-ltr.png b/resources/footer-ltr.png
new file mode 100644
index 0000000..5ebacfd
--- /dev/null
+++ b/resources/footer-ltr.png
Binary files differ
diff --git a/resources/footer-ltr.svg b/resources/footer-ltr.svg
new file mode 100644
index 0000000..839c0fe
--- /dev/null
+++ b/resources/footer-ltr.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.2, SVG Export Plug-In . SVG Version:
6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px"
+ width="405px" height="38px" viewBox="0 0 405 38"
enable-background="new 0 0 405 38" xml:space="preserve">
+<g>
+ <rect y="13" opacity="0.5" fill="#3366BB" width="73" height="12"/>
+ <rect x="84" y="13" opacity="0.5" fill="#3366BB" width="43"
height="12"/>
+ <rect x="214" y="13" opacity="0.5" fill="#3366BB" width="43"
height="12"/>
+ <rect x="138" y="13" opacity="0.5" fill="#3366BB" width="63"
height="12"/>
+ <rect x="270" fill="#FFFFFF" width="135" height="38"/>
+ <rect x="282" y="13" fill="#3366BB" width="111" height="12"/>
+</g>
+</svg>
diff --git a/resources/footer-rtl.png b/resources/footer-rtl.png
new file mode 100644
index 0000000..784ea55
--- /dev/null
+++ b/resources/footer-rtl.png
Binary files differ
diff --git a/resources/footer-rtl.svg b/resources/footer-rtl.svg
new file mode 100644
index 0000000..c7af95a
--- /dev/null
+++ b/resources/footer-rtl.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.2, SVG Export Plug-In . SVG Version:
6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px"
+ width="405px" height="38px" viewBox="0 0 405 38"
enable-background="new 0 0 405 38" xml:space="preserve">
+<g>
+ <rect x="332" y="13" opacity="0.5" fill="#3366BB" width="73"
height="12"/>
+ <rect x="278" y="13" opacity="0.5" fill="#3366BB" width="43"
height="12"/>
+ <rect x="148" y="13" opacity="0.5" fill="#3366BB" width="43"
height="12"/>
+ <rect x="204" y="13" opacity="0.5" fill="#3366BB" width="63"
height="12"/>
+ <rect x="0" y="0" fill="#FFFFFF" width="135" height="38"/>
+ <rect x="12" y="13" fill="#3366BB" width="111" height="12"/>
+</g>
+</svg>
--
To view, visit https://gerrit.wikimedia.org/r/157037
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I5f4cf435356748a1aceb05fcaf8c8980b8267804
Gerrit-PatchSet: 13
Gerrit-Project: mediawiki/extensions/Popups
Gerrit-Branch: master
Gerrit-Owner: Prtksxna <[email protected]>
Gerrit-Reviewer: AndyRussG <[email protected]>
Gerrit-Reviewer: Nemo bis <[email protected]>
Gerrit-Reviewer: Prtksxna <[email protected]>
Gerrit-Reviewer: Se4598 <[email protected]>
Gerrit-Reviewer: Siebrand <[email protected]>
Gerrit-Reviewer: Werdna <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
