mirror of https://github.com/Fabio286/antares.git
feat(UI): enanched file upload input
This commit is contained in:
parent
ede6fe81ce
commit
a0d85520fb
|
@ -0,0 +1,111 @@
|
|||
<template>
|
||||
<label :for="`id_${id}`" class="file-uploader">
|
||||
<span class="file-uploader-message">
|
||||
<i class="mdi mdi-upload mr-1" />{{ message }}
|
||||
</span>
|
||||
<span class="text-ellipsis file-uploader-value">
|
||||
{{ value | lastPart }}
|
||||
</span>
|
||||
<i
|
||||
v-if="value.length"
|
||||
class="file-uploader-reset mdi mdi-close"
|
||||
@click.prevent="clear"
|
||||
/>
|
||||
<form :ref="`form_${id}`">
|
||||
<input
|
||||
:id="`id_${id}`"
|
||||
class="file-uploader-input"
|
||||
type="file"
|
||||
@change="$emit('change', $event)"
|
||||
>
|
||||
</form>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BaseUploadInput',
|
||||
filters: {
|
||||
lastPart (string) {
|
||||
if (!string) return '';
|
||||
|
||||
string = string.split(/[/\\]+/).pop();
|
||||
if (string.length >= 19)
|
||||
string = `...${string.slice(-19)}`;
|
||||
return string;
|
||||
}
|
||||
},
|
||||
props: {
|
||||
message: {
|
||||
default: 'Upload',
|
||||
type: String
|
||||
},
|
||||
value: {
|
||||
default: '',
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
id: null
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
this.id = this._uid;
|
||||
},
|
||||
methods: {
|
||||
clear () {
|
||||
this.$emit('clear');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.file-uploader {
|
||||
border: 0.05rem solid $bg-color-light;
|
||||
border-radius: 0.1rem;
|
||||
height: 1.8rem;
|
||||
line-height: 1.2rem;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
background-color: $bg-color-gray;
|
||||
transition: background 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s;
|
||||
position: relative;
|
||||
|
||||
> span {
|
||||
padding: 0.25rem 0.4rem;
|
||||
}
|
||||
|
||||
.file-uploader-message {
|
||||
display: flex;
|
||||
border-right: 0.05rem solid $bg-color-light;
|
||||
background-color: $bg-color;
|
||||
}
|
||||
|
||||
.file-uploader-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-uploader-value {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.file-uploader-reset {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
:disabled {
|
||||
.file-uploader {
|
||||
cursor: not-allowed;
|
||||
background-color: #151515;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -162,11 +162,11 @@
|
|||
<label class="form-label">{{ $t('word.privateKey') }}</label>
|
||||
</div>
|
||||
<div class="col-8 col-sm-12">
|
||||
<input
|
||||
class="form-input"
|
||||
type="file"
|
||||
<BaseUploadInput
|
||||
:value="localConnection.key"
|
||||
@clear="pathClear('key')"
|
||||
@change="pathSelection($event, 'key')"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
|
@ -174,11 +174,11 @@
|
|||
<label class="form-label">{{ $t('word.certificate') }}</label>
|
||||
</div>
|
||||
<div class="col-8 col-sm-12">
|
||||
<input
|
||||
class="form-input"
|
||||
type="file"
|
||||
<BaseUploadInput
|
||||
:value="localConnection.cert"
|
||||
@clear="pathClear('cert')"
|
||||
@change="pathSelection($event, 'cert')"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
|
@ -186,11 +186,11 @@
|
|||
<label class="form-label">{{ $t('word.caCertificate') }}</label>
|
||||
</div>
|
||||
<div class="col-8 col-sm-12">
|
||||
<input
|
||||
class="form-input"
|
||||
type="file"
|
||||
<BaseUploadInput
|
||||
:value="localConnection.ca"
|
||||
@clear="pathClear('ca')"
|
||||
@change="pathSelection($event, 'ca')"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -247,12 +247,14 @@ import { mapActions } from 'vuex';
|
|||
import Connection from '@/ipc-api/Connection';
|
||||
import ModalAskCredentials from '@/components/ModalAskCredentials';
|
||||
import BaseToast from '@/components/BaseToast';
|
||||
import BaseUploadInput from '@/components/BaseUploadInput';
|
||||
|
||||
export default {
|
||||
name: 'ModalEditConnection',
|
||||
components: {
|
||||
ModalAskCredentials,
|
||||
BaseToast
|
||||
BaseToast,
|
||||
BaseUploadInput
|
||||
},
|
||||
props: {
|
||||
connection: Object
|
||||
|
@ -351,6 +353,9 @@ export default {
|
|||
if (!files.length) return;
|
||||
|
||||
this.localConnection[name] = files[0].path;
|
||||
},
|
||||
pathClear (name) {
|
||||
this.localConnection[name] = '';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
@ -166,11 +166,11 @@
|
|||
<label class="form-label">{{ $t('word.privateKey') }}</label>
|
||||
</div>
|
||||
<div class="col-8 col-sm-12">
|
||||
<input
|
||||
class="form-input"
|
||||
type="file"
|
||||
<BaseUploadInput
|
||||
:value="connection.key"
|
||||
@clear="pathClear('key')"
|
||||
@change="pathSelection($event, 'key')"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
|
@ -178,11 +178,11 @@
|
|||
<label class="form-label">{{ $t('word.certificate') }}</label>
|
||||
</div>
|
||||
<div class="col-8 col-sm-12">
|
||||
<input
|
||||
class="form-input"
|
||||
type="file"
|
||||
<BaseUploadInput
|
||||
:value="connection.cert"
|
||||
@clear="pathClear('cert')"
|
||||
@change="pathSelection($event, 'cert')"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
|
@ -190,11 +190,11 @@
|
|||
<label class="form-label">{{ $t('word.caCertificate') }}</label>
|
||||
</div>
|
||||
<div class="col-8 col-sm-12">
|
||||
<input
|
||||
class="form-input"
|
||||
type="file"
|
||||
<BaseUploadInput
|
||||
:value="connection.ca"
|
||||
@clear="pathClear('ca')"
|
||||
@change="pathSelection($event, 'ca')"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -252,12 +252,14 @@ import Connection from '@/ipc-api/Connection';
|
|||
import { uidGen } from 'common/libs/uidGen';
|
||||
import ModalAskCredentials from '@/components/ModalAskCredentials';
|
||||
import BaseToast from '@/components/BaseToast';
|
||||
import BaseUploadInput from '@/components/BaseUploadInput';
|
||||
|
||||
export default {
|
||||
name: 'ModalNewConnection',
|
||||
components: {
|
||||
ModalAskCredentials,
|
||||
BaseToast
|
||||
BaseToast,
|
||||
BaseUploadInput
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
@ -382,6 +384,9 @@ export default {
|
|||
if (!files.length) return;
|
||||
|
||||
this.connection[name] = files[0].path;
|
||||
},
|
||||
pathClear (name) {
|
||||
this.connection[name] = '';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue