From 0956b5ccc79967900951728db4651d1e762ce126 Mon Sep 17 00:00:00 2001 From: JimmFly Date: Thu, 6 Apr 2023 21:34:57 +0800 Subject: [PATCH] chore: update change log style (#1832) --- apps/electron/yarn.lock | 10 +-- apps/web/package.json | 2 +- .../src/components/pure/help-island/index.tsx | 4 +- .../src/components/pure/help-island/style.ts | 1 + .../workspace-slider-bar/changeLog/index.tsx | 14 ++-- .../workspace-slider-bar/shared-styles.ts | 75 ++++++++++++++++++- .../pure/workspace-slider-bar/style.ts | 6 +- packages/component/package.json | 2 +- yarn.lock | 12 +-- 9 files changed, 100 insertions(+), 26 deletions(-) diff --git a/apps/electron/yarn.lock b/apps/electron/yarn.lock index a36e2c89e6..7f074ac731 100644 --- a/apps/electron/yarn.lock +++ b/apps/electron/yarn.lock @@ -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 diff --git a/apps/web/package.json b/apps/web/package.json index b37f9272a1..e1eb99a07f 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -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", diff --git a/apps/web/src/components/pure/help-island/index.tsx b/apps/web/src/components/pure/help-island/index.tsx index 2b29876d67..fdc2f97ff7 100644 --- a/apps/web/src/components/pure/help-island/index.tsx +++ b/apps/web/src/components/pure/help-island/index.tsx @@ -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'); }} > - + )} diff --git a/apps/web/src/components/pure/help-island/style.ts b/apps/web/src/components/pure/help-island/style.ts index 5d62865e9c..87a17c4af2 100644 --- a/apps/web/src/components/pure/help-island/style.ts +++ b/apps/web/src/components/pure/help-island/style.ts @@ -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', diff --git a/apps/web/src/components/pure/workspace-slider-bar/changeLog/index.tsx b/apps/web/src/components/pure/workspace-slider-bar/changeLog/index.tsx index 9bb7e3971a..261b5d8c87 100644 --- a/apps/web/src/components/pure/workspace-slider-bar/changeLog/index.tsx +++ b/apps/web/src/components/pure/workspace-slider-bar/changeLog/index.tsx @@ -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 ( - <> - + + - + {t("Discover what's new!")} { > - - + + ); }; diff --git a/apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts b/apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts index 8d8838a5ef..46b3e4b051 100644 --- a/apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts +++ b/apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts @@ -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', + }; +}); diff --git a/apps/web/src/components/pure/workspace-slider-bar/style.ts b/apps/web/src/components/pure/workspace-slider-bar/style.ts index b8d4532f94..54cca18d25 100644 --- a/apps/web/src/components/pure/workspace-slider-bar/style.ts +++ b/apps/web/src/components/pure/workspace-slider-bar/style.ts @@ -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', }; }); diff --git a/packages/component/package.json b/packages/component/package.json index 6587dca4bb..d594e90e35 100644 --- a/packages/component/package.json +++ b/packages/component/package.json @@ -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", diff --git a/yarn.lock b/yarn.lock index f3b13fac17..1c6445c81c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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