-
Notifications
You must be signed in to change notification settings - Fork 6
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update Upload Icon Design in UploadButton Component #839
base: main
Are you sure you want to change the base?
Conversation
Signed-off-by: DeshDeepakKant <[email protected]>
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #839 +/- ##
=======================================
Coverage 12.81% 12.81%
=======================================
Files 34 34
Lines 1342 1342
=======================================
Hits 172 172
Misses 1124 1124
Partials 46 46 ☔ View full report in Codecov by Sentry. |
{{ label }} | ||
</v-btn> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import { type PropType } from 'vue' | ||
import { ref } from 'vue' | ||
import SvgIcon from '@jamescoyle/vue-icon' | ||
import { mdiFileDownload } from '@mdi/js' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it looks not intuitive to me to use a download icon for an upload functionality
@@ -48,6 +51,8 @@ const props = defineProps({ | |||
btnClass: { type: String } | |||
}) | |||
|
|||
const path = mdiFileDownload |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
is not needed you can use the import directly in the template
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you @fjogeleit for reviewing!
I initially thought it would make more sense by using "download arrow icon" for showing import along with a file icon, thinking it would visually represent "importing" a file (downloading into the playground).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
A download icon could also indicate the download of the current content. I am fine using the mdi-file-upload
icon.
Description
Modified the upload icon design in the UploadButton.vue component from a simple up-arrow to a more descriptive file-with-arrow icon, improving visual clarity for users.
Changes Made
frontend/src/components/Panel/UploadButton.vue
Visual Changes
Before
Before - Simple up-arrow icon on blue background
After
After - File with down-arrow icon on blue background
Why this change?
Changed the upload button icon from a simple up-arrow to a file-with-arrow design to:
Impact
Additional Notes
Signed-off-by: Desh Deepak Kant [email protected]