Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-14 05:14:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(plugin): left menu postion and size

Browse Source
This commit is contained in:
austaras
2022-08-03 17:11:24 +08:00
committed by Austaras
parent 4a45185c44
commit 57ce992102
9 changed files with 82 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
libs/components/editor-blocks/src/blocks/group/GroupView.tsx
View File

@@ -60,7 +60,7 @@ const GroupContainer = styled('div')<{ isSelect?: boolean }>(
({ isSelect, theme }) => ({
background: theme.affine.palette.white,
border: '2px solid rgba(236,241,251,.5)',
padding: '15px 12px',
padding: `15px 16px 0 16px`,
borderRadius: '10px',
...(isSelect
? {

1
libs/components/editor-core/src/block-content-wrapper/BlockContentWrapper.tsx
View File

@@ -9,6 +9,7 @@ type BlockContentWrapperProps = {
children: ReactElement | null;
};
// TODO: remove
export const WrapperWithPendantAndDragDrop: FC<BlockContentWrapperProps> =
function ({ block, children, editor }) {
return (

103
libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx
View File

@@ -1,5 +1,4 @@
import type { FC, PropsWithChildren } from 'react';
import React, { useState } from 'react';
import { styled } from '@toeverything/components/ui';
import type { AsyncBlock } from '../editor';
import { PendantPopover } from './pendant-popover';
@@ -11,74 +10,68 @@ interface BlockTagProps {
block: AsyncBlock;
}
/**
* @deprecated Need to be refactored
*/
export const BlockPendantProvider: FC<PropsWithChildren<BlockTagProps>> = ({
block,
children,
}) => {
const [container, setContainer] = useState<HTMLElement>(null);
const [isHover, setIsHover] = useState(false);
return (
<Container ref={(dom: HTMLElement) => setContainer(dom)}>
<Container>
{children}
{container && (
<PendantPopover
block={block}
container={container}
onVisibleChange={visible => {
setIsHover(visible);
}}
>
<StyledTriggerLine
className="triggerLine"
isHover={isHover}
/>
</PendantPopover>
)}
<PendantPopover block={block}>
<StyledTriggerLine />
</PendantPopover>
<PendantRender block={block} />
</Container>
);
};
const Container = styled('div')({
export const LINE_GAP = 16;
const TAG_GAP = 4;
const StyledTriggerLine = styled('div')({
padding: `${TAG_GAP}px 0`,
width: '100px',
cursor: 'default',
display: 'flex',
alignItems: 'flex-end',
position: 'relative',
padding: '4px',
'&:hover .triggerLine::before': {
display: 'flex',
'::before': {
content: "''",
width: '100%',
height: '2px',
background: '#dadada',
display: 'none',
position: 'absolute',
left: '0',
top: '4px',
},
'::after': {
content: "''",
width: '0',
height: '2px',
background: '#aac4d5',
display: 'block',
position: 'absolute',
left: '0',
top: '4px',
transition: 'width .3s',
},
});
const StyledTriggerLine = styled('div')<{ isHover: boolean }>(({ isHover }) => {
return {
padding: '4px 0',
width: '100px',
cursor: 'default',
display: 'flex',
alignItems: 'flex-end',
position: 'relative',
'::before': {
content: "''",
width: '100%',
height: '2px',
background: '#dadada',
display: 'none',
position: 'absolute',
left: '0',
top: '4px',
const Container = styled('div')({
position: 'relative',
paddingBottom: `${LINE_GAP - TAG_GAP * 2}px`,
'&:hover': {
[StyledTriggerLine.toString()]: {
'&::before': {
display: 'flex',
},
'&::after': {
width: '100%',
},
},
'::after': {
content: "''",
width: isHover ? '100%' : '0',
height: '2px',
background: '#aac4d5',
display: 'block',
position: 'absolute',
left: '0',
top: '4px',
transition: 'width .3s',
},
};
},
});

4
libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx
View File

@@ -1,4 +1,4 @@
import React, { FC, useRef } from 'react';
import { FC, useRef } from 'react';
import { AsyncBlock } from '../../editor';
import { PendantHistoryPanel } from '../pendant-history-panel';
import {
@@ -21,8 +21,6 @@ export const PendantPopover: FC<
pointerEnterDelay={300}
pointerLeaveDelay={200}
placement="bottom-start"
// visible={true}
// trigger="click"
content={
<PendantHistoryPanel
block={block}

44
libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx
View File

@@ -1,10 +1,19 @@
import { useState, useEffect, FC } from 'react';
import {
useState,
useEffect,
FC,
type MouseEvent,
type DragEvent,
type ReactNode,
type CSSProperties,
} from 'react';
import {
Virgo,
BlockDomInfo,
PluginHooks,
BlockDropPlacement,
LINE_GAP,
} from '@toeverything/framework/virgo';
import { Button } from '@toeverything/components/common';
import { styled } from '@toeverything/components/ui';
@@ -14,7 +23,7 @@ import { distinctUntilChanged, Subject } from 'rxjs';
import { HandleChildIcon } from '@toeverything/components/icons';
import { MENU_WIDTH } from './menu-config';
const MENU_BUTTON_OFFSET = 12;
const MENU_BUTTON_OFFSET = 4;
export type LineInfoSubject = Subject<
| {
@@ -64,13 +73,13 @@ function Line(props: { lineInfo: LineInfo; rootRect: DOMRect }) {
};
const bottomLineStyle = {
...horizontalLineStyle,
top: intersectionRect.bottom + 1 - rootRect.y,
top: intersectionRect.bottom + 1 - rootRect.y - LINE_GAP,
};
const verticalLineStyle = {
...lineStyle,
width: 2,
height: intersectionRect.height,
height: intersectionRect.height - LINE_GAP,
top: intersectionRect.y - rootRect.y,
};
const leftLineStyle = {
@@ -93,10 +102,10 @@ function Line(props: { lineInfo: LineInfo; rootRect: DOMRect }) {
}
function DragComponent(props: {
children: React.ReactNode;
style: React.CSSProperties;
onDragStart: (event: React.DragEvent<Element>) => void;
onDragEnd: (event: React.DragEvent<Element>) => void;
children: ReactNode;
style: CSSProperties;
onDragStart: (event: DragEvent<Element>) => void;
onDragEnd: (event: DragEvent<Element>) => void;
}) {
const { style, children, onDragStart, onDragEnd } = props;
return (
@@ -122,7 +131,7 @@ export const LeftMenuDraggable: FC<LeftMenuProps> = props => {
const [block, setBlock] = useState<BlockDomInfo | undefined>();
const [line, setLine] = useState<LineInfo | undefined>(undefined);
const handleDragStart = async (event: React.DragEvent<Element>) => {
const handleDragStart = async (event: DragEvent<Element>) => {
event.stopPropagation();
setVisible(false);
@@ -138,12 +147,12 @@ export const LeftMenuDraggable: FC<LeftMenuProps> = props => {
}
};
const handleDragEnd = (event: React.DragEvent<Element>) => {
const handleDragEnd = (event: DragEvent<Element>) => {
event.preventDefault();
setLine(undefined);
};
const onClick = (event: React.MouseEvent) => {
const onClick = (event: MouseEvent<Element>) => {
if (block == null) return;
const currentTarget = event.currentTarget;
editor.selection.setSelectedNodesIds([block.blockId]);
@@ -200,11 +209,10 @@ export const LeftMenuDraggable: FC<LeftMenuProps> = props => {
style={{
position: 'absolute',
left:
Math.min(
block.rect.left -
MENU_WIDTH -
MENU_BUTTON_OFFSET
) - rootRect.left,
block.rect.left -
MENU_WIDTH -
MENU_BUTTON_OFFSET -
rootRect.left,
top: block.rect.top - rootRect.top,
opacity: visible ? 1 : 0,
zIndex: 1,
@@ -240,7 +248,7 @@ const Draggable = styled(Button)({
justifyContent: 'center',
backgroundColor: 'transparent',
width: '16px',
height: '20px',
height: '22px',
'& svg': {
fontSize: '20px',
marginLeft: '-2px',
@@ -253,5 +261,5 @@ const Draggable = styled(Button)({
const LigoLeftMenu = styled('div')({
backgroundColor: 'transparent',
marginRight: '4px',
// marginRight: '4px',
});

2
libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx
View File

@@ -1,5 +1,5 @@
import { BlockDomInfo, HookType } from '@toeverything/framework/virgo';
import React, { StrictMode } from 'react';
import { StrictMode } from 'react';
import { BasePlugin } from '../../base-plugin';
import { ignoreBlockTypes } from './menu-config';
import { LineInfoSubject, LeftMenuDraggable } from './LeftMenuDraggable';

4
libs/components/ui/src/popover/container.tsx → libs/components/ui/src/popover/Container.tsx
View File

@@ -15,11 +15,11 @@ export const PopoverContainer = styled('div')<
const shadow = theme.affine.shadows.shadowSxDownLg;
const white = theme.affine.palette.white;
const border_radius =
const borderRadius =
border_radius_map[direction] || border_radius_map['left-top'];
return {
boxShadow: shadow,
borderRadius: border_radius,
borderRadius: borderRadius,
padding: '8px 4px',
backgroundColor: white,
...style,

2
libs/components/ui/src/popover/Popover.tsx
View File

@@ -1,7 +1,7 @@
import type { MuiPopperPlacementType as PopperPlacementType } from '../mui';
import React, { forwardRef, type PropsWithChildren } from 'react';
import { type PopperHandler, Popper } from '../popper';
import { PopoverContainer } from './container';
import { PopoverContainer } from './Container';
import type { PopoverProps, PopoverDirection } from './interface';
export const placementToContainerDirection: Record<

2
libs/components/ui/src/popover/index.tsx → libs/components/ui/src/popover/index.ts
View File

@@ -1,3 +1,3 @@
export * from './Popover';
export * from './interface';
export { PopoverContainer } from './container';
export { PopoverContainer } from './Container';