Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-25 18:26:05 +08: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
3 changed files with 15 additions and 10 deletions
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', userSelect: 'none',
}, },
zIndex: theme.zIndex.modal, zIndex: theme.zIndex.modal,
transition: resizing ? '' : 'transform .3s', transition: resizing ? '' : 'transform .3s, width .3s, max-width .3s',
transform: show ? 'translateX(0)' : 'translateX(-100%)', transform: show ? 'translateX(0)' : 'translateX(-100%)',
maxWidth: floating ? undefined : 'calc(100vw - 698px)', maxWidth: floating ? 'calc(10vw + 400px)' : 'calc(100vw - 698px)',
background: background:
!floating && macosElectron ? 'transparent' : theme.colors.hubBackground, !floating && macosElectron ? 'transparent' : theme.colors.hubBackground,
borderRight: macosElectron ? '' : '1px solid', 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 [sidebarOpen, setSidebarOpen] = useSidebarStatus();
const sidebarFloating = useSidebarFloating(); const sidebarFloating = useSidebarFloating();
const [sidebarWidth, setSliderWidth] = useSidebarWidth(); const [sidebarWidth, setSliderWidth] = useSidebarWidth();
const actualSidebarWidth = sidebarFloating || !sidebarOpen ? 0 : sidebarWidth; const actualSidebarWidth = !sidebarOpen
const width = `calc(100% - ${actualSidebarWidth}px)`; ? 0
: sidebarFloating
? 'calc(10vw + 400px)'
: sidebarWidth;
const mainWidth =
sidebarOpen && !sidebarFloating ? `calc(100% - ${sidebarWidth}px)` : '100%';
const [resizing] = useSidebarResizing(); const [resizing] = useSidebarResizing();
const onResizeStart = useCallback(() => { const onResizeStart = useCallback(() => {
@@ -332,7 +337,7 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
</StyledSliderResizer> </StyledSliderResizer>
)} )}
</StyledSpacer> </StyledSpacer>
<MainContainerWrapper resizing={resizing} style={{ width: width }}> <MainContainerWrapper resizing={resizing} style={{ width: mainWidth }}>
<MainContainer className="main-container"> <MainContainer className="main-container">
<AffineWorkspaceEffect /> <AffineWorkspaceEffect />
{children} {children}

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

@@ -22,13 +22,13 @@ export const StyledSpacer = styled('div')<{
sidebarOpen: boolean; sidebarOpen: boolean;
resizing: boolean; resizing: boolean;
floating: boolean; floating: boolean;
}>(({ resizing, sidebarOpen, floating }) => { }>(({ resizing, floating }) => {
return { return {
position: 'relative', position: floating ? 'absolute' : 'relative',
flexGrow: 1, flexGrow: 1,
maxWidth: 'calc(100vw - 698px)', height: '100%',
minWidth: !floating && sidebarOpen ? '256px' : '0', maxWidth: floating ? 'calc(10vw + 400px)' : 'calc(100vw - 698px)',
transition: resizing ? '' : 'width .3s, min-width .3s', transition: resizing ? '' : 'width .3s, min-width .3s, max-width .3s',
}; };
}); });