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

Visually connect input language and available methods.

Browse Source 
Adds a tooltip-like panel to clearly indicate that input methods displayed
are related to the input language selection.

Change-Id: Ib4e9bca48f1f18cfd09a32c25f7ebf404af228e8
This commit is contained in:
pginer
2012-11-20 14:20:47 +01:00
committed by Amir E. Aharoni
parent 7076d53d29
commit 4edd874d2e
3 changed files with 36 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/css/ext.uls.css
View File

@@ -22,7 +22,7 @@ div#settings-block {
.uls-ui-languages button { .uls-ui-languages button {
width: 23%; width: 23%;
text-overflow: ellipsis; text-overflow: ellipsis;
margin-right: 15px; margin-right: 4%;
} }
.uls-ui-languages button#uls-more-languages { .uls-ui-languages button#uls-more-languages {

26
resources/css/ext.uls.inputsettings.css
View File

@@ -55,4 +55,30 @@ div.input-settings-block {
padding-top: 10px; padding-top: 10px;
padding-bottom: 15px; padding-bottom: 15px;
font-size: 11pt; font-size: 11pt;
}
.down+.uls-input-settings-caret {
display: inline-block;
width: 0;
height: 0;
border-top: none;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
border-bottom: 8px solid #f0f0f0;
content: "";
position: relative;
vertical-align: bottom;
top: 12px;
left: -16%;
margin: 0 -8px;
}
.uls-input-settings-toggle {
padding-top: 10px;
}
.uls-input-settings-inputmethods-list {
margin: 12px 0;
padding: 6px 10px;
background: #f0f0f0;
} }

11
resources/js/ext.uls.inputsettings.js
View File

@@ -97,7 +97,7 @@
this.$template.find( 'div.uls-input-settings-languages-title' ).hide(); this.$template.find( 'div.uls-input-settings-languages-title' ).hide();
this.$template.find( 'div.uls-ui-languages' ).hide(); this.$template.find( 'div.uls-ui-languages' ).hide();
// Hide input methods // Hide input methods
this.$template.find( 'div.uls-input-settings-inputmethods-list' ).hide(); this.$template.find( 'div.uls-input-settings-inputmethods-list' ).hide();
} }
this.prepareToggleButton(); this.prepareToggleButton();
@@ -121,6 +121,7 @@
if ( !imes ) { if ( !imes ) {
$imeListTitle.text( '' ); $imeListTitle.text( '' );
$imeListContainer.hide();
return; return;
} }
@@ -188,7 +189,7 @@
prepareLanguages: function () { prepareLanguages: function () {
var inputSettings = this, var inputSettings = this,
languagesForButtons, $languages, suggestedLanguages, languagesForButtons, $languages, suggestedLanguages,
SUGGESTED_LANGUAGES_NUMBER, lang, i, language, $button; SUGGESTED_LANGUAGES_NUMBER, lang, i, language, $button, $caret;
SUGGESTED_LANGUAGES_NUMBER = 3; SUGGESTED_LANGUAGES_NUMBER = 3;
$languages = this.$template.find( 'div.uls-ui-languages' ); $languages = this.$template.find( 'div.uls-ui-languages' );
@@ -254,6 +255,12 @@
$button.data( 'language', language ); $button.data( 'language', language );
$languages.append( $button ); $languages.append( $button );
if ( $.ime.languages[language] && $.ime.languages[language].inputmethods ) {
$caret = $( '<span>' ).addClass( 'uls-input-settings-caret' );
$languages.append( $caret );
}
$button.on( 'click', buttonHandler( $button ) ); $button.on( 'click', buttonHandler( $button ) );
} }