make switch type work

This commit is contained in:
Sébastien Thuret 2021-10-24 13:15:36 +02:00
parent 4e1bfd398c
commit f906a39f66
No known key found for this signature in database
GPG key ID: 4742E2D66933BB08
2 changed files with 14 additions and 5 deletions

View file

@ -30,6 +30,8 @@ document.addEventListener('DOMContentLoaded', function(){
suggestions: false,
isSuggesting: false,
translationType: "text"
},
mounted: function(){
var self = this;
@ -299,6 +301,10 @@ document.addEventListener('DOMContentLoaded', function(){
deleteText: function(e){
e.preventDefault();
this.inputText = this.translatedText = this.output = "";
},
switchType: function(type) {
console.log(type)
this.translationType = type;
}
}
});

View file

@ -106,8 +106,8 @@
<div class="row">
<h3 class="header center">Translation API</h3>
<div class="col s12 mb-1">
<a class="btn btn-switch-type active"><i class="material-icons left">title</i>Translate text</a>
<a class="btn btn-switch-type"><i class="material-icons left">description</i>Translate files</a>
<button type="button" class="btn btn-switch-type" @click="switchType('text')" :class="{'active': translationType === 'text'}"><i class="material-icons left">title</i>Translate text</button>
<button type="button" class="btn btn-switch-type" @click="switchType('files')" :class="{'active': translationType === 'files'}"><i class="material-icons left">description</i>Translate files</button>
</div>
<form class="col s12">
<div class="row mb-0">
@ -133,7 +133,7 @@
</div>
</div>
<div class="row">
<div class="row" v-if="translationType === 'text'">
<div class="input-field textarea-container col s6">
<label for="textarea1" class="sr-only">
Text to translate
@ -146,7 +146,6 @@
<label>[[ inputText.length ]] / [[ charactersLimit ]]</label>
</div>
</div>
<div class="input-field textarea-container col s6">
<label for="textarea2" class="sr-only">
Translated text
@ -173,9 +172,13 @@
</div>
</div>
</div>
</form>
<div class="row" v-if="translationType === 'files'">
<div class="input-field textarea-container col s12">
</div>
</div>
</form>
</div>
</div>
</div>