toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-24 19:22:49 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: update change log style (#1832)

Browse Source
This commit is contained in:
JimmFly 2023-04-06 21:34:57 +08:00 committed by GitHub
parent 69cc0f5cb9
commit 0956b5ccc7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 100 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/electron/yarn.lock
View File

@ -40,7 +40,7 @@ __metadata:
"@blocksuite/blocks": 0.0.0-20230406032111-01cf598b-nightly
"@blocksuite/editor": 0.0.0-20230406032111-01cf598b-nightly
"@blocksuite/global": 0.0.0-20230406032111-01cf598b-nightly
"@blocksuite/icons": 2.1.4
"@blocksuite/icons": 2.1.5
"@blocksuite/store": 0.0.0-20230406032111-01cf598b-nightly
"@emotion/cache": ^11.10.7
"@emotion/react": ^11.10.6
@ -1754,13 +1754,13 @@ __metadata:
languageName: node
linkType: hard
"@blocksuite/icons@npm:2.1.4":
version: 2.1.4
resolution: "@blocksuite/icons@npm:2.1.4"
"@blocksuite/icons@npm:2.1.5":
version: 2.1.5
resolution: "@blocksuite/icons@npm:2.1.5"
peerDependencies:
"@types/react": ^18.0.25
react: ^18.2.0
checksum: 0eff10845afa389fb23ce73838ee0697eaa2af60313e4ee0c139ee14a9bf103a92057c6af6c3eccb40636751d1fb94aa872533cb41f6e25fed4c3ecc530c28bc
checksum: 8452d3f6d6375e597840b240a492f1e414e69f8d7ed677c17ded6409f5a273dfc36509b264e78bdb67d1938cb666575dd5c354d4df189e557b588709a68e019f
languageName: node
linkType: hard

2
apps/web/package.json
View File

@ -19,7 +19,7 @@
"@affine/workspace": "workspace:*",
"@blocksuite/blocks": "0.0.0-20230406032111-01cf598b-nightly",
"@blocksuite/editor": "0.0.0-20230406032111-01cf598b-nightly",
"@blocksuite/icons": "^2.1.4",
"@blocksuite/icons": "^2.1.5",
"@blocksuite/store": "0.0.0-20230406032111-01cf598b-nightly",
"@emotion/cache": "^11.10.7",
"@emotion/react": "^11.10.6",

4
apps/web/src/components/pure/help-island/index.tsx
View File

@ -1,7 +1,7 @@
import { MuiFade, Tooltip } from '@affine/component';
import { config } from '@affine/env';
import { useTranslation } from '@affine/i18n';
import { CloseIcon, DoneIcon } from '@blocksuite/icons';
import { CloseIcon, NewIcon } from '@blocksuite/icons';
import dynamic from 'next/dynamic';
import { useState } from 'react';
@ -72,7 +72,7 @@ export const HelpIsland = ({
window.open('https://affine.pro', '_blank');
}}
>
<DoneIcon />
<NewIcon />
</StyledIconWrapper>
</Tooltip>
)}

1
apps/web/src/components/pure/help-island/style.ts
View File

@ -37,6 +37,7 @@ export const StyledIconWrapper = styled('div')(({ theme }) => {
color: theme.colors.iconColor,
...displayFlex('center', 'center'),
cursor: 'pointer',
fontSize: '24px',
backgroundColor: theme.colors.pageBackground,
borderRadius: '5px',
width: '36px',

14
apps/web/src/components/pure/workspace-slider-bar/changeLog/index.tsx
View File

@ -1,13 +1,13 @@
import { IconButton } from '@affine/component';
import { useTranslation } from '@affine/i18n';
import { CloseIcon, DoneIcon } from '@blocksuite/icons';
import { CloseIcon, NewIcon } from '@blocksuite/icons';
import { useCallback } from 'react';
import {
useGuideHidden,
useGuideHiddenUntilNextUpdate,
} from '../../../../hooks/affine/use-is-first-load';
import { StyledListItem } from '../shared-styles';
import { StyledChangeLog, StyledChangeLogWarper } from '../shared-styles';
import { StyledLink } from '../style';
export const ChangeLog = () => {
const [guideHidden, setGuideHidden] = useGuideHidden();
@ -30,10 +30,10 @@ export const ChangeLog = () => {
return <></>;
}
return (
<>
<StyledListItem data-testid="change-log">
<StyledChangeLogWarper>
<StyledChangeLog data-testid="change-log">
<StyledLink href={'https://affine.pro'} target="_blank">
<DoneIcon />
<NewIcon />
{t("Discover what's new!")}
</StyledLink>
<IconButton
@ -44,8 +44,8 @@ export const ChangeLog = () => {
>
<CloseIcon />
</IconButton>
</StyledListItem>
</>
</StyledChangeLog>
</StyledChangeLogWarper>
);
};

75
apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts
View File

@ -1,4 +1,10 @@
import { alpha, displayFlex, styled, textEllipsis } from '@affine/component';
import {
alpha,
displayFlex,
keyframes,
styled,
textEllipsis,
} from '@affine/component';
export const StyledListItem = styled('div')<{
active?: boolean;
@ -100,3 +106,70 @@ export const StyledCollapseItem = styled('div')<{
},
};
});
const slideIn = keyframes({
'0%': {
height: '0px',
},
'50%': {
height: '36px',
},
'100%': {
height: '32px',
},
});
const slideIn2 = keyframes({
'0%': {
transform: 'translateX(100%)',
},
'50%': {
transform: 'translateX(100%)',
},
'80%': {
transform: 'translateX(-10%)',
},
'100%': {
transform: 'translateX(0%)',
},
});
export const StyledChangeLog = styled('div')(({ theme }) => {
return {
width: '110%',
height: '32px',
...displayFlex('flex-start', 'center'),
color: theme.colors.primaryColor,
backgroundColor: theme.colors.hoverBackground,
border: `1px solid ${theme.colors.primaryColor}`,
borderRight: 'none',
padding: '0 0 0 16px',
borderRadius: '16px 0 0 16px',
cursor: 'pointer',
zIndex: 1001,
position: 'absolute',
userSelect: 'none',
transition: 'all 0.3s',
animation: `${slideIn2} 1s ease-in-out forwards `,
'> svg, a > svg': {
fontSize: '20px',
marginRight: '12px',
color: theme.colors.primaryColor,
},
button: {
marginRight: '10%',
},
};
});
export const StyledChangeLogWarper = styled('div')(({ theme }) => {
return {
width: 'calc(100% + 4px)',
height: '0px',
animation: `${slideIn} .5s ease-in-out forwards`,
...displayFlex('flex-start', 'center'),
marginBottom: '4px',
position: 'relative',
userSelect: 'none',
transition: 'all 0.3s',
overflow: 'hidden',
};
});

6
apps/web/src/components/pure/workspace-slider-bar/style.ts
View File

@ -34,7 +34,7 @@ export const StyledSliderBar = styled('div')(({ theme }) => {
flexShrink: 0,
display: 'flex',
flexDirection: 'column',
overflow: 'hidden',
// overflow: 'hidden',
};
});
export const StyledSidebarSwitchWrapper = styled('div')(() => {
@ -52,8 +52,8 @@ export const StyledSidebarSwitchWrapper = styled('div')(() => {
export const StyledSliderBarInnerWrapper = styled('div')(() => {
return {
flexGrow: 1,
overflowX: 'hidden',
overflowY: 'auto',
// overflowX: 'hidden',
// overflowY: 'auto',
position: 'relative',
};
});

2
packages/component/package.json
View File

@ -20,7 +20,7 @@
"@blocksuite/blocks": "0.0.0-20230406032111-01cf598b-nightly",
"@blocksuite/editor": "0.0.0-20230406032111-01cf598b-nightly",
"@blocksuite/global": "0.0.0-20230406032111-01cf598b-nightly",
"@blocksuite/icons": "2.1.4",
"@blocksuite/icons": "2.1.5",
"@blocksuite/store": "0.0.0-20230406032111-01cf598b-nightly",
"@emotion/cache": "^11.10.7",
"@emotion/react": "^11.10.6",

12
yarn.lock
View File

@ -40,7 +40,7 @@ __metadata:
"@blocksuite/blocks": 0.0.0-20230406032111-01cf598b-nightly
"@blocksuite/editor": 0.0.0-20230406032111-01cf598b-nightly
"@blocksuite/global": 0.0.0-20230406032111-01cf598b-nightly
"@blocksuite/icons": 2.1.4
"@blocksuite/icons": 2.1.5
"@blocksuite/store": 0.0.0-20230406032111-01cf598b-nightly
"@emotion/cache": ^11.10.7
"@emotion/react": ^11.10.6
@ -166,7 +166,7 @@ __metadata:
"@affine/workspace": "workspace:*"
"@blocksuite/blocks": 0.0.0-20230406032111-01cf598b-nightly
"@blocksuite/editor": 0.0.0-20230406032111-01cf598b-nightly
"@blocksuite/icons": ^2.1.4
"@blocksuite/icons": ^2.1.5
"@blocksuite/store": 0.0.0-20230406032111-01cf598b-nightly
"@emotion/cache": ^11.10.7
"@emotion/react": ^11.10.6
@ -1791,13 +1791,13 @@ __metadata:
languageName: node
linkType: hard
"@blocksuite/icons@npm:2.1.4, @blocksuite/icons@npm:^2.1.4":
version: 2.1.4
resolution: "@blocksuite/icons@npm:2.1.4"
"@blocksuite/icons@npm:2.1.5, @blocksuite/icons@npm:^2.1.5":
version: 2.1.5
resolution: "@blocksuite/icons@npm:2.1.5"
peerDependencies:
"@types/react": ^18.0.25
react: ^18.2.0
checksum: 0eff10845afa389fb23ce73838ee0697eaa2af60313e4ee0c139ee14a9bf103a92057c6af6c3eccb40636751d1fb94aa872533cb41f6e25fed4c3ecc530c28bc
checksum: 8452d3f6d6375e597840b240a492f1e414e69f8d7ed677c17ded6409f5a273dfc36509b264e78bdb67d1938cb666575dd5c354d4df189e557b588709a68e019f
languageName: node
linkType: hard