mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-29 02:32:18 +00:00
[feat] Add feature-flagged upload button to asset browser (#6665)
## Summary Adds an upload button to the asset browser modal, controlled by the `model_upload_button_enabled` backend feature flag. ## Changes - **What**: Added upload button with PrimeVue primary styling to asset browser header - **Feature Flag**: Button only appears when backend returns `model_upload_button_enabled: true` - **Localization**: Added `assetBrowser.uploadModel` translation key - **Click Handler**: Currently logs to console (implementation pending) ## Review Focus - Feature flag integration using `useFeatureFlags` composable - Button styling matches PrimeVue primary color scheme - Proper placement in header with flexbox layout ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6665-feat-Add-feature-flagged-upload-button-to-asset-browser-2a96d73d365081c7a05bdc33bed7f7fd) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
committed by
GitHub
parent
ef46f0cbf4
commit
c4477fc7ab
@@ -21,13 +21,27 @@
|
||||
</template>
|
||||
|
||||
<template #header>
|
||||
<SearchBox
|
||||
v-model="searchQuery"
|
||||
:autofocus="true"
|
||||
size="lg"
|
||||
:placeholder="$t('assetBrowser.searchAssetsPlaceholder')"
|
||||
class="max-w-96"
|
||||
/>
|
||||
<div class="flex w-full items-center justify-between gap-2">
|
||||
<SearchBox
|
||||
v-model="searchQuery"
|
||||
:autofocus="true"
|
||||
size="lg"
|
||||
:placeholder="$t('assetBrowser.searchAssetsPlaceholder')"
|
||||
class="max-w-96"
|
||||
/>
|
||||
<IconTextButton
|
||||
v-if="isUploadButtonEnabled"
|
||||
type="accent"
|
||||
size="md"
|
||||
class="!h-10 [&>span]:hidden md:[&>span]:inline"
|
||||
:label="$t('assetBrowser.uploadModel')"
|
||||
:on-click="handleUploadClick"
|
||||
>
|
||||
<template #icon>
|
||||
<i class="icon-[lucide--upload]" />
|
||||
</template>
|
||||
</IconTextButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #contentFilter>
|
||||
@@ -52,9 +66,11 @@ import { useAsyncState } from '@vueuse/core'
|
||||
import { computed, provide, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import IconTextButton from '@/components/button/IconTextButton.vue'
|
||||
import SearchBox from '@/components/input/SearchBox.vue'
|
||||
import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
|
||||
import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
|
||||
import { useFeatureFlags } from '@/composables/useFeatureFlags'
|
||||
import AssetFilterBar from '@/platform/assets/components/AssetFilterBar.vue'
|
||||
import AssetGrid from '@/platform/assets/components/AssetGrid.vue'
|
||||
import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
|
||||
@@ -168,4 +184,11 @@ function handleAssetSelectAndEmit(asset: AssetDisplayItem) {
|
||||
// It handles the appropriate transformation (filename extraction or full asset)
|
||||
props.onSelect?.(asset)
|
||||
}
|
||||
|
||||
const { flags } = useFeatureFlags()
|
||||
const isUploadButtonEnabled = computed(() => flags.modelUploadButtonEnabled)
|
||||
|
||||
function handleUploadClick() {
|
||||
// Will be implemented in the future commit
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user