mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-27 10:14:06 +00:00
c6f2ae3130
## 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)
102 lines
3.1 KiB
Vue
102 lines
3.1 KiB
Vue
<template>
|
|
<div class="flex flex-col gap-6 text-sm text-muted-foreground">
|
|
<div class="flex flex-col gap-2">
|
|
<p class="m-0">
|
|
{{ $t('assetBrowser.uploadModelDescription1') }}
|
|
</p>
|
|
<ul class="list-disc space-y-1 pl-5 mt-0">
|
|
<li>
|
|
<i18n-t keypath="assetBrowser.uploadModelDescription2" tag="span">
|
|
<template #link>
|
|
<a
|
|
href="https://civitai.com/models"
|
|
target="_blank"
|
|
class="text-muted-foreground underline"
|
|
>
|
|
{{ $t('assetBrowser.uploadModelDescription2Link') }}
|
|
</a>
|
|
</template>
|
|
</i18n-t>
|
|
</li>
|
|
<li v-if="!flags.asyncModelUploadEnabled">
|
|
<i18n-t keypath="assetBrowser.uploadModelDescription3" tag="span">
|
|
<template #size>
|
|
<span class="font-bold italic">{{
|
|
$t('assetBrowser.maxFileSizeValue')
|
|
}}</span>
|
|
</template>
|
|
</i18n-t>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<i18n-t keypath="assetBrowser.civitaiLinkLabel" tag="label" class="mb-0">
|
|
<template #download>
|
|
<span class="font-bold italic">{{
|
|
$t('assetBrowser.civitaiLinkLabelDownload')
|
|
}}</span>
|
|
</template>
|
|
</i18n-t>
|
|
<div class="relative">
|
|
<InputText
|
|
v-model="url"
|
|
autofocus
|
|
:placeholder="$t('assetBrowser.civitaiLinkPlaceholder')"
|
|
class="w-full border-0 bg-secondary-background p-4 pr-10"
|
|
data-attr="upload-model-step1-url-input"
|
|
/>
|
|
<i
|
|
v-if="isValidUrl"
|
|
class="icon-[lucide--circle-check-big] absolute top-1/2 right-3 size-5 -translate-y-1/2 text-green-500"
|
|
/>
|
|
</div>
|
|
<p v-if="error" class="text-sm text-error">
|
|
{{ error }}
|
|
</p>
|
|
<i18n-t
|
|
v-else
|
|
keypath="assetBrowser.civitaiLinkExample"
|
|
tag="p"
|
|
class="text-sm"
|
|
>
|
|
<template #example>
|
|
<strong>{{ $t('assetBrowser.civitaiLinkExampleStrong') }}</strong>
|
|
</template>
|
|
<template #link>
|
|
<a
|
|
href="https://civitai.com/models/10706/luisap-z-image-and-qwen-pixel-art-refiner?modelVersionId=2225295"
|
|
target="_blank"
|
|
class="text-muted-foreground underline"
|
|
>
|
|
{{ $t('assetBrowser.civitaiLinkExampleUrl') }}
|
|
</a>
|
|
</template>
|
|
</i18n-t>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import InputText from 'primevue/inputtext'
|
|
import { computed } from 'vue'
|
|
|
|
import { useFeatureFlags } from '@/composables/useFeatureFlags'
|
|
import { civitaiImportSource } from '@/platform/assets/importSources/civitaiImportSource'
|
|
import { validateSourceUrl } from '@/platform/assets/utils/importSourceUtil'
|
|
|
|
const { flags } = useFeatureFlags()
|
|
|
|
defineProps<{
|
|
error?: string
|
|
}>()
|
|
|
|
const url = defineModel<string>({ required: true })
|
|
|
|
const isValidUrl = computed(() => {
|
|
const trimmedUrl = url.value.trim()
|
|
if (!trimmedUrl) return false
|
|
return validateSourceUrl(trimmedUrl, civitaiImportSource)
|
|
})
|
|
</script>
|