Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: min width for nav panel

Browse Source
This commit is contained in:
ascarbek
2023-03-05 22:28:33 +06:00
parent 3afca2b482
commit 84f41cec76
2 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavigationPanel.tsx
View File

@ -8,6 +8,8 @@ import { NavigationResizer } from './NavigationResizer';
import { IFolder } from '../../../stores/reducers/folders/slice'; import { IFolder } from '../../../stores/reducers/folders/slice';
import { IPage } from '../../../stores/reducers/pages/slice'; import { IPage } from '../../../stores/reducers/pages/slice';
const MINIMUM_WIDTH = 200;
export const NavigationPanel = ({ export const NavigationPanel = ({
onCollapseNavigationClick, onCollapseNavigationClick,
width, width,
@ -29,7 +31,7 @@ export const NavigationPanel = ({
<Workspace></Workspace> <Workspace></Workspace>
<div className={'flex flex-col px-2 overflow-auto'} style={{height: 'calc(100vh - 280px)'}}> <div className={'flex flex-col overflow-auto px-2'} style={{ height: 'calc(100vh - 280px)' }}>
{folders.map((folder, index) => ( {folders.map((folder, index) => (
<FolderItem <FolderItem
key={index} key={index}
@ -50,7 +52,7 @@ export const NavigationPanel = ({
<NewFolderButton></NewFolderButton> <NewFolderButton></NewFolderButton>
</div> </div>
</div> </div>
<NavigationResizer></NavigationResizer> <NavigationResizer minWidth={MINIMUM_WIDTH}></NavigationResizer>
</> </>
); );
}; };

8
frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavigationResizer.tsx
View File

@ -3,13 +3,17 @@ import { useAppDispatch, useAppSelector } from '../../../stores/store';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { navigationWidthActions } from '../../../stores/reducers/navigation-width/slice'; import { navigationWidthActions } from '../../../stores/reducers/navigation-width/slice';
export const NavigationResizer = () => { export const NavigationResizer = ({ minWidth }: { minWidth: number }) => {
const width = useAppSelector((state) => state.navigationWidth); const width = useAppSelector((state) => state.navigationWidth);
const appDispatch = useAppDispatch(); const appDispatch = useAppDispatch();
const { onMouseDown, movementX } = useResizer(); const { onMouseDown, movementX } = useResizer();
useEffect(() => { useEffect(() => {
appDispatch(navigationWidthActions.changeWidth(width + movementX)); if (width + movementX < minWidth) {
appDispatch(navigationWidthActions.changeWidth(minWidth));
} else {
appDispatch(navigationWidthActions.changeWidth(width + movementX));
}
}, [movementX]); }, [movementX]);
return ( return (