feat(UI): enanched file upload input

src/renderer/components/BaseUploadInput.vue

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

src/renderer/components/ModalEditConnection.vue

@@ -162,11 +162,11 @@
                                  <label class="form-label">{{ $t('word.privateKey') }}</label>
                               </div>
                               <div class="col-8 col-sm-12">
-                                 <input
+                                 <BaseUploadInput
-                                    class="form-input"
+                                    :value="localConnection.key"
-                                    type="file"
+                                    @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
+                                 <BaseUploadInput
-                                    class="form-input"
+                                    :value="localConnection.cert"
-                                    type="file"
+                                    @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
+                                 <BaseUploadInput
-                                    class="form-input"
+                                    :value="localConnection.ca"
-                                    type="file"
+                                    @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] = '';
       }
    }
 };

src/renderer/components/ModalNewConnection.vue

@@ -166,11 +166,11 @@
                                  <label class="form-label">{{ $t('word.privateKey') }}</label>
                               </div>
                               <div class="col-8 col-sm-12">
-                                 <input
+                                 <BaseUploadInput
-                                    class="form-input"
+                                    :value="connection.key"
-                                    type="file"
+                                    @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
+                                 <BaseUploadInput
-                                    class="form-input"
+                                    :value="connection.cert"
-                                    type="file"
+                                    @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
+                                 <BaseUploadInput
-                                    class="form-input"
+                                    :value="connection.ca"
-                                    type="file"
+                                    @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] = '';
       }
    }
 };