mirror of
https://github.com/toeverything/AFFiNE.git
synced 2024-12-27 21:54:59 +03:00
Merge pull request #207 from toeverything/chore/page-tree-styles
Chore/page tree styles
This commit is contained in:
commit
57b8263acd
libs/components/layout/src
header
workspace-sidebar/page-tree
@ -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>
|
||||||
|
@ -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
|
||||||
|
@ -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}
|
||||||
|
@ -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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user