diff --git a/modules/overlay/Help.png b/modules/overlay/Help.png new file mode 100644 index 000000000..5a7133d2b Binary files /dev/null and b/modules/overlay/Help.png differ diff --git a/modules/overlay/ext.echo.overlay.css b/modules/overlay/ext.echo.overlay.css index 4c5af355c..8fd69a5b0 100644 --- a/modules/overlay/ext.echo.overlay.css +++ b/modules/overlay/ext.echo.overlay.css @@ -65,6 +65,25 @@ font-weight: bold; position: relative; } +#mw-echo-overlay-title-text { + display: inline-block; +} +#mw-echo-moreinfo-link { + display: inline-block; + margin: 0px 2px -2px 4px; + height: 13px; + width: 13px; + /* @embed */ + background-image: url(Help.png); + background-repeat: no-repeat; + background-position: 0 0; + filter: alpha(opacity=50); + opacity: 0.5; +} +#mw-echo-moreinfo-link:hover { + filter: alpha(opacity=100); + opacity: 1.0; +} #mw-echo-overlay-footer { padding: 0px; diff --git a/modules/overlay/ext.echo.overlay.js b/modules/overlay/ext.echo.overlay.js index e57566e43..76049c770 100644 --- a/modules/overlay/ext.echo.overlay.js +++ b/modules/overlay/ext.echo.overlay.js @@ -113,7 +113,7 @@ count = result.query.notifications.count; mw.echo.overlay.updateCount( count ); // Reset header to 'Notifications' - $( '#echo-overlay-title-text').text( mw.msg( 'echo-overlay-title' ) ); + $( '#mw-echo-overlay-title-text').text( mw.msg( 'echo-overlay-title' ) ); } } } ); @@ -131,11 +131,21 @@ // Add the 'mark all as read' button to the title area $title.append( $markReadButton ); } + // Add the header to the title area $( '
' ) - .attr( 'id', 'echo-overlay-title-text' ) + .attr( 'id', 'mw-echo-overlay-title-text' ) .text( titleText ) .appendTo( $title ); + + // Add help button + $( '' ) + .attr( 'href', mw.config.get( 'wgEchoHelpPage' ) ) + .attr( 'title', mw.msg( 'echo-more-info' ) ) + .attr( 'id', 'mw-echo-moreinfo-link' ) + .attr( 'target', '_blank' ) + .appendTo( $title ); + // Insert the title area into the overlay $title.appendTo( $overlay );