rafaelcaricio/LibreTranslate
1
0
Fork 0
forked from mirrors/LibreTranslate
Code Issues Pull requests Projects Releases Packages Wiki Activity

add file and translate button display

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/static/css/main.css
View file

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

13
app/static/js/app.js
View file

@ -32,7 +32,8 @@ document.addEventListener('DOMContentLoaded', function(){
isSuggesting: false,
supportedFilesFormat : [],
translationType: "text"
translationType: "text",
inputFile: false
},
mounted: function(){
var self = this;
@ -308,6 +309,16 @@ document.addEventListener('DOMContentLoaded', function(){
},
switchType: function(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();
}
}
});

21
app/templates/index.html
View file

@ -174,13 +174,13 @@
</div>
<div class="row" v-if="translationType === 'files'">
<div class="file-dropzone">
<div class="dropzone-content">
<div v-if="inputFile === false" class="dropzone-content">
<span>Supported file format: [[ supportedFilesFormatFormatted ]]</span>
<form action="#">
<div class="file-field input-field">
<div class="btn">
<span>File</span>
<input type="file">
<input type="file" @change="handleInputFile" ref="fileInputRef">
</div>
<div class="file-path-wrapper hidden">
<input class="file-path validate" type="text">
@ -188,6 +188,23 @@
</div>
</form>
</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>
</form>