mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-04 05:02:17 +00:00
fix(upload-model): UI/UX improvements for Upload Model Dialog (#7969)
## Summary Addresses UI/UX feedback on the Upload Model Dialog (BYOM feature). ## Changes 1. **Standardize link styling** - Use consistent `text-muted-foreground underline` for all links in both URL input variants 2. **Increase warning/example text font size** - Changed from 12px (`text-xs`) to 14px (`text-sm`) for better readability 3. **Fix padding inconsistency** - Aligned padding between model name box and SingleSelect dropdown; moved "Not sure?" help text inline with the label 4. **Add "Upload Another" button** - Allows users to upload multiple models without closing and reopening the dialog ## Testing - Verified link styling consistency across both Civitai and generic URL input components - Confirmed padding alignment in confirmation step - Tested Upload Another button resets wizard to step 1 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7969-fix-upload-model-UI-UX-improvements-for-Upload-Model-Dialog-2e66d73d3650815c8184cedb3d02672d) by [Unito](https://www.unito.io)
This commit is contained in:
@@ -80,21 +80,33 @@
|
||||
<i v-if="isUploading" class="icon-[lucide--loader-circle] animate-spin" />
|
||||
<span>{{ $t('assetBrowser.upload') }}</span>
|
||||
</Button>
|
||||
<Button
|
||||
<template
|
||||
v-else-if="
|
||||
currentStep === 3 &&
|
||||
(uploadStatus === 'success' || uploadStatus === 'processing')
|
||||
"
|
||||
variant="secondary"
|
||||
data-attr="upload-model-step3-finish-button"
|
||||
@click="emit('close')"
|
||||
>
|
||||
{{
|
||||
uploadStatus === 'processing'
|
||||
? $t('g.close')
|
||||
: $t('assetBrowser.finish')
|
||||
}}
|
||||
</Button>
|
||||
<Button
|
||||
variant="muted-textonly"
|
||||
size="lg"
|
||||
data-attr="upload-model-step3-import-another-button"
|
||||
@click="emit('importAnother')"
|
||||
>
|
||||
{{ $t('assetBrowser.importAnother') }}
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="lg"
|
||||
data-attr="upload-model-step3-finish-button"
|
||||
@click="emit('close')"
|
||||
>
|
||||
{{
|
||||
uploadStatus === 'processing'
|
||||
? $t('g.close')
|
||||
: $t('assetBrowser.finish')
|
||||
}}
|
||||
</Button>
|
||||
</template>
|
||||
<VideoHelpDialog
|
||||
v-model="showCivitaiHelp"
|
||||
video-url="https://media.comfy.org/compressed_768/civitai_howto.webm"
|
||||
@@ -134,5 +146,6 @@ const emit = defineEmits<{
|
||||
(e: 'fetchMetadata'): void
|
||||
(e: 'upload'): void
|
||||
(e: 'close'): void
|
||||
(e: 'importAnother'): void
|
||||
}>()
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user