mirror of
https://github.com/toeverything/AFFiNE.git
synced 2024-09-19 15:38:52 +03:00
fix: improve sidebar animation (#1814)
This commit is contained in:
parent
5129ab3db8
commit
c023d0a2b8
@ -15,9 +15,9 @@ export const StyledSliderBarWrapper = styled('div')<{
|
||||
userSelect: 'none',
|
||||
},
|
||||
zIndex: theme.zIndex.modal,
|
||||
transition: resizing ? '' : 'transform .3s',
|
||||
transition: resizing ? '' : 'transform .3s, width .3s, max-width .3s',
|
||||
transform: show ? 'translateX(0)' : 'translateX(-100%)',
|
||||
maxWidth: floating ? undefined : 'calc(100vw - 698px)',
|
||||
maxWidth: floating ? 'calc(10vw + 400px)' : 'calc(100vw - 698px)',
|
||||
background:
|
||||
!floating && macosElectron ? 'transparent' : theme.colors.hubBackground,
|
||||
borderRight: macosElectron ? '' : '1px solid',
|
||||
|
@ -264,8 +264,13 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
|
||||
const [sidebarOpen, setSidebarOpen] = useSidebarStatus();
|
||||
const sidebarFloating = useSidebarFloating();
|
||||
const [sidebarWidth, setSliderWidth] = useSidebarWidth();
|
||||
const actualSidebarWidth = sidebarFloating || !sidebarOpen ? 0 : sidebarWidth;
|
||||
const width = `calc(100% - ${actualSidebarWidth}px)`;
|
||||
const actualSidebarWidth = !sidebarOpen
|
||||
? 0
|
||||
: sidebarFloating
|
||||
? 'calc(10vw + 400px)'
|
||||
: sidebarWidth;
|
||||
const mainWidth =
|
||||
sidebarOpen && !sidebarFloating ? `calc(100% - ${sidebarWidth}px)` : '100%';
|
||||
const [resizing] = useSidebarResizing();
|
||||
|
||||
const onResizeStart = useCallback(() => {
|
||||
@ -332,7 +337,7 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
|
||||
</StyledSliderResizer>
|
||||
)}
|
||||
</StyledSpacer>
|
||||
<MainContainerWrapper resizing={resizing} style={{ width: width }}>
|
||||
<MainContainerWrapper resizing={resizing} style={{ width: mainWidth }}>
|
||||
<MainContainer className="main-container">
|
||||
<AffineWorkspaceEffect />
|
||||
{children}
|
||||
|
@ -22,13 +22,13 @@ export const StyledSpacer = styled('div')<{
|
||||
sidebarOpen: boolean;
|
||||
resizing: boolean;
|
||||
floating: boolean;
|
||||
}>(({ resizing, sidebarOpen, floating }) => {
|
||||
}>(({ resizing, floating }) => {
|
||||
return {
|
||||
position: 'relative',
|
||||
position: floating ? 'absolute' : 'relative',
|
||||
flexGrow: 1,
|
||||
maxWidth: 'calc(100vw - 698px)',
|
||||
minWidth: !floating && sidebarOpen ? '256px' : '0',
|
||||
transition: resizing ? '' : 'width .3s, min-width .3s',
|
||||
height: '100%',
|
||||
maxWidth: floating ? 'calc(10vw + 400px)' : 'calc(100vw - 698px)',
|
||||
transition: resizing ? '' : 'width .3s, min-width .3s, max-width .3s',
|
||||
};
|
||||
});
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user