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

View file

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

View file

@ -148,16 +148,18 @@
<label for="textarea2" class="sr-only"> <label for="textarea2" class="sr-only">
Translated text Translated text
</label> </label>
<textarea id="textarea2" v-model="translatedText" ref="translatedTextarea" dir="auto" readonly></textarea> <textarea id="textarea2" v-model="translatedText" ref="translatedTextarea" dir="auto" v-bind:readonly="!isSuggesting"></textarea>
<div class="actions"> <div class="actions">
<button v-if="inputText.length && !isSuggesting" class="btn-action" @click="suggestTranslation"> <button v-if="inputText.length && !isSuggesting" class="btn-action" @click="suggestTranslation">
<i class="material-icons">edit</i> <i class="material-icons">edit</i>
</button> </button>
<button v-if="inputText.length && isSuggesting" class="btn-action" @click="closeSuggestTranslation"> <button v-if="inputText.length && isSuggesting" class="btn-action btn-blue" @click="closeSuggestTranslation">
<i class="material-icons">close</i> <span>Cancel</span>
</button> </button>
<button v-if="inputText.length && isSuggesting" :disabled="!canSendSuggestion" class="btn-action btn-blue" @click="sendSuggestion">
<button class="btn-action btn-copy-translated" @click="copyText"> <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> <span>[[ copyTextLabel ]]</span> <i class="material-icons">content_copy</i>
</button> </button>
</div> </div>
@ -388,6 +390,9 @@
isHtml: function(){ isHtml: function(){
return htmlRegex.test(this.inputText); return htmlRegex.test(this.inputText);
},
canSendSuggestion() {
return this.translatedText.trim() !== "" && this.translatedText !== this.inputText;
} }
}, },
filters: { filters: {
@ -405,7 +410,9 @@
this.transRequest = null; this.transRequest = null;
} }
}, },
swapLangs: function(){ swapLangs: function(e){
this.closeSuggestTranslation(e)
var t = this.sourceLang; var t = this.sourceLang;
this.sourceLang = this.targetLang; this.sourceLang = this.targetLang;
this.targetLang = t; this.targetLang = t;
@ -417,6 +424,8 @@
this.error = ''; this.error = '';
}, },
handleInput: function(e){ handleInput: function(e){
this.closeSuggestTranslation(e)
if (this.timeout) clearTimeout(this.timeout); if (this.timeout) clearTimeout(this.timeout);
this.timeout = null; this.timeout = null;
@ -494,6 +503,20 @@
e.preventDefault(); e.preventDefault();
this.isSuggesting = false; 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){ deleteText: function(e){
e.preventDefault(); e.preventDefault();