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:
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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 ) );
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user