mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups
synced 2024-11-28 01:10:04 +00:00
Merge "settings: Add help dialog"
This commit is contained in:
jenkins-bot
Gerrit Code Review
commit
72362616a2
|
|
@ -91,6 +91,8 @@ class PopupsHooks {
|
|||
"popups-settings-save",
|
||||
"popups-settings-cancel",
|
||||
"popups-settings-enable",
|
||||
"popups-settings-help",
|
||||
"popups-settings-help-ok",
|
||||
),
|
||||
'remoteExtPath' => 'Popups',
|
||||
'localBasePath' => __DIR__,
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}}"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -173,9 +220,6 @@
|
|||
$footer.append( $setting );
|
||||
};
|
||||
|
||||
|
||||
settings.render();
|
||||
|
||||
$( function () {
|
||||
if( !mw.popups.enabled ) {
|
||||
settings.addFooterLink();
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
BIN
resources/footer-ltr.png
Normal file
BIN
resources/footer-ltr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 288 B |
14
resources/footer-ltr.svg
Normal file
14
resources/footer-ltr.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 911 B |
BIN
resources/footer-rtl.png
Normal file
BIN
resources/footer-rtl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 303 B |
14
resources/footer-rtl.svg
Normal file
14
resources/footer-rtl.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 923 B |
Loading…
Reference in a new issue