GithubBackup/Foxel
1
0
Fork 0
mirror of https://github.com/DrizzleTime/Foxel.git synced 2026-09-06 16:17:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(Header): enhance mobile layout with dedicated buttons and improved responsiveness

Browse Source
This commit is contained in:
shiyu
2026-03-09 17:30:06 +08:00
parent e6402661d6
commit a5d606387f
1 changed files with 57 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/pages/FileExplorerPage/components/Header.tsx
+22 -16
View File
@@ -182,26 +182,40 @@ export const Header: React.FC<HeaderProps> = ({
}, },
}; };
if (isMobile) {
return ( return (
<Flex vertical={isMobile} gap={isMobile ? 10 : 12} style={{ padding: isMobile ? '10px 12px' : '10px 16px', borderBottom: `1px solid ${token.colorBorderSecondary}` }}> <Flex align="center" gap={6} style={{ padding: '10px 12px', borderBottom: `1px solid ${token.colorBorderSecondary}`, minWidth: 0 }}>
<Button size="small" icon={<ArrowUpOutlined />} onClick={onGoUp} disabled={path === '/'} />
{renderBreadcrumb()}
<Space size={4} style={{ flexShrink: 0 }}>
<Button size="small" icon={<ReloadOutlined />} onClick={onRefresh} loading={loading} aria-label={t('Refresh')} />
<Button size="small" icon={<PlusOutlined />} onClick={onCreateDir} aria-label={t('New Folder')} />
<Button size="small" icon={<UploadOutlined />} onClick={onUploadFile} aria-label={t('Upload Files')} />
<Dropdown menu={{ items: mobileMoreItems }}>
<Button size="small" icon={<MoreOutlined />} aria-label={t('More')} />
</Dropdown>
</Space>
</Flex>
);
}
return (
<Flex vertical gap={12} style={{ padding: '10px 16px', borderBottom: `1px solid ${token.colorBorderSecondary}` }}>
<Flex align="center" gap={8} style={{ minWidth: 0 }}> <Flex align="center" gap={8} style={{ minWidth: 0 }}>
<Button size="small" icon={<ArrowUpOutlined />} onClick={onGoUp} disabled={path === '/'} /> <Button size="small" icon={<ArrowUpOutlined />} onClick={onGoUp} disabled={path === '/'} />
{!isMobile && <Typography.Text strong>{t('File Manager')}</Typography.Text>} <Typography.Text strong>{t('File Manager')}</Typography.Text>
{!isMobile && <Divider type="vertical" />} <Divider type="vertical" />
{renderBreadcrumb()} {renderBreadcrumb()}
</Flex> </Flex>
<Flex align="center" justify="space-between" gap={8} style={{ flexWrap: 'wrap' }}> <Flex align="center" justify="space-between" gap={8} style={{ flexWrap: 'wrap' }}>
<Space size={8} wrap> <Space size={8} wrap>
<Button size="small" icon={<ReloadOutlined />} onClick={onRefresh} loading={loading} aria-label={t('Refresh')}> <Button size="small" icon={<ReloadOutlined />} onClick={onRefresh} loading={loading} aria-label={t('Refresh')}>
{!isMobile && t('Refresh')} {t('Refresh')}
</Button> </Button>
<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')} {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 />}
@@ -210,15 +224,8 @@ export const Header: React.FC<HeaderProps> = ({
> >
{t('Upload')} {t('Upload')}
</Dropdown.Button> </Dropdown.Button>
)}
{isMobile && (
<Dropdown menu={{ items: mobileMoreItems }}>
<Button size="small" icon={<MoreOutlined />} aria-label={t('More')} />
</Dropdown>
)}
</Space> </Space>
{!isMobile && (
<Space size={8} wrap> <Space size={8} wrap>
<Select <Select
size="small" size="small"
@@ -246,7 +253,6 @@ export const Header: React.FC<HeaderProps> = ({
]} ]}
/> />
</Space> </Space>
)}
</Flex> </Flex>
</Flex> </Flex>
); );