Visually connect input language and available methods.

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

View File

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

View File

@@ -55,4 +55,30 @@ div.input-settings-block {
padding-top: 10px;
padding-bottom: 15px;
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;
}

View File

@@ -97,7 +97,7 @@
this.$template.find( 'div.uls-input-settings-languages-title' ).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.prepareToggleButton();
@@ -121,6 +121,7 @@
if ( !imes ) {
$imeListTitle.text( '' );
$imeListContainer.hide();
return;
}
@@ -188,7 +189,7 @@
prepareLanguages: function () {
var inputSettings = this,
languagesForButtons, $languages, suggestedLanguages,
SUGGESTED_LANGUAGES_NUMBER, lang, i, language, $button;
SUGGESTED_LANGUAGES_NUMBER, lang, i, language, $button, $caret;
SUGGESTED_LANGUAGES_NUMBER = 3;
$languages = this.$template.find( 'div.uls-ui-languages' );
@@ -254,6 +255,12 @@
$button.data( 'language', language );
$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 ) );
}