fabio286/antares
1
1
Fork 0
mirror of https://github.com/Fabio286/antares.git synced 2025-06-05 21:59:22 +02:00
Code Issues Releases Wiki Activity

feat(UI): enanched file upload input

Browse Source
This commit is contained in:
Fabio Di Stasio
2021-02-05 19:37:35 +01:00
parent ede6fe81ce
commit a0d85520fb
3 changed files with 147 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/renderer/components/BaseUploadInput.vue Normal file
View File

@@ -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>

31
src/renderer/components/ModalEditConnection.vue
View File

@@ -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] = '';
}
}
};

31
src/renderer/components/ModalNewConnection.vue
View File

@@ -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] = '';
}
}
};