Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-18 10:36:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: slide bar button position error

Browse Source
This commit is contained in:
QiShaoXuan
2022-12-26 14:46:57 +08:00
parent d60873ad00
commit 3ef167ddbf
4 changed files with 173 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/workspace-slider-bar/index.tsx
+82 -78
View File
@@ -7,6 +7,7 @@ import {
StyledListItemForWorkspace,
StyledNewPageButton,
StyledSliderBar,
StyledSliderBarWrapper,
StyledSubListItem,
} from './style';
import { Arrow } from './icons';
@@ -84,92 +85,95 @@ export const WorkSpaceSliderBar = () => {
return (
<>
<StyledSliderBar show={show}>
<StyledListItemForWorkspace>
<WorkspaceSelector />
</StyledListItemForWorkspace>
<StyledListItem
data-testid="sliderBar-quickSearchButton"
style={{ cursor: 'pointer' }}
onClick={() => {
triggerQuickSearchModal();
}}
<Tooltip
content={show ? 'Collapse sidebar' : 'Expand sidebar'}
placement="right"
visible={showTip}
>
<SearchIcon /> Quick search
</StyledListItem>
<Link href={{ pathname: paths.all }}>
<StyledListItem active={router.pathname === paths.all}>
<AllPagesIcon /> <span>All pages</span>
</StyledListItem>
</Link>
<StyledListItem active={router.pathname === paths.favorite}>
<StyledLink href={{ pathname: paths.favorite }}>
<FavouritesIcon />
Favourites
</StyledLink>
<IconButton
darker={true}
<StyledArrowButton
data-testid="sliderBar-arrowButton"
isShow={show}
onClick={() => {
setShowSubFavorite(!showSubFavorite);
setShow(!show);
setShowTip(false);
}}
onMouseEnter={() => {
setShowTip(true);
}}
onMouseLeave={() => {
setShowTip(false);
}}
>
<ArrowDownIcon
style={{
transform: `rotate(${showSubFavorite ? '180' : '0'}deg)`,
}}
/>
</IconButton>
</StyledListItem>
<FavoriteList showList={showSubFavorite} />
<Tooltip content="Coming soon" placement="right-start" zIndex={9999}>
<StyledListItem
disabled={true}
onClick={() => {
// triggerImportModal();
}}
>
<ImportIcon /> Import
</StyledListItem>
<Arrow />
</StyledArrowButton>
</Tooltip>
<Link href={{ pathname: paths.trash }}>
<StyledListItem active={router.pathname === paths.trash}>
<TrashIcon /> Trash
<StyledSliderBarWrapper>
<StyledListItemForWorkspace>
<WorkspaceSelector />
</StyledListItemForWorkspace>
<StyledListItem
data-testid="sliderBar-quickSearchButton"
style={{ cursor: 'pointer' }}
onClick={() => {
triggerQuickSearchModal();
}}
>
<SearchIcon /> Quick search
</StyledListItem>
</Link>
<StyledNewPageButton
onClick={async () => {
const pageId = await createPage?.();
if (pageId) {
openPage(pageId);
}
}}
>
<AddIcon /> New Page
</StyledNewPageButton>
<Link href={{ pathname: paths.all }}>
<StyledListItem active={router.pathname === paths.all}>
<AllPagesIcon /> <span>All pages</span>
</StyledListItem>
</Link>
<StyledListItem active={router.pathname === paths.favorite}>
<StyledLink href={{ pathname: paths.favorite }}>
<FavouritesIcon />
Favourites
</StyledLink>
<IconButton
darker={true}
onClick={() => {
setShowSubFavorite(!showSubFavorite);
}}
>
<ArrowDownIcon
style={{
transform: `rotate(${showSubFavorite ? '180' : '0'}deg)`,
}}
/>
</IconButton>
</StyledListItem>
<FavoriteList showList={showSubFavorite} />
<Tooltip content="Coming soon" placement="right-start" zIndex={9999}>
<StyledListItem
disabled={true}
onClick={() => {
// triggerImportModal();
}}
>
<ImportIcon /> Import
</StyledListItem>
</Tooltip>
<Link href={{ pathname: paths.trash }}>
<StyledListItem active={router.pathname === paths.trash}>
<TrashIcon /> Trash
</StyledListItem>
</Link>
<StyledNewPageButton
onClick={async () => {
const pageId = await createPage?.();
if (pageId) {
openPage(pageId);
}
}}
>
<AddIcon /> New Page
</StyledNewPageButton>
</StyledSliderBarWrapper>
</StyledSliderBar>
<Tooltip
content={show ? 'Collapse sidebar' : 'Expand sidebar'}
placement="right"
visible={showTip}
>
<StyledArrowButton
data-testid="sliderBar-arrowButton"
isShow={show}
onClick={() => {
setShow(!show);
setShowTip(false);
}}
onMouseEnter={() => {
setShowTip(true);
}}
onMouseLeave={() => {
setShowTip(false);
}}
>
<Arrow />
</StyledArrowButton>
</Tooltip>
</>
);
};
packages/app/src/components/workspace-slider-bar/style.ts
+10 -4
View File
@@ -8,15 +8,21 @@ export const StyledSliderBar = styled.div<{ show: boolean }>(
height: '100vh',
background: theme.mode === 'dark' ? '#272727' : '#FBFBFC',
boxShadow: theme.shadow.modal,
transition: 'width .15s',
transition: 'width .15s, padding .15s',
position: 'relative',
zIndex: theme.zIndex.modal,
padding: show ? '24px 12px' : '24px 0',
overflowX: 'hidden',
flexShrink: 0,
};
}
);
export const StyledSliderBarWrapper = styled.div(() => {
return {
height: '100%',
overflowX: 'hidden',
overflowY: 'auto',
};
});
export const StyledArrowButton = styled.button<{ isShow: boolean }>(
({ theme, isShow }) => {
@@ -28,9 +34,9 @@ export const StyledArrowButton = styled.button<{ isShow: boolean }>(
backgroundColor: theme.colors.hoverBackground,
borderRadius: '50%',
transition: 'all .15s',
position: 'relative',
position: 'absolute',
top: '34px',
left: isShow ? '-16px' : '-8px',
right: '-20px',
zIndex: theme.zIndex.modal,
svg: {
transform: isShow ? 'rotate(180deg)' : 'unset',