GithubBackup/Foxel
1
0
Fork 0
mirror of https://github.com/DrizzleTime/Foxel.git synced 2026-09-05 07:36:53 +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
+57 -51
View File
@@ -182,71 +182,77 @@ export const Header: React.FC<HeaderProps> = ({
}, },
}; };
if (isMobile) {
return (
<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 ( return (
<Flex vertical={isMobile} gap={isMobile ? 10 : 12} style={{ padding: isMobile ? '10px 12px' : '10px 16px', borderBottom: `1px solid ${token.colorBorderSecondary}` }}> <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 ? ( <Dropdown.Button
<Button size="small" icon={<UploadOutlined />} onClick={onUploadFile} aria-label={t('Upload Files')} /> size="small"
) : ( icon={<UploadOutlined />}
<Dropdown.Button onClick={onUploadFile}
size="small" menu={uploadMenu}
icon={<UploadOutlined />} >
onClick={onUploadFile} {t('Upload')}
menu={uploadMenu} </Dropdown.Button>
>
{t('Upload')}
</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" value={sortBy}
value={sortBy} onChange={(val) => onSortChange(val, sortOrder)}
onChange={(val) => onSortChange(val, sortOrder)} style={{ width: 112 }}
style={{ width: 112 }} options={[
options={[ { value: 'name', label: t('Name') },
{ value: 'name', label: t('Name') }, { value: 'size', label: t('Size') },
{ value: 'size', label: t('Size') }, { value: 'mtime', label: t('Modified Time') },
{ value: 'mtime', label: t('Modified Time') }, ]}
]} />
/> <Button
<Button size="small"
size="small" icon={sortOrder === 'asc' ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
icon={sortOrder === 'asc' ? <ArrowUpOutlined /> : <ArrowDownOutlined />} onClick={() => onSortChange(sortBy, sortOrder === 'asc' ? 'desc' : 'asc')}
onClick={() => onSortChange(sortBy, sortOrder === 'asc' ? 'desc' : 'asc')} />
/> <Segmented
<Segmented size="small"
size="small" value={viewMode}
value={viewMode} onChange={(value) => onSetViewMode(value as ViewMode)}
onChange={(value) => onSetViewMode(value as ViewMode)} options={[
options={[ { label: <Tooltip title={t('Grid')}><AppstoreOutlined /></Tooltip>, value: 'grid' },
{ label: <Tooltip title={t('Grid')}><AppstoreOutlined /></Tooltip>, value: 'grid' }, { label: <Tooltip title={t('List')}><UnorderedListOutlined /></Tooltip>, value: 'list' },
{ label: <Tooltip title={t('List')}><UnorderedListOutlined /></Tooltip>, value: 'list' }, ]}
]} />
/> </Space>
</Space>
)}
</Flex> </Flex>
</Flex> </Flex>
); );