Skip to content
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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

DeshDeepakKant
Copy link

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

  • Updated icon in frontend/src/components/Panel/UploadButton.vue
  • Changed from a basic up-arrow icon to a file-with-arrow icon design
  • Maintained the blue background color scheme

Visual Changes

Before

Before - Simple up-arrow icon on blue background

Screenshot from 2025-01-09 18-23-36

After

After - File with down-arrow icon on blue background

Screenshot from 2025-01-09 18-21-57

Why this change?

Changed the upload button icon from a simple up-arrow to a file-with-arrow design to:

  • Make the upload function more immediately recognizable
  • Follow standard file operation UI patterns
  • Improve visual clarity for users

Impact

  • More intuitive user experience
  • Better visual communication
  • No changes to functionality

Additional Notes

  • This is a purely visual change to improve user interface clarity
  • No functional changes to the upload mechanism

Signed-off-by: Desh Deepak Kant [email protected]

Copy link

codecov bot commented Jan 9, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 12.81%. Comparing base (691def0) to head (e9329ee).

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.
📢 Have feedback on the report? Share it here.

{{ 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'
Copy link
Member

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
Copy link
Member

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

Copy link
Author

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).

Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants