toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-11-24 10:07:35 +03: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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 153 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
apps/core/src/components/pure/help-island/index.tsx
View File

@ -60,7 +60,11 @@ export const HelpIsland = ({
style={{ height: spread ? `${showList.length * 40 + 4}px` : 0 }}
>
{showList.includes('whatNew') && (
<Tooltip content={t["Discover what's new!"]()} placement="left-end">
<Tooltip
content={t["Discover what's new!"]()}
placement="left-end"
showArrow={true}
>
<StyledIconWrapper
data-testid="right-bottom-change-log-icon"
onClick={() => {
@ -72,7 +76,11 @@ export const HelpIsland = ({
</Tooltip>
)}
{showList.includes('contact') && (
<Tooltip content={t['Contact Us']()} placement="left-end">
<Tooltip
content={t['Contact Us']()}
placement="left-end"
showArrow={true}
>
<StyledIconWrapper
data-testid="right-bottom-contact-us-icon"
onClick={openAbout}
@ -82,7 +90,11 @@ export const HelpIsland = ({
</Tooltip>
)}
{showList.includes('shortcuts') && (
<Tooltip content={t['Keyboard Shortcuts']()} placement="left-end">
<Tooltip
content={t['Keyboard Shortcuts']()}
placement="left-end"
showArrow={true}
>
<StyledIconWrapper
data-testid="shortcuts-icon"
onClick={() => {
@ -98,6 +110,7 @@ export const HelpIsland = ({
<Tooltip
content={t['com.affine.helpIsland.gettingStarted']()}
placement="left-end"
showArrow={true}
>
<StyledIconWrapper
data-testid="easy-guide"
@ -112,7 +125,11 @@ export const HelpIsland = ({
)}
</StyledAnimateWrapper>
<Tooltip content={t['Help and Feedback']()} placement="left-end">
<Tooltip
content={t['Help and Feedback']()}
placement={'left-end'}
showArrow={true}
>
<MuiFade in={!spread} data-testid="faq-icon">
<StyledTriggerWrapper>
<HelpIcon />

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',
};
});

28
plugins/image-preview/src/component/index.tsx
View File

@ -336,7 +336,7 @@ const ImagePreviewModalImpl = (
) : null}
<div className={imagePreviewActionBarStyle}>
<div>
<Tooltip content={'Previous'} disablePortal={false}>
<Tooltip content={'Previous'} placement={'top'} showArrow={true}>
<IconButton
data-testid="previous-image-button"
icon={<ArrowLeftSmallIcon />}
@ -348,7 +348,7 @@ const ImagePreviewModalImpl = (
}}
/>
</Tooltip>
<Tooltip content={'Next'} disablePortal={false}>
<Tooltip content={'Next'} placement={'top'} showArrow={true}>
<IconButton
data-testid="next-image-button"
icon={<ArrowRightSmallIcon />}
@ -362,11 +362,7 @@ const ImagePreviewModalImpl = (
</Tooltip>
</div>
<div className={groupStyle}></div>
<Tooltip
content={'Fit to Screen'}
disablePortal={true}
showArrow={false}
>
<Tooltip content={'Fit to Screen'} placement={'top'} showArrow={true}>
<IconButton
data-testid="fit-to-screen-button"
icon={<ViewBarIcon />}
@ -375,7 +371,7 @@ const ImagePreviewModalImpl = (
onClick={() => resetZoom()}
/>
</Tooltip>
<Tooltip content={'Zoom out'} disablePortal={false}>
<Tooltip content={'Zoom out'} placement={'top'} showArrow={true}>
<IconButton
data-testid="zoom-out-button"
icon={<MinusIcon />}
@ -384,7 +380,7 @@ const ImagePreviewModalImpl = (
onClick={zoomOut}
/>
</Tooltip>
<Tooltip content={'Reset Scale'} disablePortal={false}>
<Tooltip content={'Reset Scale'} placement={'top'} showArrow={true}>
<Button
data-testid="reset-scale-button"
type="plain"
@ -395,7 +391,7 @@ const ImagePreviewModalImpl = (
{`${(currentScale * 100).toFixed(0)}%`}
</Button>
</Tooltip>
<Tooltip content={'Zoom in'} disablePortal={false}>
<Tooltip content={'Zoom in'} placement={'top'} showArrow={true}>
<IconButton
data-testid="zoom-in-button"
icon={<PlusIcon />}
@ -405,7 +401,7 @@ const ImagePreviewModalImpl = (
/>
</Tooltip>
<div className={groupStyle}></div>
<Tooltip content={'Download'} disablePortal={false}>
<Tooltip content={'Download'} placement={'top'} showArrow={true}>
<IconButton
data-testid="download-button"
icon={<DownloadIcon />}
@ -419,7 +415,11 @@ const ImagePreviewModalImpl = (
}}
/>
</Tooltip>
<Tooltip content={'Copy to clipboard'} disablePortal={false}>
<Tooltip
content={'Copy to clipboard'}
placement={'top'}
showArrow={true}
>
<IconButton
data-testid="copy-to-clipboard-button"
icon={<CopyIcon />}
@ -444,7 +444,7 @@ const ImagePreviewModalImpl = (
return;
}
const dataUrl = URL.createObjectURL(blob);
navigator.clipboard
global.navigator.clipboard
.write([new ClipboardItem({ 'image/png': blob })])
.then(() => {
console.log('Image copied to clipboard');
@ -460,7 +460,7 @@ const ImagePreviewModalImpl = (
/>
</Tooltip>
<div className={groupStyle}></div>
<Tooltip content={'Delete'} disablePortal={false}>
<Tooltip content={'Delete'} placement={'top'} showArrow={true}>
<IconButton
data-testid="delete-button"
icon={<DeleteIcon />}

2
plugins/image-preview/src/component/toast.ts
View File

@ -3,7 +3,7 @@ import { toast as basicToast } from '@affine/component';
export const toast = (message: string, options?: ToastOptions) => {
const mainContainer = document.querySelector(
'[data-testid="image-preview-modal"]'
'[plugin-id="@affine/image-preview-plugin"]'
) as HTMLElement;
return basicToast(message, {
portal: mainContainer || document.body,