From d4d8e92bff4cc1d701934ccf9047a2268f3ec188 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sat, 14 May 2022 09:00:33 +0800 Subject: [PATCH 1/7] style(avatar): adjust more item padding/color --- src/widgets/AvatarsRow/styles/metric.ts | 4 ++-- src/widgets/AvatarsRow/styles/real_avatar.ts | 2 +- src/widgets/AvatarsRow/styles/real_number.ts | 4 +++- utils/themes/skins/github.ts | 2 +- 4 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/widgets/AvatarsRow/styles/metric.ts b/src/widgets/AvatarsRow/styles/metric.ts index e2d74cc99..03fc29912 100644 --- a/src/widgets/AvatarsRow/styles/metric.ts +++ b/src/widgets/AvatarsRow/styles/metric.ts @@ -47,8 +47,8 @@ export const getTotalCountSize = (total: number): string => { } export const getMoreTextWidth = (total: number): string => { - if (total < 10) return '23px' - if (total >= 10 && total <= 99) return '32px' + if (total < 10) return '22px' + if (total >= 10 && total <= 99) return '28px' if (total >= 100 && total <= 999) return '44px' return '52px' diff --git a/src/widgets/AvatarsRow/styles/real_avatar.ts b/src/widgets/AvatarsRow/styles/real_avatar.ts index 463071a13..96e7450b7 100644 --- a/src/widgets/AvatarsRow/styles/real_avatar.ts +++ b/src/widgets/AvatarsRow/styles/real_avatar.ts @@ -56,7 +56,7 @@ export const AvatarsMore = styled.span` min-width: ${({ size }) => getAvatarSize(size)}; height: ${({ size }) => getAvatarSize(size)}; - padding-left: ${({ total }) => (total >= 1000 ? '5px' : '3px')}; + padding-left: ${({ total }) => (total >= 1000 ? '5px' : '0')}; padding-top: 1px; &:hover { diff --git a/src/widgets/AvatarsRow/styles/real_number.ts b/src/widgets/AvatarsRow/styles/real_number.ts index eab9c9810..5ea7bba81 100644 --- a/src/widgets/AvatarsRow/styles/real_number.ts +++ b/src/widgets/AvatarsRow/styles/real_number.ts @@ -12,9 +12,11 @@ export const Wrapper = styled(AvatarsMore)` height: ${({ size }) => getAvatarSize(size)}; width: ${({ total }) => getMoreTextWidth(total)}; font-weight: 400; - padding-left: 2px; + padding-left: 1px; + padding-top: 0.5px; margin-left: 4px; border-radius: 0 10px 10px 0; + font-size: 13px; ` export const HighlightNumber = styled.div` font-weight: 500; diff --git a/utils/themes/skins/github.ts b/utils/themes/skins/github.ts index adb19f2dc..66086f42b 100755 --- a/utils/themes/skins/github.ts +++ b/utils/themes/skins/github.ts @@ -53,7 +53,7 @@ const github = { main: '#7DC0C5', bodyBg: contentBg, selectionBg: '#FFFEDE', - textBadge: '#f5f5f5', + textBadge: '#f6f6f6', gtdBadge: { feat: '#3871e0', From 4df753eed619e0a618200abcf455c9a9ed767fd1 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sat, 14 May 2022 09:11:07 +0800 Subject: [PATCH 2/7] style(about-thread): adjust sidebar style --- src/containers/thread/AboutThread/styles/index.ts | 8 ++++---- src/containers/thread/AboutThread/styles/sidebar.ts | 12 +++++------- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/src/containers/thread/AboutThread/styles/index.ts b/src/containers/thread/AboutThread/styles/index.ts index ab4701a05..bdacc60fc 100644 --- a/src/containers/thread/AboutThread/styles/index.ts +++ b/src/containers/thread/AboutThread/styles/index.ts @@ -16,21 +16,21 @@ export const MainWrapper = styled.div` background: transparent; border-radius: 6px; - margin-top: 14px; - padding-left: 25px; + margin-top: 25px; + padding-left: 22px; ` export const Block = styled.div` margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid; border-bottom-color: ${theme('border')}; - width: 660px; + width: 620px; ` export const IntroBlock = styled(Block)` padding-right: 20px; ` export const StateBlock = styled(Block)` - padding-right: 10px; + padding-right: 0; ` export const MemberBlock = styled(Block)` border-bottom: none; diff --git a/src/containers/thread/AboutThread/styles/sidebar.ts b/src/containers/thread/AboutThread/styles/sidebar.ts index b2b134931..db10b0ee6 100644 --- a/src/containers/thread/AboutThread/styles/sidebar.ts +++ b/src/containers/thread/AboutThread/styles/sidebar.ts @@ -5,15 +5,13 @@ import css, { theme } from '@/utils/css' export const Wrapper = styled.div` width: 300px; height: auto; - /* background: #f1f3f4; */ - border: 1px solid; - border-color: ${theme('border')}; - border-radius: 5px; - padding: 20px; - padding-top: 24px; + border-left: 1px solid; + border-left-color: ${theme('border')}; + padding-left: 40px; + padding-top: 10px; padding-bottom: 0; margin-top: 18px; - margin-left: 80px; + margin-left: 60px; ` export const Block = styled.div` margin-bottom: 20px; From d80fa6f3de3d7a279365dd950afd556125b7a077 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sun, 15 May 2022 08:05:11 +0800 Subject: [PATCH 3/7] style(publish): add publish icon --- .../unit/Comments/HeadBar/PublishBar.tsx | 4 ++-- .../unit/Comments/styles/head_bar/publish_bar.ts | 8 ++++---- src/widgets/Icons/EditPublish.tsx | 16 ++++++++++++++++ 3 files changed, 22 insertions(+), 6 deletions(-) create mode 100644 src/widgets/Icons/EditPublish.tsx diff --git a/src/containers/unit/Comments/HeadBar/PublishBar.tsx b/src/containers/unit/Comments/HeadBar/PublishBar.tsx index deaff71d7..4a4959506 100644 --- a/src/containers/unit/Comments/HeadBar/PublishBar.tsx +++ b/src/containers/unit/Comments/HeadBar/PublishBar.tsx @@ -9,7 +9,7 @@ import { Avatar, UserName, ActionsWrapper, - EditIcon, + Publishcon, } from '../styles/head_bar/publish_bar' type TProps = { @@ -35,7 +35,7 @@ const PublishBar: FC = ({ closeEditor }) => { diff --git a/src/containers/unit/Comments/styles/head_bar/publish_bar.ts b/src/containers/unit/Comments/styles/head_bar/publish_bar.ts index 5872ef573..ab169371b 100644 --- a/src/containers/unit/Comments/styles/head_bar/publish_bar.ts +++ b/src/containers/unit/Comments/styles/head_bar/publish_bar.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' import css, { theme } from '@/utils/css' -import EditPenSVG from '@/icons/EditPen' +import EditPublishSVG from '@/icons/EditPublish' import Img from '@/Img' export const Wrapper = styled.div` @@ -22,8 +22,8 @@ export const UserName = styled.div` export const ActionsWrapper = styled.div` ${css.flex('align-center')}; ` -export const EditIcon = styled(EditPenSVG)` - ${css.size(12)}; +export const Publishcon = styled(EditPublishSVG)` + ${css.size(13)}; fill: white; - margin-right: 5px; + margin-right: 6px; ` diff --git a/src/widgets/Icons/EditPublish.tsx b/src/widgets/Icons/EditPublish.tsx new file mode 100644 index 000000000..77a25a27b --- /dev/null +++ b/src/widgets/Icons/EditPublish.tsx @@ -0,0 +1,16 @@ +import { FC } from 'react' + +const EditPublish: FC = (props) => ( + + + +) + +export default EditPublish From f5c82007c83960c74eb3af6181d6fd1447524311 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sun, 15 May 2022 18:04:43 +0800 Subject: [PATCH 4/7] style(about-thread): adjust title/desc font & margin --- src/containers/thread/AboutThread/Sidebar.tsx | 2 +- src/containers/thread/AboutThread/styles/index.ts | 4 ++-- src/containers/thread/AboutThread/styles/members/index.ts | 2 +- src/containers/thread/AboutThread/styles/sidebar.ts | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/containers/thread/AboutThread/Sidebar.tsx b/src/containers/thread/AboutThread/Sidebar.tsx index 9921a4f67..e92acb6d8 100644 --- a/src/containers/thread/AboutThread/Sidebar.tsx +++ b/src/containers/thread/AboutThread/Sidebar.tsx @@ -21,7 +21,7 @@ const Sidebar: FC = () => { 官方主页 - + diff --git a/src/containers/thread/AboutThread/styles/index.ts b/src/containers/thread/AboutThread/styles/index.ts index bdacc60fc..28fa2c368 100644 --- a/src/containers/thread/AboutThread/styles/index.ts +++ b/src/containers/thread/AboutThread/styles/index.ts @@ -36,13 +36,13 @@ export const MemberBlock = styled(Block)` border-bottom: none; ` export const Title = styled.div` - font-size: 14px; + font-size: 16px; color: ${theme('thread.articleDigest')}; font-weight: 600; margin-bottom: 15px; ` export const Desc = styled.div` - font-size: 14px; + font-size: 15px; color: ${theme('thread.articleDigest')}; line-height: 1.8; ` diff --git a/src/containers/thread/AboutThread/styles/members/index.ts b/src/containers/thread/AboutThread/styles/members/index.ts index e4fb11d88..c8988a550 100644 --- a/src/containers/thread/AboutThread/styles/members/index.ts +++ b/src/containers/thread/AboutThread/styles/members/index.ts @@ -25,7 +25,7 @@ export const Header = styled.div` margin-bottom: 30px; ` export const Title = styled.div` - font-size: 14px; + font-size: 16px; color: ${theme('thread.articleDigest')}; font-weight: 600; ` diff --git a/src/containers/thread/AboutThread/styles/sidebar.ts b/src/containers/thread/AboutThread/styles/sidebar.ts index db10b0ee6..be8667004 100644 --- a/src/containers/thread/AboutThread/styles/sidebar.ts +++ b/src/containers/thread/AboutThread/styles/sidebar.ts @@ -10,7 +10,7 @@ export const Wrapper = styled.div` padding-left: 40px; padding-top: 10px; padding-bottom: 0; - margin-top: 18px; + margin-top: 19px; margin-left: 60px; ` export const Block = styled.div` From dca9edc0835c8af4aa31e54e8cb005b55aa8d9dc Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sun, 15 May 2022 20:07:18 +0800 Subject: [PATCH 5/7] refactor(renaming): AvatarsRow -> AvatarsGroup --- src/containers/content/WorksContent/index.tsx | 4 ++-- src/containers/thread/KanbanThread/Actions.tsx | 4 ++-- src/widgets/{AvatarsRow => AvatarsGroup}/MoreItem.tsx | 0 src/widgets/{AvatarsRow => AvatarsGroup}/RealAvatar.tsx | 0 src/widgets/{AvatarsRow => AvatarsGroup}/RealNumber.tsx | 0 src/widgets/{AvatarsRow => AvatarsGroup}/index.tsx | 8 ++++---- src/widgets/{AvatarsRow => AvatarsGroup}/spec.d.ts | 0 src/widgets/{AvatarsRow => AvatarsGroup}/styles/index.ts | 0 src/widgets/{AvatarsRow => AvatarsGroup}/styles/metric.ts | 0 .../{AvatarsRow => AvatarsGroup}/styles/more_item.ts | 0 .../{AvatarsRow => AvatarsGroup}/styles/real_avatar.ts | 0 .../{AvatarsRow => AvatarsGroup}/styles/real_number.ts | 0 .../{AvatarsRow => AvatarsGroup}/tests/index.test.ts | 4 ++-- src/widgets/PostItem/DesktopView/Header.tsx | 4 ++-- src/widgets/Tooltip/index.tsx | 2 +- src/widgets/Upvote/DefaultLayout.tsx | 4 ++-- src/widgets/Upvote/KanbanLayout.tsx | 4 ++-- src/widgets/Upvote/StickerLayout.tsx | 4 ++-- src/widgets/Upvote/WorksArticleLayout.tsx | 4 ++-- 19 files changed, 21 insertions(+), 21 deletions(-) rename src/widgets/{AvatarsRow => AvatarsGroup}/MoreItem.tsx (100%) rename src/widgets/{AvatarsRow => AvatarsGroup}/RealAvatar.tsx (100%) rename src/widgets/{AvatarsRow => AvatarsGroup}/RealNumber.tsx (100%) rename src/widgets/{AvatarsRow => AvatarsGroup}/index.tsx (96%) mode change 100755 => 100644 rename src/widgets/{AvatarsRow => AvatarsGroup}/spec.d.ts (100%) rename src/widgets/{AvatarsRow => AvatarsGroup}/styles/index.ts (100%) mode change 100755 => 100644 rename src/widgets/{AvatarsRow => AvatarsGroup}/styles/metric.ts (100%) rename src/widgets/{AvatarsRow => AvatarsGroup}/styles/more_item.ts (100%) rename src/widgets/{AvatarsRow => AvatarsGroup}/styles/real_avatar.ts (100%) rename src/widgets/{AvatarsRow => AvatarsGroup}/styles/real_number.ts (100%) rename src/widgets/{AvatarsRow => AvatarsGroup}/tests/index.test.ts (68%) mode change 100755 => 100644 diff --git a/src/containers/content/WorksContent/index.tsx b/src/containers/content/WorksContent/index.tsx index a5be00406..969f315e9 100755 --- a/src/containers/content/WorksContent/index.tsx +++ b/src/containers/content/WorksContent/index.tsx @@ -12,7 +12,7 @@ import { buildLog } from '@/utils/logger' import { bond } from '@/utils/mobx' import Pagi from '@/widgets/Pagi' -// import AvatarsRow from '@/widgets/AvatarsRow' +// import AvatarsGroup from '@/widgets/AvatarsGroup' import type { TStore } from './store' @@ -64,7 +64,7 @@ const WorksContentContainer: FC = ({ {/* 活跃用户 - + */} {!isMobile && } diff --git a/src/containers/thread/KanbanThread/Actions.tsx b/src/containers/thread/KanbanThread/Actions.tsx index f02b4cb3f..18d3bebee 100644 --- a/src/containers/thread/KanbanThread/Actions.tsx +++ b/src/containers/thread/KanbanThread/Actions.tsx @@ -4,7 +4,7 @@ import { ICON } from '@/config' import { mockUsers } from '@/utils/mock' import { IconSwitcher } from '@/widgets/Switcher' -import AvatarsRow from '@/widgets/AvatarsRow' +import AvatarsGroup from '@/widgets/AvatarsGroup' import { Space } from '@/widgets/Common' import { @@ -51,7 +51,7 @@ const Actions: FC = () => { 参与者 - + {/* */} {/* 新增 diff --git a/src/widgets/AvatarsRow/MoreItem.tsx b/src/widgets/AvatarsGroup/MoreItem.tsx similarity index 100% rename from src/widgets/AvatarsRow/MoreItem.tsx rename to src/widgets/AvatarsGroup/MoreItem.tsx diff --git a/src/widgets/AvatarsRow/RealAvatar.tsx b/src/widgets/AvatarsGroup/RealAvatar.tsx similarity index 100% rename from src/widgets/AvatarsRow/RealAvatar.tsx rename to src/widgets/AvatarsGroup/RealAvatar.tsx diff --git a/src/widgets/AvatarsRow/RealNumber.tsx b/src/widgets/AvatarsGroup/RealNumber.tsx similarity index 100% rename from src/widgets/AvatarsRow/RealNumber.tsx rename to src/widgets/AvatarsGroup/RealNumber.tsx diff --git a/src/widgets/AvatarsRow/index.tsx b/src/widgets/AvatarsGroup/index.tsx old mode 100755 new mode 100644 similarity index 96% rename from src/widgets/AvatarsRow/index.tsx rename to src/widgets/AvatarsGroup/index.tsx index f3242b851..0bc392e8f --- a/src/widgets/AvatarsRow/index.tsx +++ b/src/widgets/AvatarsGroup/index.tsx @@ -1,6 +1,6 @@ /* * - * AvatarsRow + * AvatarsGroup * */ @@ -49,7 +49,7 @@ export const RealAvatar = dynamic(() => import('./RealAvatar'), { }) /* eslint-disable-next-line */ -const log = buildLog('c:AvatarsRow:index') +const log = buildLog('c:AvatarsGroup:index') const validUser = compose(not, isNil) @@ -83,7 +83,7 @@ export type TProps = { onTotalSelect?: () => void } -const AvatarsRow: FC = ({ +const AvatarsGroup: FC = ({ size = SIZE.SMALL, total = null, users = [], @@ -151,4 +151,4 @@ const AvatarsRow: FC = ({ ) } -export default trackWindowScroll(AvatarsRow) +export default trackWindowScroll(AvatarsGroup) diff --git a/src/widgets/AvatarsRow/spec.d.ts b/src/widgets/AvatarsGroup/spec.d.ts similarity index 100% rename from src/widgets/AvatarsRow/spec.d.ts rename to src/widgets/AvatarsGroup/spec.d.ts diff --git a/src/widgets/AvatarsRow/styles/index.ts b/src/widgets/AvatarsGroup/styles/index.ts old mode 100755 new mode 100644 similarity index 100% rename from src/widgets/AvatarsRow/styles/index.ts rename to src/widgets/AvatarsGroup/styles/index.ts diff --git a/src/widgets/AvatarsRow/styles/metric.ts b/src/widgets/AvatarsGroup/styles/metric.ts similarity index 100% rename from src/widgets/AvatarsRow/styles/metric.ts rename to src/widgets/AvatarsGroup/styles/metric.ts diff --git a/src/widgets/AvatarsRow/styles/more_item.ts b/src/widgets/AvatarsGroup/styles/more_item.ts similarity index 100% rename from src/widgets/AvatarsRow/styles/more_item.ts rename to src/widgets/AvatarsGroup/styles/more_item.ts diff --git a/src/widgets/AvatarsRow/styles/real_avatar.ts b/src/widgets/AvatarsGroup/styles/real_avatar.ts similarity index 100% rename from src/widgets/AvatarsRow/styles/real_avatar.ts rename to src/widgets/AvatarsGroup/styles/real_avatar.ts diff --git a/src/widgets/AvatarsRow/styles/real_number.ts b/src/widgets/AvatarsGroup/styles/real_number.ts similarity index 100% rename from src/widgets/AvatarsRow/styles/real_number.ts rename to src/widgets/AvatarsGroup/styles/real_number.ts diff --git a/src/widgets/AvatarsRow/tests/index.test.ts b/src/widgets/AvatarsGroup/tests/index.test.ts old mode 100755 new mode 100644 similarity index 68% rename from src/widgets/AvatarsRow/tests/index.test.ts rename to src/widgets/AvatarsGroup/tests/index.test.ts index 559edd1e3..a151f5ea2 --- a/src/widgets/AvatarsRow/tests/index.test.ts +++ b/src/widgets/AvatarsGroup/tests/index.test.ts @@ -1,9 +1,9 @@ // import React from 'react' // import { shallow } from 'enzyme' -// import AvatarsRow from '../index' +// import AvatarsGroup from '../index' -describe('', () => { +describe('', () => { it('TODO: Expect to have unit tests specified', () => { expect(true).toEqual(true) }) diff --git a/src/widgets/PostItem/DesktopView/Header.tsx b/src/widgets/PostItem/DesktopView/Header.tsx index 7eac414ea..e2788beaf 100644 --- a/src/widgets/PostItem/DesktopView/Header.tsx +++ b/src/widgets/PostItem/DesktopView/Header.tsx @@ -6,7 +6,7 @@ import { EVENT } from '@/constant' import { send } from '@/utils/helper' -import AvatarsRow from '@/widgets/AvatarsRow' +import AvatarsGroup from '@/widgets/AvatarsGroup' // import TagsList from '@/widgets/TagsList' import { @@ -39,7 +39,7 @@ const Header: FC = ({ item }) => { - diff --git a/src/widgets/Tooltip/index.tsx b/src/widgets/Tooltip/index.tsx index a22f59c3e..eae647579 100755 --- a/src/widgets/Tooltip/index.tsx +++ b/src/widgets/Tooltip/index.tsx @@ -41,7 +41,7 @@ export type TProps = { noPadding?: boolean showArrow?: boolean behavior?: 'default' | 'confirm' | 'delete-confirm' | 'add' - // currently only for AvatarsRow, it will collapse the height + // currently only for AvatarsGroup, it will collapse the height // for same reason, figure out later contentHeight?: string diff --git a/src/widgets/Upvote/DefaultLayout.tsx b/src/widgets/Upvote/DefaultLayout.tsx index 246b15e12..a40c49783 100644 --- a/src/widgets/Upvote/DefaultLayout.tsx +++ b/src/widgets/Upvote/DefaultLayout.tsx @@ -11,7 +11,7 @@ import type { TUser } from '@/spec' import { buildLog } from '@/utils/logger' import { Space } from '@/widgets/Common' -import AvatarsRow from '@/widgets/AvatarsRow' +import AvatarsGroup from '@/widgets/AvatarsGroup' import UpvoteBtn from './UpvoteBtn' import Desc from './Desc' @@ -61,7 +61,7 @@ const Upvote: FC = ({ {count} {!noOne && } {!noOne && !isMobile && ( - + )} {!noOne && ( = ({ {count} {!noOne && } - {!noOne && !isMobile && } + {!noOne && !isMobile && } ) } diff --git a/src/widgets/Upvote/StickerLayout.tsx b/src/widgets/Upvote/StickerLayout.tsx index d2265ed2b..ff9b8bac8 100644 --- a/src/widgets/Upvote/StickerLayout.tsx +++ b/src/widgets/Upvote/StickerLayout.tsx @@ -11,7 +11,7 @@ import { buildLog } from '@/utils/logger' import { UPVOTE_LAYOUT } from '@/constant' import AnimatedCount from '@/widgets/AnimatedCount' -import AvatarsRow from '@/widgets/AvatarsRow' +import AvatarsGroup from '@/widgets/AvatarsGroup' import UpvoteBtn from './UpvoteBtn' import { @@ -54,7 +54,7 @@ const Upvote: FC = ({ - + ) diff --git a/src/widgets/Upvote/WorksArticleLayout.tsx b/src/widgets/Upvote/WorksArticleLayout.tsx index a9f5995cf..2bb58ae31 100644 --- a/src/widgets/Upvote/WorksArticleLayout.tsx +++ b/src/widgets/Upvote/WorksArticleLayout.tsx @@ -10,7 +10,7 @@ import type { TUser } from '@/spec' import { buildLog } from '@/utils/logger' import { SIZE, UPVOTE_LAYOUT } from '@/constant' -import AvatarsRow from '@/widgets/AvatarsRow' +import AvatarsGroup from '@/widgets/AvatarsGroup' import AnimatedCount from '@/widgets/AnimatedCount' import Desc from './Desc' @@ -69,7 +69,7 @@ const Upvote: FC = ({ {!noOne && ( - Date: Sun, 15 May 2022 21:22:25 +0800 Subject: [PATCH 6/7] style(drawer): adjust animation feel --- src/containers/tool/Drawer/styles/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/containers/tool/Drawer/styles/index.ts b/src/containers/tool/Drawer/styles/index.ts index 5d8bfa040..4b59056fb 100755 --- a/src/containers/tool/Drawer/styles/index.ts +++ b/src/containers/tool/Drawer/styles/index.ts @@ -28,8 +28,8 @@ export const DrawerOverlay = styled.div` background: ${({ visible }) => (visible ? theme('drawer.mask') : 'none')}; opacity: ${({ visible }) => (visible ? 0.5 : 0)}; - transition: visibility 0.25s linear, opacity 0.2s linear, - background 0.5s linear; + transition: visibility 0.2s linear, opacity 0.2s ease-in, + background 0.2s ease-in; ` // see https://stackoverflow.com/questions/60079950/when-do-i-use-attrs-vs-passing-props-directly-with-styled-components @@ -91,7 +91,7 @@ export const DrawerWrapper = styled.div.attrs( will-change: transform, max-width, opacity; // 在宽屏时滑出来时，是从内容页而不是实际的 window 页滑出, 加 delay 可以在视觉上抵消从外部滑入的跳动感 - transition-delay: 0s, 0s, 0.06s; + transition-delay: 0s, 0s, 0.14s; ${css.media.mobile` right: 0; From 99696bfd165e9d4d2945b826e85af3d5afe36010 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sun, 15 May 2022 22:40:13 +0800 Subject: [PATCH 7/7] style(drawer): turning animation feel --- src/containers/tool/Drawer/Viewer/DesktopView.tsx | 3 +-- src/containers/tool/Drawer/styles/index.ts | 4 ++-- src/widgets/Upvote/styles/post_list_layout.ts | 1 + 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/containers/tool/Drawer/Viewer/DesktopView.tsx b/src/containers/tool/Drawer/Viewer/DesktopView.tsx index 311118f4a..4b5beac75 100644 --- a/src/containers/tool/Drawer/Viewer/DesktopView.tsx +++ b/src/containers/tool/Drawer/Viewer/DesktopView.tsx @@ -29,8 +29,7 @@ const DesktopView: FC = ({ articleNavi, children, }) => { - const visible2 = false - + console.log('--> visible --> ', visible) return ( ` background: ${({ visible }) => (visible ? theme('drawer.mask') : 'none')}; opacity: ${({ visible }) => (visible ? 0.5 : 0)}; - transition: visibility 0.2s linear, opacity 0.2s ease-in, - background 0.2s ease-in; + transition: visibility 0.1s ease-in, opacity 0.1s ease-in, + background 0.1s ease-in; ` // see https://stackoverflow.com/questions/60079950/when-do-i-use-attrs-vs-passing-props-directly-with-styled-components diff --git a/src/widgets/Upvote/styles/post_list_layout.ts b/src/widgets/Upvote/styles/post_list_layout.ts index 3a326b25b..7afe2d3ba 100755 --- a/src/widgets/Upvote/styles/post_list_layout.ts +++ b/src/widgets/Upvote/styles/post_list_layout.ts @@ -16,6 +16,7 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ ` export const UpWrapper = styled.div` margin-left: 7px; + transform: scale(0.95); ` export const CountWrapper = styled.div` margin-top: -6px;