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

fix(Header): adjust path editor height and improve styling

Browse Source
This commit is contained in:
shiyu
2025-12-18 14:08:59 +08:00
parent e34ee6f70d
commit e2f0037053
1 changed files with 15 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/pages/FileExplorerPage/components/Header.tsx
View File

@@ -41,6 +41,7 @@ export const Header: React.FC<HeaderProps> = ({
const { t } = useI18n();
const [editingPath, setEditingPath] = useState(false);
const [pathInputValue, setPathInputValue] = useState('');
const pathEditorHeight = token.fontSizeSM * token.lineHeight + token.paddingXXS * 2;
const handlePathEdit = () => {
setEditingPath(true);
@@ -71,7 +72,7 @@ export const Header: React.FC<HeaderProps> = ({
onBlur={handlePathCancel}
onKeyDown={(e) => e.key === 'Escape' && handlePathCancel()}
autoFocus
style={{ flex: 1 }}
style={{ flex: 1, height: pathEditorHeight, boxSizing: 'border-box' }}
/>
);
}
@@ -89,12 +90,23 @@ export const Header: React.FC<HeaderProps> = ({
return (
<div
style={{ cursor: 'pointer', padding: '4px 8px', borderRadius: token.borderRadius, transition: 'background-color 0.2s', flex: 1, overflow: 'hidden' }}
style={{
cursor: 'pointer',
padding: `${token.paddingXXS}px ${token.paddingXS}px`,
borderRadius: token.borderRadius,
transition: 'background-color 0.2s',
flex: 1,
overflow: 'hidden',
height: pathEditorHeight,
boxSizing: 'border-box',
display: 'flex',
alignItems: 'center'
}}
onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = token.colorFillTertiary; }}
onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = 'transparent'; }}
onClick={handlePathEdit}
>
<Breadcrumb items={breadcrumbItems} separator="/" style={{ fontSize: 12 }} />
<Breadcrumb items={breadcrumbItems} separator="/" style={{ fontSize: token.fontSizeSM }} />
</div>
);
};