Refactor media import components for improved layout and functionality
Updated the ManualInboxPanel, MediaImportDialog, MovieImportPanel, and UploadToShowPanel to enhance their layout and responsiveness. Adjusted flex properties to ensure consistent sizing and overflow handling across components. Simplified the MediaImportDialog by removing unnecessary file handling logic, and improved localization strings for clarity. These changes aim to enhance user experience and maintain a cohesive design across the media import interface.
This commit is contained in:
@@ -11,7 +11,7 @@ import { ManualInboxPanel } from './ManualInboxPanel'
|
||||
import { MovieImportPanel } from './MovieImportPanel'
|
||||
import { UploadToShowPanel } from './UploadToShowPanel'
|
||||
|
||||
/** Способы пополнить библиотеку. «В шоу» появляется только когда файлы уже выбраны. */
|
||||
/** Способы пополнить библиотеку: фильмы пачкой, серии из manual/, загрузка файлов в шоу. */
|
||||
type Tab = 'movies' | 'manual' | 'toShow'
|
||||
|
||||
/**
|
||||
@@ -19,22 +19,17 @@ type Tab = 'movies' | 'manual' | 'toShow'
|
||||
* выбранных файлов в шоу. Раньше это были три кнопки и три окна — а выбор между ними делается
|
||||
* один раз и по одному признаку: что за контент кладём.
|
||||
*/
|
||||
export function MediaImportDialog({
|
||||
files,
|
||||
onClose,
|
||||
}: Readonly<{
|
||||
/** Файлы, выбранные в проводнике до открытия окна: тогда сразу открывается вкладка «в шоу». */
|
||||
files: File[] | null
|
||||
onClose: () => void
|
||||
}>) {
|
||||
export function MediaImportDialog({ onClose }: Readonly<{ onClose: () => void }>) {
|
||||
const { t } = useTranslation()
|
||||
const [tab, setTab] = useState<Tab>(files ? 'toShow' : 'movies')
|
||||
const [tab, setTab] = useState<Tab>('movies')
|
||||
|
||||
const tabs: Tab[] = files ? ['toShow', 'movies', 'manual'] : ['movies', 'manual']
|
||||
const tabs: Tab[] = ['movies', 'manual', 'toShow']
|
||||
|
||||
return (
|
||||
<Dialog open onOpenChange={(open) => !open && onClose()}>
|
||||
<DialogContent className="max-w-[min(96vw,80rem)]">
|
||||
{/* Высота фиксирована: вкладки разного роста, и окно, прыгающее при переключении,
|
||||
сбивает — то, на что метился курсор, уезжает из-под него. */}
|
||||
<DialogContent className="flex h-[min(88vh,56rem)] w-full max-w-[min(96vw,80rem)] flex-col">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t('admin.media.importTitle')}</DialogTitle>
|
||||
<DialogDescription>{t('admin.media.importHint')}</DialogDescription>
|
||||
@@ -57,9 +52,11 @@ export function MediaImportDialog({
|
||||
))}
|
||||
</div>
|
||||
|
||||
{tab === 'movies' && <MovieImportPanel onClose={onClose} />}
|
||||
{tab === 'manual' && <ManualInboxPanel onClose={onClose} />}
|
||||
{tab === 'toShow' && files && <UploadToShowPanel files={files} onClose={onClose} />}
|
||||
<div className="flex min-h-0 flex-1 flex-col gap-3 pt-3">
|
||||
{tab === 'movies' && <MovieImportPanel onClose={onClose} />}
|
||||
{tab === 'manual' && <ManualInboxPanel onClose={onClose} />}
|
||||
{tab === 'toShow' && <UploadToShowPanel onClose={onClose} />}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user