luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore: align tree line (#211)

Browse Source
This commit is contained in:
Whitewater
2022-08-12 15:17:51 +08:00
committed by GitHub
parent 7dd66e6737
commit 9be0735207
1 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
libs/components/editor-blocks/src/utils/WithTreeViewChildren.tsx
View File

@@ -27,7 +27,7 @@ const defaultConfig: WithChildrenConfig = {
const TreeView = forwardRef< const TreeView = forwardRef<
HTMLDivElement, HTMLDivElement,
{ lastItem?: boolean } & ComponentPropsWithRef<'div'> { lastItem?: boolean } & ComponentPropsWithRef<'div'>
>(({ lastItem, children, onClick, ...restProps }, ref) => { >(({ lastItem = false, children, onClick, ...restProps }, ref) => {
return ( return (
<TreeWrapper ref={ref} {...restProps}> <TreeWrapper ref={ref} {...restProps}>
<StyledTreeView> <StyledTreeView>
@@ -155,8 +155,10 @@ const Wrapper = styled('div')({ display: 'flex', flexDirection: 'column' });
const Children = Wrapper; const Children = Wrapper;
const TREE_COLOR = '#D5DFE6'; const TREE_COLOR = '#D5DFE6';
// TODO determine the position of the horizontal line by the type of the item // adjust left and right margins of the the tree line
const ITEM_POINT_HEIGHT = '12.5px'; // '50%' const TREE_LINE_LEFT_OFFSET = '-16px';
// determine the position of the horizontal line by the type of the item
const TREE_LINE_TOP_OFFSET = '20px'; // '50%'
const TreeWrapper = styled('div')({ const TreeWrapper = styled('div')({
position: 'relative', position: 'relative',
@@ -164,7 +166,7 @@ const TreeWrapper = styled('div')({
const StyledTreeView = styled('div')({ const StyledTreeView = styled('div')({
position: 'absolute', position: 'absolute',
left: '-21px', left: TREE_LINE_LEFT_OFFSET,
height: '100%', height: '100%',
}); });
@@ -183,7 +185,7 @@ const Line = styled('div')({
const VerticalLine = styled(Line)<{ last: boolean }>(({ last }) => ({ const VerticalLine = styled(Line)<{ last: boolean }>(({ last }) => ({
width: '1px', width: '1px',
height: last ? ITEM_POINT_HEIGHT : '100%', height: last ? TREE_LINE_TOP_OFFSET : '100%',
paddingTop: 0, paddingTop: 0,
paddingBottom: 0, paddingBottom: 0,
transform: 'translate(-50%, 0)', transform: 'translate(-50%, 0)',
@@ -196,7 +198,7 @@ const HorizontalLine = styled(Line)<{ last: boolean }>(({ last }) => ({
height: '1px', height: '1px',
paddingLeft: 0, paddingLeft: 0,
paddingRight: 0, paddingRight: 0,
top: ITEM_POINT_HEIGHT, top: TREE_LINE_TOP_OFFSET,
transform: 'translate(0, -50%)', transform: 'translate(0, -50%)',
opacity: last ? 0 : 'unset', opacity: last ? 0 : 'unset',
})); }));
@@ -204,7 +206,8 @@ const HorizontalLine = styled(Line)<{ last: boolean }>(({ last }) => ({
const Collapsed = styled('div')({ const Collapsed = styled('div')({
cursor: 'pointer', cursor: 'pointer',
display: 'inline-block', display: 'inline-block',
color: '#B9CAD5', color: '#98ACBD',
padding: '8px',
}); });
const LastItemRadius = styled('div')({ const LastItemRadius = styled('div')({
@@ -212,7 +215,7 @@ const LastItemRadius = styled('div')({
position: 'absolute', position: 'absolute',
left: '-0.5px', left: '-0.5px',
top: 0, top: 0,
height: ITEM_POINT_HEIGHT, height: TREE_LINE_TOP_OFFSET,
bottom: '50%', bottom: '50%',
width: '16px', width: '16px',
borderWidth: '1px', borderWidth: '1px',