mirror of
https://github.com/toeverything/AFFiNE.git
synced 2024-09-21 08:28:58 +03:00
fix(electron): drag window behavior in header
This commit is contained in:
parent
3a5a66a5a3
commit
9f8b38f9f3
@ -7,6 +7,7 @@ export const StyledSidebarSwitch = styled(IconButton, {
|
||||
})<{ visible: boolean }>(({ visible }) => {
|
||||
return {
|
||||
opacity: visible ? 1 : 0,
|
||||
WebkitAppRegion: 'no-drag',
|
||||
transition: 'all 0.2s ease-in-out',
|
||||
};
|
||||
});
|
||||
|
@ -39,6 +39,7 @@ export const StyledSwitchItem = styled('button')<{
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
borderRadius: '8px',
|
||||
WebkitAppRegion: 'no-drag',
|
||||
boxShadow: active ? 'var(--affine-shadow)' : 'none',
|
||||
color: active ? 'var(--affine-primary-color)' : 'var(--affine-icon-color)',
|
||||
display: hide ? 'none' : 'inline-flex',
|
||||
|
@ -30,6 +30,7 @@ const IconWrapper = styled('div')(({ theme }) => {
|
||||
marginRight: '12px',
|
||||
fontSize: '24px',
|
||||
color: 'var(--affine-icon-color)',
|
||||
WebkitAppRegion: 'no-drag',
|
||||
...displayFlex('center', 'center'),
|
||||
};
|
||||
});
|
||||
|
@ -10,6 +10,7 @@ export const StyledThemeModeSwitch = styled('button')(({ theme }) => {
|
||||
height: '32px',
|
||||
borderRadius: '6px',
|
||||
overflow: 'hidden',
|
||||
WebkitAppRegion: 'no-drag',
|
||||
backgroundColor: 'transparent',
|
||||
position: 'relative',
|
||||
color: 'var(--affine-icon-color)',
|
||||
|
@ -144,7 +144,12 @@ export const Header = forwardRef<
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<StyledHeaderContainer ref={ref} hasWarning={showWarning} {...props}>
|
||||
<StyledHeaderContainer
|
||||
ref={ref}
|
||||
hasWarning={showWarning}
|
||||
data-open={open}
|
||||
{...props}
|
||||
>
|
||||
<BrowserWarning
|
||||
show={showWarning}
|
||||
onClose={() => {
|
||||
|
@ -14,7 +14,13 @@ export const StyledHeaderContainer = styled('div')<{
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
background: 'var(--affine-background-primary-color)',
|
||||
WebkitAppRegion: 'drag',
|
||||
zIndex: 1,
|
||||
'@media (max-width: 768px)': {
|
||||
'&[data-open="true"]': {
|
||||
WebkitAppRegion: 'no-drag',
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
export const StyledHeader = styled('div')<{ hasWarning: boolean }>(
|
||||
|
@ -1,4 +1,5 @@
|
||||
import { baseTheme } from '@toeverything/theme';
|
||||
import type { ComplexStyleRule } from '@vanilla-extract/css';
|
||||
import { createVar, style } from '@vanilla-extract/css';
|
||||
|
||||
export const floatingMaxWidth = 768;
|
||||
@ -49,12 +50,21 @@ export const navHeaderStyle = style({
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
'@media': {
|
||||
[`(max-width: ${floatingMaxWidth}px)`]: {
|
||||
selectors: {
|
||||
'&[data-open="true"]': {
|
||||
WebkitAppRegion: 'no-drag',
|
||||
},
|
||||
},
|
||||
} as ComplexStyleRule,
|
||||
},
|
||||
selectors: {
|
||||
'&[data-is-macos-electron="true"]': {
|
||||
justifyContent: 'flex-end',
|
||||
},
|
||||
},
|
||||
});
|
||||
} as ComplexStyleRule);
|
||||
|
||||
export const navBodyStyle = style({
|
||||
flex: '1 1 auto',
|
||||
|
@ -58,6 +58,7 @@ export const AppSidebar = forwardRef<HTMLElement, AppSidebarProps>(
|
||||
<div
|
||||
className={navHeaderStyle}
|
||||
data-is-macos-electron={isMacosDesktop}
|
||||
data-open={open}
|
||||
>
|
||||
{isMacosDesktop && (
|
||||
<>
|
||||
|
@ -43,6 +43,7 @@ export const StyledIconButton = styled('button', {
|
||||
width,
|
||||
height,
|
||||
fontSize,
|
||||
WebkitAppRegion: 'no-drag',
|
||||
color: 'var(--affine-icon-color)',
|
||||
...displayInlineFlex('center', 'center'),
|
||||
position: 'relative',
|
||||
@ -184,6 +185,7 @@ export const StyledButton = styled('button', {
|
||||
paddingLeft: padding,
|
||||
paddingRight: padding,
|
||||
border: noBorder ? 'none' : '1px solid',
|
||||
WebkitAppRegion: 'no-drag',
|
||||
...displayInlineFlex('center', 'center'),
|
||||
position: 'relative',
|
||||
// TODO: disabled color is not decided
|
||||
|
Loading…
Reference in New Issue
Block a user