toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-11-27 17:32:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: add animation to tab button (#965)

Browse Source
This commit is contained in:
Qi 2023-02-13 23:56:25 +08:00 committed by GitHub
parent c0813156a1
commit dbf6dd5a6c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 64 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
apps/web/src/components/workspace-setting/style.ts
View File

@ -6,6 +6,7 @@ export const StyledSettingContainer = styled('div')(() => {
flexDirection: 'column',
padding: '0 0 20px 48px',
height: '100vh',
marginTop: '48px',
};
});
@ -25,14 +26,6 @@ export const StyledSettingContent = styled('div')(() => {
};
});
export const StyledSettingTabContainer = styled('ul')(() => {
{
return {
display: 'flex',
};
}
});
export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
({ theme, isActive }) => {
{
@ -46,10 +39,6 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
lineHeight: theme.font.lineHeight,
cursor: 'pointer',
transition: 'all 0.15s ease',
borderBottom: `2px solid ${
isActive ? theme.colors.primaryColor : 'none'
}`,
':hover': { color: theme.colors.primaryColor },
};
}
}

83
apps/web/src/pages/workspace/[workspaceId]/setting.tsx
View File

@ -1,11 +1,16 @@
import {
StyledSettingContainer,
StyledSettingContent,
StyledSettingSidebar,
StyledSettingTabContainer,
WorkspaceSettingTagItem,
} from '@/components/workspace-setting/style';
import { ReactElement, ReactNode, useState } from 'react';
import {
ReactElement,
ReactNode,
useState,
CSSProperties,
useEffect,
startTransition,
} from 'react';
import {
GeneralPage,
MembersPage,
@ -19,6 +24,7 @@ import { WorkspaceUnit } from '@affine/datacenter';
import { useTranslation } from '@affine/i18n';
import { PageListHeader } from '@/components/header';
import Head from 'next/head';
import { styled } from '@affine/component';
const useTabMap = () => {
const { t } = useTranslation();
@ -73,11 +79,48 @@ const useTabMap = () => {
return { activeTabPanelRender, tableArr, handleTabChange, activeTab };
};
const StyledIndicator = styled.div(({ theme }) => {
return {
height: '2px',
background: theme.colors.primaryColor,
position: 'absolute',
left: '0',
bottom: '0',
transition: 'left .3s, width .3s',
};
});
const StyledTabButtonWrapper = styled.div(() => {
return {
display: 'flex',
position: 'relative',
};
});
const WorkspaceSetting = () => {
const { t } = useTranslation();
const { currentWorkspace } = useAppState();
const { activeTabPanelRender, tableArr, handleTabChange, activeTab } =
useTabMap();
const [indicatorState, setIndicatorState] = useState<
Pick<CSSProperties, 'left' | 'width'>
>({
left: 0,
width: 0,
});
useEffect(() => {
const tabButton = document.querySelector(
`[data-setting-tab-button="${activeTab}"]`
);
if (tabButton instanceof HTMLElement) {
startTransition(() => {
setIndicatorState({
width: `${tabButton.offsetWidth}px`,
left: `${tabButton.offsetLeft}px`,
});
});
}
}, [activeTab]);
return (
<>
<Head>
@ -86,23 +129,23 @@ const WorkspaceSetting = () => {
<PageListHeader icon={<SettingsIcon />}>{t('Settings')}</PageListHeader>
<StyledSettingContainer>
<StyledSettingSidebar>
<StyledSettingTabContainer>
{tableArr.map(({ name }) => {
return (
<WorkspaceSettingTagItem
key={name}
isActive={activeTab === name}
onClick={() => {
handleTabChange(name);
}}
>
{name}
</WorkspaceSettingTagItem>
);
})}
</StyledSettingTabContainer>
</StyledSettingSidebar>
<StyledTabButtonWrapper>
{tableArr.map(({ name }) => {
return (
<WorkspaceSettingTagItem
key={name}
isActive={activeTab === name}
data-setting-tab-button={name}
onClick={() => {
handleTabChange(name);
}}
>
{name}
</WorkspaceSettingTagItem>
);
})}
<StyledIndicator style={indicatorState} />
</StyledTabButtonWrapper>
<StyledSettingContent>
{currentWorkspace && activeTabPanelRender?.(currentWorkspace)}