Skip to content
Snippets Groups Projects
Commit 5ecaacf3 authored by Jared Hancock's avatar Jared Hancock
Browse files

i18n: Complete look and feel for translatable widget

parent 301a425f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
include/ajax.i18n.php
+ 6
− 1
View file @ 5ecaacf3
......@@ -105,7 +105,12 @@ class i18nAjaxAPI extends AjaxController {
$langs = array();
foreach ($cfg->getSecondaryLanguages() as $l) {
$langs[$l] = Internationalization::getLanguageDescription($l);
$info = Internationalization::getLanguageInfo($l);
$langs[$l] = array(
'name' => Internationalization::getLanguageDescription($l),
'flag' => strtolower($info['flag']),
'direction' => $info['direction'] ?: 'ltr',
);
}
$json = JsonDataEncoder::encode($langs);
Http::cacheable(md5($json), $cfg->lastModified());
......
scp/css/translatable.css
+ 68
− 9
View file @ 5ecaacf3
div.add-translation {
margin-top: 5px;
padding: 5px;
border-top: 1px solid rgba(0, 0, 0, 0.3);
background-color:#eee;
border-radius:0 0 5px 5px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.08);
}
div.add-translation button {
margin-left: 5px;
}
div.translations {
min-height: 20px;
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
padding: 4px 0 0;
margin: 0;
list-style: none;
background-color: #ffffff;
border-color: #ccc;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
}
div.translations .close {
position:absolute;
right:3px;
top:3px;
cursor: pointer;
}
ul.translations {
padding-left: 0;
min-width: 300px;
max-height: 150px;
overflow-y: auto;
padding: 5px 8px 8px;
margin: 0;
}
ul.translations li {
list-style: none;
......@@ -29,33 +63,55 @@ ul.translations li + li {
margin-top: 10px;
}
ul.translations li label.language {
color: #888;
color: black;
font-weight: 400;
letter-spacing: 0;
}
ul.translations li label.language .flag {
margin-right: 6px;
}
ul.translations li input {
width: 100%;
box-sizing: border-box;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.08);
padding: 2px 4px;
border-radius: 3px;
border: 1px solid #bbb;
font-size: 12px;
font-weight: 300;
margin-top: 4px;
}
.language-commit {
text-align: right;
padding: 5px 10px;
background-color: cyan;
background: repeating-linear-gradient(
45deg,
rgba(255, 255, 255, 0.05),
rgba(255, 255, 255, 0.05) 10px,
rgba(255, 255, 255, 0.3) 10px,
rgba(255, 255, 255, 0.3) 20px
), #E65524;
}
div.translatable {
-webkit-appearance: textfield;
border: 1px solid #bbb;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
display: inline-block;
white-space: nowrap;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-right: none;
padding: 3px 5px;
padding: 0 5px 2px;
margin-left: 2px;
width: inherit;
background-color: white;
}
div.translatable.textarea {
-webkit-appearance: textarea;
border: 1px solid #bbb;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
border-radius: 4px;
}
div.translatable.focus {
outline-offset: -2px;
......@@ -86,10 +142,12 @@ input.translatable:focus {
button.translatable {
margin: 0;
padding: 3px 4px;
border: 1px outset #999;
background-color: #ccc;
border-radius: 0 4px 4px 0;
padding: 4px 5px;
background-color: #444;
background:linear-gradient(0deg, #444 0, #888 100%);
color: white;
border: none;
border-radius: 0 2px 2px 0;
cursor: pointer;
}
......@@ -99,6 +157,7 @@ div.translatable.textarea + button.translatable {
right: 4px;
border: none;
background-color: transparent;
background: transparent;
color: #aaa;
color: rgba(0, 0, 0, 0.5);
padding-top: 0;
......
scp/js/jquery.translatable.js
+ 22
− 9
View file @ 5ecaacf3
......@@ -77,7 +77,7 @@
);
this.fetch('ajax.php/i18n/langs').then(function(langs) {
$.each(langs, function(k, v) {
self.$select.append($('<option>').val(k).text(v));
self.$select.append($('<option>').val(k).text(v.name));
});
});
},
......@@ -106,14 +106,19 @@
},
add: function(lang, text) {
var info = this.langs[lang];
this.$translations.append(
$('<li>')
.append($('<label class="language">').text(this.langs[lang])
.append($('<label class="language">')
.text(info.name)
.prepend($('<span>').addClass('flag flag-'+info.flag))
.append($('<input type="text" data-lang="'+lang+'">')
.on('change', $.proxy(this.showCommit, this))
.attr('dir', info.direction || 'ltr')
.on('change blur keydown', $.proxy(this.showCommit, this))
.val(text)
)
)
.effect('highlight')
);
$('option[value='+lang+']', this.$select).remove();
if (!$('option', this.$select).length)
......@@ -122,14 +127,19 @@
},
showCommit: function(e) {
if (this.$commit)
return this.$commit.show();
if (this.$commit) {
this.$commit.find('button').empty().text(' Save')
.prepend($('<i>').addClass('fa icon-save'));
return !this.$commit.is(':visible')
? this.$commit.slideDown() : true;
}
return this.$commit = $('<div class="language-commit"></div>')
.hide()
.insertAfter(this.$translations)
.append($('<button type="button" class="commit"><i class="fa fa-save icon-save"></i> Save</button>')
.on('click', $.proxy(this.commit, this))
);
)
.slideDown();
},
commit: function(e) {
......@@ -137,11 +147,14 @@
$('input[type=text]', this.$translations).each(function() {
changes[$(this).data('lang')] = $(this).val();
});
this.$commit.prop('disabled', true);
this.$commit.find('button').empty().text(' Saving')
.prepend($('<i>').addClass('fa icon-spin icon-spinner'));
$.ajax('ajax.php/i18n/translate/' + this.$element.data('translateTag'), {
type: 'post',
data: changes,
success: function() {
self.$commit.hide();
self.$commit.slideUp();
}
});
},
......@@ -201,7 +214,7 @@
};
$.fn.translatable.defaults = {
menu: '<div class="translations dropdown-menu"></div>',
menu: '<div class="translations"></div>',
button: '<button class="translatable"><i class="fa fa-globe icon-globe"></i></button>'
};
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment