Merge pull request from toeverything/chore/page-tree-styles

Chore/page tree styles
This commit is contained in:
Whitewater 2022-08-12 16:51:54 +08:00 committed by GitHub
commit 57b8263acd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 55 additions and 143 deletions
libs/components/layout/src
header
workspace-sidebar/page-tree

View File

@ -52,8 +52,8 @@ export const LayoutHeader = () => {
</StyledHeaderRoot> </StyledHeaderRoot>
<StyledUnstableTips> <StyledUnstableTips>
<StyledUnstableTipsText> <StyledUnstableTipsText>
AFFiNE now under active development, the version is AFFiNE is currently under active development. This build is
UNSTABLE, please DO NOT store important data in this version UNSTABLE. Please DO NOT store important data.
</StyledUnstableTipsText> </StyledUnstableTipsText>
</StyledUnstableTips> </StyledUnstableTips>
</StyledContainerForHeaderRoot> </StyledContainerForHeaderRoot>

View File

@ -36,19 +36,13 @@ export type DndTreeProps = {
indentationWidth?: number; indentationWidth?: number;
collapsible?: boolean; collapsible?: boolean;
removable?: boolean; removable?: boolean;
showDragIndicator?: boolean;
}; };
/** /**
* Currently does not support drag and drop using the keyboard. * Currently does not support drag and drop using the keyboard.
*/ */
export function DndTree(props: DndTreeProps) { export function DndTree(props: DndTreeProps) {
const { const { indentationWidth = 20, collapsible, removable } = props;
indentationWidth = 20,
collapsible,
removable,
showDragIndicator,
} = props;
const sensors = useSensors( const sensors = useSensors(
useSensor(PointerSensor, { activationConstraint: { distance: 8 } }) useSensor(PointerSensor, { activationConstraint: { distance: 8 } })
@ -111,7 +105,6 @@ export function DndTree(props: DndTreeProps) {
: depth : depth
} }
indentationWidth={indentationWidth} indentationWidth={indentationWidth}
indicator={showDragIndicator}
childCount={children.length} childCount={children.length}
onCollapse={ onCollapse={
collapsible && children.length collapsible && children.length
@ -129,7 +122,8 @@ export function DndTree(props: DndTreeProps) {
)} )}
<DragOverlay <DragOverlay
dropAnimation={dropAnimation} dropAnimation={dropAnimation}
style={{ marginTop: '-65px' }} // TODO fix drag offset when the position of the page tree changes
style={{ marginTop: '-100px' }}
> >
{activeId && activeItem ? ( {activeId && activeItem ? (
<DndTreeItem <DndTreeItem

View File

@ -16,8 +16,7 @@ export function DndTreeItem({ id, depth, ...props }: DndTreeItemProps) {
isDragging, isDragging,
isSorting, isSorting,
listeners, listeners,
setDraggableNodeRef, setNodeRef,
setDroppableNodeRef,
transform, transform,
transition, transition,
} = useSortable({ id }); } = useSortable({ id });
@ -29,8 +28,7 @@ export function DndTreeItem({ id, depth, ...props }: DndTreeItemProps) {
return ( return (
<TreeItem <TreeItem
ref={setDraggableNodeRef} ref={setNodeRef}
wrapperRef={setDroppableNodeRef}
pageId={id} pageId={id}
style={style} style={style}
depth={depth} depth={depth}

View File

@ -15,7 +15,6 @@ import {
TextLink, TextLink,
TreeItemContainer, TreeItemContainer,
TreeItemContent, TreeItemContent,
Wrapper,
} from './styles'; } from './styles';
export type TreeItemProps = { export type TreeItemProps = {
@ -33,13 +32,10 @@ export type TreeItemProps = {
/** isDragging */ /** isDragging */
ghost?: boolean; ghost?: boolean;
handleProps?: any; handleProps?: any;
indicator?: boolean;
indentationWidth: number; indentationWidth: number;
onCollapse?(): void; onCollapse?(): void;
onRemove?(): void; onRemove?(): void;
/** The ref of the outermost container is often used as droppaHTMLAttributes<HTMLLIElement>ble-node; the ref of the inner dom is often used as draggable-node */ } & HTMLAttributes<HTMLDivElement>;
wrapperRef?(node: HTMLLIElement): void;
} & HTMLAttributes<HTMLLIElement>;
export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>( export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
( (
@ -52,13 +48,10 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
ghost, ghost,
handleProps, handleProps,
indentationWidth, indentationWidth,
indicator,
collapsed, collapsed,
onCollapse, onCollapse,
onRemove, onRemove,
style,
value, value,
wrapperRef,
pageId, pageId,
...props ...props
}, },
@ -71,8 +64,8 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
); );
return ( return (
<Wrapper <TreeItemContainer
ref={wrapperRef} ref={ref}
clone={clone} clone={clone}
ghost={ghost} ghost={ghost}
disableSelection={disableSelection} disableSelection={disableSelection}
@ -81,38 +74,38 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
active={pageId === page_id} active={pageId === page_id}
{...props} {...props}
> >
<TreeItemContainer ref={ref} style={style} title={value}> {childCount !== 0 ? (
<ActionButton tabIndex={0} onClick={onCollapse}> collapsed ? (
{childCount !== 0 ? ( <ActionButton tabIndex={0} onClick={onCollapse}>
collapsed ? ( <ArrowRightIcon />
<ArrowRightIcon /> </ActionButton>
) : ( ) : (
<ArrowDropDownIcon /> <ActionButton tabIndex={0} onClick={onCollapse}>
) <ArrowDropDownIcon />
) : ( </ActionButton>
<DotIcon /> )
)} ) : (
</ActionButton> <DotIcon />
)}
<TreeItemContent {...handleProps}> <TreeItemContent {...handleProps}>
<TextLink to={`/${workspace_id}/${pageId}`}> <TextLink to={`/${workspace_id}/${pageId}`}>
{value} {value}
</TextLink> </TextLink>
{BooleanPageTreeItemMoreActions && ( {BooleanPageTreeItemMoreActions && (
<MoreActions <MoreActions
workspaceId={workspace_id} workspaceId={workspace_id}
pageId={pageId} pageId={pageId}
onRemove={onRemove} onRemove={onRemove}
/> />
)} )}
{/*{!clone && onRemove && <Remove onClick={onRemove} />}*/} {/*{!clone && onRemove && <Remove onClick={onRemove} />}*/}
{clone && childCount && childCount > 1 ? ( {clone && childCount && childCount > 1 ? (
<Counter>{childCount}</Counter> <Counter>{childCount}</Counter>
) : null} ) : null}
</TreeItemContent> </TreeItemContent>
</TreeItemContainer> </TreeItemContainer>
</Wrapper>
); );
} }
); );

View File

@ -1,22 +1,18 @@
import { styled } from '@toeverything/components/ui'; import { styled } from '@toeverything/components/ui';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
export const TreeItemContainer = styled('div')` export const TreeItemContainer = styled('div')<{
box-sizing: border-box;
display: flex;
align-items: center;
color: #4c6275;
`;
export const Wrapper = styled('li')<{
spacing: string; spacing: string;
clone?: boolean; clone?: boolean;
ghost?: boolean; ghost?: boolean;
indicator?: boolean;
disableSelection?: boolean; disableSelection?: boolean;
disableInteraction?: boolean; disableInteraction?: boolean;
active?: boolean; active?: boolean;
}>` }>`
display: flex;
align-items: center;
color: #4c6275;
box-sizing: border-box; box-sizing: border-box;
padding-left: ${({ spacing }) => spacing}; padding-left: ${({ spacing }) => spacing};
list-style: none; list-style: none;
@ -26,21 +22,13 @@ export const Wrapper = styled('li')<{
${({ clone, disableSelection }) => ${({ clone, disableSelection }) =>
(clone || disableSelection) && (clone || disableSelection) &&
`width: 100%; `
.Text, width: 100%;
.Count { user-select: none;
user-select: none; opacity: 0.7;
-webkit-user-select: none; background: transparent;
}`} cursor: grab;
`}
${({ indicator }) =>
indicator &&
`width: 100%;
.Text,
.Count {
user-select: none;
-webkit-user-select: none;
}`}
${({ disableInteraction }) => disableInteraction && `pointer-events: none;`} ${({ disableInteraction }) => disableInteraction && `pointer-events: none;`}
@ -48,64 +36,6 @@ export const Wrapper = styled('li')<{
background: #f5f7f8; background: #f5f7f8;
border-radius: 5px; border-radius: 5px;
} }
&.clone {
display: inline-block;
padding: 0;
margin-left: 10px;
margin-top: 5px;
pointer-events: none;
${TreeItemContainer} {
padding-right: 20px;
border-radius: 4px;
box-shadow: 0px 15px 15px 0 rgba(34, 33, 81, 0.1);
}
}
&.ghost {
&.indicator {
opacity: 1;
position: relative;
z-index: 1;
margin-bottom: -1px;
${TreeItemContainer} {
position: relative;
padding: 0;
height: 8px;
border-color: #2389ff;
background-color: #56a1f8;
&:before {
position: absolute;
left: -8px;
top: -4px;
display: block;
content: '';
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid #2389ff;
}
> * {
/* Items are hidden using height and opacity to retain focus */
opacity: 0;
height: 0;
}
}
}
&:not(.indicator) {
opacity: 0.5;
}
${TreeItemContainer} > * {
box-shadow: none;
background-color: transparent;
}
}
`; `;
export const Counter = styled('span')` export const Counter = styled('span')`
@ -138,7 +68,7 @@ export const ActionButton = styled('button')<{
border: none; border: none;
outline: none; outline: none;
appearance: none; appearance: none;
background-color: transparent; background: transparent;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
svg { svg {
@ -151,8 +81,7 @@ export const ActionButton = styled('button')<{
} }
&:active { &:active {
background-color: ${({ background }) => background: ${({ background }) => background ?? 'rgba(0, 0, 0, 0.05)'};
background ?? 'rgba(0, 0, 0, 0.05)'};
svg { svg {
fill: ${({ fill }) => fill ?? '#788491'}; fill: ${({ fill }) => fill ?? '#788491'};
@ -170,9 +99,7 @@ export const TreeItemMoreActions = styled('div')`
visibility: hidden; visibility: hidden;
`; `;
export const TextLink = styled(Link, { export const TextLink = styled(Link)`
shouldForwardProp: (prop: string) => !['active'].includes(prop),
})<{ active?: boolean }>`
display: flex; display: flex;
align-items: center; align-items: center;
flex-grow: 1; flex-grow: 1;