add modal global style, fix some modal

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>