forked from mirrors/LibreTranslate
add file and translate button display
This commit is contained in:
parent
50ce3720eb
commit
aaa3c83d4f
3 changed files with 32 additions and 4 deletions
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue