add file and translate button display

This commit is contained in:
Sébastien Thuret 2021-10-24 17:38:53 +02:00
parent 50ce3720eb
commit aaa3c83d4f
No known key found for this signature in database
GPG key ID: 4742E2D66933BB08
3 changed files with 32 additions and 4 deletions

View file

@ -142,7 +142,7 @@ h3.header {
border: 1px solid #ccc; border: 1px solid #ccc;
background: #f3f3f3; background: #f3f3f3;
padding: 1rem 2rem 1rem 1.5rem; padding: 1rem 2rem 1rem 1.5rem;
height: 220px; min-height: 220px;
position: relative; position: relative;
} }

View file

@ -32,7 +32,8 @@ document.addEventListener('DOMContentLoaded', function(){
isSuggesting: false, isSuggesting: false,
supportedFilesFormat : [], supportedFilesFormat : [],
translationType: "text" translationType: "text",
inputFile: false
}, },
mounted: function(){ mounted: function(){
var self = this; var self = this;
@ -308,6 +309,16 @@ document.addEventListener('DOMContentLoaded', function(){
}, },
switchType: function(type) { switchType: function(type) {
this.translationType = type; this.translationType = type;
},
handleInputFile: function(e) {
this.inputFile = e.target.files[0];
},
removeFile: function(e) {
e.preventDefault()
this.inputFile = false;
},
translateFile: function(e) {
e.preventDefault();
} }
} }
}); });

View file

@ -174,13 +174,13 @@
</div> </div>
<div class="row" v-if="translationType === 'files'"> <div class="row" v-if="translationType === 'files'">
<div class="file-dropzone"> <div class="file-dropzone">
<div class="dropzone-content"> <div v-if="inputFile === false" class="dropzone-content">
<span>Supported file format: [[ supportedFilesFormatFormatted ]]</span> <span>Supported file format: [[ supportedFilesFormatFormatted ]]</span>
<form action="#"> <form action="#">
<div class="file-field input-field"> <div class="file-field input-field">
<div class="btn"> <div class="btn">
<span>File</span> <span>File</span>
<input type="file"> <input type="file" @change="handleInputFile" ref="fileInputRef">
</div> </div>
<div class="file-path-wrapper hidden"> <div class="file-path-wrapper hidden">
<input class="file-path validate" type="text"> <input class="file-path validate" type="text">
@ -188,6 +188,23 @@
</div> </div>
</form> </form>
</div> </div>
<div v-if="inputFile !== false" class="dropzone-content">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s10">
<p>[[ inputFile.name ]]</p>
</div>
<div class="col s2">
<button @click="removeFile" class="btn-flat">
<i class="material-icons">close</i>
</button>
</div>
</div>
</div>
</div>
<button @click="translateFile" class="btn">Translate</button>
</div>
</div> </div>
</div> </div>
</form> </form>