Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-21 12:06:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: a series of bugs

Browse Source
This commit is contained in:
QiShaoXuan
2022-12-16 16:32:45 +08:00
parent 37aca4a99e
commit a8ba7afed2
29 changed files with 308 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/editor-mode-switch/index.tsx
+4 -1
View File
@@ -66,7 +66,9 @@ export const EditorModeSwitch = ({
style = {},
}: AnimateRadioProps) => {
const { mode: themeMode } = useTheme();
const { mode, setMode } = useEditor();
const { mode, setMode, getPageMeta } = useEditor();
const pageMeta = getPageMeta();
const modifyRadioItemStatus = (): RadioItemStatus => {
return {
left: isHover
@@ -99,6 +101,7 @@ export const EditorModeSwitch = ({
data-testid="editor-mode-switcher"
shrink={!isHover}
style={style}
disabled={!!pageMeta?.trash}
>
<AnimateRadioItem
isLeft={true}
packages/app/src/components/editor-mode-switch/style.ts
+34 -33
View File
@@ -5,41 +5,42 @@ import type { ItemStatus } from './type';
const ANIMATE_DURATION = 500;
export const StyledAnimateRadioContainer = styled('div')<{ shrink: boolean }>(
({ shrink, theme }) => {
const animateScaleStretch = keyframes`${toString(
spring({ width: '36px' }, { width: '160px' }, { preset: 'gentle' })
)}`;
const animateScaleShrink = keyframes(
`${toString(
spring({ width: '160px' }, { width: '36px' }, { preset: 'gentle' })
)}`
);
const shrinkStyle = shrink
? {
animation: `${animateScaleShrink} ${ANIMATE_DURATION}ms forwards`,
background: 'transparent',
}
: {
animation: `${animateScaleStretch} ${ANIMATE_DURATION}ms forwards`,
};
export const StyledAnimateRadioContainer = styled('div')<{
shrink: boolean;
disabled: boolean;
}>(({ shrink, theme, disabled }) => {
const animateScaleStretch = keyframes`${toString(
spring({ width: '36px' }, { width: '160px' }, { preset: 'gentle' })
)}`;
const animateScaleShrink = keyframes(
`${toString(
spring({ width: '160px' }, { width: '36px' }, { preset: 'gentle' })
)}`
);
const shrinkStyle = shrink
? {
animation: `${animateScaleShrink} ${ANIMATE_DURATION}ms forwards`,
background: 'transparent',
}
: {
animation: `${animateScaleStretch} ${ANIMATE_DURATION}ms forwards`,
};
return {
height: '36px',
borderRadius: '18px',
background: theme.colors.hoverBackground,
position: 'relative',
display: 'flex',
transition: `background ${ANIMATE_DURATION}ms, border ${ANIMATE_DURATION}ms`,
border: '1px solid transparent',
return {
height: '36px',
borderRadius: '18px',
background: disabled ? 'transparent' : theme.colors.hoverBackground,
position: 'relative',
display: 'flex',
transition: `background ${ANIMATE_DURATION}ms, border ${ANIMATE_DURATION}ms`,
border: '1px solid transparent',
...shrinkStyle,
':hover': {
border: `1px solid ${theme.colors.primaryColor}`,
},
};
}
);
...(disabled ? { pointerEvents: 'none' } : shrinkStyle),
':hover': {
border: disabled ? '' : `1px solid ${theme.colors.primaryColor}`,
},
};
});
export const StyledMiddleLine = styled('div')<{
hidden: boolean;