diff --git a/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx b/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx index 5aceacb68c..fa957412b2 100644 --- a/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx +++ b/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx @@ -47,11 +47,11 @@ export function Page(props: PageProps) { } ); - await services.api.userConfig.addRecentPage( - props.workspace, - user.id, - page_id - ); + // await services.api.userConfig.addRecentPage( + // props.workspace, + // user.id, + // page_id + // ); await services.api.editorBlock.clearUndoRedo(props.workspace); }; updateRecentPages(); diff --git a/libs/components/icons/src/auto-icons/add/add.svg b/libs/components/icons/src/auto-icons/add/add.svg new file mode 100644 index 0000000000..70cc37d737 --- /dev/null +++ b/libs/components/icons/src/auto-icons/add/add.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/components/icons/src/auto-icons/add/add.tsx b/libs/components/icons/src/auto-icons/add/add.tsx new file mode 100644 index 0000000000..59e6fc0721 --- /dev/null +++ b/libs/components/icons/src/auto-icons/add/add.tsx @@ -0,0 +1,21 @@ + +import { FC } from 'react'; +// eslint-disable-next-line no-restricted-imports +import { SvgIcon } from '@mui/material'; +// eslint-disable-next-line no-restricted-imports +import type { SvgIconProps } from '@mui/material'; + +export interface AddIconProps extends Omit { + color?: string +} + +export const AddIcon: FC = ({ color, style, ...props}) => { + const propsStyles = {"color": color}; + const customStyles = {}; + const styles = {...propsStyles, ...customStyles, ...style} + return ( + + + + ) +}; diff --git a/libs/components/icons/src/auto-icons/index.ts b/libs/components/icons/src/auto-icons/index.ts index 0cfce81327..4ea171d7b5 100644 --- a/libs/components/icons/src/auto-icons/index.ts +++ b/libs/components/icons/src/auto-icons/index.ts @@ -1,4 +1,4 @@ -export const timestamp = 1659000896562; +export const timestamp = 1659423582387; export * from './image/image'; export * from './format-clear/format-clear'; export * from './backward-undo/backward-undo'; @@ -125,4 +125,8 @@ export * from './eraser/eraser'; export * from './group-by/group-by'; export * from './layout/layout'; export * from './lock/lock'; -export * from './unlock/unlock'; \ No newline at end of file +export * from './unlock/unlock'; +export * from './more-tags-an-subblocks/more-tags-an-subblocks'; +export * from './page-in-page-tree/page-in-page-tree'; +export * from './pin/pin'; +export * from './add/add'; \ No newline at end of file diff --git a/libs/components/icons/src/auto-icons/more-tags-an-subblocks/more-tags-an-subblocks.svg b/libs/components/icons/src/auto-icons/more-tags-an-subblocks/more-tags-an-subblocks.svg new file mode 100644 index 0000000000..de4cfcdf98 --- /dev/null +++ b/libs/components/icons/src/auto-icons/more-tags-an-subblocks/more-tags-an-subblocks.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/components/icons/src/auto-icons/more-tags-an-subblocks/more-tags-an-subblocks.tsx b/libs/components/icons/src/auto-icons/more-tags-an-subblocks/more-tags-an-subblocks.tsx new file mode 100644 index 0000000000..c631600a86 --- /dev/null +++ b/libs/components/icons/src/auto-icons/more-tags-an-subblocks/more-tags-an-subblocks.tsx @@ -0,0 +1,21 @@ + +import { FC } from 'react'; +// eslint-disable-next-line no-restricted-imports +import { SvgIcon } from '@mui/material'; +// eslint-disable-next-line no-restricted-imports +import type { SvgIconProps } from '@mui/material'; + +export interface MoreTagsAnSubblocksIconProps extends Omit { + color?: string +} + +export const MoreTagsAnSubblocksIcon: FC = ({ color, style, ...props}) => { + const propsStyles = {"color": color}; + const customStyles = {}; + const styles = {...propsStyles, ...customStyles, ...style} + return ( + + + + ) +}; diff --git a/libs/components/icons/src/auto-icons/page-in-page-tree/page-in-page-tree.svg b/libs/components/icons/src/auto-icons/page-in-page-tree/page-in-page-tree.svg new file mode 100644 index 0000000000..be6b6bca1e --- /dev/null +++ b/libs/components/icons/src/auto-icons/page-in-page-tree/page-in-page-tree.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/components/icons/src/auto-icons/page-in-page-tree/page-in-page-tree.tsx b/libs/components/icons/src/auto-icons/page-in-page-tree/page-in-page-tree.tsx new file mode 100644 index 0000000000..9d404fb4ed --- /dev/null +++ b/libs/components/icons/src/auto-icons/page-in-page-tree/page-in-page-tree.tsx @@ -0,0 +1,21 @@ + +import { FC } from 'react'; +// eslint-disable-next-line no-restricted-imports +import { SvgIcon } from '@mui/material'; +// eslint-disable-next-line no-restricted-imports +import type { SvgIconProps } from '@mui/material'; + +export interface PageInPageTreeIconProps extends Omit { + color?: string +} + +export const PageInPageTreeIcon: FC = ({ color, style, ...props}) => { + const propsStyles = {"color": color}; + const customStyles = {}; + const styles = {...propsStyles, ...customStyles, ...style} + return ( + + + + ) +}; diff --git a/libs/components/icons/src/auto-icons/pin/pin.svg b/libs/components/icons/src/auto-icons/pin/pin.svg new file mode 100644 index 0000000000..49bc3a0852 --- /dev/null +++ b/libs/components/icons/src/auto-icons/pin/pin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/components/icons/src/auto-icons/pin/pin.tsx b/libs/components/icons/src/auto-icons/pin/pin.tsx new file mode 100644 index 0000000000..60f1db57f2 --- /dev/null +++ b/libs/components/icons/src/auto-icons/pin/pin.tsx @@ -0,0 +1,21 @@ + +import { FC } from 'react'; +// eslint-disable-next-line no-restricted-imports +import { SvgIcon } from '@mui/material'; +// eslint-disable-next-line no-restricted-imports +import type { SvgIconProps } from '@mui/material'; + +export interface PinIconProps extends Omit { + color?: string +} + +export const PinIcon: FC = ({ color, style, ...props}) => { + const propsStyles = {"color": color}; + const customStyles = {}; + const styles = {...propsStyles, ...customStyles, ...style} + return ( + + + + ) +}; diff --git a/libs/components/layout/src/header/LayoutHeader.tsx b/libs/components/layout/src/header/LayoutHeader.tsx index ffc061a324..0218c292bd 100644 --- a/libs/components/layout/src/header/LayoutHeader.tsx +++ b/libs/components/layout/src/header/LayoutHeader.tsx @@ -3,13 +3,14 @@ import { LogoIcon, SideBarViewIcon, SearchIcon, + SideBarViewCloseIcon, } from '@toeverything/components/icons'; import { useShowSettingsSidebar } from '@toeverything/datasource/state'; import { CurrentPageTitle } from './Title'; import { EditorBoardSwitcher } from './EditorBoardSwitcher'; export const LayoutHeader = () => { - const { toggleSettingsSidebar: toggleInfoSidebar } = + const { toggleSettingsSidebar: toggleInfoSidebar, showSettingsSidebar } = useShowSettingsSidebar(); return ( @@ -31,7 +32,11 @@ export const LayoutHeader = () => { - + {showSettingsSidebar ? ( + + ) : ( + + )} diff --git a/libs/components/layout/src/workspace-sidebar/activities/activities.tsx b/libs/components/layout/src/workspace-sidebar/activities/activities.tsx index 3de73c78df..b0527c5e42 100644 --- a/libs/components/layout/src/workspace-sidebar/activities/activities.tsx +++ b/libs/components/layout/src/workspace-sidebar/activities/activities.tsx @@ -50,31 +50,35 @@ export const Activities = () => { const [recentPages, setRecentPages] = useState([]); const userId = user?.id; - const fetchRecentPages = useCallback(async () => { - if (!userId || !currentSpaceId) { - return; - } - const recent_pages = await services.api.userConfig.getRecentPages( - currentSpaceId, - userId - ); - setRecentPages(recent_pages); - }, [userId, currentSpaceId]); + /* temporarily remove:show recently viewed documents */ + // const fetchRecentPages = useCallback(async () => { + // if (!userId || !currentSpaceId) { + // return; + // } + // const recent_pages = await services.api.userConfig.getRecentPages( + // currentSpaceId, + // userId + // ); + // setRecentPages(recent_pages); + // }, [userId, currentSpaceId]); - useEffect(() => { - (async () => { - await fetchRecentPages(); - })(); - }, [fetchRecentPages]); + // useEffect(() => { + // (async () => { + // await fetchRecentPages(); + // })(); + // }, [fetchRecentPages]); + + /* show recently edit documents */ + const getRecentEditPages = async (state, block) => { + console.log(state, await block.children()); + }; useEffect(() => { let unobserve: () => void; const observe = async () => { unobserve = await services.api.userConfig.observe( { workspace: currentSpaceId }, - () => { - fetchRecentPages(); - } + getRecentEditPages ); }; observe(); @@ -82,7 +86,7 @@ export const Activities = () => { return () => { unobserve?.(); }; - }, [currentSpaceId, fetchRecentPages]); + }, [currentSpaceId, getRecentEditPages]); return ( diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/DndTree.tsx b/libs/components/layout/src/workspace-sidebar/page-tree/DndTree.tsx index 11ba52b018..0c58d60fb0 100755 --- a/libs/components/layout/src/workspace-sidebar/page-tree/DndTree.tsx +++ b/libs/components/layout/src/workspace-sidebar/page-tree/DndTree.tsx @@ -95,30 +95,37 @@ export function DndTree(props: DndTreeProps) { > {/* */} {flattenedItems.map( - ({ id, title, children, collapsed, depth }) => ( - handleCollapse(id) - : undefined - } - onRemove={ - removable ? () => handleRemove(id) : undefined - } - /> - ) + ({ id, title, children, collapsed, depth }) => { + return ( + handleCollapse(id) + : undefined + } + onRemove={ + removable + ? () => handleRemove(id) + : undefined + } + /> + ); + } )} void; } + +const StyledAction = styled('div')({ + display: 'flex', + alignItems: 'center', +}); + function DndTreeItemMoreActions(props: ActionsProps) { const [alert_open, set_alert_open] = React.useState(false); const [anchorEl, setAnchorEl] = React.useState(null); @@ -236,12 +246,23 @@ function DndTreeItemMoreActions(props: ActionsProps) { return ( handleClose()}>
- - ยทยทยท - +
+ + + + + + + + +
( const navigate = useNavigate(); const BooleanPageTreeItemMoreActions = useFlag( 'BooleanPageTreeItemMoreActions', - false + true ); return (
  • ( title={value} > - {collapsed ? : } + {childCount !== 0 && + (collapsed ? ( + + ) : ( + + ))} {/**/} {/* */} diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/tree-item.module.scss b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/tree-item.module.scss index 7af3eda1c1..6fb0d37a57 100755 --- a/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/tree-item.module.scss +++ b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/tree-item.module.scss @@ -83,7 +83,7 @@ justify-content: space-around; background-color: #fff; color: #4c6275; - padding: 0 0.5rem; + padding-right: 0.5rem; overflow: hidden; .TreeItemMoreActions { diff --git a/libs/components/ui/src/button/IconButton.tsx b/libs/components/ui/src/button/IconButton.tsx index 1dd7606f09..77e1f08a6e 100644 --- a/libs/components/ui/src/button/IconButton.tsx +++ b/libs/components/ui/src/button/IconButton.tsx @@ -36,6 +36,7 @@ interface IconButtonProps { style?: CSSProperties; className?: string; size?: SizeType; + hoverColor?: string; } export const IconButton: FC> = ({ @@ -57,47 +58,48 @@ export const IconButton: FC> = ({ ); }; -const Container = styled('button')<{ size?: SizeType }>( - ({ theme, size = SIZE_MIDDLE }) => { - const { iconSize, areaSize } = SIZE_CONFIG[size]; +const Container = styled('button')<{ + size?: SizeType; + hoverColor?: string; +}>(({ theme, size = SIZE_MIDDLE, hoverColor }) => { + const { iconSize, areaSize } = SIZE_CONFIG[size]; - return { + return { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + width: areaSize, + height: areaSize, + backgroundColor: 'transparent', + color: theme.affine.palette.icons, + padding: theme.affine.spacing.iconPadding, + borderRadius: '3px', + + '& svg': { + width: iconSize, + height: iconSize, display: 'flex', justifyContent: 'center', alignItems: 'center', - width: areaSize, - height: areaSize, - backgroundColor: theme.affine.palette.white, - color: theme.affine.palette.icons, - padding: theme.affine.spacing.iconPadding, - borderRadius: '5px', + }, - '& svg': { - width: iconSize, - height: iconSize, - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - }, + '&:hover': { + backgroundColor: hoverColor || theme.affine.palette.hover, + }, - '&:hover': { - backgroundColor: theme.affine.palette.hover, - }, + [`&${buttonStatus.hover}`]: { + backgroundColor: theme.affine.palette.hover, + }, - [`&${buttonStatus.hover}`]: { - backgroundColor: theme.affine.palette.hover, - }, + '&:focus': { + color: theme.affine.palette.primary, + }, + [`&.${buttonStatus.focus}`]: { + color: theme.affine.palette.primary, + }, - '&:focus': { - color: theme.affine.palette.primary, - }, - [`&.${buttonStatus.focus}`]: { - color: theme.affine.palette.primary, - }, - - [`&${buttonStatus.disabled}`]: { - cursor: 'not-allowed', - }, - }; - } -); + [`&${buttonStatus.disabled}`]: { + cursor: 'not-allowed', + }, + }; +});