mirror of
https://github.com/toeverything/AFFiNE.git
synced 2024-12-19 11:02:26 +03:00
Merge pull request #207 from toeverything/chore/page-tree-styles
Chore/page tree styles
This commit is contained in:
Whitewater
GitHub
commit
57b8263acd
@ -52,8 +52,8 @@ export const LayoutHeader = () => {
|
||||
</StyledHeaderRoot>
|
||||
<StyledUnstableTips>
|
||||
<StyledUnstableTipsText>
|
||||
AFFiNE now under active development, the version is
|
||||
UNSTABLE, please DO NOT store important data in this version
|
||||
AFFiNE is currently under active development. This build is
|
||||
UNSTABLE. Please DO NOT store important data.
|
||||
</StyledUnstableTipsText>
|
||||
</StyledUnstableTips>
|
||||
</StyledContainerForHeaderRoot>
|
||||
|
||||
@ -36,19 +36,13 @@ export type DndTreeProps = {
|
||||
indentationWidth?: number;
|
||||
collapsible?: boolean;
|
||||
removable?: boolean;
|
||||
showDragIndicator?: boolean;
|
||||
};
|
||||
|
||||
/**
|
||||
* Currently does not support drag and drop using the keyboard.
|
||||
*/
|
||||
export function DndTree(props: DndTreeProps) {
|
||||
const {
|
||||
indentationWidth = 20,
|
||||
collapsible,
|
||||
removable,
|
||||
showDragIndicator,
|
||||
} = props;
|
||||
const { indentationWidth = 20, collapsible, removable } = props;
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, { activationConstraint: { distance: 8 } })
|
||||
@ -111,7 +105,6 @@ export function DndTree(props: DndTreeProps) {
|
||||
: depth
|
||||
}
|
||||
indentationWidth={indentationWidth}
|
||||
indicator={showDragIndicator}
|
||||
childCount={children.length}
|
||||
onCollapse={
|
||||
collapsible && children.length
|
||||
@ -129,7 +122,8 @@ export function DndTree(props: DndTreeProps) {
|
||||
)}
|
||||
<DragOverlay
|
||||
dropAnimation={dropAnimation}
|
||||
style={{ marginTop: '-65px' }}
|
||||
// TODO fix drag offset when the position of the page tree changes
|
||||
style={{ marginTop: '-100px' }}
|
||||
>
|
||||
{activeId && activeItem ? (
|
||||
<DndTreeItem
|
||||
|
||||
@ -16,8 +16,7 @@ export function DndTreeItem({ id, depth, ...props }: DndTreeItemProps) {
|
||||
isDragging,
|
||||
isSorting,
|
||||
listeners,
|
||||
setDraggableNodeRef,
|
||||
setDroppableNodeRef,
|
||||
setNodeRef,
|
||||
transform,
|
||||
transition,
|
||||
} = useSortable({ id });
|
||||
@ -29,8 +28,7 @@ export function DndTreeItem({ id, depth, ...props }: DndTreeItemProps) {
|
||||
|
||||
return (
|
||||
<TreeItem
|
||||
ref={setDraggableNodeRef}
|
||||
wrapperRef={setDroppableNodeRef}
|
||||
ref={setNodeRef}
|
||||
pageId={id}
|
||||
style={style}
|
||||
depth={depth}
|
||||
|
||||
@ -15,7 +15,6 @@ import {
|
||||
TextLink,
|
||||
TreeItemContainer,
|
||||
TreeItemContent,
|
||||
Wrapper,
|
||||
} from './styles';
|
||||
|
||||
export type TreeItemProps = {
|
||||
@ -33,13 +32,10 @@ export type TreeItemProps = {
|
||||
/** isDragging */
|
||||
ghost?: boolean;
|
||||
handleProps?: any;
|
||||
indicator?: boolean;
|
||||
indentationWidth: number;
|
||||
onCollapse?(): 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 */
|
||||
wrapperRef?(node: HTMLLIElement): void;
|
||||
} & HTMLAttributes<HTMLLIElement>;
|
||||
} & HTMLAttributes<HTMLDivElement>;
|
||||
|
||||
export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
|
||||
(
|
||||
@ -52,13 +48,10 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
|
||||
ghost,
|
||||
handleProps,
|
||||
indentationWidth,
|
||||
indicator,
|
||||
collapsed,
|
||||
onCollapse,
|
||||
onRemove,
|
||||
style,
|
||||
value,
|
||||
wrapperRef,
|
||||
pageId,
|
||||
...props
|
||||
},
|
||||
@ -71,8 +64,8 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
|
||||
);
|
||||
|
||||
return (
|
||||
<Wrapper
|
||||
ref={wrapperRef}
|
||||
<TreeItemContainer
|
||||
ref={ref}
|
||||
clone={clone}
|
||||
ghost={ghost}
|
||||
disableSelection={disableSelection}
|
||||
@ -81,38 +74,38 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
|
||||
active={pageId === page_id}
|
||||
{...props}
|
||||
>
|
||||
<TreeItemContainer ref={ref} style={style} title={value}>
|
||||
<ActionButton tabIndex={0} onClick={onCollapse}>
|
||||
{childCount !== 0 ? (
|
||||
collapsed ? (
|
||||
<ArrowRightIcon />
|
||||
) : (
|
||||
<ArrowDropDownIcon />
|
||||
)
|
||||
) : (
|
||||
<DotIcon />
|
||||
)}
|
||||
</ActionButton>
|
||||
{childCount !== 0 ? (
|
||||
collapsed ? (
|
||||
<ActionButton tabIndex={0} onClick={onCollapse}>
|
||||
<ArrowRightIcon />
|
||||
</ActionButton>
|
||||
) : (
|
||||
<ActionButton tabIndex={0} onClick={onCollapse}>
|
||||
<ArrowDropDownIcon />
|
||||
</ActionButton>
|
||||
)
|
||||
) : (
|
||||
<DotIcon />
|
||||
)}
|
||||
|
||||
<TreeItemContent {...handleProps}>
|
||||
<TextLink to={`/${workspace_id}/${pageId}`}>
|
||||
{value}
|
||||
</TextLink>
|
||||
{BooleanPageTreeItemMoreActions && (
|
||||
<MoreActions
|
||||
workspaceId={workspace_id}
|
||||
pageId={pageId}
|
||||
onRemove={onRemove}
|
||||
/>
|
||||
)}
|
||||
<TreeItemContent {...handleProps}>
|
||||
<TextLink to={`/${workspace_id}/${pageId}`}>
|
||||
{value}
|
||||
</TextLink>
|
||||
{BooleanPageTreeItemMoreActions && (
|
||||
<MoreActions
|
||||
workspaceId={workspace_id}
|
||||
pageId={pageId}
|
||||
onRemove={onRemove}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/*{!clone && onRemove && <Remove onClick={onRemove} />}*/}
|
||||
{clone && childCount && childCount > 1 ? (
|
||||
<Counter>{childCount}</Counter>
|
||||
) : null}
|
||||
</TreeItemContent>
|
||||
</TreeItemContainer>
|
||||
</Wrapper>
|
||||
{/*{!clone && onRemove && <Remove onClick={onRemove} />}*/}
|
||||
{clone && childCount && childCount > 1 ? (
|
||||
<Counter>{childCount}</Counter>
|
||||
) : null}
|
||||
</TreeItemContent>
|
||||
</TreeItemContainer>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
@ -1,22 +1,18 @@
|
||||
import { styled } from '@toeverything/components/ui';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
export const TreeItemContainer = styled('div')`
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #4c6275;
|
||||
`;
|
||||
|
||||
export const Wrapper = styled('li')<{
|
||||
export const TreeItemContainer = styled('div')<{
|
||||
spacing: string;
|
||||
clone?: boolean;
|
||||
ghost?: boolean;
|
||||
indicator?: boolean;
|
||||
disableSelection?: boolean;
|
||||
disableInteraction?: boolean;
|
||||
active?: boolean;
|
||||
}>`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #4c6275;
|
||||
|
||||
box-sizing: border-box;
|
||||
padding-left: ${({ spacing }) => spacing};
|
||||
list-style: none;
|
||||
@ -26,21 +22,13 @@ export const Wrapper = styled('li')<{
|
||||
|
||||
${({ clone, disableSelection }) =>
|
||||
(clone || disableSelection) &&
|
||||
`width: 100%;
|
||||
.Text,
|
||||
.Count {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}`}
|
||||
|
||||
${({ indicator }) =>
|
||||
indicator &&
|
||||
`width: 100%;
|
||||
.Text,
|
||||
.Count {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}`}
|
||||
`
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
opacity: 0.7;
|
||||
background: transparent;
|
||||
cursor: grab;
|
||||
`}
|
||||
|
||||
${({ disableInteraction }) => disableInteraction && `pointer-events: none;`}
|
||||
|
||||
@ -48,64 +36,6 @@ export const Wrapper = styled('li')<{
|
||||
background: #f5f7f8;
|
||||
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')`
|
||||
@ -138,7 +68,7 @@ export const ActionButton = styled('button')<{
|
||||
border: none;
|
||||
outline: none;
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
background: transparent;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
svg {
|
||||
@ -151,8 +81,7 @@ export const ActionButton = styled('button')<{
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: ${({ background }) =>
|
||||
background ?? 'rgba(0, 0, 0, 0.05)'};
|
||||
background: ${({ background }) => background ?? 'rgba(0, 0, 0, 0.05)'};
|
||||
|
||||
svg {
|
||||
fill: ${({ fill }) => fill ?? '#788491'};
|
||||
@ -170,9 +99,7 @@ export const TreeItemMoreActions = styled('div')`
|
||||
visibility: hidden;
|
||||
`;
|
||||
|
||||
export const TextLink = styled(Link, {
|
||||
shouldForwardProp: (prop: string) => !['active'].includes(prop),
|
||||
})<{ active?: boolean }>`
|
||||
export const TextLink = styled(Link)`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user