luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(component): modal blurness (#5177)

Browse Source 
moved https://github.com/toeverything/design/pull/108

Do not use transform to center the modal. It has know issue to cause modal to have blurred texts.

https://github.com/radix-ui/website/issues/383

fix https://github.com/toeverything/AFFiNE/issues/5176
This commit is contained in:
Peng Xiao
2023-12-05 09:18:49 +00:00
parent 37b1a54ec6
commit 1e01ed0b0f
2 changed files with 49 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
packages/frontend/component/src/ui/modal/modal.tsx
View File

@@ -67,42 +67,46 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
className={clsx(styles.modalOverlay, overlayClassName)} className={clsx(styles.modalOverlay, overlayClassName)}
{...otherOverlayOptions} {...otherOverlayOptions}
/> />
<Dialog.Content <div className={styles.modalContentWrapper}>
className={clsx(styles.modalContent, contentClassName)} <Dialog.Content
style={{ className={clsx(styles.modalContent, contentClassName)}
...assignInlineVars({ style={{
[styles.widthVar]: getVar(width, '50vw'), ...assignInlineVars({
[styles.heightVar]: getVar(height, 'unset'), [styles.widthVar]: getVar(width, '50vw'),
[styles.minHeightVar]: getVar(minHeight, '26px'), [styles.heightVar]: getVar(height, 'unset'),
}), [styles.minHeightVar]: getVar(minHeight, '26px'),
...contentStyle, }),
}} ...contentStyle,
{...otherContentOptions} }}
ref={ref} {...otherContentOptions}
> ref={ref}
{withoutCloseButton ? null : ( >
<Dialog.Close asChild> {withoutCloseButton ? null : (
<IconButton <Dialog.Close asChild>
className={styles.closeButton} <IconButton
aria-label="Close" className={styles.closeButton}
type="plain" aria-label="Close"
{...closeButtonOptions} type="plain"
> {...closeButtonOptions}
<CloseIcon /> >
</IconButton> <CloseIcon />
</Dialog.Close> </IconButton>
)} </Dialog.Close>
{title ? ( )}
<Dialog.Title className={styles.modalHeader}>{title}</Dialog.Title> {title ? (
) : null} <Dialog.Title className={styles.modalHeader}>
{description ? ( {title}
<Dialog.Description className={styles.modalDescription}> </Dialog.Title>
{description} ) : null}
</Dialog.Description> {description ? (
) : null} <Dialog.Description className={styles.modalDescription}>
{description}
</Dialog.Description>
) : null}
{children} {children}
</Dialog.Content> </Dialog.Content>
</div>
</Dialog.Portal> </Dialog.Portal>
</Dialog.Root> </Dialog.Root>
) )

15
packages/frontend/component/src/ui/modal/styles.css.ts
View File

@@ -11,6 +11,15 @@ export const modalOverlay = style({
zIndex: 'var(--affine-z-index-modal)', zIndex: 'var(--affine-z-index-modal)',
}); });
export const modalContentWrapper = style({
position: 'fixed',
inset: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
zIndex: 'var(--affine-z-index-modal)',
});
export const modalContent = style({ export const modalContent = style({
vars: { vars: {
[widthVar]: '', [widthVar]: '',
@@ -25,17 +34,13 @@ export const modalContent = style({
fontWeight: '400', fontWeight: '400',
lineHeight: '1.6', lineHeight: '1.6',
padding: '20px 24px', padding: '20px 24px',
position: 'relative',
backgroundColor: 'var(--affine-background-overlay-panel-color)', backgroundColor: 'var(--affine-background-overlay-panel-color)',
boxShadow: 'var(--affine-popover-shadow)', boxShadow: 'var(--affine-popover-shadow)',
borderRadius: '12px', borderRadius: '12px',
maxHeight: 'calc(100vh - 32px)', maxHeight: 'calc(100vh - 32px)',
// :focus-visible will set outline // :focus-visible will set outline
outline: 'none', outline: 'none',
position: 'fixed',
zIndex: 'var(--affine-z-index-modal)',
top: ' 50%',
left: '50%',
transform: 'translate(-50%, -50%)',
}); });
export const closeButton = style({ export const closeButton = style({