Merge pull request #195 from toeverything/fix-gap

fix(editor): gap between block
This commit is contained in:
DarkSky 2022-08-11 21:13:37 +08:00 committed by GitHub
commit b2bac25a92
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 11 additions and 6 deletions

View File

@ -76,6 +76,7 @@ export const FileSystem = () => {
onSelected();
} catch (e) {
setError(true);
onSelected();
setTimeout(() => setError(false), 3000);
}
}}

View File

@ -1,6 +1,8 @@
import {
addNewGroup,
LINE_GAP,
RecastScene,
TAG_GAP,
useCurrentView,
useOnSelect,
} from '@toeverything/components/editor-core';
@ -61,7 +63,7 @@ const GroupContainer = styled('div')<{ isSelect?: boolean }>(
({ isSelect, theme }) => ({
background: theme.affine.palette.white,
border: '2px solid rgba(236,241,251,.5)',
padding: `15px 16px 0 16px`,
padding: `15px 16px ${LINE_GAP - TAG_GAP * 2}px 16px`,
borderRadius: '10px',
...(isSelect
? {

View File

@ -27,5 +27,6 @@ export const BlockContainer: FC<BlockContainerProps> = function ({
export const Container = styled('div')<{ selected: boolean }>(
({ selected, theme }) => ({
backgroundColor: selected ? theme.affine.palette.textSelected : '',
marginBottom: '2px',
})
);

View File

@ -44,7 +44,7 @@ export const BlockPendantProvider: FC<PropsWithChildren<BlockTagProps>> = ({
};
export const LINE_GAP = 16;
const TAG_GAP = 4;
export const TAG_GAP = 4;
const StyledTriggerLine = styled('div')({
padding: `${TAG_GAP}px 0`,
@ -90,7 +90,7 @@ const StyledPendantContainer = styled('div')({
});
const Container = styled('div')({
position: 'relative',
paddingBottom: `${LINE_GAP - TAG_GAP * 2}px`,
padding: `${TAG_GAP * 2}px 0 ${LINE_GAP - TAG_GAP * 4}px 0`,
'&:hover': {
[`${StyledTriggerLine}`]: {
'&::before': {

View File

@ -15,6 +15,7 @@ import {
BlockDropPlacement,
LINE_GAP,
AsyncBlock,
TAG_GAP,
} from '@toeverything/framework/virgo';
import { Button } from '@toeverything/components/common';
import { styled } from '@toeverything/components/ui';
@ -78,13 +79,13 @@ function Line(props: { lineInfo: LineInfo; rootRect: DOMRect }) {
};
const bottomLineStyle = {
...horizontalLineStyle,
top: intersectionRect.bottom + 1 - rootRect.y - LINE_GAP,
top: intersectionRect.bottom + 1 - rootRect.y - LINE_GAP + TAG_GAP,
};
const verticalLineStyle = {
...lineStyle,
width: 2,
height: intersectionRect.height - LINE_GAP,
height: intersectionRect.height - LINE_GAP + TAG_GAP,
top: intersectionRect.y - rootRect.y,
};
const leftLineStyle = {
@ -228,7 +229,7 @@ export const LeftMenuDraggable: FC<LeftMenuProps> = props => {
MENU_WIDTH -
MENU_BUTTON_OFFSET -
rootRect.left,
top: block.rect.top - rootRect.top,
top: block.rect.top - rootRect.top + TAG_GAP * 2,
opacity: visible ? 1 : 0,
zIndex: 1,
}}