fix: update custom upload button

kestra-io · Jan 16, 2025 · f5dc67f · f5dc67f
1 parent 9a19c01
commit f5dc67f
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/ui/src/styles/layout/element-plus-overload.scss b/ui/src/styles/layout/element-plus-overload.scss
@@ -108,15 +108,19 @@
     }
 }
 
-
 .el-input-file.custom-upload {
     font-size: var(--el-font-size-base);
     border-radius: var(--el-border-radius-base);
     border: 1px solid var(--ks-border-primary);
     white-space: nowrap;
 
+    form {
+        line-height: 27px;
+    }
+
     .el-input__wrapper {
         background-color: transparent;
+        box-shadow: none;
     }
 
     label {

diff --git a/ui/tests/storybook/theme/ShowCase.vue b/ui/tests/storybook/theme/ShowCase.vue
@@ -1,5 +1,5 @@
 <template>
-    <center class="p-4">
+    <div class="p-4" style="text-align: center;">
         <div class="mb-4">
             <el-button size="large" @click="toast">
                 El Message
@@ -204,7 +204,24 @@
                 placeholder="Please Input"
             />
         </div>
-    </center>
+
+        <div class="el-input el-input-file custom-upload">
+            <form ref="importForm">
+                <div class="el-input__wrapper">
+                    <label for="importFlows">
+                        <Upload /> Import
+                    </label>
+                    <input
+                        id="importFlows"
+                        class="el-input__inner"
+                        type="file"
+                        accept=".zip, .yml, .yaml"
+                        ref="file"
+                    >
+                </div>
+            </form>
+        </div>
+    </div>
 </template>
 
 <script lang="ts" setup>
@@ -216,6 +233,7 @@
     import Message from "vue-material-design-icons/Message.vue"
     import Star from "vue-material-design-icons/Star.vue"
     import Delete from "vue-material-design-icons/Delete.vue"
+    import Upload from "vue-material-design-icons/Upload.vue";
     import Tabs from "../../../src/components/Tabs.vue"
 
     const app = getCurrentInstance()?.appContext.config.globalProperties as any