mirror of
https://github.com/DrizzleTime/Foxel.git
synced 2026-09-05 07:36:53 +08:00
feat(Header): add upload folder option to the upload menu
This commit is contained in:
@@ -145,6 +145,12 @@ export const Header: React.FC<HeaderProps> = ({
|
|||||||
icon: <FileAddOutlined />,
|
icon: <FileAddOutlined />,
|
||||||
onClick: onCreateFile,
|
onClick: onCreateFile,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
key: 'upload-folder',
|
||||||
|
label: t('Upload Folder'),
|
||||||
|
icon: <UploadOutlined />,
|
||||||
|
onClick: onUploadDirectory,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
key: 'sort',
|
key: 'sort',
|
||||||
label: t('Sort By') + `: ${t(sortBy === 'mtime' ? 'Modified Time' : sortBy === 'size' ? 'Size' : 'Name')}`,
|
label: t('Sort By') + `: ${t(sortBy === 'mtime' ? 'Modified Time' : sortBy === 'size' ? 'Size' : 'Name')}`,
|
||||||
@@ -162,6 +168,20 @@ export const Header: React.FC<HeaderProps> = ({
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
const uploadMenu = {
|
||||||
|
items: [
|
||||||
|
{ key: 'file', label: t('Upload Files') },
|
||||||
|
{ key: 'folder', label: t('Upload Folder') },
|
||||||
|
],
|
||||||
|
onClick: ({ key }: { key: string }) => {
|
||||||
|
if (key === 'folder') {
|
||||||
|
onUploadDirectory();
|
||||||
|
} else {
|
||||||
|
onUploadFile();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Flex vertical={isMobile} gap={isMobile ? 10 : 12} style={{ padding: isMobile ? '10px 12px' : '10px 16px', borderBottom: `1px solid ${token.colorBorderSecondary}` }}>
|
<Flex vertical={isMobile} gap={isMobile ? 10 : 12} style={{ padding: isMobile ? '10px 12px' : '10px 16px', borderBottom: `1px solid ${token.colorBorderSecondary}` }}>
|
||||||
<Flex align="center" gap={8} style={{ minWidth: 0 }}>
|
<Flex align="center" gap={8} style={{ minWidth: 0 }}>
|
||||||
@@ -179,26 +199,18 @@ export const Header: React.FC<HeaderProps> = ({
|
|||||||
<Button size="small" icon={<PlusOutlined />} onClick={onCreateDir} aria-label={t('New Folder')}>
|
<Button size="small" icon={<PlusOutlined />} onClick={onCreateDir} aria-label={t('New Folder')}>
|
||||||
{!isMobile && t('New Folder')}
|
{!isMobile && t('New Folder')}
|
||||||
</Button>
|
</Button>
|
||||||
|
{isMobile ? (
|
||||||
|
<Button size="small" icon={<UploadOutlined />} onClick={onUploadFile} aria-label={t('Upload Files')} />
|
||||||
|
) : (
|
||||||
<Dropdown.Button
|
<Dropdown.Button
|
||||||
size="small"
|
size="small"
|
||||||
icon={<UploadOutlined />}
|
icon={<UploadOutlined />}
|
||||||
onClick={onUploadFile}
|
onClick={onUploadFile}
|
||||||
menu={{
|
menu={uploadMenu}
|
||||||
items: [
|
|
||||||
{ key: 'file', label: t('Upload Files') },
|
|
||||||
{ key: 'folder', label: t('Upload Folder') },
|
|
||||||
],
|
|
||||||
onClick: ({ key }) => {
|
|
||||||
if (key === 'folder') {
|
|
||||||
onUploadDirectory();
|
|
||||||
} else {
|
|
||||||
onUploadFile();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
{!isMobile && t('Upload')}
|
{t('Upload')}
|
||||||
</Dropdown.Button>
|
</Dropdown.Button>
|
||||||
|
)}
|
||||||
{isMobile && (
|
{isMobile && (
|
||||||
<Dropdown menu={{ items: mobileMoreItems }}>
|
<Dropdown menu={{ items: mobileMoreItems }}>
|
||||||
<Button size="small" icon={<MoreOutlined />} aria-label={t('More')} />
|
<Button size="small" icon={<MoreOutlined />} aria-label={t('More')} />
|
||||||
|
|||||||
Reference in New Issue
Block a user