toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-18 11:31:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

opti: 1.page tree; 2. icon invert; 3.topbar;

Browse Source
This commit is contained in:
mitsuha 2022-08-09 17:29:43 +08:00
parent f413d4ce0e
commit f0788e0b4b
6 changed files with 78 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
apps/ligo-virgo/src/pages/workspace/docs/components/tabs/Tabs.tsx
View File

@ -1,43 +1,73 @@
import { useState } from 'react';
import { MuiDivider as Divider, styled } from '@toeverything/components/ui';
import { styled } from '@toeverything/components/ui';
import type { ValueOf } from '@toeverything/utils';
const StyledTabs = styled('div')({
width: '100%',
height: '12px',
marginTop: '12px',
display: 'flex',
alignItems: 'center',
cursor: 'pointer',
});
const StyledDivider = styled(Divider, {
shouldForwardProp: (prop: string) => !['isActive'].includes(prop),
})<{ isActive?: boolean }>(({ isActive }) => {
const StyledTabs = styled('div')(({ theme }) => {
return {
flex: 1,
backgroundColor: isActive ? '#3E6FDB' : '#ECF1FB',
borderWidth: '2px',
width: '100%',
height: '30px',
marginTop: '12px',
display: 'flex',
fontSize: '12px',
fontWeight: '600',
color: theme.affine.palette.primary,
};
});
const StyledTabTitle = styled('div', {
shouldForwardProp: (prop: string) => !['isActive'].includes(prop),
})<{ isActive?: boolean; isDisabled?: boolean }>`
flex: 1;
display: flex;
align-items: center;
justify-content: center;
line-height: 18px;
padding-top: 4px;
border-top: 2px solid #ecf1fb;
position: relative;
&::after {
content: '';
width: 0;
height: 2px;
background-color: ${({ isActive, theme }) =>
isActive ? theme.affine.palette.primary : ''};
position: absolute;
left: 100%;
top: -2px;
transition: all 0.2s;
}
&.active {
&::after {
width: 100%;
left: 0;
transition-delay: 0.1s;
}
& ~ div::after {
left: 0;
}
}
`;
const TAB_TITLE = {
PAGES: 'pages',
GALLERY: 'gallery',
TOC: 'toc',
} as const;
const TabMap = new Map<TabKey, TabValue>([
['PAGES', 'pages'],
['GALLERY', 'gallery'],
['TOC', 'toc'],
const TabMap = new Map<TabKey, { value: TabValue; disabled?: boolean }>([
['PAGES', { value: 'pages' }],
['GALLERY', { value: 'gallery', disabled: true }],
['TOC', { value: 'toc' }],
]);
type TabKey = keyof typeof TAB_TITLE;
type TabValue = ValueOf<typeof TAB_TITLE>;
const Tabs = () => {
const [activeTab, setActiveTab] = useState<TabValue>(TAB_TITLE.PAGES);
const [activeValue, setActiveTab] = useState<TabValue>(TAB_TITLE.PAGES);
const onClick = (v: TabValue) => {
setActiveTab(v);
@ -45,13 +75,19 @@ const Tabs = () => {
return (
<StyledTabs>
{[...TabMap.entries()].map(([k, v]) => {
{[...TabMap.entries()].map(([k, { value, disabled = false }]) => {
const isActive = activeValue === value;
return (
<StyledDivider
key={v}
isActive={v === activeTab}
onClick={() => onClick(v)}
/>
<StyledTabTitle
key={value}
className={isActive ? 'active' : ''}
isActive={isActive}
isDisabled={disabled}
onClick={() => onClick(value)}
>
{k}
</StyledTabTitle>
);
})}
</StyledTabs>

4
libs/components/layout/src/header/LayoutHeader.tsx
View File

@ -33,9 +33,9 @@ export const LayoutHeader = () => {
<IconButton onClick={toggleInfoSidebar} size="large">
{showSettingsSidebar ? (
<SideBarViewIcon />
) : (
<SideBarViewCloseIcon />
) : (
<SideBarViewIcon />
)}
</IconButton>
</StyledHelper>

4
libs/components/layout/src/settings-sidebar/ContainerTabs/ContainerTabs.tsx
View File

@ -100,10 +100,10 @@ export const ContainerTabs = () => {
const StyledTabsTitlesContainer = styled('div')(({ theme }) => {
return {
height: '60px',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
marginTop: 24,
marginBottom: 24,
marginLeft: theme.affine.spacing.smSpacing,
marginRight: theme.affine.spacing.smSpacing,
};

1
libs/components/layout/src/settings-sidebar/Settings/SettingsPanel.tsx
View File

@ -16,7 +16,6 @@ const StyledContainerForSettingsPanel = styled('div')(({ theme }) => {
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
paddingTop: 44,
paddingBottom: 44,
height: '100%',
};

10
libs/components/layout/src/workspace-sidebar/page-tree/tree-item/TreeItem.tsx
View File

@ -15,6 +15,7 @@ import styles from './tree-item.module.scss';
import { useFlag } from '@toeverything/datasource/feature-flags';
import MoreActions from './MoreActions';
import { useTheme } from '@toeverything/components/ui';
export type TreeItemProps = {
/** The main text to display on this line */
value: string;
@ -61,11 +62,13 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
},
ref
) => {
const { workspace_id } = useParams();
const { workspace_id, page_id } = useParams();
const BooleanPageTreeItemMoreActions = useFlag(
'BooleanPageTreeItemMoreActions',
true
);
const theme = useTheme();
return (
<li
ref={wrapperRef}
@ -106,6 +109,11 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
className={styles['Text']}
{...handleProps}
to={`/${workspace_id}/${pageId}`}
style={{
...(pageId === page_id && {
color: theme.affine.palette.primary,
}),
}}
>
{value}
</Link>

3
libs/components/layout/src/workspace-sidebar/page-tree/tree-item/tree-item.module.scss
View File

@ -2,7 +2,8 @@
box-sizing: border-box;
padding-left: var(--spacing);
list-style: none;
padding: 6px 0;
padding-top: 6px;
padding-bottom: 6px;
font-size: 14px;
&:hover {
background: #f5f7f8;