toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-09-19 15:38:52 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve sidebar animation (#1814)

Browse Source
This commit is contained in:
Peng Xiao 2023-04-04 17:14:44 +08:00 committed by GitHub
parent 5129ab3db8
commit c023d0a2b8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/src/components/pure/workspace-slider-bar/style.ts
View File

@ -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',

11
apps/web/src/layouts/index.tsx
View File

@ -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}

10
apps/web/src/layouts/styles.ts
View File

@ -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',
};
});