Merge "settings: Add help dialog"

This commit is contained in:
jenkins-bot 2015-01-21 16:47:19 +00:00 committed by Gerrit Code Review
commit 72362616a2
10 changed files with 144 additions and 36 deletions

View file

@ -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__,

View file

@ -40,4 +40,4 @@ $wgHooks['GetBetaFeaturePreferences'][] = 'PopupsHooks::getPreferences';
$wgHooks['BeforePageDisplay'][] = 'PopupsHooks::onBeforePageDisplay';
$wgHooks['ResourceLoaderTestModules'][] = 'PopupsHooks::onResourceLoaderTestModules';
$wgHooks['EventLoggingRegisterSchemas'][] = 'PopupsHooks::onEventLoggingRegisterSchemas';
$wgHooks[ 'ResourceLoaderRegisterModules' ][] = 'PopupsHooks::onResourceLoaderRegisterModules';
$wgHooks[ 'ResourceLoaderRegisterModules' ][] = 'PopupsHooks::onResourceLoaderRegisterModules';

View file

@ -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"
}

View file

@ -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}}"
}

View file

@ -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();

View file

@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 288 B

14
resources/footer-ltr.svg Normal file
View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 303 B

14
resources/footer-rtl.svg Normal file
View 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