Introduce display settings link at the top of ULS

Extend $.fn.uls render method to add additional rendering of display
settings link.

Add css for the new element.

Add display.png icon from the Agora icon set.

Change-Id: I7a29b4892be02526969b0dd786c74bdb7551c074
This commit is contained in:
Santhosh Thottingal
2012-08-09 16:44:19 +05:30
committed by Amir E. Aharoni
parent 8855af1428
commit 1648899c45
5 changed files with 54 additions and 13 deletions

View File

@@ -63,7 +63,8 @@ $wgAPIModules['languagesearch'] = 'ApiLanguageSearch';
$wgHooks['UserGetLanguageObject'][] = 'UniversalLanguageSelectorHooks::getLanguage';
$wgResourceModules['ext.uls.init'] = array(
'scripts' => 'resources/ext.uls.init.js',
'scripts' => 'resources/js/ext.uls.init.js',
'styles' => 'resources/css/ext.uls.css',
'localBasePath' => $dir,
'remoteExtPath' => 'UniversalLanguageSelector',
'dependencies' => array(

View File

@@ -108,14 +108,8 @@
<h2 class="ten columns end offset-by-one">No results found for "<span id="uls-no-found-search-term">Esapnol</span>"</h2>
<div id="uls-no-found-more">
<div class="ten columns end offset-by-one">
<p>You can search by language name, script name, ISO code of language or you can browse by region:
<a class="uls-region-link" data-region="NA" href="#">America</a>,
<a class="uls-region-link" data-region="EU" href="#">Europe</a>,
<a class="uls-region-link" data-region="ME" href="#">Middle East</a>,
<a class="uls-region-link" data-region="AF" href="#">Africa</a>,
<a class="uls-region-link" data-region="AS" href="#">Asia</a>,
<a class="uls-region-link" data-region="PA" href="#">Pacific</a> or
<a class="uls-region-link" data-region="WW" href="#">Worldwide languages</a>.
<p>
You can search by language name, script name, ISO code of language or you can browse by region: <a class="uls-region-link" data-region="NA" href="#">America</a>, <a class="uls-region-link" data-region="EU" href="#">Europe</a>, <a class="uls-region-link" data-region="ME" href="#">Middle East</a>, <a class="uls-region-link" data-region="AF" href="#">Africa</a>, <a class="uls-region-link" data-region="AS" href="#">Asia</a>, <a class="uls-region-link" data-region="PA" href="#">Pacific</a> or <a class="uls-region-link" data-region="WW" href="#">Worldwide languages</a>.
</p>
</div>
</div>

19
resources/css/ext.uls.css Normal file
View File

@@ -0,0 +1,19 @@
div#settings-block {
border-left: 1px solid #C9C9C9;
padding-left: 10px;
}
div#display-settings-block {
/* @embed */
background: url('../images/display.png');
background-repeat: no-repeat;
background-size: 20px auto;
padding-left: 25px;
cursor: pointer;
}
.settings-title {
font-size: 11pt;
}
.settings-text {
color: #555555;
font-size: 9pt;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@@ -17,25 +17,52 @@
* @licence MIT License
*/
( function( $ ) {
( function( $, mw ) {
"use strict";
$( document ).ready( function( ) {
var $ulsTrigger = $( '.uls-trigger' ),
previousLang = $.cookie( 'uls-previous-language' ),
currentLang = mw.config.get( 'wgUserLanguage' );
/**
* Change the language of wiki using setlang URL parameter
* @param {String} language
*/
var changeLanguage = function( language ) {
function changeLanguage( language ) {
$.cookie( 'uls-previous-language', currentLang );
var uri = new mw.Uri( window.location.href );
uri.extend( {
setlang: language
} );
window.location.href = uri.toString();
};
}
function displaySettings() {
var $displaySettingsTitle = $( '<div>' )
.addClass( 'settings-title' )
.text( 'Display settings' ),
$displaySettingsText = $( '<span>' )
.addClass( 'settings-text' )
.text( 'Set language for menus and fonts.' ),
$displaySettings = $( '<div>' )
.addClass( 'display-settings-block' )
.prop( 'id', 'display-settings-block' )
.append( $displaySettingsTitle )
.append( $displaySettingsText );
$displaySettings.on( 'click', function() {
// TODO: Show language settings window with display settings highlighted
} );
return $displaySettings;
}
// Extend the render api of ULS to add display and input settings.
$.fn.uls.Constructor.prototype = $.extend( {}, $.fn.uls.Constructor.prototype, {
render: function() {
var $displaySettings = displaySettings();
this.$menu.find("div#settings-block").append($displaySettings);
}
} );
$ulsTrigger.uls( {
onSelect: function( language ) {
@@ -101,4 +128,4 @@
changeLanguage( $(this).attr( 'lang' ) );
} );
} );
} )( jQuery );
} )( jQuery, mediaWiki );