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

fix: tooltip arrow (#3769)

Browse Source 
Co-authored-by: Alex Yang <himself65@outlook.com>
This commit is contained in:
danielchim
2023-08-17 01:48:13 +08:00
committed by GitHub
parent 651e815b42
commit 866408015e
6 changed files with 153 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/component/src/components/workspace/index.css.ts
View File

@@ -103,6 +103,9 @@ export const toolStyle = style({
right: '30px',
bottom: '30px',
zIndex: 'var(--affine-z-index-popover)',
display: 'flex',
flexDirection: 'column',
gap: '12px',
'@media': {
[breakpoints.down('md', true)]: {
right: 'calc((100vw - 640px) * 3 / 19 + 14px)',

113
packages/component/src/ui/popper/popper.tsx
View File

@@ -13,7 +13,6 @@ import {
import { styled } from '../../styles';
import type { PopperProps, VirtualElement } from './interface';
import { PopperArrow } from './popover-arrow';
export const Popper = ({
children,
content,
@@ -41,7 +40,8 @@ export const Popper = ({
}: PopperProps) => {
const [anchorEl, setAnchorEl] = useState<VirtualElement>();
const [visible, setVisible] = useState(defaultVisible);
const [arrowRef, setArrowRef] = useState<HTMLElement>();
//const [arrowRef, setArrowRef] = useState<HTMLElement>();
const arrowRef = null;
const pointerLeaveTimer = useRef<number>();
const pointerEnterTimer = useRef<number>();
@@ -170,12 +170,111 @@ export const Popper = ({
}
}}
>
{showArrow && (
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
<PopperArrow placement={placement} ref={setArrowRef} />
{showArrow ? (
<>
{placement.indexOf('bottom') === 0 ? (
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="11"
height="6"
viewBox="0 0 11 6"
fill="none"
>
<path
d="M6.38889 0.45C5.94444 -0.15 5.05555 -0.150001 4.61111 0.449999L0.499999 6L10.5 6L6.38889 0.45Z"
style={{ fill: 'var(--affine-tooltip)' }}
/>
</svg>
{content}
</div>
) : placement.indexOf('top') === 0 ? (
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
{content}
<svg
xmlns="http://www.w3.org/2000/svg"
width="11"
height="6"
viewBox="0 0 11 6"
fill="none"
>
<path
d="M4.61111 5.55C5.05556 6.15 5.94445 6.15 6.38889 5.55L10.5 -4.76837e-07H0.5L4.61111 5.55Z"
style={{ fill: 'var(--affine-tooltip)' }}
/>
</svg>
</div>
) : placement.indexOf('left') === 0 ? (
<>
{content}
<svg
xmlns="http://www.w3.org/2000/svg"
width="6"
height="10"
viewBox="0 0 6 10"
fill="none"
>
<path
d="M5.55 5.88889C6.15 5.44444 6.15 4.55555 5.55 4.11111L-4.76837e-07 0L-4.76837e-07 10L5.55 5.88889Z"
style={{ fill: 'var(--affine-tooltip)' }}
/>
</svg>
</>
) : placement.indexOf('right') === 0 ? (
<>
<svg
xmlns="http://www.w3.org/2000/svg"
width="6"
height="10"
viewBox="0 0 6 10"
style={{ fill: 'var(--affine-tooltip)' }}
>
<path
d="M0.45 4.11111C-0.15 4.55556 -0.15 5.44445 0.45 5.88889L6 10V0L0.45 4.11111Z"
style={{ fill: 'var(--affine-tooltip)' }}
/>
</svg>
{content}
</>
) : (
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
{content}
<svg
xmlns="http://www.w3.org/2000/svg"
width="11"
height="6"
viewBox="0 0 11 6"
fill="none"
>
<path
d="M4.61111 5.55C5.05556 6.15 5.94445 6.15 6.38889 5.55L10.5 -4.76837e-07H0.5L4.61111 5.55Z"
style={{ fill: 'var(--affine-tooltip)' }}
/>
</svg>
</div>
)}
</>
) : (
<>{content}</>
)}
{content}
</div>
</Grow>
)}

15
packages/component/src/ui/tooltip/tooltip.tsx
View File

@@ -7,15 +7,16 @@ import StyledPopperContainer from '../shared/container';
const StyledTooltip = styled(StyledPopperContainer)(() => {
return {
maxWidth: '320px',
boxShadow: 'var(--affine-float-button-shadow)',
padding: '4px 12px',
display: 'inline-flex',
height: '38px',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
flexShrink: 0,
backgroundColor: 'var(--affine-tooltip)',
borderRadius: '4px',
color: 'var(--affine-white)',
fontSize: 'var(--affine-font-sm)',
borderRadius: '8px',
marginBottom: '12px',
overflowWrap: 'break-word',
padding: '5px 12px',
};
});