diff options
author | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-07-18 17:35:35 +0300 |
---|---|---|
committer | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-07-18 17:35:35 +0300 |
commit | 3407e7eb619cdc57bcd07db1de0402dbee60035f (patch) | |
tree | 7d9a1b2d127fd1240424ed9285462e593b9dc919 /src/components/_sila/Global/FormFile.vue | |
parent | 66d81e7469279dbad003b6f464953404fa9f56c7 (diff) | |
download | webui-vue-3407e7eb619cdc57bcd07db1de0402dbee60035f.tar.xz |
add modal global style, fix some modal
Diffstat (limited to 'src/components/_sila/Global/FormFile.vue')
-rw-r--r-- | src/components/_sila/Global/FormFile.vue | 43 |
1 files changed, 30 insertions, 13 deletions
diff --git a/src/components/_sila/Global/FormFile.vue b/src/components/_sila/Global/FormFile.vue index 30e4af1f..ee93ba49 100644 --- a/src/components/_sila/Global/FormFile.vue +++ b/src/components/_sila/Global/FormFile.vue @@ -1,26 +1,37 @@ <template> <div class="custom-form-file-container"> <label> - <b-form-file - :id="id" - v-model="file" - :accept="accept" - :disabled="disabled" - :state="state" - plain - @input="$emit('input', file)" + <b-modal + :id="`modal-${id}`" + body-class="p-0 justify-content-center" + :title="$t('global.fileUpload.modal')" + hide-footer > - </b-form-file> - <span - class="add-file-btn btn" + <b-col class="p-3 file-input_container"> + <b-form-file + :id="id" + v-model="file" + :accept="accept" + :disabled="disabled" + :state="state" + :placeholder="$t('global.fileUpload.placeholder')" + :drop-placeholder="$t('global.fileUpload.dropPlaceholder')" + @input="$emit('input', file)" + > + </b-form-file> + </b-col> + </b-modal> + <b-button + class="add-file-btn" :class="{ disabled, 'btn-secondary': isSecondary, 'btn-primary': !isSecondary, }" + @click="$bvModal.show(`modal-${id}`)" > {{ $t('global.fileUpload.browseText') }} - </span> + </b-button> <slot name="invalid"></slot> </label> <div v-if="file" class="clear-selected-file px-3 py-2 mt-2"> @@ -89,7 +100,6 @@ export default { }, }; </script> - <style lang="scss" scoped> .form-control-file { opacity: 0; @@ -125,4 +135,11 @@ export default { } } } + +.file-input_container { + width: 100%; + height: 46vh; + background-color: $surface-secondary; + border-radius: 0 0 16px 16px; +} </style> |