self-hosted/LibreTranslate
1
0
Fork 0
mirror of https://github.com/LibreTranslate/LibreTranslate.git synced 2024-12-24 10:06:43 +02:00
Code Issues Releases Activity

fix

Browse Source
This commit is contained in:
Sébastien Thuret 2021-10-08 19:02:30 +02:00
parent 0214d7bfd6
commit f5bc2bc3f5
No known key found for this signature in database
GPG Key ID: 4742E2D66933BB08
2 changed files with 50 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/static/css/main.css
View File

@ -124,6 +124,13 @@ h3.header {
cursor: pointer;
}
.btn-blue {
color: #42A5F5;
}
.btn-action:disabled {
color: #777;
}
.btn-action span {
padding-right: 0.5rem;
}

63
app/templates/index.html
View File

@ -126,7 +126,7 @@
<template v-for="option in langs">
<option v-if="option.code !== 'auto'" :value="option.code">[[ option.name ]]</option>
</template>
</select>
</select>
</div>
</div>
@ -134,11 +134,11 @@
<div class="input-field textarea-container col s6">
<label for="textarea1" class="sr-only">
Text to translate
</label>
</label>
<textarea id="textarea1" v-model="inputText" @input="handleInput" ref="inputTextarea" dir="auto"></textarea>
<button class="btn-delete-text" title="Delete text" @click="deleteText">
<i class="material-icons">close</i>
</button>
</button>
<div class="characters-limit-container" v-if="charactersLimit !== -1">
<label>[[ inputText.length ]] / [[ charactersLimit ]]</label>
</div>
@ -147,24 +147,26 @@
<div class="input-field textarea-container col s6">
<label for="textarea2" class="sr-only">
Translated text
</label>
<textarea id="textarea2" v-model="translatedText" ref="translatedTextarea" dir="auto" readonly></textarea>
</label>
<textarea id="textarea2" v-model="translatedText" ref="translatedTextarea" dir="auto" v-bind:readonly="!isSuggesting"></textarea>
<div class="actions">
<button v-if="inputText.length && !isSuggesting" class="btn-action" @click="suggestTranslation">
<i class="material-icons">edit</i>
</button>
<button v-if="inputText.length && isSuggesting" class="btn-action" @click="closeSuggestTranslation">
<i class="material-icons">close</i>
<button v-if="inputText.length && isSuggesting" class="btn-action btn-blue" @click="closeSuggestTranslation">
<span>Cancel</span>
</button>
<button class="btn-action btn-copy-translated" @click="copyText">
<button v-if="inputText.length && isSuggesting" :disabled="!canSendSuggestion" class="btn-action btn-blue" @click="sendSuggestion">
<span>Send</span>
</button>
<button v-if="!isSuggesting" class="btn-action btn-copy-translated" @click="copyText">
<span>[[ copyTextLabel ]]</span> <i class="material-icons">content_copy</i>
</button>
</div>
<div class="position-relative">
<div class="position-relative">
<div class="progress translate" v-if="loadingTranslation">
<div class="indeterminate"></div>
</div>
</div>
</div>
</div>
</div>
@ -346,7 +348,7 @@
if (this.charactersLimit !== -1 && this.inputText.length >= this.charactersLimit){
this.inputText = this.inputText.substring(0, this.charactersLimit);
}
// Update "selected" attribute (to overcome a vue.js limitation)
// but properly display checkmarks on supported browsers.
// Also change the <select> width value depending on the <option> length
@ -355,7 +357,7 @@
if (el.value === this.sourceLang){
el.setAttribute('selected', '');
this.$refs.sourceLangDropdown.style.width = getTextWidth(el.text) + 24 + 'px';
}else{
}else{
el.removeAttribute('selected');
}
}
@ -366,9 +368,9 @@
this.$refs.targetLangDropdown.style.width = getTextWidth(el.text) + 24 + 'px';
}else{
el.removeAttribute('selected');
}
}
}
},
computed: {
requestCode: function(){
@ -388,8 +390,11 @@
isHtml: function(){
return htmlRegex.test(this.inputText);
}
},
},
canSendSuggestion() {
return this.translatedText.trim() !== "" && this.translatedText !== this.inputText;
}
},
filters: {
escape: function(v){
return v.replace('"', '\\\"');
@ -405,7 +410,9 @@
this.transRequest = null;
}
},
swapLangs: function(){
swapLangs: function(e){
this.closeSuggestTranslation(e)
var t = this.sourceLang;
this.sourceLang = this.targetLang;
this.targetLang = t;
@ -417,6 +424,8 @@
this.error = '';
},
handleInput: function(e){
this.closeSuggestTranslation(e)
if (this.timeout) clearTimeout(this.timeout);
this.timeout = null;
@ -494,6 +503,20 @@
e.preventDefault();
this.isSuggesting = false;
},
sendSuggestion: function(e) {
e.preventDefault();
var request = new XMLHttpRequest();
self.transRequest = request;
var data = new FormData();
data.append("q", self.inputText);
data.append("s", self.inputText);
data.append("source", self.sourceLang);
data.append("target", self.targetLang);
request.open('POST', BaseUrl + '/translate', true);
},
deleteText: function(e){
e.preventDefault();
@ -510,7 +533,7 @@
ctx.font = 'bold 16px sans-serif';
var textWidth = Math.ceil(ctx.measureText(text).width);
return textWidth;
}
}
function setApiKey(){
var prevKey = localStorage.getItem("api_key") || "";
@ -520,7 +543,7 @@
localStorage.setItem("api_key", newKey);
}
// @license-end
</script>
</body>