bryce/mediawiki-extensions-UniversalLanguageSelector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Split language settings view into two tabs

Browse Source 
Change-Id: I539b9794227e0aeac9a759b7e4aa3daf8b73a5c8
This commit is contained in:
Amir E. Aharoni
2013-04-22 15:20:21 +03:00
committed by Gerrit Code Review
parent 0fdedff4bc
commit 865ac4d380
4 changed files with 99 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
i18n/en.json
View File

@@ -7,6 +7,8 @@
"message-documentation": "qqq"
},
"ext-uls-display-settings-title": "Display settings",
"ext-uls-display-settings-language-tab": "Language",
"ext-uls-display-settings-fonts-tab": "Fonts",
"ext-uls-display-settings-title-short": "Display",
"ext-uls-display-settings-desc": "Set language used for menus and fonts.",
"ext-uls-select-language-settings-icon-tooltip": "Language settings",
@@ -15,7 +17,7 @@
"ext-uls-language-settings-apply": "Apply settings",
"ext-uls-language-settings-cancel": "Cancel",
"ext-uls-display-settings-font-settings": "Font settings",
"ext-uls-display-settings-ui-language": "Language for display",
"ext-uls-display-settings-ui-language": "Display language",
"ext-uls-webfonts-settings-title": "Download font when needed",
"ext-uls-webfonts-settings-info": "Webfonts will be downloaded for displaying text in special scripts.",
"ext-uls-webfonts-settings-info-link": "More information",

2
i18n/qqq.json
View File

@@ -9,6 +9,8 @@
]
},
"ext-uls-display-settings-title": "Display settings title text",
"ext-uls-display-settings-language-tab": "A button label, which shows the language selection buttons",
"ext-uls-display-settings-fonts-tab": "A button label, which shows the fonts settings",
"ext-uls-display-settings-title-short": "A short name for display settings screen. Can be a translation for 'Display'",
"ext-uls-display-settings-desc": "Short description about display settings. 'Set language used for menus and set fonts' is equivalent in meaning to the source message.",
"ext-uls-select-language-settings-icon-tooltip": "A tooltip for the icon that shows the language selector.",

50
resources/css/ext.uls.displaysettings.css
View File

@@ -10,6 +10,56 @@ div.display-settings-block {
cursor: pointer;
}
.uls-display-settings-tab-switcher {
text-align: center;
}
.uls-button-group {
display: inline-block;
position: relative;
padding: 0 0 0 0;
left: -20px;
z-index: 1;
}
.uls-button-group > button.button {
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
float: left;
padding: 8px 10px;
min-width: 80px;
margin: 0;
}
.uls-button-group > button.button:first-child {
-moz-border-radius-topleft: 3px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.uls-button-group > button.button:last-child {
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
-moz-border-radius-bottomright: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.ext-uls-sub-panel {
border-top: 1px solid #EEEEEE;
padding-top: 25px;
top: -20px;
position:relative;
min-height: 150px;
}
.uls-font-label,
.uls-font-select {
font-size: 10pt;

60
resources/js/ext.uls.displaysettings.js
View File

@@ -21,13 +21,19 @@
'use strict';
var template = '<div class="uls-display-settings">'
+ '<div class="row">' // Top "Display settings" title
+ '<div class="twelve columns">'
+ '<h3 data-i18n="ext-uls-display-settings-title"></h3>'
+ '<div class="row">' // Tab switcher buttons
+ '<div class="twelve columns uls-display-settings-tab-switcher">'
+ '<div class="uls-button-group">'
+ '<button id="uls-display-settings-language-tab" class="button down" data-i18n="ext-uls-display-settings-language-tab"></button>'
+ '<button id="uls-display-settings-fonts-tab" class="button" data-i18n="ext-uls-display-settings-fonts-tab"></button>'
+ '</div>'
+ '</div>'
+ '</div>'
// "Language for display", title above the buttons row
+ '<div class="ext-uls-sub-panel uls-display-settings-language-tab">' // Begin display language sub-panel
// "Display language", title above the buttons row
+ '<div class="row">'
+ '<div class="eleven columns">'
+ '<h4 data-i18n="ext-uls-display-settings-ui-language"></h4>'
@@ -39,6 +45,10 @@
+ '<div class="uls-ui-languages eleven columns"></div>'
+ '</div>'
+ '</div>' // End display language section
+ '<div class="ext-uls-sub-panel uls-display-settings-fonts-tab hide">' // Begin font settings section, hidden by default
// "Font settings" title
+ '<div class="row">'
+ '<div class="twelve columns">'
@@ -74,6 +84,8 @@
+ '<select id="ui-font-selector" class="four columns end uls-font-select"></select>'
+ '</div>'
+ '</div>' // End font settings section
// Separator
+ '<div class="row"></div>'
@@ -391,23 +403,18 @@
*/
listen: function () {
var displaySettings = this,
$contentFontSelector, $uiFontSelector,
oldFont;
$contentFontSelector = this.$template
.find( '#content-font-selector' );
$uiFontSelector = this.$template
.find( '#ui-font-selector' );
oldFont = $uiFontSelector.find( 'option:selected' ).val();
$contentFontSelector = this.$template.find( '#content-font-selector' ),
$uiFontSelector = this.$template.find( '#ui-font-selector' ),
oldFont = $uiFontSelector.find( 'option:selected' ).val(),
$tabButtons = displaySettings.$template.find( '.uls-display-settings-tab-switcher button' );
// TODO all these repeated selectors can be placed in object constructor.
this.$template.find( '#uls-displaysettings-apply' ).on( 'click', function () {
displaySettings.$template.find( '#uls-displaysettings-apply' ).on( 'click', function () {
displaySettings.apply();
} );
this.$template.find( 'button.uls-display-settings-cancel' ).on( 'click', function () {
displaySettings.$template.find( 'button.uls-display-settings-cancel' ).on( 'click', function () {
mw.webfonts.preferences.setFont( displaySettings.contentLanguage, oldFont );
displaySettings.$webfonts.refresh();
@@ -424,7 +431,7 @@
displaySettings.close();
} );
this.$template.find( '#webfonts-enable-checkbox' ).on( 'click', function () {
displaySettings.$template.find( '#webfonts-enable-checkbox' ).on( 'click', function () {
displaySettings.enableApplyButton();
if ( this.checked ) {
@@ -462,6 +469,27 @@
displaySettings.$webfonts.refresh();
} );
$tabButtons.on( 'click', function () {
var $subPanels,
$button = $( this );
if ( $button.hasClass( 'down' ) ) {
return;
}
displaySettings.$template.find( '.ext-uls-sub-panel' ).each( function () {
var $subPanel = $( this );
if ( $subPanel.hasClass( $button.attr( 'id' ) ) ) {
$subPanel.removeClass( 'hide' );
} else {
$subPanel.addClass( 'hide' );
}
} );
$tabButtons.filter( '.down' ).removeClass( 'down');
$button.addClass( 'down' );
} );
},
/**