toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-18 22:11:55 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #195 from toeverything/fix-gap

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
libs/components/account/src/login/fs.tsx
View File

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

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

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

1
libs/components/editor-blocks/src/components/BlockContainer/BlockContainer.tsx
View File

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

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

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

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

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