From 499184e53bf536a656e618338bef2b4e59c3bb29 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Thu, 26 May 2022 22:54:08 +0800 Subject: [PATCH 1/8] refactor: basic layout setup --- .../Panel/ActivityInfo/index.tsx | 2 + .../styles/panel/activity_info/index.tsx | 43 +++------- src/schemas/pages/post.ts | 3 + .../DesktopView/ActiveBadge.tsx | 45 ++++++++++ .../DesktopView/Body.tsx | 2 +- .../DesktopView/Header.tsx | 2 +- .../DesktopView/ViewingSign.tsx | 27 ++++++ .../DesktopView/ViewsCount.tsx | 31 +++++++ .../DesktopView/index.tsx | 2 +- .../MobileView/Body.tsx | 7 +- .../MobileView/Footer.tsx | 2 +- .../MobileView/Header.tsx | 2 +- .../MobileView/index.tsx | 2 +- .../PostItem/CommentFirstLayout/index.tsx | 53 ++++++++++++ .../DesktopView/ActiveBadge.tsx | 6 +- .../UpvoteFirstLayout/DesktopView/Body.tsx | 80 +++++++++++++++++ .../UpvoteFirstLayout/DesktopView/Header.tsx | 75 ++++++++++++++++ .../DesktopView/ViewingSign.tsx | 5 +- .../DesktopView/ViewsCount.tsx | 2 +- .../UpvoteFirstLayout/DesktopView/index.tsx | 85 ++++++++++++++++++ .../UpvoteFirstLayout/MobileView/Body.tsx | 37 ++++++++ .../UpvoteFirstLayout/MobileView/Footer.tsx | 54 ++++++++++++ .../UpvoteFirstLayout/MobileView/Header.tsx | 47 ++++++++++ .../UpvoteFirstLayout/MobileView/index.tsx | 27 ++++++ .../PostItem/UpvoteFirstLayout/index.tsx | 53 ++++++++++++ src/widgets/PostItem/index.tsx | 27 +++--- .../desktop_view/active_badge.ts | 0 .../desktop_view/body.ts | 0 .../desktop_view/header.ts | 0 .../desktop_view/index.ts | 0 .../desktop_view/viewing_sign.ts | 0 .../desktop_view/views_count.ts | 0 .../styles/{ => comment_fist_layout}/index.ts | 3 - .../mobile_view/body.ts | 0 .../mobile_view/footer.ts | 0 .../mobile_view/header.ts | 0 .../mobile_view/index.ts | 0 src/widgets/PostItem/styles/metrics.ts | 13 --- .../desktop_view/active_badge.ts | 24 ++++++ .../upvote_fist_layout/desktop_view/body.ts | 39 +++++++++ .../upvote_fist_layout/desktop_view/header.ts | 86 +++++++++++++++++++ .../upvote_fist_layout/desktop_view/index.ts | 30 +++++++ .../desktop_view/viewing_sign.ts | 16 ++++ .../desktop_view/views_count.ts | 26 ++++++ .../styles/upvote_fist_layout/index.ts | 26 ++++++ .../upvote_fist_layout/mobile_view/body.ts | 35 ++++++++ .../upvote_fist_layout/mobile_view/footer.ts | 81 +++++++++++++++++ .../upvote_fist_layout/mobile_view/header.ts | 40 +++++++++ .../upvote_fist_layout/mobile_view/index.ts | 8 ++ 49 files changed, 1081 insertions(+), 67 deletions(-) create mode 100644 src/widgets/PostItem/CommentFirstLayout/DesktopView/ActiveBadge.tsx rename src/widgets/PostItem/{ => CommentFirstLayout}/DesktopView/Body.tsx (98%) rename src/widgets/PostItem/{ => CommentFirstLayout}/DesktopView/Header.tsx (94%) create mode 100644 src/widgets/PostItem/CommentFirstLayout/DesktopView/ViewingSign.tsx create mode 100644 src/widgets/PostItem/CommentFirstLayout/DesktopView/ViewsCount.tsx rename src/widgets/PostItem/{ => CommentFirstLayout}/DesktopView/index.tsx (97%) rename src/widgets/PostItem/{ => CommentFirstLayout}/MobileView/Body.tsx (86%) rename src/widgets/PostItem/{ => CommentFirstLayout}/MobileView/Footer.tsx (95%) rename src/widgets/PostItem/{ => CommentFirstLayout}/MobileView/Header.tsx (94%) rename src/widgets/PostItem/{ => CommentFirstLayout}/MobileView/index.tsx (89%) create mode 100644 src/widgets/PostItem/CommentFirstLayout/index.tsx rename src/widgets/PostItem/{ => UpvoteFirstLayout}/DesktopView/ActiveBadge.tsx (90%) create mode 100644 src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Body.tsx create mode 100644 src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Header.tsx rename src/widgets/PostItem/{ => UpvoteFirstLayout}/DesktopView/ViewingSign.tsx (79%) rename src/widgets/PostItem/{ => UpvoteFirstLayout}/DesktopView/ViewsCount.tsx (88%) create mode 100644 src/widgets/PostItem/UpvoteFirstLayout/DesktopView/index.tsx create mode 100644 src/widgets/PostItem/UpvoteFirstLayout/MobileView/Body.tsx create mode 100644 src/widgets/PostItem/UpvoteFirstLayout/MobileView/Footer.tsx create mode 100644 src/widgets/PostItem/UpvoteFirstLayout/MobileView/Header.tsx create mode 100644 src/widgets/PostItem/UpvoteFirstLayout/MobileView/index.tsx create mode 100644 src/widgets/PostItem/UpvoteFirstLayout/index.tsx rename src/widgets/PostItem/styles/{ => comment_fist_layout}/desktop_view/active_badge.ts (100%) rename src/widgets/PostItem/styles/{ => comment_fist_layout}/desktop_view/body.ts (100%) rename src/widgets/PostItem/styles/{ => comment_fist_layout}/desktop_view/header.ts (100%) rename src/widgets/PostItem/styles/{ => comment_fist_layout}/desktop_view/index.ts (100%) rename src/widgets/PostItem/styles/{ => comment_fist_layout}/desktop_view/viewing_sign.ts (100%) rename src/widgets/PostItem/styles/{ => comment_fist_layout}/desktop_view/views_count.ts (100%) rename src/widgets/PostItem/styles/{ => comment_fist_layout}/index.ts (87%) mode change 100755 => 100644 rename src/widgets/PostItem/styles/{ => comment_fist_layout}/mobile_view/body.ts (100%) rename src/widgets/PostItem/styles/{ => comment_fist_layout}/mobile_view/footer.ts (100%) rename src/widgets/PostItem/styles/{ => comment_fist_layout}/mobile_view/header.ts (100%) rename src/widgets/PostItem/styles/{ => comment_fist_layout}/mobile_view/index.ts (100%) delete mode 100644 src/widgets/PostItem/styles/metrics.ts create mode 100644 src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/active_badge.ts create mode 100644 src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/body.ts create mode 100644 src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/header.ts create mode 100644 src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/index.ts create mode 100644 src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/viewing_sign.ts create mode 100644 src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/views_count.ts create mode 100644 src/widgets/PostItem/styles/upvote_fist_layout/index.ts create mode 100644 src/widgets/PostItem/styles/upvote_fist_layout/mobile_view/body.ts create mode 100644 src/widgets/PostItem/styles/upvote_fist_layout/mobile_view/footer.ts create mode 100644 src/widgets/PostItem/styles/upvote_fist_layout/mobile_view/header.ts create mode 100644 src/widgets/PostItem/styles/upvote_fist_layout/mobile_view/index.ts diff --git a/src/containers/unit/ArticleFooter/Panel/ActivityInfo/index.tsx b/src/containers/unit/ArticleFooter/Panel/ActivityInfo/index.tsx index 5144d139e..b05e3dbe7 100644 --- a/src/containers/unit/ArticleFooter/Panel/ActivityInfo/index.tsx +++ b/src/containers/unit/ArticleFooter/Panel/ActivityInfo/index.tsx @@ -13,6 +13,7 @@ import { Highlight, Label, Content, + HelpHint, } from '../../styles/panel/activity_info' const tmpItems = [ @@ -65,6 +66,7 @@ const ActivityInfo: FC = () => { {tmpItems.map((item) => ( ))} + 关于日志 ) } diff --git a/src/containers/unit/ArticleFooter/styles/panel/activity_info/index.tsx b/src/containers/unit/ArticleFooter/styles/panel/activity_info/index.tsx index 362edfdd1..a33859ecc 100644 --- a/src/containers/unit/ArticleFooter/styles/panel/activity_info/index.tsx +++ b/src/containers/unit/ArticleFooter/styles/panel/activity_info/index.tsx @@ -1,6 +1,5 @@ import styled from 'styled-components' -import type { TActive } from '@/spec' import css, { theme } from '@/utils/css' import EditPenSVG from '@/icons/Calendar' @@ -9,6 +8,8 @@ import UpdateTimeSVG from '@/icons/UpdateTime' export const Wrapper = styled.div` ${css.flexColumn()}; + position: relative; + width: 100%; ` export const Item = styled.div` ${css.flex('align-center')}; @@ -38,41 +39,23 @@ export const CommentIcon = styled(CommentSVG)` margin-right: 10px; opacity: 0.8; ` - export const Content = styled.div`` export const Highlight = styled.span` color: ${theme('thread.articleTitle')}; ` +export const HelpHint = styled.div` + position: absolute; + right: 8px; + top: -1px; + font-size: 11px; + color: ${theme('lightText')}; + opacity: 0.8; -export const ReferNum = styled.span` - font-size: 13px; - font-weight: bold; - color: #00a59b; - margin-right: 5px; -` -export const Text = styled.div` - color: ${({ active }) => - active ? theme('thread.articleTitle') : theme('thread.extraInfo')}; - font-size: 13px; - - ${Item}:hover & { + &:hover { color: ${theme('thread.articleTitle')}; + opacity: 1; + cursor: pointer; } - transition: color 0.25s; -` -export const PanelWrapper = styled.div` - ${css.flexColumn()}; - position: relative; - border-top: 1px solid; - border-top-color: #00424f; -` -export const PanelInnerWrapper = styled.div` - height: 100%; - border-left: 1px solid; - border-left-color: #00424f; - padding: 25px 0; - padding-right: 25px; - margin-left: 18px; - min-height: 120px; + transition: color 0.2s; ` diff --git a/src/schemas/pages/post.ts b/src/schemas/pages/post.ts index e030f3e9d..e5c271a99 100755 --- a/src/schemas/pages/post.ts +++ b/src/schemas/pages/post.ts @@ -15,6 +15,9 @@ export const pagedPosts = ` ${F.article} meta { thread + latestUpvotedUsers { + ${F.author} + } } digest linkAddr diff --git a/src/widgets/PostItem/CommentFirstLayout/DesktopView/ActiveBadge.tsx b/src/widgets/PostItem/CommentFirstLayout/DesktopView/ActiveBadge.tsx new file mode 100644 index 000000000..61f928f9a --- /dev/null +++ b/src/widgets/PostItem/CommentFirstLayout/DesktopView/ActiveBadge.tsx @@ -0,0 +1,45 @@ +import { FC, memo } from 'react' +import TimeAgo from 'timeago-react' + +import type { TArticle } from '@/spec' +import { SVG } from '@/constant' +import IconButton from '@/widgets/Buttons/IconButton' +import ReadableDate from '@/widgets/ReadableDate' + +import { + Wrapper, + Hint, + TimeStr, +} from '../../styles/comment_fist_layout/desktop_view/active_badge' + +type TProps = { + item: TArticle +} + +const ActiveBadge: FC = ({ item }) => { + const isArchived = item.commentsCount === 24 + const icon = isArchived ? SVG.ARCHIVED : SVG.ACTIVITY + + return ( + 0}> + +
最后回复时间:
+ + + + + } + right={6} + hintPlacement="bottom" + hintDelay={0} + /> + + + ) +} + +export default memo(ActiveBadge) diff --git a/src/widgets/PostItem/DesktopView/Body.tsx b/src/widgets/PostItem/CommentFirstLayout/DesktopView/Body.tsx similarity index 98% rename from src/widgets/PostItem/DesktopView/Body.tsx rename to src/widgets/PostItem/CommentFirstLayout/DesktopView/Body.tsx index be19c8bb5..62e6ddf17 100644 --- a/src/widgets/PostItem/DesktopView/Body.tsx +++ b/src/widgets/PostItem/CommentFirstLayout/DesktopView/Body.tsx @@ -26,7 +26,7 @@ import { LabelDivider, AuthorName, ArticleStateBadgeWrapper, -} from '../styles/desktop_view/body' +} from '../../styles/comment_fist_layout/desktop_view/body' const CommunityCard = dynamic(() => import('@/widgets/Cards/CommunityCard'), { ssr: false, diff --git a/src/widgets/PostItem/DesktopView/Header.tsx b/src/widgets/PostItem/CommentFirstLayout/DesktopView/Header.tsx similarity index 94% rename from src/widgets/PostItem/DesktopView/Header.tsx rename to src/widgets/PostItem/CommentFirstLayout/DesktopView/Header.tsx index 1b561c75e..25ca3f07a 100644 --- a/src/widgets/PostItem/DesktopView/Header.tsx +++ b/src/widgets/PostItem/CommentFirstLayout/DesktopView/Header.tsx @@ -13,7 +13,7 @@ import { Brief, Title, AvatarsWrapper, -} from '../styles/desktop_view/header' +} from '../../styles/comment_fist_layout/desktop_view/header' const TagsList = dynamic(() => import('@/widgets/TagsList'), { ssr: false, diff --git a/src/widgets/PostItem/CommentFirstLayout/DesktopView/ViewingSign.tsx b/src/widgets/PostItem/CommentFirstLayout/DesktopView/ViewingSign.tsx new file mode 100644 index 000000000..1b8676487 --- /dev/null +++ b/src/widgets/PostItem/CommentFirstLayout/DesktopView/ViewingSign.tsx @@ -0,0 +1,27 @@ +import { FC, memo } from 'react' + +import type { TPost } from '@/spec' +import useViewing from '@/hooks/useViewing' + +import { + Wrapper, + ViewIcon, +} from '../../styles/comment_fist_layout/desktop_view/viewing_sign' + +type TProps = { + article: TPost +} + +const ViewingSign: FC = ({ article }) => { + const viewingId = useViewing() + + if (article.id !== viewingId) return null + + return ( + + + + ) +} + +export default memo(ViewingSign) diff --git a/src/widgets/PostItem/CommentFirstLayout/DesktopView/ViewsCount.tsx b/src/widgets/PostItem/CommentFirstLayout/DesktopView/ViewsCount.tsx new file mode 100644 index 000000000..d1e5abc27 --- /dev/null +++ b/src/widgets/PostItem/CommentFirstLayout/DesktopView/ViewsCount.tsx @@ -0,0 +1,31 @@ +import { FC, memo, Fragment } from 'react' + +import { + Wrapper, + ViewsIcon, + HighlightWrapper, +} from '../../styles/comment_fist_layout/desktop_view/views_count' + +type TProps = { + count: number +} + +const ViewsCount: FC = ({ count }) => { + return ( + + {count >= 100 ? ( + + + {count} + + ) : ( + + + {count} + + )} + + ) +} + +export default memo(ViewsCount) diff --git a/src/widgets/PostItem/DesktopView/index.tsx b/src/widgets/PostItem/CommentFirstLayout/DesktopView/index.tsx similarity index 97% rename from src/widgets/PostItem/DesktopView/index.tsx rename to src/widgets/PostItem/CommentFirstLayout/DesktopView/index.tsx index cd2f356b7..320772373 100644 --- a/src/widgets/PostItem/DesktopView/index.tsx +++ b/src/widgets/PostItem/CommentFirstLayout/DesktopView/index.tsx @@ -16,7 +16,7 @@ import { AvatarWrapper, UpvoteWrapper, Main, -} from '../styles/desktop_view' +} from '../../styles/comment_fist_layout/desktop_view' let Upvote = null let ArticleReadLabel = null diff --git a/src/widgets/PostItem/MobileView/Body.tsx b/src/widgets/PostItem/CommentFirstLayout/MobileView/Body.tsx similarity index 86% rename from src/widgets/PostItem/MobileView/Body.tsx rename to src/widgets/PostItem/CommentFirstLayout/MobileView/Body.tsx index f27e32443..a814d1d12 100644 --- a/src/widgets/PostItem/MobileView/Body.tsx +++ b/src/widgets/PostItem/CommentFirstLayout/MobileView/Body.tsx @@ -5,7 +5,12 @@ import type { TPost } from '@/spec' import { parseDomain } from '@/utils/route' import { ARTICLE_THREAD } from '@/constant' -import { Wrapper, TitleLink, LinkIcon, Title } from '../styles/mobile_view/body' +import { + Wrapper, + TitleLink, + LinkIcon, + Title, +} from '../../styles/comment_fist_layout/mobile_view/body' type TProps = { item: TPost diff --git a/src/widgets/PostItem/MobileView/Footer.tsx b/src/widgets/PostItem/CommentFirstLayout/MobileView/Footer.tsx similarity index 95% rename from src/widgets/PostItem/MobileView/Footer.tsx rename to src/widgets/PostItem/CommentFirstLayout/MobileView/Footer.tsx index 89001797b..6fa68b3d1 100644 --- a/src/widgets/PostItem/MobileView/Footer.tsx +++ b/src/widgets/PostItem/CommentFirstLayout/MobileView/Footer.tsx @@ -13,7 +13,7 @@ import { ExtraIcon, ExtraTexts, BodyDigest, -} from '../styles/mobile_view/footer' +} from '../../styles/comment_fist_layout/mobile_view/footer' type TProps = { item: TPost diff --git a/src/widgets/PostItem/MobileView/Header.tsx b/src/widgets/PostItem/CommentFirstLayout/MobileView/Header.tsx similarity index 94% rename from src/widgets/PostItem/MobileView/Header.tsx rename to src/widgets/PostItem/CommentFirstLayout/MobileView/Header.tsx index c2bcef2d2..7e1770d3b 100644 --- a/src/widgets/PostItem/MobileView/Header.tsx +++ b/src/widgets/PostItem/CommentFirstLayout/MobileView/Header.tsx @@ -14,7 +14,7 @@ import { AuthorInfo, TimeStamp, TagListWrapper, -} from '../styles/mobile_view/header' +} from '../../styles/comment_fist_layout/mobile_view/header' type TProps = { item: TPost diff --git a/src/widgets/PostItem/MobileView/index.tsx b/src/widgets/PostItem/CommentFirstLayout/MobileView/index.tsx similarity index 89% rename from src/widgets/PostItem/MobileView/index.tsx rename to src/widgets/PostItem/CommentFirstLayout/MobileView/index.tsx index 292d33933..7d049b3af 100644 --- a/src/widgets/PostItem/MobileView/index.tsx +++ b/src/widgets/PostItem/CommentFirstLayout/MobileView/index.tsx @@ -6,7 +6,7 @@ import Header from './Header' import Body from './Body' import Footer from './Footer' -import { Wrapper } from '../styles/mobile_view' +import { Wrapper } from '../../styles/comment_fist_layout/mobile_view' type TProps = { entry: TPost diff --git a/src/widgets/PostItem/CommentFirstLayout/index.tsx b/src/widgets/PostItem/CommentFirstLayout/index.tsx new file mode 100644 index 000000000..f967ecb96 --- /dev/null +++ b/src/widgets/PostItem/CommentFirstLayout/index.tsx @@ -0,0 +1,53 @@ +/* + * + * PostItem + * + */ + +import { FC, memo } from 'react' + +import type { TCommunity, TPost, TUser, TAccount, TC11N } from '@/spec' +import { buildLog } from '@/utils/logger' +import { isMobile } from 'react-device-detect' + +import DesktopView from './DesktopView' +import MobileView from './MobileView' +// import ListView from './ListView' + +import { Wrapper } from '../styles/comment_fist_layout' + +/* eslint-disable-next-line */ +const log = buildLog('c:PostItem:index') + +type TProps = { + curCommunity: TCommunity | null + entry: TPost + c11n: TC11N + + onUserSelect?: (obj: TUser) => void + onAuthorSelect?: (obj: TAccount) => void +} + +const PostItem: FC = ({ + curCommunity, + entry, + onUserSelect = log, + onAuthorSelect = log, + c11n, +}) => { + return ( + + {!isMobile ? ( + + ) : ( + + )} + + ) +} + +export default memo(PostItem) diff --git a/src/widgets/PostItem/DesktopView/ActiveBadge.tsx b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/ActiveBadge.tsx similarity index 90% rename from src/widgets/PostItem/DesktopView/ActiveBadge.tsx rename to src/widgets/PostItem/UpvoteFirstLayout/DesktopView/ActiveBadge.tsx index 704a3c033..d3742f394 100644 --- a/src/widgets/PostItem/DesktopView/ActiveBadge.tsx +++ b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/ActiveBadge.tsx @@ -6,7 +6,11 @@ import { SVG } from '@/constant' import IconButton from '@/widgets/Buttons/IconButton' import ReadableDate from '@/widgets/ReadableDate' -import { Wrapper, Hint, TimeStr } from '../styles/desktop_view/active_badge' +import { + Wrapper, + Hint, + TimeStr, +} from '../../styles/upvote_fist_layout/desktop_view/active_badge' type TProps = { item: TArticle diff --git a/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Body.tsx b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Body.tsx new file mode 100644 index 000000000..cce584028 --- /dev/null +++ b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Body.tsx @@ -0,0 +1,80 @@ +import { memo, FC } from 'react' +import dynamic from 'next/dynamic' + +import { EVENT, UPVOTE_LAYOUT } from '@/constant' + +import type { TCommunity, TPost } from '@/spec' +import { send } from '@/utils/helper' + +import Upvote from '@/widgets/Upvote' +import { Space, SpaceGrow } from '@/widgets/Common' + +// import ArticleStateBadge from '@/widgets/ArticleStateBadge' +import ViewsCount from './ViewsCount' + +import { + Wrapper, + DigestWrapper, + Dot, + Extra, + LeftPart, +} from '../../styles/upvote_fist_layout/desktop_view/body' + +const UserCard = dynamic(() => import('@/widgets/Cards/UserCard'), { + ssr: false, +}) + +const ActiveBadge = dynamic(() => import('./ActiveBadge'), { + ssr: false, +}) + +type TProps = { + item: TPost +} + +const Body: FC = ({ item }) => { + // console.log('# originalCommunity: ', originalCommunity) + const { upvotesCount, meta, viewerHasUpvoted } = item + + return ( + + send(EVENT.PREVIEW_ARTICLE, { article: item })} + > + {item.digest} + + + + + + + + + + + + {/* @ts-ignore */} + {/* + + {item.id === '239' && } + {item.id === '231' && } + {item.id === '227' && } + {item.id === '228' && ( + + )} + {item.id === '226' && ( + + )} + {item.id === '225' && } + */} + + + ) +} + +export default memo(Body) diff --git a/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Header.tsx b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Header.tsx new file mode 100644 index 000000000..081cf4812 --- /dev/null +++ b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Header.tsx @@ -0,0 +1,75 @@ +import { FC } from 'react' +import dynamic from 'next/dynamic' +import Link from 'next/link' +import TimeAgo from 'timeago-react' + +import type { TPost } from '@/spec' +import { callWallpaperEditor } from '@/utils/helper' + +import Tooltip from '@/widgets/Tooltip' +import { SpaceGrow } from '@/widgets/Common' + +import { + Wrapper, + Topping, + Main, + Dot, + Title, + PublishTime, + CommentWrapper, + CommentIcon, + CommentCount, + AuthorName, +} from '../../styles/upvote_fist_layout/desktop_view/header' + +const UserCard = dynamic(() => import('@/widgets/Cards/UserCard'), { + ssr: false, +}) + +const TagsList = dynamic(() => import('@/widgets/TagsList'), { + ssr: false, +}) + +type TProps = { + item: TPost +} + +const Header: FC = ({ item }) => { + const { author, commentsCount } = item + + return ( + + + } + placement="right" + delay={500} + > + + {author.nickname} + + + + + + + +
+ {/* send(EVENT.PREVIEW_ARTICLE, { article: item })}> */} + <Title onClick={() => callWallpaperEditor()}>{item.title} + {/* @ts-ignore */} + + + {commentsCount !== 0 && ( + + + {commentsCount} + + )} +
+ + ) +} + +export default Header diff --git a/src/widgets/PostItem/DesktopView/ViewingSign.tsx b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/ViewingSign.tsx similarity index 79% rename from src/widgets/PostItem/DesktopView/ViewingSign.tsx rename to src/widgets/PostItem/UpvoteFirstLayout/DesktopView/ViewingSign.tsx index 86c01bebd..774350bc5 100644 --- a/src/widgets/PostItem/DesktopView/ViewingSign.tsx +++ b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/ViewingSign.tsx @@ -3,7 +3,10 @@ import { FC, memo } from 'react' import type { TPost } from '@/spec' import useViewing from '@/hooks/useViewing' -import { Wrapper, ViewIcon } from '../styles/desktop_view/viewing_sign' +import { + Wrapper, + ViewIcon, +} from '../../styles/upvote_fist_layout/desktop_view/viewing_sign' type TProps = { article: TPost diff --git a/src/widgets/PostItem/DesktopView/ViewsCount.tsx b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/ViewsCount.tsx similarity index 88% rename from src/widgets/PostItem/DesktopView/ViewsCount.tsx rename to src/widgets/PostItem/UpvoteFirstLayout/DesktopView/ViewsCount.tsx index 1a6d56f6c..03739766d 100644 --- a/src/widgets/PostItem/DesktopView/ViewsCount.tsx +++ b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/ViewsCount.tsx @@ -4,7 +4,7 @@ import { Wrapper, ViewsIcon, HighlightWrapper, -} from '../styles/desktop_view/views_count' +} from '../../styles/upvote_fist_layout/desktop_view/views_count' type TProps = { count: number diff --git a/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/index.tsx b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/index.tsx new file mode 100644 index 000000000..e4343dd3f --- /dev/null +++ b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/index.tsx @@ -0,0 +1,85 @@ +import { FC, Fragment, memo, useEffect, useState } from 'react' +import dynamic from 'next/dynamic' + +import type { TCommunity, TPost } from '@/spec' +import { UPVOTE_LAYOUT } from '@/constant' + +import { upvoteOnArticleList } from '@/utils/helper' +import TheAvatar from '@/widgets/TheAvatar' +import ViewingSign from './ViewingSign' + +import Header from './Header' +import Body from './Body' + +import { + Wrapper, + AvatarWrapper, + UpvoteWrapper, + Main, +} from '../../styles/upvote_fist_layout/desktop_view' + +let Upvote = null +let ArticleReadLabel = null +let ArticlePinLabel = null + +type TProps = { + curCommunity: TCommunity | null + entry: TPost + + // onUserSelect?: (obj: TUser) => void + // onAuthorSelect?: (obj: TAccount) => void +} + +const DigestView: FC = ({ curCommunity, entry }) => { + const [loaded, setLoaded] = useState(false) + + // 如果同步渲染 Upvote, ArticleReadLabel, ArticlePinLabel 等组件会导致难以忍受的卡顿 + // 尤其是在 Tab 切换的时候。手机端因为目前没有这些组件，性能暂无问题。 + // 本不应该存在的无聊问题，蛋疼的解决办法， + useEffect(() => { + Upvote = dynamic(() => import('@/widgets/Upvote'), { ssr: false }) + ArticleReadLabel = dynamic(() => import('@/widgets/ArticleReadLabel'), { + ssr: false, + }) + ArticlePinLabel = dynamic(() => import('@/widgets/ArticlePinLabel'), { + ssr: false, + }) + + setTimeout(() => { + setLoaded(true) + }, 200) + }, []) + + return ( + + {loaded && ( + + + + + )} + + {/* + + + {loaded && ( + + upvoteOnArticleList(entry, viewerHasUpvoted) + } + /> + )} + + */} +
+
+ +
+ + ) +} + +export default memo(DigestView) diff --git a/src/widgets/PostItem/UpvoteFirstLayout/MobileView/Body.tsx b/src/widgets/PostItem/UpvoteFirstLayout/MobileView/Body.tsx new file mode 100644 index 000000000..a814d1d12 --- /dev/null +++ b/src/widgets/PostItem/UpvoteFirstLayout/MobileView/Body.tsx @@ -0,0 +1,37 @@ +import { FC, memo, useCallback } from 'react' +import Router from 'next/router' + +import type { TPost } from '@/spec' +import { parseDomain } from '@/utils/route' +import { ARTICLE_THREAD } from '@/constant' + +import { + Wrapper, + TitleLink, + LinkIcon, + Title, +} from '../../styles/comment_fist_layout/mobile_view/body' + +type TProps = { + item: TPost +} + +const Body: FC = ({ item }) => { + const gotoArticle = useCallback(() => { + Router.push(`/${ARTICLE_THREAD.POST}/${item.id}`) + }, [item.id]) + + return ( + + {item.title} + {item.linkAddr && ( + + + {parseDomain(item.linkAddr)} + + )} + + ) +} + +export default memo(Body) diff --git a/src/widgets/PostItem/UpvoteFirstLayout/MobileView/Footer.tsx b/src/widgets/PostItem/UpvoteFirstLayout/MobileView/Footer.tsx new file mode 100644 index 000000000..6fa68b3d1 --- /dev/null +++ b/src/widgets/PostItem/UpvoteFirstLayout/MobileView/Footer.tsx @@ -0,0 +1,54 @@ +import { FC } from 'react' + +import type { TPost, TCommunity } from '@/spec' +import { cutRest, changeToCommunity } from '@/utils/helper' +import { ICON_CMD } from '@/config' + +import DotDivider from '@/widgets/DotDivider' + +import { + Wrapper, + CommunityLabel, + Extra, + ExtraIcon, + ExtraTexts, + BodyDigest, +} from '../../styles/comment_fist_layout/mobile_view/footer' + +type TProps = { + item: TPost + curCommunity: TCommunity +} + +const Footer: FC = ({ item, curCommunity }) => { + const { originalCommunity } = item + const showOriginalCommunity = + curCommunity === null || curCommunity?.raw !== originalCommunity.raw + + return ( + + + {showOriginalCommunity && ( + changeToCommunity(originalCommunity.raw)} + > + {originalCommunity.title} + + )} + + {showOriginalCommunity && } + + + + {item.views} + + + {item.commentsCount} + + + {cutRest(item.digest, 20)} + + ) +} + +export default Footer diff --git a/src/widgets/PostItem/UpvoteFirstLayout/MobileView/Header.tsx b/src/widgets/PostItem/UpvoteFirstLayout/MobileView/Header.tsx new file mode 100644 index 000000000..7e1770d3b --- /dev/null +++ b/src/widgets/PostItem/UpvoteFirstLayout/MobileView/Header.tsx @@ -0,0 +1,47 @@ +import { FC, memo } from 'react' +import TimeAgo from 'timeago-react' + +import type { TPost, TAccount } from '@/spec' + +import TagsList from '@/widgets/TagsList' +import DotDivider from '@/widgets/DotDivider' +import ImgFallback from '@/widgets/ImgFallback' + +import { + Wrapper, + AvatarWrapper, + Avatar, + AuthorInfo, + TimeStamp, + TagListWrapper, +} from '../../styles/comment_fist_layout/mobile_view/header' + +type TProps = { + item: TPost + onAuthorSelect?: (obj: TAccount) => void +} + +const Header: FC = ({ item, onAuthorSelect }) => { + return ( + + + onAuthorSelect(item.author)}> + } + /> + +
{item.author.nickname}
+ + + + + + + + + + ) +} + +export default memo(Header) diff --git a/src/widgets/PostItem/UpvoteFirstLayout/MobileView/index.tsx b/src/widgets/PostItem/UpvoteFirstLayout/MobileView/index.tsx new file mode 100644 index 000000000..7d049b3af --- /dev/null +++ b/src/widgets/PostItem/UpvoteFirstLayout/MobileView/index.tsx @@ -0,0 +1,27 @@ +import { FC, memo } from 'react' + +import type { TPost, TCommunity, TAccount } from '@/spec' + +import Header from './Header' +import Body from './Body' +import Footer from './Footer' + +import { Wrapper } from '../../styles/comment_fist_layout/mobile_view' + +type TProps = { + entry: TPost + curCommunity: TCommunity | null + onAuthorSelect?: (obj: TAccount) => void +} + +const MobileView: FC = ({ entry, curCommunity, onAuthorSelect }) => { + return ( + +
+ +
+ + ) +} + +export default memo(MobileView) diff --git a/src/widgets/PostItem/UpvoteFirstLayout/index.tsx b/src/widgets/PostItem/UpvoteFirstLayout/index.tsx new file mode 100644 index 000000000..724b65d89 --- /dev/null +++ b/src/widgets/PostItem/UpvoteFirstLayout/index.tsx @@ -0,0 +1,53 @@ +/* + * + * PostItem + * + */ + +import { FC, memo } from 'react' + +import type { TCommunity, TPost, TUser, TAccount, TC11N } from '@/spec' +import { buildLog } from '@/utils/logger' +import { isMobile } from 'react-device-detect' + +import DesktopView from './DesktopView' +import MobileView from './MobileView' +// import ListView from './ListView' + +import { Wrapper } from '../styles/upvote_fist_layout' + +/* eslint-disable-next-line */ +const log = buildLog('c:PostItem:index') + +type TProps = { + curCommunity: TCommunity | null + entry: TPost + c11n: TC11N + + onUserSelect?: (obj: TUser) => void + onAuthorSelect?: (obj: TAccount) => void +} + +const PostItem: FC = ({ + curCommunity, + entry, + onUserSelect = log, + onAuthorSelect = log, + c11n, +}) => { + return ( + + {!isMobile ? ( + + ) : ( + + )} + + ) +} + +export default memo(PostItem) diff --git a/src/widgets/PostItem/index.tsx b/src/widgets/PostItem/index.tsx index ae1c57cbe..7d9a02417 100755 --- a/src/widgets/PostItem/index.tsx +++ b/src/widgets/PostItem/index.tsx @@ -4,18 +4,15 @@ * */ -import { FC, memo } from 'react' +import { FC, memo, Fragment } from 'react' import type { TCommunity, TPost, TUser, TAccount, TC11N } from '@/spec' import { buildLog } from '@/utils/logger' -import { isMobile } from 'react-device-detect' -import DesktopView from './DesktopView' -import MobileView from './MobileView' +import CommentFirstLayout from './CommentFirstLayout' +import UpvoteFirstLayout from './UpvoteFirstLayout' // import ListView from './ListView' -import { Wrapper } from './styles' - /* eslint-disable-next-line */ const log = buildLog('c:PostItem:index') @@ -23,6 +20,7 @@ type TProps = { curCommunity: TCommunity | null entry: TPost c11n: TC11N + layout?: string onUserSelect?: (obj: TUser) => void onAuthorSelect?: (obj: TAccount) => void @@ -33,20 +31,27 @@ const PostItem: FC = ({ entry, onUserSelect = log, onAuthorSelect = log, + layout = 'upvote-first', c11n, }) => { return ( - - {!isMobile ? ( - + + {layout === 'upvote-first' ? ( + ) : ( - )} - + ) } diff --git a/src/widgets/PostItem/styles/desktop_view/active_badge.ts b/src/widgets/PostItem/styles/comment_fist_layout/desktop_view/active_badge.ts similarity index 100% rename from src/widgets/PostItem/styles/desktop_view/active_badge.ts rename to src/widgets/PostItem/styles/comment_fist_layout/desktop_view/active_badge.ts diff --git a/src/widgets/PostItem/styles/desktop_view/body.ts b/src/widgets/PostItem/styles/comment_fist_layout/desktop_view/body.ts similarity index 100% rename from src/widgets/PostItem/styles/desktop_view/body.ts rename to src/widgets/PostItem/styles/comment_fist_layout/desktop_view/body.ts diff --git a/src/widgets/PostItem/styles/desktop_view/header.ts b/src/widgets/PostItem/styles/comment_fist_layout/desktop_view/header.ts similarity index 100% rename from src/widgets/PostItem/styles/desktop_view/header.ts rename to src/widgets/PostItem/styles/comment_fist_layout/desktop_view/header.ts diff --git a/src/widgets/PostItem/styles/desktop_view/index.ts b/src/widgets/PostItem/styles/comment_fist_layout/desktop_view/index.ts similarity index 100% rename from src/widgets/PostItem/styles/desktop_view/index.ts rename to src/widgets/PostItem/styles/comment_fist_layout/desktop_view/index.ts diff --git a/src/widgets/PostItem/styles/desktop_view/viewing_sign.ts b/src/widgets/PostItem/styles/comment_fist_layout/desktop_view/viewing_sign.ts similarity index 100% rename from src/widgets/PostItem/styles/desktop_view/viewing_sign.ts rename to src/widgets/PostItem/styles/comment_fist_layout/desktop_view/viewing_sign.ts diff --git a/src/widgets/PostItem/styles/desktop_view/views_count.ts b/src/widgets/PostItem/styles/comment_fist_layout/desktop_view/views_count.ts similarity index 100% rename from src/widgets/PostItem/styles/desktop_view/views_count.ts rename to src/widgets/PostItem/styles/comment_fist_layout/desktop_view/views_count.ts diff --git a/src/widgets/PostItem/styles/index.ts b/src/widgets/PostItem/styles/comment_fist_layout/index.ts old mode 100755 new mode 100644 similarity index 87% rename from src/widgets/PostItem/styles/index.ts rename to src/widgets/PostItem/styles/comment_fist_layout/index.ts index 5c33dfb6c..f7814ffaa --- a/src/widgets/PostItem/styles/index.ts +++ b/src/widgets/PostItem/styles/comment_fist_layout/index.ts @@ -3,8 +3,6 @@ import styled from 'styled-components' import type { TPost, TC11N } from '@/spec' import css, { theme } from '@/utils/css' -import { getOpacity } from './metrics' - type TWrapper = { entry: TPost c11n: TC11N @@ -13,7 +11,6 @@ type TWrapper = { export const Wrapper = styled.article` ${css.flex()}; position: relative; - opacity: ${({ entry, c11n }) => getOpacity(entry, c11n)}; padding-top: ${({ c11n }) => (c11n.contentDivider ? '10px' : '8px')}; padding-bottom: ${({ c11n }) => (c11n.contentDivider ? '14px' : '8px')}; diff --git a/src/widgets/PostItem/styles/mobile_view/body.ts b/src/widgets/PostItem/styles/comment_fist_layout/mobile_view/body.ts similarity index 100% rename from src/widgets/PostItem/styles/mobile_view/body.ts rename to src/widgets/PostItem/styles/comment_fist_layout/mobile_view/body.ts diff --git a/src/widgets/PostItem/styles/mobile_view/footer.ts b/src/widgets/PostItem/styles/comment_fist_layout/mobile_view/footer.ts similarity index 100% rename from src/widgets/PostItem/styles/mobile_view/footer.ts rename to src/widgets/PostItem/styles/comment_fist_layout/mobile_view/footer.ts diff --git a/src/widgets/PostItem/styles/mobile_view/header.ts b/src/widgets/PostItem/styles/comment_fist_layout/mobile_view/header.ts similarity index 100% rename from src/widgets/PostItem/styles/mobile_view/header.ts rename to src/widgets/PostItem/styles/comment_fist_layout/mobile_view/header.ts diff --git a/src/widgets/PostItem/styles/mobile_view/index.ts b/src/widgets/PostItem/styles/comment_fist_layout/mobile_view/index.ts similarity index 100% rename from src/widgets/PostItem/styles/mobile_view/index.ts rename to src/widgets/PostItem/styles/comment_fist_layout/mobile_view/index.ts diff --git a/src/widgets/PostItem/styles/metrics.ts b/src/widgets/PostItem/styles/metrics.ts deleted file mode 100644 index 22714cad8..000000000 --- a/src/widgets/PostItem/styles/metrics.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type { TPost, TC11N } from '@/spec' - -export const getOpacity = (entry: TPost, c11n: TC11N): number => { - const { viewerHasViewed } = entry - - if (c11n.isLogin && c11n.markViewed && viewerHasViewed) { - return 0.85 - } - - return 1 -} - -export const holder = 1 diff --git a/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/active_badge.ts b/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/active_badge.ts new file mode 100644 index 000000000..9baf30e26 --- /dev/null +++ b/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/active_badge.ts @@ -0,0 +1,24 @@ +import styled from 'styled-components' + +import css, { theme } from '@/utils/css' + +export const Wrapper = styled.div<{ hasComments: boolean }>` + ${css.flex('align-center')}; + display: ${({ hasComments }) => (hasComments ? 'flex' : 'none')}; + position: absolute; + top: 4px; + right: 0; + color: ${theme('thread.articleDigest')}; + margin-right: 1px; + margin-top: 8px; +` +export const Hint = styled.div` + ${css.flexColumn('align-start')}; + color: ${theme('thread.articleDigest')}; + width: 180px; + padding-left: 5px; + font-size: 13px; +` +export const TimeStr = styled.div` + color: ${theme('thread.articleTitle')}; +` diff --git a/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/body.ts b/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/body.ts new file mode 100644 index 000000000..b0ab4a544 --- /dev/null +++ b/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/body.ts @@ -0,0 +1,39 @@ +import styled from 'styled-components' + +import css, { theme } from '@/utils/css' + +import DotDivider from '@/widgets/DotDivider' + +export const Wrapper = styled.div`` +export const DigestWrapper = styled.div` + ${css.cutRest('500px')}; + color: ${theme('thread.articleDigest')}; + margin-top: 6px; + margin-bottom: 12px; + font-size: 13px; + cursor: pointer; + + &:hover { + color: ${theme('thread.articleTitle')}; + } + transition: color 0.2s; +` +export const Extra = styled.li` + position: relative; + ${css.flex('align-end')}; + color: ${theme('thread.extraInfo')}; + font-size: 12px; +` +export const LeftPart = styled.div` + ${css.flex('align-center')}; +` + +export const Dot = styled(DotDivider)` + background-color: ${theme('thread.articleDigest')}; + margin-right: 8px; +` +export const ArticleStateBadgeWrapper = styled.div` + position: absolute; + top: 41px; + right: -5px; +` diff --git a/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/header.ts b/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/header.ts new file mode 100644 index 000000000..d0abcfb41 --- /dev/null +++ b/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/header.ts @@ -0,0 +1,86 @@ +import styled from 'styled-components' + +import css, { theme } from '@/utils/css' +import CommentSVG from '@/icons/Comment' +import DotDivider from '@/widgets/DotDivider' + +export const Wrapper = styled.div` + ${css.flexColumn()}; +` +export const Topping = styled.div` + ${css.flex('align-center')}; + margin-bottom: 4px; +` +export const Main = styled.div` + ${css.flexGrow('align-center')}; + color: ${theme('thread.articleTitle')}; +` +export const Title = styled.div` + position: relative; + font-size: 15px; + font-weight: 600; + color: ${theme('thread.articleTitle')}; + + @media (max-width: 1450px) { + ${css.cutRest('500px')}; + } + @media (max-width: 1250px) { + ${css.cutRest('450px')}; + } + @media (max-width: 1100px) { + ${css.cutRest('350px')}; + } + + &:hover { + color: ${theme('thread.articleDigest')}; + cursor: pointer; + } + + transition: color 0.2s; +` +export const TitlePopInfo = styled.div` + padding: 4px 8px; +` +export const TitleLink = styled.div` + position: relative; + font-size: 15px; + margin-top: -1px; + color: ${theme('thread.articleLink')}; + margin-left: 10px; + opacity: 0.8; + text-decoration: underline; +` +export const CommentWrapper = styled.div` + ${css.flex('align-center')}; +` +export const CommentIcon = styled(CommentSVG)` + ${css.size(11)}; + fill: ${theme('thread.articleDigest')}; + opacity: 0.8; +` +export const CommentCount = styled.div` + font-size: 14px; + color: ${theme('thread.articleTitle')}; + margin-left: 10px; + margin-top: -1px; +` +export const AuthorName = styled.a` + display: block; + color: ${theme('thread.extraInfo')}; + font-size: 13px; + + text-decoration: none; + + &:hover { + color: ${theme('thread.extraInfo')}; + text-decoration: underline; + cursor: pointer; + } +` +export const PublishTime = styled.div` + font-size: 11px; +` +export const Dot = styled(DotDivider)` + background-color: ${theme('thread.articleDigest')}; + margin-right: 8px; +` diff --git a/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/index.ts b/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/index.ts new file mode 100644 index 000000000..498d3c296 --- /dev/null +++ b/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/index.ts @@ -0,0 +1,30 @@ +import styled from 'styled-components' + +import css, { theme } from '@/utils/css' +import Img from '@/Img' + +export const Wrapper = styled.div` + ${css.flex()}; + width: 100%; + position: relative; +` +export const Main = styled.div` + ${css.flexColumnGrow()}; + margin-left: 6px; +` +export const AvatarWrapper = styled.div` + ${css.flexColumn('align-both')}; +` +export const UpvoteWrapper = styled.div` + margin-top: 10px; + margin-left: 5px; +` +export const Avatar = styled(Img)` + ${css.circle(36)}; + fill: ${theme('thread.articleTitle')}; + opacity: ${theme('avatar.opacity')}; + margin-top: 2px; +` +export const SmallAvatar = styled(Avatar)` + ${css.size(35)}; +` diff --git a/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/viewing_sign.ts b/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/viewing_sign.ts new file mode 100644 index 000000000..e5d97c2e5 --- /dev/null +++ b/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/viewing_sign.ts @@ -0,0 +1,16 @@ +import styled from 'styled-components' + +import css, { animate, theme } from '@/utils/css' +import ViewSVG from '@/icons/View' + +export const Wrapper = styled.div` + ${css.flex()}; + position: absolute; + left: -30px; + top: 30px; + animation: ${animate.fadeInRight} 0.25s linear; +` +export const ViewIcon = styled(ViewSVG)` + ${css.size(10)}; + fill: ${theme('thread.articleDigest')}; +` diff --git a/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/views_count.ts b/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/views_count.ts new file mode 100644 index 000000000..624bb471f --- /dev/null +++ b/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/views_count.ts @@ -0,0 +1,26 @@ +import styled from 'styled-components' + +import css, { theme } from '@/utils/css' + +import ViewedSVG from '@/icons/article/Viewed' + +export const Wrapper = styled.div` + ${css.flex('align-center')}; +` +export const HighlightWrapper = styled(Wrapper)` + font-weight: 500; + background: ${theme('heightGradient')}; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +` +export const ViewsIcon = styled(ViewedSVG)<{ highlight?: boolean }>` + fill: ${({ highlight }) => + highlight ? theme('heightIcon') : theme('thread.extraInfo')}; + ${css.size(10)}; + margin-right: 4px; +` +export const ArticleStateBadgeWrapper = styled.div` + position: absolute; + top: 41px; + right: -5px; +` diff --git a/src/widgets/PostItem/styles/upvote_fist_layout/index.ts b/src/widgets/PostItem/styles/upvote_fist_layout/index.ts new file mode 100644 index 000000000..9c6def18a --- /dev/null +++ b/src/widgets/PostItem/styles/upvote_fist_layout/index.ts @@ -0,0 +1,26 @@ +import styled from 'styled-components' + +import type { TPost, TC11N } from '@/spec' +import css, { theme } from '@/utils/css' + +type TWrapper = { + entry: TPost + c11n: TC11N +} + +export const Wrapper = styled.article` + ${css.flex()}; + position: relative; + + padding-top: ${({ c11n }) => (c11n.contentDivider ? '10px' : '8px')}; + padding-bottom: ${({ c11n }) => (c11n.contentDivider ? '14px' : '8px')}; + border-bottom: ${({ c11n }) => (c11n.contentDivider ? '1px solid' : '0')}; + border-bottom-color: ${theme('thread.articleDivider')}; + margin-bottom: 5px; + + transition: all 0.2s; +` +export const Main = styled.div` + ${css.flexColumnGrow()}; +` +export const holder = 1 diff --git a/src/widgets/PostItem/styles/upvote_fist_layout/mobile_view/body.ts b/src/widgets/PostItem/styles/upvote_fist_layout/mobile_view/body.ts new file mode 100644 index 000000000..36871ec2f --- /dev/null +++ b/src/widgets/PostItem/styles/upvote_fist_layout/mobile_view/body.ts @@ -0,0 +1,35 @@ +import styled from 'styled-components' + +import css, { theme } from '@/utils/css' +import LinkSVG from '@/icons/Link' + +export const Wrapper = styled.div` + ${css.flexGrow('align-center')}; + margin-bottom: 10px; + color: ${theme('thread.articleTitle')}; +` +export const Title = styled.a` + color: ${theme('thread.articleTitle')}; + text-decoration: none; + font-size: 15.5px; + + &:hover { + text-decoration: none; + color: ${theme('thread.articleTitle')}; + } +` +export const TitleLink = styled.div` + position: relative; + font-size: 15px; + margin-top: -1px; + color: ${theme('thread.articleLink')}; + opacity: 0.8; + text-decoration: underline; +` +export const LinkIcon = styled(LinkSVG)` + fill: ${theme('thread.articleLink')}; + position: absolute; + top: 6px; + left: -5px; + ${css.size(12)}; +` diff --git a/src/widgets/PostItem/styles/upvote_fist_layout/mobile_view/footer.ts b/src/widgets/PostItem/styles/upvote_fist_layout/mobile_view/footer.ts new file mode 100644 index 000000000..f8e6ea0a1 --- /dev/null +++ b/src/widgets/PostItem/styles/upvote_fist_layout/mobile_view/footer.ts @@ -0,0 +1,81 @@ +import styled from 'styled-components' + +import css, { theme } from '@/utils/css' +import Img from '@/Img' + +export const Wrapper = styled.div` + margin-top: -10px; +` +export const CommunityLabel = styled.div` + color: inherit; + padding-left: 14px; + position: relative; + font-weight: bold; + opacity: 0.8; + text-decoration: none; + + &:hover { + color: inherit; + text-decoration: underline; + cursor: pointer; + } + + transition: opacity 0.2s; + + &:before { + content: ''; + position: absolute; + left: 1px; + top: 4px; + width: 6px; + height: 11px; + border-radius: 4px; + background-color: #49a5a0; + } +` +export const Extra = styled.li` + ${css.flex('align-center')}; + margin-top: 5px; + margin-bottom: 4px; + transition: opacity 0.2s; + font-size: 13px; + color: ${theme('thread.extraInfo')}; +` +export const ExtraIcon = styled(Img)` + ${css.size(15)}; + fill: #28a49b; + margin-right: 4px; + opacity: 0.8; +` +export const ExtraTexts = styled.div` + ${css.flex('align-center')}; + opacity: 0.7; +` +export const BodyDigest = styled.li` + margin-top: 5px; + color: ${theme('thread.articleDigest')}; + white-space: normal; + display: block; + font-size: 12px; + max-width: 96%; +` +export const CommentWrapper = styled.div` + ${css.flex('align-center')}; + align-self: flex-start; +` +export const CommentIcon = styled(Img)` + fill: ${theme('thread.articleDigest')}; + ${css.size(14)}; + margin-right: 4px; +` +export const CommentNum = styled.div` + color: ${theme('thread.articleTitle')}; + font-size: 0.9rem; +` +export const PublishLabel = styled.span` + display: inline; + ${css.media.mobile` + display: none; + margin-left: 3px; + `}; +` diff --git a/src/widgets/PostItem/styles/upvote_fist_layout/mobile_view/header.ts b/src/widgets/PostItem/styles/upvote_fist_layout/mobile_view/header.ts new file mode 100644 index 000000000..1e9310f66 --- /dev/null +++ b/src/widgets/PostItem/styles/upvote_fist_layout/mobile_view/header.ts @@ -0,0 +1,40 @@ +import styled from 'styled-components' + +import css, { theme } from '@/utils/css' +import Img from '@/Img' + +export const Wrapper = styled.div` + ${css.flex('align-end', 'justify-between')}; + color: ${theme('thread.articleDigest')}; + margin-left: 0; + margin-bottom: 3px; +` +export const AvatarWrapper = styled.div` + &:hover { + cursor: pointer; + } +` +export const Avatar = styled(Img)` + ${css.circle(16)}; + fill: ${theme('thread.articleTitle')}; + opacity: ${theme('avatar.opacity')}; + margin-right: 8px; +` +export const AuthorInfo = styled.div` + ${css.flex('align-center')}; +` +export const TimeStamp = styled.div` + font-size: 12px; + margin-top: 2px; +` +export const Brief = styled.div` + ${css.flexGrow('align-center')}; + margin-bottom: 10px; + color: ${theme('thread.articleTitle')}; + &:hover { + cursor: pointer; + } +` +export const TagListWrapper = styled.div` + margin-right: -3px; +` diff --git a/src/widgets/PostItem/styles/upvote_fist_layout/mobile_view/index.ts b/src/widgets/PostItem/styles/upvote_fist_layout/mobile_view/index.ts new file mode 100644 index 000000000..b7132fe7c --- /dev/null +++ b/src/widgets/PostItem/styles/upvote_fist_layout/mobile_view/index.ts @@ -0,0 +1,8 @@ +import styled from 'styled-components' + +import css from '@/utils/css' + +export const Wrapper = styled.div` + ${css.flexColumnGrow()}; +` +export const holder = 1 From bf76733cb876b46ef0be0f873b21c08da01bcb3b Mon Sep 17 00:00:00 2001 From: mydearxym Date: Fri, 27 May 2022 21:50:45 +0800 Subject: [PATCH 2/8] refactor: re-org files --- .../styles/post_viewer/index.tsx | 12 +-- src/widgets/Buttons/styles/icon_button.ts | 4 +- src/widgets/Common/index.ts | 4 +- src/widgets/KanbanItem/index.tsx | 2 +- src/widgets/Linker/styles/index.ts | 4 +- .../Loading/styles/article_content_loading.ts | 4 +- .../Loading/styles/lava_lamp_loading.ts | 4 +- .../Navigator/MainEntries/DesktopView.tsx | 2 +- src/widgets/NoticeBar/styles/index.ts | 4 +- .../CommentFirstLayout/DesktopView/Body.tsx | 2 +- .../DesktopView/ViewingSign.tsx | 27 ------- .../DesktopView/ViewsCount.tsx | 31 ------- .../CommentFirstLayout/DesktopView/index.tsx | 4 +- .../UpvoteFirstLayout/DesktopView/Body.tsx | 80 ------------------- .../UpvoteFirstLayout/DesktopView/Footer.tsx | 53 ++++++++++++ .../UpvoteFirstLayout/DesktopView/index.tsx | 41 +++------- .../DesktopView => }/ViewingSign.tsx | 10 +-- .../DesktopView => }/ViewsCount.tsx | 6 +- src/widgets/PostItem/index.tsx | 2 +- .../upvote_fist_layout/desktop_view/body.ts | 39 --------- .../upvote_fist_layout/desktop_view/footer.ts | 12 +++ .../upvote_fist_layout/desktop_view/index.ts | 28 +++---- .../desktop_view/viewing_sign.ts | 16 ---- .../desktop_view/views_count.ts | 26 ------ .../desktop_view => }/viewing_sign.ts | 4 +- .../desktop_view => }/views_count.ts | 0 src/widgets/TagsList/styles/index.ts | 4 +- src/widgets/Upvote/index.tsx | 68 +++++++++++----- src/widgets/Upvote/styles/index.ts | 12 +++ src/widgets/WordsCounter/styles/index.ts | 4 +- 30 files changed, 186 insertions(+), 323 deletions(-) delete mode 100644 src/widgets/PostItem/CommentFirstLayout/DesktopView/ViewingSign.tsx delete mode 100644 src/widgets/PostItem/CommentFirstLayout/DesktopView/ViewsCount.tsx delete mode 100644 src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Body.tsx create mode 100644 src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Footer.tsx rename src/widgets/PostItem/{UpvoteFirstLayout/DesktopView => }/ViewingSign.tsx (65%) rename src/widgets/PostItem/{UpvoteFirstLayout/DesktopView => }/ViewsCount.tsx (78%) delete mode 100644 src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/body.ts create mode 100644 src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/footer.ts delete mode 100644 src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/viewing_sign.ts delete mode 100644 src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/views_count.ts rename src/widgets/PostItem/styles/{comment_fist_layout/desktop_view => }/viewing_sign.ts (79%) rename src/widgets/PostItem/styles/{comment_fist_layout/desktop_view => }/views_count.ts (100%) create mode 100644 src/widgets/Upvote/styles/index.ts diff --git a/src/containers/viewer/ArticleViewer/styles/post_viewer/index.tsx b/src/containers/viewer/ArticleViewer/styles/post_viewer/index.tsx index 47cd1e736..7f13818e0 100644 --- a/src/containers/viewer/ArticleViewer/styles/post_viewer/index.tsx +++ b/src/containers/viewer/ArticleViewer/styles/post_viewer/index.tsx @@ -61,13 +61,15 @@ export const GoTopWrapper = styled.div<{ show: boolean }>` ${css.flex('align-end', 'justify-center')}; position: fixed; bottom: 40px; - left: 65px; - width: 140px; - height: 400px; - opacity: 0; + left: 102px; + width: 60px; + height: 40px; + opacity: 0.8; + + visibility: ${({ show }) => (show ? 'visible' : 'hidden')}; &:hover { - opacity: ${({ show }) => (show ? 1 : 0)}; + opacity: 1; } transition: opacity 0.2s; ` diff --git a/src/widgets/Buttons/styles/icon_button.ts b/src/widgets/Buttons/styles/icon_button.ts index 2ff26b52b..3fbfdf0b7 100644 --- a/src/widgets/Buttons/styles/icon_button.ts +++ b/src/widgets/Buttons/styles/icon_button.ts @@ -21,8 +21,8 @@ export const Wrapper = styled.div` margin-left: ${({ left }) => `${left || 0}px`}; margin-right: ${({ right }) => `${right || 0}px`}; - margin-top: ${({ top }) => `${top || 0}px`}; - margin-bottom: ${({ bottom }) => `${bottom || 0}px`}; + margin-top: ${({ top }) => `${top}px` || 0}; + margin-bottom: ${({ bottom }) => `${bottom}px` || 0}; ` export const Content = styled.div` z-index: 2; diff --git a/src/widgets/Common/index.ts b/src/widgets/Common/index.ts index 4f8204bae..76684d430 100755 --- a/src/widgets/Common/index.ts +++ b/src/widgets/Common/index.ts @@ -4,8 +4,8 @@ import type { TActive, TSpace } from '@/spec' import { theme } from '@/utils/css' export const Br = styled.div` - margin-top: ${({ top }) => `${top || 0}px`}; - margin-bottom: ${({ bottom }) => `${bottom || 0}px`}; + margin-top: ${({ top }) => `${top}px` || 0}; + margin-bottom: ${({ bottom }) => `${bottom}px` || 0}; ` export const Space = styled.span` margin-left: ${({ left }) => `${left}px` || 0}; diff --git a/src/widgets/KanbanItem/index.tsx b/src/widgets/KanbanItem/index.tsx index 5214c3088..a54395873 100644 --- a/src/widgets/KanbanItem/index.tsx +++ b/src/widgets/KanbanItem/index.tsx @@ -39,7 +39,7 @@ const KanbanItem: FC = ({ testid = 'gtd-item' }) => {
- 增加看板，发布日志，与常见问题的功能和其他 + 增加看板，更新日志，与常见问题的功能和其他 服务于团队开发流程，以社区服务为基础，提供反馈社区工具箱，各种个性化设置等等 diff --git a/src/widgets/Linker/styles/index.ts b/src/widgets/Linker/styles/index.ts index 4ef275903..2ea6381a2 100755 --- a/src/widgets/Linker/styles/index.ts +++ b/src/widgets/Linker/styles/index.ts @@ -12,8 +12,8 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ align-items: center; margin-left: ${({ left }) => `${left}px` || 0}; margin-right: ${({ right }) => `${right}px` || 0}; - margin-top: ${({ top }) => `${top || 0}px`}; - margin-bottom: ${({ bottom }) => `${bottom || 0}px`}; + margin-top: ${({ top }) => `${top}px` || 0}; + margin-bottom: ${({ bottom }) => `${bottom}px` || 0}; ` export const holder = 1 diff --git a/src/widgets/Loading/styles/article_content_loading.ts b/src/widgets/Loading/styles/article_content_loading.ts index cba09785c..161325016 100644 --- a/src/widgets/Loading/styles/article_content_loading.ts +++ b/src/widgets/Loading/styles/article_content_loading.ts @@ -5,8 +5,8 @@ import type { TSpace } from '@/spec' export const Wrapper = styled.div` margin-left: ${({ left }) => `${left}px` || 0}; margin-right: ${({ right }) => `${right}px` || 0}; - margin-top: ${({ top }) => `${top || 0}px`}; - margin-bottom: ${({ bottom }) => `${bottom || 0}px`}; + margin-top: ${({ top }) => `${top}px` || 0}; + margin-bottom: ${({ bottom }) => `${bottom}px` || 0}; ` // Config-page: http://danilowoz.com/create-react-content-loader/ diff --git a/src/widgets/Loading/styles/lava_lamp_loading.ts b/src/widgets/Loading/styles/lava_lamp_loading.ts index 2a497c725..06ff2ad21 100644 --- a/src/widgets/Loading/styles/lava_lamp_loading.ts +++ b/src/widgets/Loading/styles/lava_lamp_loading.ts @@ -23,8 +23,8 @@ export const Wrapper = styled.div` height: 18px; margin-left: ${({ left }) => `${left}px` || 0}; margin-right: ${({ right }) => `${right}px` || 0}; - margin-top: ${({ top }) => `${top || 0}px`}; - margin-bottom: ${({ bottom }) => `${bottom || 0}px`}; + margin-top: ${({ top }) => `${top}px` || 0}; + margin-bottom: ${({ bottom }) => `${bottom}px` || 0}; transform: ${({ size }) => getLavaLampScale(size)}; ` diff --git a/src/widgets/Navigator/MainEntries/DesktopView.tsx b/src/widgets/Navigator/MainEntries/DesktopView.tsx index 33faadd15..a08047101 100644 --- a/src/widgets/Navigator/MainEntries/DesktopView.tsx +++ b/src/widgets/Navigator/MainEntries/DesktopView.tsx @@ -36,7 +36,7 @@ const DesktopView: FC = () => { active={mainPath === ROUTE.COOL_GUIDE} testid={`header-${ROUTE.COOL_GUIDE}`} > - 发布日志 + 更新日志 {/* diff --git a/src/widgets/NoticeBar/styles/index.ts b/src/widgets/NoticeBar/styles/index.ts index 8daa0cd81..942f47ed6 100755 --- a/src/widgets/NoticeBar/styles/index.ts +++ b/src/widgets/NoticeBar/styles/index.ts @@ -25,8 +25,8 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ background: ${({ noBg }) => (noBg ? 'transparent' : '#FDF6E8')}; border-radius: 8px; - margin-top: ${({ top }) => `${top || 0}px`}; - margin-bottom: ${({ bottom }) => `${bottom || 0}px`}; + margin-top: ${({ top }) => `${top}px` || 0}; + margin-bottom: ${({ bottom }) => `${bottom}px` || 0}; margin-left: ${({ left }) => `${left}px` || 0}; margin-right: ${({ right }) => `${right}px` || 0}; ` diff --git a/src/widgets/PostItem/CommentFirstLayout/DesktopView/Body.tsx b/src/widgets/PostItem/CommentFirstLayout/DesktopView/Body.tsx index 62e6ddf17..7b704c2d0 100644 --- a/src/widgets/PostItem/CommentFirstLayout/DesktopView/Body.tsx +++ b/src/widgets/PostItem/CommentFirstLayout/DesktopView/Body.tsx @@ -14,7 +14,7 @@ import DigestSentence from '@/widgets/DigestSentence' // import UserCard from '@/widgets/Cards/UserCard' import Tooltip from '@/widgets/Tooltip' import ArticleStateBadge from '@/widgets/ArticleStateBadge' -import ViewsCount from './ViewsCount' +import ViewsCount from '../../ViewsCount' import { Wrapper, diff --git a/src/widgets/PostItem/CommentFirstLayout/DesktopView/ViewingSign.tsx b/src/widgets/PostItem/CommentFirstLayout/DesktopView/ViewingSign.tsx deleted file mode 100644 index 1b8676487..000000000 --- a/src/widgets/PostItem/CommentFirstLayout/DesktopView/ViewingSign.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { FC, memo } from 'react' - -import type { TPost } from '@/spec' -import useViewing from '@/hooks/useViewing' - -import { - Wrapper, - ViewIcon, -} from '../../styles/comment_fist_layout/desktop_view/viewing_sign' - -type TProps = { - article: TPost -} - -const ViewingSign: FC = ({ article }) => { - const viewingId = useViewing() - - if (article.id !== viewingId) return null - - return ( - - - - ) -} - -export default memo(ViewingSign) diff --git a/src/widgets/PostItem/CommentFirstLayout/DesktopView/ViewsCount.tsx b/src/widgets/PostItem/CommentFirstLayout/DesktopView/ViewsCount.tsx deleted file mode 100644 index d1e5abc27..000000000 --- a/src/widgets/PostItem/CommentFirstLayout/DesktopView/ViewsCount.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { FC, memo, Fragment } from 'react' - -import { - Wrapper, - ViewsIcon, - HighlightWrapper, -} from '../../styles/comment_fist_layout/desktop_view/views_count' - -type TProps = { - count: number -} - -const ViewsCount: FC = ({ count }) => { - return ( - - {count >= 100 ? ( - - - {count} - - ) : ( - - - {count} - - )} - - ) -} - -export default memo(ViewsCount) diff --git a/src/widgets/PostItem/CommentFirstLayout/DesktopView/index.tsx b/src/widgets/PostItem/CommentFirstLayout/DesktopView/index.tsx index 320772373..e49447313 100644 --- a/src/widgets/PostItem/CommentFirstLayout/DesktopView/index.tsx +++ b/src/widgets/PostItem/CommentFirstLayout/DesktopView/index.tsx @@ -6,7 +6,7 @@ import { UPVOTE_LAYOUT } from '@/constant' import { upvoteOnArticleList } from '@/utils/helper' import TheAvatar from '@/widgets/TheAvatar' -import ViewingSign from './ViewingSign' +import ViewingSign from '../../ViewingSign' import Header from './Header' import Body from './Body' @@ -58,7 +58,7 @@ const DigestView: FC = ({ curCommunity, entry }) => { )} - + diff --git a/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Body.tsx b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Body.tsx deleted file mode 100644 index cce584028..000000000 --- a/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Body.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { memo, FC } from 'react' -import dynamic from 'next/dynamic' - -import { EVENT, UPVOTE_LAYOUT } from '@/constant' - -import type { TCommunity, TPost } from '@/spec' -import { send } from '@/utils/helper' - -import Upvote from '@/widgets/Upvote' -import { Space, SpaceGrow } from '@/widgets/Common' - -// import ArticleStateBadge from '@/widgets/ArticleStateBadge' -import ViewsCount from './ViewsCount' - -import { - Wrapper, - DigestWrapper, - Dot, - Extra, - LeftPart, -} from '../../styles/upvote_fist_layout/desktop_view/body' - -const UserCard = dynamic(() => import('@/widgets/Cards/UserCard'), { - ssr: false, -}) - -const ActiveBadge = dynamic(() => import('./ActiveBadge'), { - ssr: false, -}) - -type TProps = { - item: TPost -} - -const Body: FC = ({ item }) => { - // console.log('# originalCommunity: ', originalCommunity) - const { upvotesCount, meta, viewerHasUpvoted } = item - - return ( - - send(EVENT.PREVIEW_ARTICLE, { article: item })} - > - {item.digest} - - - - - - - - - - - - {/* @ts-ignore */} - {/* - - {item.id === '239' && } - {item.id === '231' && } - {item.id === '227' && } - {item.id === '228' && ( - - )} - {item.id === '226' && ( - - )} - {item.id === '225' && } - */} - - - ) -} - -export default memo(Body) diff --git a/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Footer.tsx b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Footer.tsx new file mode 100644 index 000000000..67a4869a2 --- /dev/null +++ b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Footer.tsx @@ -0,0 +1,53 @@ +import { memo, FC } from 'react' + +import { UPVOTE_LAYOUT } from '@/constant' + +import type { TPost } from '@/spec' + +import Upvote from '@/widgets/Upvote' +import { Space } from '@/widgets/Common' + +import ArticleStateBadge from '@/widgets/ArticleStateBadge' +import ViewsCount from '../../ViewsCount' + +import { Wrapper } from '../../styles/upvote_fist_layout/desktop_view/footer' + +type TProps = { + item: TPost +} + +const Footer: FC = ({ item }) => { + const { upvotesCount, meta, viewerHasUpvoted } = item + + return ( + + + + {item.id === '239' && } + {item.id === '231' && } + {item.id === '227' && ( + + )} + {item.id === '228' && ( + + )} + {item.id === '226' && ( + + )} + {item.id === '225' && ( + + )} + + + + + ) +} + +export default memo(Footer) diff --git a/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/index.tsx b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/index.tsx index e4343dd3f..e95cbebbd 100644 --- a/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/index.tsx +++ b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/index.tsx @@ -1,24 +1,22 @@ import { FC, Fragment, memo, useEffect, useState } from 'react' import dynamic from 'next/dynamic' +import { EVENT } from '@/constant' import type { TCommunity, TPost } from '@/spec' -import { UPVOTE_LAYOUT } from '@/constant' -import { upvoteOnArticleList } from '@/utils/helper' -import TheAvatar from '@/widgets/TheAvatar' -import ViewingSign from './ViewingSign' +import { send } from '@/utils/helper' + +import ViewingSign from '../../ViewingSign' import Header from './Header' -import Body from './Body' +import Footer from './Footer' import { Wrapper, - AvatarWrapper, - UpvoteWrapper, Main, + DigestWrapper, } from '../../styles/upvote_fist_layout/desktop_view' -let Upvote = null let ArticleReadLabel = null let ArticlePinLabel = null @@ -37,7 +35,6 @@ const DigestView: FC = ({ curCommunity, entry }) => { // 尤其是在 Tab 切换的时候。手机端因为目前没有这些组件，性能暂无问题。 // 本不应该存在的无聊问题，蛋疼的解决办法， useEffect(() => { - Upvote = dynamic(() => import('@/widgets/Upvote'), { ssr: false }) ArticleReadLabel = dynamic(() => import('@/widgets/ArticleReadLabel'), { ssr: false, }) @@ -45,9 +42,7 @@ const DigestView: FC = ({ curCommunity, entry }) => { ssr: false, }) - setTimeout(() => { - setLoaded(true) - }, 200) + setTimeout(() => setLoaded(true), 200) }, []) return ( @@ -59,24 +54,14 @@ const DigestView: FC = ({ curCommunity, entry }) => { )} - {/* - - - {loaded && ( - - upvoteOnArticleList(entry, viewerHasUpvoted) - } - /> - )} - - */}
- + send(EVENT.PREVIEW_ARTICLE, { article: entry })} + > + {entry.digest} + +
) diff --git a/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/ViewingSign.tsx b/src/widgets/PostItem/ViewingSign.tsx similarity index 65% rename from src/widgets/PostItem/UpvoteFirstLayout/DesktopView/ViewingSign.tsx rename to src/widgets/PostItem/ViewingSign.tsx index 774350bc5..1c7c04283 100644 --- a/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/ViewingSign.tsx +++ b/src/widgets/PostItem/ViewingSign.tsx @@ -3,22 +3,20 @@ import { FC, memo } from 'react' import type { TPost } from '@/spec' import useViewing from '@/hooks/useViewing' -import { - Wrapper, - ViewIcon, -} from '../../styles/upvote_fist_layout/desktop_view/viewing_sign' +import { Wrapper, ViewIcon } from './styles/viewing_sign' type TProps = { article: TPost + top?: number } -const ViewingSign: FC = ({ article }) => { +const ViewingSign: FC = ({ article, top = 30 }) => { const viewingId = useViewing() if (article.id !== viewingId) return null return ( - + ) diff --git a/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/ViewsCount.tsx b/src/widgets/PostItem/ViewsCount.tsx similarity index 78% rename from src/widgets/PostItem/UpvoteFirstLayout/DesktopView/ViewsCount.tsx rename to src/widgets/PostItem/ViewsCount.tsx index 03739766d..77fdf3f26 100644 --- a/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/ViewsCount.tsx +++ b/src/widgets/PostItem/ViewsCount.tsx @@ -1,10 +1,6 @@ import { FC, memo, Fragment } from 'react' -import { - Wrapper, - ViewsIcon, - HighlightWrapper, -} from '../../styles/upvote_fist_layout/desktop_view/views_count' +import { Wrapper, ViewsIcon, HighlightWrapper } from './styles/views_count' type TProps = { count: number diff --git a/src/widgets/PostItem/index.tsx b/src/widgets/PostItem/index.tsx index 7d9a02417..52ba4cf08 100755 --- a/src/widgets/PostItem/index.tsx +++ b/src/widgets/PostItem/index.tsx @@ -36,7 +36,7 @@ const PostItem: FC = ({ }) => { return ( - {layout === 'upvote-first' ? ( + {layout === 'upvote2-first' ? ( ` - fill: ${({ highlight }) => - highlight ? theme('heightIcon') : theme('thread.extraInfo')}; - ${css.size(10)}; - margin-right: 4px; -` -export const ArticleStateBadgeWrapper = styled.div` - position: absolute; - top: 41px; - right: -5px; -` diff --git a/src/widgets/PostItem/styles/comment_fist_layout/desktop_view/viewing_sign.ts b/src/widgets/PostItem/styles/viewing_sign.ts similarity index 79% rename from src/widgets/PostItem/styles/comment_fist_layout/desktop_view/viewing_sign.ts rename to src/widgets/PostItem/styles/viewing_sign.ts index 45df8d080..0ecdd92bd 100644 --- a/src/widgets/PostItem/styles/comment_fist_layout/desktop_view/viewing_sign.ts +++ b/src/widgets/PostItem/styles/viewing_sign.ts @@ -3,11 +3,11 @@ import styled from 'styled-components' import css, { animate, theme } from '@/utils/css' import ViewSVG from '@/icons/View' -export const Wrapper = styled.div` +export const Wrapper = styled.div<{ top: number }>` ${css.flex()}; position: absolute; left: -30px; - top: 18px; + top: ${({ top }) => `${top}px`}; animation: ${animate.fadeInRight} 0.25s linear; ` export const ViewIcon = styled(ViewSVG)` diff --git a/src/widgets/PostItem/styles/comment_fist_layout/desktop_view/views_count.ts b/src/widgets/PostItem/styles/views_count.ts similarity index 100% rename from src/widgets/PostItem/styles/comment_fist_layout/desktop_view/views_count.ts rename to src/widgets/PostItem/styles/views_count.ts diff --git a/src/widgets/TagsList/styles/index.ts b/src/widgets/TagsList/styles/index.ts index 7d53caa7c..6fe4b5c24 100755 --- a/src/widgets/TagsList/styles/index.ts +++ b/src/widgets/TagsList/styles/index.ts @@ -10,8 +10,8 @@ export const Wrapper = styled.div` margin-left: ${({ left }) => `${left || 0}px`}; margin-right: ${({ right }) => `${right || 0}px`}; - margin-top: ${({ top }) => `${top || 0}px`}; - margin-bottom: ${({ bottom }) => `${bottom || 0}px`}; + margin-top: ${({ top }) => `${top}px` || 0}; + margin-bottom: ${({ bottom }) => `${bottom}px` || 0}; position: relative; margin-top: 1px; diff --git a/src/widgets/Upvote/index.tsx b/src/widgets/Upvote/index.tsx index ae07578f6..9f5ea4797 100755 --- a/src/widgets/Upvote/index.tsx +++ b/src/widgets/Upvote/index.tsx @@ -6,7 +6,7 @@ import { FC, memo } from 'react' -import type { TUser, TUpvoteLayout } from '@/spec' +import type { TUser, TUpvoteLayout, TSpace } from '@/spec' import { UPVOTE_LAYOUT } from '@/constant' import { buildLog } from '@/utils/logger' @@ -18,10 +18,12 @@ import PostListLayout from './PostListLayout' import GuideListLayout from './GuideListLayout' import BlogListLayout from './BlogListLayout' import ArticleLayout from './ArticleLayout' -import WorksArticleLayout from './WorksArticleLayout' -import WorksCardLayout from './WorksCardLayout' +// import WorksArticleLayout from './WorksArticleLayout' +// import WorksCardLayout from './WorksCardLayout' import StickerLayout from './StickerLayout' +import { Wrapper } from './styles' + /* eslint-disable-next-line */ const log = buildLog('c:Upvote:index') @@ -34,44 +36,70 @@ type TProps = { alias?: string // 觉得很赞(default), 觉得很酷(works), 学到了(blog), 感兴趣(meetup), 有意思(Radar) avatarList?: TUser[] onAction?: (did: boolean) => void -} +} & TSpace + +const Upvote: FC = ({ + type = UPVOTE_LAYOUT.DEFAULT, + left = 0, + right = 0, + top = 0, + bottom = 0, + ...restProps +}) => { + let Layout = null -const Upvote: FC = ({ type = UPVOTE_LAYOUT.DEFAULT, ...restProps }) => { switch (type) { case UPVOTE_LAYOUT.COMMENT: { - return + Layout = CommentLayout + break } case UPVOTE_LAYOUT.POST_LIST: { - return + Layout = PostListLayout + break } case UPVOTE_LAYOUT.GUIDE_LIST: { - return + Layout = GuideListLayout + break } case UPVOTE_LAYOUT.BLOG_LIST: { - return - } - case UPVOTE_LAYOUT.WORKS_ARTICLE: { - return - } - case UPVOTE_LAYOUT.WORKS_CARD: { - return + Layout = BlogListLayout + break } + // case UPVOTE_LAYOUT.WORKS_ARTICLE: { + // Layout = WorksArticleLayout + // break + // } + // case UPVOTE_LAYOUT.WORKS_CARD: { + // Layout = WorksCardLayout + // break + // } case UPVOTE_LAYOUT.ARTICLE: { - return + Layout = ArticleLayout + break } case UPVOTE_LAYOUT.KANBAN: { - return + Layout = KanbanLayout + break } case UPVOTE_LAYOUT.FIXED_HEADER: { - return + Layout = FixedHeaderLayout + break } case UPVOTE_LAYOUT.STICKER: { - return + Layout = StickerLayout + break } default: { - return + Layout = DefaultLayout + break } } + + return ( + + + + ) } export default memo(Upvote) diff --git a/src/widgets/Upvote/styles/index.ts b/src/widgets/Upvote/styles/index.ts new file mode 100644 index 000000000..04484275c --- /dev/null +++ b/src/widgets/Upvote/styles/index.ts @@ -0,0 +1,12 @@ +import styled from 'styled-components' + +import type { TSpace } from '@/spec' + +export const Wrapper = styled.div` + margin-left: ${({ left }) => `${left}px` || 0}; + margin-right: ${({ right }) => `${right}px` || 0}; + + margin-top: ${({ top }) => `${top}px` || 0}; + margin-bottom: ${({ bottom }) => `${bottom}px` || 0}; +` +export const Title = styled.div`` diff --git a/src/widgets/WordsCounter/styles/index.ts b/src/widgets/WordsCounter/styles/index.ts index b0724ffa6..00d55b3f6 100755 --- a/src/widgets/WordsCounter/styles/index.ts +++ b/src/widgets/WordsCounter/styles/index.ts @@ -7,8 +7,8 @@ export const Wrapper = styled.div` ${css.flex('align-end')}; margin-left: ${({ left }) => `${left}px` || 0}; margin-right: ${({ right }) => `${right}px` || 0}; - margin-top: ${({ top }) => `${top || 0}px`}; - margin-bottom: ${({ bottom }) => `${bottom || 0}px`}; + margin-top: ${({ top }) => `${top}px` || 0}; + margin-bottom: ${({ bottom }) => `${bottom}px` || 0}; ` export const Hint = styled.div` From 6272492089f16f470a22f6634534950d30c5247b Mon Sep 17 00:00:00 2001 From: mydearxym Date: Fri, 27 May 2022 22:12:29 +0800 Subject: [PATCH 3/8] refactor(post-item): item/entry -> article --- src/widgets/ArticlePinLabel/index.tsx | 6 ++-- src/widgets/ArticleReadLabel/ReadLabel.tsx | 4 +-- src/widgets/ArticleReadLabel/index.tsx | 10 +++--- src/widgets/BlogItem/DesktopView/index.tsx | 4 +-- src/widgets/Cards/UserCard.tsx | 2 +- src/widgets/JobItem/index.tsx | 4 +-- src/widgets/PagedArticles/ArticleList.tsx | 2 +- .../DesktopView/ActiveBadge.tsx | 12 +++---- .../CommentFirstLayout/DesktopView/Body.tsx | 34 +++++++++++-------- .../CommentFirstLayout/DesktopView/Header.tsx | 18 +++++----- .../CommentFirstLayout/DesktopView/index.tsx | 22 ++++++------ .../CommentFirstLayout/MobileView/Body.tsx | 14 ++++---- .../CommentFirstLayout/MobileView/Footer.tsx | 12 +++---- .../CommentFirstLayout/MobileView/Header.tsx | 16 ++++----- .../CommentFirstLayout/MobileView/index.tsx | 10 +++--- .../PostItem/CommentFirstLayout/index.tsx | 10 +++--- .../UpvoteFirstLayout/DesktopView/Footer.tsx | 20 +++++------ .../UpvoteFirstLayout/DesktopView/Header.tsx | 14 ++++---- .../UpvoteFirstLayout/DesktopView/index.tsx | 20 +++++------ .../UpvoteFirstLayout/MobileView/Body.tsx | 14 ++++---- .../UpvoteFirstLayout/MobileView/Footer.tsx | 12 +++---- .../UpvoteFirstLayout/MobileView/Header.tsx | 16 ++++----- .../UpvoteFirstLayout/MobileView/index.tsx | 10 +++--- .../PostItem/UpvoteFirstLayout/index.tsx | 10 +++--- src/widgets/PostItem/index.tsx | 8 ++--- .../styles/comment_fist_layout/index.ts | 3 +- .../styles/upvote_fist_layout/index.ts | 3 +- src/widgets/RadarItem/index.tsx | 4 +-- 28 files changed, 157 insertions(+), 157 deletions(-) diff --git a/src/widgets/ArticlePinLabel/index.tsx b/src/widgets/ArticlePinLabel/index.tsx index 682b4e179..f388cc5ad 100755 --- a/src/widgets/ArticlePinLabel/index.tsx +++ b/src/widgets/ArticlePinLabel/index.tsx @@ -15,12 +15,12 @@ const log = buildLog('c:ArticlePinLabel:index') export type TProps = { top?: number left?: number - entry: { + article: { isPinned?: boolean } } -const ArticlePinLabel: FC = ({ entry, top = 24, left = -30 }) => { - if (entry.isPinned) return +const ArticlePinLabel: FC = ({ article, top = 24, left = -30 }) => { + if (article.isPinned) return return null } diff --git a/src/widgets/ArticleReadLabel/ReadLabel.tsx b/src/widgets/ArticleReadLabel/ReadLabel.tsx index 37b9e3665..0e6e94f0e 100755 --- a/src/widgets/ArticleReadLabel/ReadLabel.tsx +++ b/src/widgets/ArticleReadLabel/ReadLabel.tsx @@ -4,14 +4,14 @@ import { useAccount } from '@/hooks' import { ReadedLabel } from './styles' import type { TProps } from './index' -const ReadLabel: FC = ({ entry, top, left }) => { +const ReadLabel: FC = ({ article, top, left }) => { const accountInfo = useAccount() const isLogin = !!accountInfo if (!isLogin) return null const { markViewed } = accountInfo.customization - const { viewerHasViewed } = entry + const { viewerHasViewed } = article if (markViewed && viewerHasViewed) { return diff --git a/src/widgets/ArticleReadLabel/index.tsx b/src/widgets/ArticleReadLabel/index.tsx index 0403eb39b..892b5c596 100755 --- a/src/widgets/ArticleReadLabel/index.tsx +++ b/src/widgets/ArticleReadLabel/index.tsx @@ -16,18 +16,18 @@ const log = buildLog('c:ArticleReadLabel:index') export type TProps = { top?: number left?: number - entry: { + article: { viewerHasViewed?: boolean - pin?: boolean + isPinned?: boolean } } -const ArticleReadLabel: FC = ({ entry, top = 24, left = -30 }) => { +const ArticleReadLabel: FC = ({ article, top = 24, left = -30 }) => { const accountInfo = useAccount() + const { isPinned, viewerHasViewed } = article - if (nilOrEmpty(accountInfo) || entry.pin) return null + if (nilOrEmpty(accountInfo) || isPinned) return null const { markViewed } = accountInfo.customization - const { viewerHasViewed } = entry // return if (markViewed && !viewerHasViewed) { diff --git a/src/widgets/BlogItem/DesktopView/index.tsx b/src/widgets/BlogItem/DesktopView/index.tsx index e60a7892f..2e2853c8e 100644 --- a/src/widgets/BlogItem/DesktopView/index.tsx +++ b/src/widgets/BlogItem/DesktopView/index.tsx @@ -21,8 +21,8 @@ type TProps = { const DigestView: FC = ({ entry }) => { return ( - - + +
diff --git a/src/widgets/Cards/UserCard.tsx b/src/widgets/Cards/UserCard.tsx index d5477a701..5aefc21df 100644 --- a/src/widgets/Cards/UserCard.tsx +++ b/src/widgets/Cards/UserCard.tsx @@ -11,7 +11,7 @@ import { Wrapper, Avatar, Info, - ShortBio, + // ShortBio, Header, Title, Nickname, diff --git a/src/widgets/JobItem/index.tsx b/src/widgets/JobItem/index.tsx index 7a800afab..afb670479 100755 --- a/src/widgets/JobItem/index.tsx +++ b/src/widgets/JobItem/index.tsx @@ -27,8 +27,8 @@ type TProps = { const JobItem: FC = ({ entry, c11n }) => { return ( - - + + ) diff --git a/src/widgets/PagedArticles/ArticleList.tsx b/src/widgets/PagedArticles/ArticleList.tsx index 6fa754f7d..9caff4015 100755 --- a/src/widgets/PagedArticles/ArticleList.tsx +++ b/src/widgets/PagedArticles/ArticleList.tsx @@ -70,7 +70,7 @@ const ArticleList = (props) => { {entries.map((entry) => ( diff --git a/src/widgets/PostItem/CommentFirstLayout/DesktopView/ActiveBadge.tsx b/src/widgets/PostItem/CommentFirstLayout/DesktopView/ActiveBadge.tsx index 61f928f9a..64952a3f1 100644 --- a/src/widgets/PostItem/CommentFirstLayout/DesktopView/ActiveBadge.tsx +++ b/src/widgets/PostItem/CommentFirstLayout/DesktopView/ActiveBadge.tsx @@ -13,15 +13,15 @@ import { } from '../../styles/comment_fist_layout/desktop_view/active_badge' type TProps = { - item: TArticle + article: TArticle } -const ActiveBadge: FC = ({ item }) => { - const isArchived = item.commentsCount === 24 +const ActiveBadge: FC = ({ article }) => { + const isArchived = article.commentsCount === 24 const icon = isArchived ? SVG.ARCHIVED : SVG.ACTIVITY return ( - 0}> + 0}> = ({ item }) => {
最后回复时间:
- + } @@ -37,7 +37,7 @@ const ActiveBadge: FC = ({ item }) => { hintPlacement="bottom" hintDelay={0} /> - + ) } diff --git a/src/widgets/PostItem/CommentFirstLayout/DesktopView/Body.tsx b/src/widgets/PostItem/CommentFirstLayout/DesktopView/Body.tsx index 7b704c2d0..35490a792 100644 --- a/src/widgets/PostItem/CommentFirstLayout/DesktopView/Body.tsx +++ b/src/widgets/PostItem/CommentFirstLayout/DesktopView/Body.tsx @@ -42,12 +42,12 @@ const ActiveBadge = dynamic(() => import('./ActiveBadge'), { type TProps = { curCommunity: TCommunity | null - item: TPost + article: TPost } -const Body: FC = ({ item, curCommunity }) => { +const Body: FC = ({ article, curCommunity }) => { // console.log('# originalCommunity: ', originalCommunity) - const { originalCommunity, author } = item + const { originalCommunity, author } = article const showOriginalCommunity = curCommunity === null || curCommunity.raw !== originalCommunity.raw @@ -59,7 +59,7 @@ const Body: FC = ({ item, curCommunity }) => { } + content={} placement="right" delay={1500} > @@ -88,35 +88,39 @@ const Body: FC = ({ item, curCommunity }) => { - + - + {/* @ts-ignore */} - + - {item.id === '239' && } - {item.id === '231' && } - {item.id === '227' && } - {item.id === '228' && ( + {article.id === '239' && } + {article.id === '231' && } + {article.id === '227' && ( + + )} + {article.id === '228' && ( )} - {item.id === '226' && ( + {article.id === '226' && ( )} - {item.id === '225' && } + {article.id === '225' && ( + + )} send(EVENT.PREVIEW_ARTICLE, { article: item })} + onPreview={() => send(EVENT.PREVIEW_ARTICLE, { article })} > - {item.digest} + {article.digest} ) diff --git a/src/widgets/PostItem/CommentFirstLayout/DesktopView/Header.tsx b/src/widgets/PostItem/CommentFirstLayout/DesktopView/Header.tsx index 25ca3f07a..15ea08f2a 100644 --- a/src/widgets/PostItem/CommentFirstLayout/DesktopView/Header.tsx +++ b/src/widgets/PostItem/CommentFirstLayout/DesktopView/Header.tsx @@ -20,26 +20,26 @@ const TagsList = dynamic(() => import('@/widgets/TagsList'), { }) type TProps = { - item: TPost + article: TPost } -const Header: FC = ({ item }) => { +const Header: FC = ({ article }) => { // const gotoArticle = useCallback(() => { - // Router.push(`/${ARTICLE_THREAD.POST}/${item.id}`) - // }, [item.id]) + // Router.push(`/${ARTICLE_THREAD.POST}/${article.id}`) + // }, [article.id]) return ( - {/* send(EVENT.PREVIEW_ARTICLE, { article: item })}> */} - <Title onClick={() => callWallpaperEditor()}>{item.title} + {/* send(EVENT.PREVIEW_ARTICLE, { article: article })}> */} + <Title onClick={() => callWallpaperEditor()}>{article.title} {/* @ts-ignore */} - + diff --git a/src/widgets/PostItem/CommentFirstLayout/DesktopView/index.tsx b/src/widgets/PostItem/CommentFirstLayout/DesktopView/index.tsx index e49447313..6279471f6 100644 --- a/src/widgets/PostItem/CommentFirstLayout/DesktopView/index.tsx +++ b/src/widgets/PostItem/CommentFirstLayout/DesktopView/index.tsx @@ -24,13 +24,13 @@ let ArticlePinLabel = null type TProps = { curCommunity: TCommunity | null - entry: TPost + article: TPost // onUserSelect?: (obj: TUser) => void // onAuthorSelect?: (obj: TAccount) => void } -const DigestView: FC = ({ curCommunity, entry }) => { +const DigestView: FC = ({ curCommunity, article }) => { const [loaded, setLoaded] = useState(false) // 如果同步渲染 Upvote, ArticleReadLabel, ArticlePinLabel 等组件会导致难以忍受的卡顿 @@ -54,29 +54,29 @@ const DigestView: FC = ({ curCommunity, entry }) => { {loaded && ( - - + + )} - + - + {loaded && ( - upvoteOnArticleList(entry, viewerHasUpvoted) + upvoteOnArticleList(article, viewerHasUpvoted) } /> )}
-
- +
+
) diff --git a/src/widgets/PostItem/CommentFirstLayout/MobileView/Body.tsx b/src/widgets/PostItem/CommentFirstLayout/MobileView/Body.tsx index a814d1d12..b1ad8b35b 100644 --- a/src/widgets/PostItem/CommentFirstLayout/MobileView/Body.tsx +++ b/src/widgets/PostItem/CommentFirstLayout/MobileView/Body.tsx @@ -13,21 +13,21 @@ import { } from '../../styles/comment_fist_layout/mobile_view/body' type TProps = { - item: TPost + article: TPost } -const Body: FC = ({ item }) => { +const Body: FC = ({ article }) => { const gotoArticle = useCallback(() => { - Router.push(`/${ARTICLE_THREAD.POST}/${item.id}`) - }, [item.id]) + Router.push(`/${ARTICLE_THREAD.POST}/${article.id}`) + }, [article.id]) return ( - {item.title} - {item.linkAddr && ( + {article.title} + {article.linkAddr && ( - {parseDomain(item.linkAddr)} + {parseDomain(article.linkAddr)} )} diff --git a/src/widgets/PostItem/CommentFirstLayout/MobileView/Footer.tsx b/src/widgets/PostItem/CommentFirstLayout/MobileView/Footer.tsx index 6fa68b3d1..de966a33e 100644 --- a/src/widgets/PostItem/CommentFirstLayout/MobileView/Footer.tsx +++ b/src/widgets/PostItem/CommentFirstLayout/MobileView/Footer.tsx @@ -16,12 +16,12 @@ import { } from '../../styles/comment_fist_layout/mobile_view/footer' type TProps = { - item: TPost + article: TPost curCommunity: TCommunity } -const Footer: FC = ({ item, curCommunity }) => { - const { originalCommunity } = item +const Footer: FC = ({ article, curCommunity }) => { + const { originalCommunity } = article const showOriginalCommunity = curCommunity === null || curCommunity?.raw !== originalCommunity.raw @@ -40,13 +40,13 @@ const Footer: FC = ({ item, curCommunity }) => { - {item.views} + {article.views} - {item.commentsCount} + {article.commentsCount} - {cutRest(item.digest, 20)} + {cutRest(article.digest, 20)} ) } diff --git a/src/widgets/PostItem/CommentFirstLayout/MobileView/Header.tsx b/src/widgets/PostItem/CommentFirstLayout/MobileView/Header.tsx index 7e1770d3b..052a22aa7 100644 --- a/src/widgets/PostItem/CommentFirstLayout/MobileView/Header.tsx +++ b/src/widgets/PostItem/CommentFirstLayout/MobileView/Header.tsx @@ -17,28 +17,28 @@ import { } from '../../styles/comment_fist_layout/mobile_view/header' type TProps = { - item: TPost + article: TPost onAuthorSelect?: (obj: TAccount) => void } -const Header: FC = ({ item, onAuthorSelect }) => { +const Header: FC = ({ article, onAuthorSelect }) => { return ( - onAuthorSelect(item.author)}> + onAuthorSelect(article.author)}> } + src={article.author.avatar} + fallback={} /> -
{item.author.nickname}
+
{article.author.nickname}
- + - + ) diff --git a/src/widgets/PostItem/CommentFirstLayout/MobileView/index.tsx b/src/widgets/PostItem/CommentFirstLayout/MobileView/index.tsx index 7d049b3af..8e7d92fd3 100644 --- a/src/widgets/PostItem/CommentFirstLayout/MobileView/index.tsx +++ b/src/widgets/PostItem/CommentFirstLayout/MobileView/index.tsx @@ -9,17 +9,17 @@ import Footer from './Footer' import { Wrapper } from '../../styles/comment_fist_layout/mobile_view' type TProps = { - entry: TPost + article: TPost curCommunity: TCommunity | null onAuthorSelect?: (obj: TAccount) => void } -const MobileView: FC = ({ entry, curCommunity, onAuthorSelect }) => { +const MobileView: FC = ({ article, curCommunity, onAuthorSelect }) => { return ( -
- -
+
+ +
) } diff --git a/src/widgets/PostItem/CommentFirstLayout/index.tsx b/src/widgets/PostItem/CommentFirstLayout/index.tsx index f967ecb96..51499e46c 100644 --- a/src/widgets/PostItem/CommentFirstLayout/index.tsx +++ b/src/widgets/PostItem/CommentFirstLayout/index.tsx @@ -21,7 +21,7 @@ const log = buildLog('c:PostItem:index') type TProps = { curCommunity: TCommunity | null - entry: TPost + article: TPost c11n: TC11N onUserSelect?: (obj: TUser) => void @@ -30,18 +30,18 @@ type TProps = { const PostItem: FC = ({ curCommunity, - entry, + article, onUserSelect = log, onAuthorSelect = log, c11n, }) => { return ( - + {!isMobile ? ( - + ) : ( diff --git a/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Footer.tsx b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Footer.tsx index 67a4869a2..7a74ada42 100644 --- a/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Footer.tsx +++ b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Footer.tsx @@ -13,11 +13,11 @@ import ViewsCount from '../../ViewsCount' import { Wrapper } from '../../styles/upvote_fist_layout/desktop_view/footer' type TProps = { - item: TPost + article: TPost } -const Footer: FC = ({ item }) => { - const { upvotesCount, meta, viewerHasUpvoted } = item +const Footer: FC = ({ article }) => { + const { upvotesCount, meta, viewerHasUpvoted } = article return ( @@ -29,23 +29,23 @@ const Footer: FC = ({ item }) => { left={-2} /> - {item.id === '239' && } - {item.id === '231' && } - {item.id === '227' && ( + {article.id === '239' && } + {article.id === '231' && } + {article.id === '227' && ( )} - {item.id === '228' && ( + {article.id === '228' && ( )} - {item.id === '226' && ( + {article.id === '226' && ( )} - {item.id === '225' && ( + {article.id === '225' && ( )} - + ) } diff --git a/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Header.tsx b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Header.tsx index 081cf4812..76113f61a 100644 --- a/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Header.tsx +++ b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Header.tsx @@ -31,11 +31,11 @@ const TagsList = dynamic(() => import('@/widgets/TagsList'), { }) type TProps = { - item: TPost + article: TPost } -const Header: FC = ({ item }) => { - const { author, commentsCount } = item +const Header: FC = ({ article }) => { + const { author, commentsCount } = article return ( @@ -52,14 +52,14 @@ const Header: FC = ({ item }) => { - +
- {/* send(EVENT.PREVIEW_ARTICLE, { article: item })}> */} - <Title onClick={() => callWallpaperEditor()}>{item.title} + {/* send(EVENT.PREVIEW_ARTICLE, { article: article})}> */} + <Title onClick={() => callWallpaperEditor()}>{article.title} {/* @ts-ignore */} - + {commentsCount !== 0 && ( diff --git a/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/index.tsx b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/index.tsx index e95cbebbd..ed7f4bd4c 100644 --- a/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/index.tsx +++ b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/index.tsx @@ -22,13 +22,13 @@ let ArticlePinLabel = null type TProps = { curCommunity: TCommunity | null - entry: TPost + article: TPost // onUserSelect?: (obj: TUser) => void // onAuthorSelect?: (obj: TAccount) => void } -const DigestView: FC = ({ curCommunity, entry }) => { +const DigestView: FC = ({ curCommunity, article }) => { const [loaded, setLoaded] = useState(false) // 如果同步渲染 Upvote, ArticleReadLabel, ArticlePinLabel 等组件会导致难以忍受的卡顿 @@ -49,19 +49,17 @@ const DigestView: FC = ({ curCommunity, entry }) => { {loaded && ( - - + + )} - +
-
- send(EVENT.PREVIEW_ARTICLE, { article: entry })} - > - {entry.digest} +
+ send(EVENT.PREVIEW_ARTICLE, { article })}> + {article.digest} -
+
) diff --git a/src/widgets/PostItem/UpvoteFirstLayout/MobileView/Body.tsx b/src/widgets/PostItem/UpvoteFirstLayout/MobileView/Body.tsx index a814d1d12..b1ad8b35b 100644 --- a/src/widgets/PostItem/UpvoteFirstLayout/MobileView/Body.tsx +++ b/src/widgets/PostItem/UpvoteFirstLayout/MobileView/Body.tsx @@ -13,21 +13,21 @@ import { } from '../../styles/comment_fist_layout/mobile_view/body' type TProps = { - item: TPost + article: TPost } -const Body: FC = ({ item }) => { +const Body: FC = ({ article }) => { const gotoArticle = useCallback(() => { - Router.push(`/${ARTICLE_THREAD.POST}/${item.id}`) - }, [item.id]) + Router.push(`/${ARTICLE_THREAD.POST}/${article.id}`) + }, [article.id]) return ( - {item.title} - {item.linkAddr && ( + {article.title} + {article.linkAddr && ( - {parseDomain(item.linkAddr)} + {parseDomain(article.linkAddr)} )} diff --git a/src/widgets/PostItem/UpvoteFirstLayout/MobileView/Footer.tsx b/src/widgets/PostItem/UpvoteFirstLayout/MobileView/Footer.tsx index 6fa68b3d1..de966a33e 100644 --- a/src/widgets/PostItem/UpvoteFirstLayout/MobileView/Footer.tsx +++ b/src/widgets/PostItem/UpvoteFirstLayout/MobileView/Footer.tsx @@ -16,12 +16,12 @@ import { } from '../../styles/comment_fist_layout/mobile_view/footer' type TProps = { - item: TPost + article: TPost curCommunity: TCommunity } -const Footer: FC = ({ item, curCommunity }) => { - const { originalCommunity } = item +const Footer: FC = ({ article, curCommunity }) => { + const { originalCommunity } = article const showOriginalCommunity = curCommunity === null || curCommunity?.raw !== originalCommunity.raw @@ -40,13 +40,13 @@ const Footer: FC = ({ item, curCommunity }) => { - {item.views} + {article.views} - {item.commentsCount} + {article.commentsCount} - {cutRest(item.digest, 20)} + {cutRest(article.digest, 20)} ) } diff --git a/src/widgets/PostItem/UpvoteFirstLayout/MobileView/Header.tsx b/src/widgets/PostItem/UpvoteFirstLayout/MobileView/Header.tsx index 7e1770d3b..052a22aa7 100644 --- a/src/widgets/PostItem/UpvoteFirstLayout/MobileView/Header.tsx +++ b/src/widgets/PostItem/UpvoteFirstLayout/MobileView/Header.tsx @@ -17,28 +17,28 @@ import { } from '../../styles/comment_fist_layout/mobile_view/header' type TProps = { - item: TPost + article: TPost onAuthorSelect?: (obj: TAccount) => void } -const Header: FC = ({ item, onAuthorSelect }) => { +const Header: FC = ({ article, onAuthorSelect }) => { return ( - onAuthorSelect(item.author)}> + onAuthorSelect(article.author)}> } + src={article.author.avatar} + fallback={} /> -
{item.author.nickname}
+
{article.author.nickname}
- + - + ) diff --git a/src/widgets/PostItem/UpvoteFirstLayout/MobileView/index.tsx b/src/widgets/PostItem/UpvoteFirstLayout/MobileView/index.tsx index 7d049b3af..8e7d92fd3 100644 --- a/src/widgets/PostItem/UpvoteFirstLayout/MobileView/index.tsx +++ b/src/widgets/PostItem/UpvoteFirstLayout/MobileView/index.tsx @@ -9,17 +9,17 @@ import Footer from './Footer' import { Wrapper } from '../../styles/comment_fist_layout/mobile_view' type TProps = { - entry: TPost + article: TPost curCommunity: TCommunity | null onAuthorSelect?: (obj: TAccount) => void } -const MobileView: FC = ({ entry, curCommunity, onAuthorSelect }) => { +const MobileView: FC = ({ article, curCommunity, onAuthorSelect }) => { return ( -
- -
+
+ +
) } diff --git a/src/widgets/PostItem/UpvoteFirstLayout/index.tsx b/src/widgets/PostItem/UpvoteFirstLayout/index.tsx index 724b65d89..7cc96e52b 100644 --- a/src/widgets/PostItem/UpvoteFirstLayout/index.tsx +++ b/src/widgets/PostItem/UpvoteFirstLayout/index.tsx @@ -21,7 +21,7 @@ const log = buildLog('c:PostItem:index') type TProps = { curCommunity: TCommunity | null - entry: TPost + article: TPost c11n: TC11N onUserSelect?: (obj: TUser) => void @@ -30,18 +30,18 @@ type TProps = { const PostItem: FC = ({ curCommunity, - entry, + article, onUserSelect = log, onAuthorSelect = log, c11n, }) => { return ( - + {!isMobile ? ( - + ) : ( diff --git a/src/widgets/PostItem/index.tsx b/src/widgets/PostItem/index.tsx index 52ba4cf08..7428e05b0 100755 --- a/src/widgets/PostItem/index.tsx +++ b/src/widgets/PostItem/index.tsx @@ -18,7 +18,7 @@ const log = buildLog('c:PostItem:index') type TProps = { curCommunity: TCommunity | null - entry: TPost + article: TPost c11n: TC11N layout?: string @@ -28,7 +28,7 @@ type TProps = { const PostItem: FC = ({ curCommunity, - entry, + article, onUserSelect = log, onAuthorSelect = log, layout = 'upvote-first', @@ -39,14 +39,14 @@ const PostItem: FC = ({ {layout === 'upvote2-first' ? ( ) : ( diff --git a/src/widgets/PostItem/styles/comment_fist_layout/index.ts b/src/widgets/PostItem/styles/comment_fist_layout/index.ts index f7814ffaa..bbf2e7198 100644 --- a/src/widgets/PostItem/styles/comment_fist_layout/index.ts +++ b/src/widgets/PostItem/styles/comment_fist_layout/index.ts @@ -1,10 +1,9 @@ import styled from 'styled-components' -import type { TPost, TC11N } from '@/spec' +import type { TC11N } from '@/spec' import css, { theme } from '@/utils/css' type TWrapper = { - entry: TPost c11n: TC11N } diff --git a/src/widgets/PostItem/styles/upvote_fist_layout/index.ts b/src/widgets/PostItem/styles/upvote_fist_layout/index.ts index 9c6def18a..3007f2b78 100644 --- a/src/widgets/PostItem/styles/upvote_fist_layout/index.ts +++ b/src/widgets/PostItem/styles/upvote_fist_layout/index.ts @@ -1,10 +1,9 @@ import styled from 'styled-components' -import type { TPost, TC11N } from '@/spec' +import type { TC11N } from '@/spec' import css, { theme } from '@/utils/css' type TWrapper = { - entry: TPost c11n: TC11N } diff --git a/src/widgets/RadarItem/index.tsx b/src/widgets/RadarItem/index.tsx index 5b2c42734..8a6b4aa55 100755 --- a/src/widgets/RadarItem/index.tsx +++ b/src/widgets/RadarItem/index.tsx @@ -27,8 +27,8 @@ type TProps = { const RadarItem: FC = ({ entry, c11n }) => { return ( - - + + ) From 6fcafd93af97b545f9b92c21bb1523b984ae92bd Mon Sep 17 00:00:00 2001 From: mydearxym Date: Fri, 27 May 2022 22:15:25 +0800 Subject: [PATCH 4/8] refactor(user-card): props item -> user --- src/containers/tool/ArticleSticker/CommentSticker.tsx | 2 +- src/widgets/BlogItem/DesktopView/Body.tsx | 2 +- src/widgets/Cards/UserCard.tsx | 6 +++--- src/widgets/Facepile/RealAvatar.tsx | 2 +- src/widgets/Header/DesktopView/ArticleLayout.tsx | 2 +- .../PostItem/CommentFirstLayout/DesktopView/Body.tsx | 2 +- .../PostItem/UpvoteFirstLayout/DesktopView/Header.tsx | 2 +- 7 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/containers/tool/ArticleSticker/CommentSticker.tsx b/src/containers/tool/ArticleSticker/CommentSticker.tsx index bdb412853..fc2a243b8 100644 --- a/src/containers/tool/ArticleSticker/CommentSticker.tsx +++ b/src/containers/tool/ArticleSticker/CommentSticker.tsx @@ -48,7 +48,7 @@ const CommentSticker: FC = ({ show, commentsState }) => { } + content={} > = ({ item }) => { } + content={} placement="bottom-start" delay={500} > diff --git a/src/widgets/Cards/UserCard.tsx b/src/widgets/Cards/UserCard.tsx index 5aefc21df..fa027581d 100644 --- a/src/widgets/Cards/UserCard.tsx +++ b/src/widgets/Cards/UserCard.tsx @@ -20,11 +20,11 @@ import { } from './styles/user_card' type TProps = { - item: TUser | TAccount + user: TUser | TAccount } -const UserCard: FC = ({ item }) => { - const { avatar, nickname, login, bio } = item +const UserCard: FC = ({ user }) => { + const { avatar, nickname, login, bio } = user return (
diff --git a/src/widgets/Facepile/RealAvatar.tsx b/src/widgets/Facepile/RealAvatar.tsx index e4fa0af2b..9c4965f79 100644 --- a/src/widgets/Facepile/RealAvatar.tsx +++ b/src/widgets/Facepile/RealAvatar.tsx @@ -33,7 +33,7 @@ const RealAvatar: FC = ({ return ( } + content={} delay={0} contentHeight={getAvatarSize(size, 'number') as string} placement={popCardPlacement} diff --git a/src/widgets/Header/DesktopView/ArticleLayout.tsx b/src/widgets/Header/DesktopView/ArticleLayout.tsx index 0264ca911..2f68cfbb0 100644 --- a/src/widgets/Header/DesktopView/ArticleLayout.tsx +++ b/src/widgets/Header/DesktopView/ArticleLayout.tsx @@ -43,7 +43,7 @@ const ArticleHeader: FC = ({ metric, community, accountInfo }) => { ) : ( } + content={} delay={0} placement="bottom" interactive={false} diff --git a/src/widgets/PostItem/CommentFirstLayout/DesktopView/Body.tsx b/src/widgets/PostItem/CommentFirstLayout/DesktopView/Body.tsx index 35490a792..282db9e0b 100644 --- a/src/widgets/PostItem/CommentFirstLayout/DesktopView/Body.tsx +++ b/src/widgets/PostItem/CommentFirstLayout/DesktopView/Body.tsx @@ -75,7 +75,7 @@ const Body: FC = ({ article, curCommunity }) => { } + content={} placement="right" delay={500} > diff --git a/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Header.tsx b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Header.tsx index 76113f61a..5d64109ba 100644 --- a/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Header.tsx +++ b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Header.tsx @@ -42,7 +42,7 @@ const Header: FC = ({ article }) => { } + content={} placement="right" delay={500} > From 446d6f77fee94772986f1a5974e6a2fe0bcbbac9 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Fri, 27 May 2022 23:04:57 +0800 Subject: [PATCH 5/8] refactor(layout): adjust comments-first layout --- .../CommentFirstLayout/DesktopView/Body.tsx | 26 +++++++------ src/widgets/PostItem/CommentsCount.tsx | 39 +++++++++++++++++++ .../UpvoteFirstLayout/DesktopView/Header.tsx | 11 ++---- src/widgets/PostItem/ViewsCount.tsx | 2 +- src/widgets/PostItem/index.tsx | 2 +- .../desktop_view/active_badge.ts | 5 +-- .../comment_fist_layout/desktop_view/body.ts | 21 +++++++++- src/widgets/PostItem/styles/comments_count.ts | 23 +++++++++++ .../upvote_fist_layout/desktop_view/header.ts | 16 +------- src/widgets/PostItem/styles/views_count.ts | 11 ++---- 10 files changed, 108 insertions(+), 48 deletions(-) create mode 100644 src/widgets/PostItem/CommentsCount.tsx create mode 100644 src/widgets/PostItem/styles/comments_count.ts diff --git a/src/widgets/PostItem/CommentFirstLayout/DesktopView/Body.tsx b/src/widgets/PostItem/CommentFirstLayout/DesktopView/Body.tsx index 282db9e0b..43c65180b 100644 --- a/src/widgets/PostItem/CommentFirstLayout/DesktopView/Body.tsx +++ b/src/widgets/PostItem/CommentFirstLayout/DesktopView/Body.tsx @@ -9,15 +9,17 @@ import { EVENT } from '@/constant' import { send, changeToCommunity } from '@/utils/helper' import { Space, SpaceGrow } from '@/widgets/Common' -import DigestSentence from '@/widgets/DigestSentence' // import CommunityCard from '@/widgets/Cards/CommunityCard' // import UserCard from '@/widgets/Cards/UserCard' import Tooltip from '@/widgets/Tooltip' import ArticleStateBadge from '@/widgets/ArticleStateBadge' import ViewsCount from '../../ViewsCount' +import CommentsCount from '../../CommentsCount' import { Wrapper, + Digest, + Footer, Dot, PublishTime, Extra, @@ -90,13 +92,17 @@ const Body: FC = ({ article, curCommunity }) => { - - {/* @ts-ignore */} + + + send(EVENT.PREVIEW_ARTICLE, { article })}> + {article.digest} + +
{article.id === '239' && } {article.id === '231' && } @@ -113,15 +119,11 @@ const Body: FC = ({ article, curCommunity }) => { )} - - - send(EVENT.PREVIEW_ARTICLE, { article })} - > - {article.digest} - + + + + +
) } diff --git a/src/widgets/PostItem/CommentsCount.tsx b/src/widgets/PostItem/CommentsCount.tsx new file mode 100644 index 000000000..76cd17726 --- /dev/null +++ b/src/widgets/PostItem/CommentsCount.tsx @@ -0,0 +1,39 @@ +import { FC, memo, Fragment } from 'react' + +import { TSIZE_SM } from '@/spec' +import { SIZE } from '@/constant' + +import { Space } from '@/widgets/Common' + +import { + Wrapper, + CommentsIcon, + HighlightWrapper, +} from './styles/comments_count' + +type TProps = { + count: number + size?: TSIZE_SM +} + +const CommentsCount: FC = ({ count, size = SIZE.SMALL }) => { + return ( + + {count >= 25 ? ( + + + {size === SIZE.MEDIUM && } + {count} + + ) : ( + + + {size === SIZE.MEDIUM && } + {count} + + )} + + ) +} + +export default memo(CommentsCount) diff --git a/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Header.tsx b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Header.tsx index 5d64109ba..4407f612a 100644 --- a/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Header.tsx +++ b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Header.tsx @@ -5,10 +5,13 @@ import TimeAgo from 'timeago-react' import type { TPost } from '@/spec' import { callWallpaperEditor } from '@/utils/helper' +import { SIZE } from '@/constant' import Tooltip from '@/widgets/Tooltip' import { SpaceGrow } from '@/widgets/Common' +import CommentsCount from '../../CommentsCount' + import { Wrapper, Topping, @@ -16,9 +19,6 @@ import { Dot, Title, PublishTime, - CommentWrapper, - CommentIcon, - CommentCount, AuthorName, } from '../../styles/upvote_fist_layout/desktop_view/header' @@ -62,10 +62,7 @@ const Header: FC = ({ article }) => { {commentsCount !== 0 && ( - - - {commentsCount} - + )}
diff --git a/src/widgets/PostItem/ViewsCount.tsx b/src/widgets/PostItem/ViewsCount.tsx index 77fdf3f26..39db965d1 100644 --- a/src/widgets/PostItem/ViewsCount.tsx +++ b/src/widgets/PostItem/ViewsCount.tsx @@ -9,7 +9,7 @@ type TProps = { const ViewsCount: FC = ({ count }) => { return ( - {count >= 100 ? ( + {count >= 400 ? ( {count} diff --git a/src/widgets/PostItem/index.tsx b/src/widgets/PostItem/index.tsx index 7428e05b0..efe16454b 100755 --- a/src/widgets/PostItem/index.tsx +++ b/src/widgets/PostItem/index.tsx @@ -36,7 +36,7 @@ const PostItem: FC = ({ }) => { return ( - {layout === 'upvote2-first' ? ( + {layout === 'upvote-first' ? ( ` ${css.flex('align-center')}; display: ${({ hasComments }) => (hasComments ? 'flex' : 'none')}; position: absolute; - top: 4px; + top: -4px; right: 0; - color: ${theme('thread.articleDigest')}; + color: ${theme('thread.extraInfo')}; margin-right: 1px; margin-top: 8px; ` export const Hint = styled.div` ${css.flexColumn('align-start')}; - color: ${theme('thread.articleDigest')}; width: 180px; padding-left: 5px; font-size: 13px; diff --git a/src/widgets/PostItem/styles/comment_fist_layout/desktop_view/body.ts b/src/widgets/PostItem/styles/comment_fist_layout/desktop_view/body.ts index 56e6ef2b6..f5b61cfdd 100644 --- a/src/widgets/PostItem/styles/comment_fist_layout/desktop_view/body.ts +++ b/src/widgets/PostItem/styles/comment_fist_layout/desktop_view/body.ts @@ -15,6 +15,22 @@ export const Extra = styled.li` margin-top: 5px; font-size: 12px; ` +export const Footer = styled.div` + margin-top: 6px; + ${css.flex('align-center')}; +` +export const Digest = styled.div` + ${css.cutRest('450px')}; + color: ${theme('thread.articleDigest')}; + margin-top: 2px; + + &:hover { + color: ${theme('thread.articleTitle')}; + cursor: pointer; + } + + transition: all 0.2s; +` export const LeftPart = styled.div` ${css.flex('align-center')}; ` @@ -72,7 +88,8 @@ export const Dot = styled(DotDivider)` margin-right: 8px; ` export const ArticleStateBadgeWrapper = styled.div` - position: absolute; + margin-left: -2px; + /* position: absolute; top: 41px; - right: -5px; + right: -5px; */ ` diff --git a/src/widgets/PostItem/styles/comments_count.ts b/src/widgets/PostItem/styles/comments_count.ts new file mode 100644 index 000000000..8a21a9e59 --- /dev/null +++ b/src/widgets/PostItem/styles/comments_count.ts @@ -0,0 +1,23 @@ +import styled from 'styled-components' + +import css, { theme } from '@/utils/css' + +import CommentSVG from '@/icons/Comment' + +export const Wrapper = styled.div` + ${css.flex('align-center')}; + color: ${theme('thread.extraInfo')}; + font-size: 13px; + font-weight: 500; +` +export const HighlightWrapper = styled(Wrapper)` + background: ${theme('heightGradient')}; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +` +export const CommentsIcon = styled(CommentSVG)<{ highlight?: boolean }>` + fill: ${({ highlight }) => + highlight ? theme('heightIcon') : theme('thread.extraInfo')}; + ${css.size(11)}; + margin-right: 5px; +` diff --git a/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/header.ts b/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/header.ts index d0abcfb41..20278c5e6 100644 --- a/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/header.ts +++ b/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/header.ts @@ -1,7 +1,6 @@ import styled from 'styled-components' import css, { theme } from '@/utils/css' -import CommentSVG from '@/icons/Comment' import DotDivider from '@/widgets/DotDivider' export const Wrapper = styled.div` @@ -50,20 +49,7 @@ export const TitleLink = styled.div` opacity: 0.8; text-decoration: underline; ` -export const CommentWrapper = styled.div` - ${css.flex('align-center')}; -` -export const CommentIcon = styled(CommentSVG)` - ${css.size(11)}; - fill: ${theme('thread.articleDigest')}; - opacity: 0.8; -` -export const CommentCount = styled.div` - font-size: 14px; - color: ${theme('thread.articleTitle')}; - margin-left: 10px; - margin-top: -1px; -` + export const AuthorName = styled.a` display: block; color: ${theme('thread.extraInfo')}; diff --git a/src/widgets/PostItem/styles/views_count.ts b/src/widgets/PostItem/styles/views_count.ts index 624bb471f..fe7b04ce0 100644 --- a/src/widgets/PostItem/styles/views_count.ts +++ b/src/widgets/PostItem/styles/views_count.ts @@ -6,6 +6,7 @@ import ViewedSVG from '@/icons/article/Viewed' export const Wrapper = styled.div` ${css.flex('align-center')}; + font-size: 13px; ` export const HighlightWrapper = styled(Wrapper)` font-weight: 500; @@ -16,11 +17,7 @@ export const HighlightWrapper = styled(Wrapper)` export const ViewsIcon = styled(ViewedSVG)<{ highlight?: boolean }>` fill: ${({ highlight }) => highlight ? theme('heightIcon') : theme('thread.extraInfo')}; - ${css.size(10)}; - margin-right: 4px; -` -export const ArticleStateBadgeWrapper = styled.div` - position: absolute; - top: 41px; - right: -5px; + ${css.size(13)}; + margin-top: -1px; + margin-right: 5px; ` From 621c2ea63a6ac1ece775a33af7467cfbcff42218 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Fri, 27 May 2022 23:37:19 +0800 Subject: [PATCH 6/8] refactor(layout): adjust mini --- src/widgets/ArticleStateBadge/Label.tsx | 2 +- .../PostItem/UpvoteFirstLayout/DesktopView/Header.tsx | 5 +++-- .../styles/upvote_fist_layout/desktop_view/header.ts | 1 + .../PostItem/styles/upvote_fist_layout/desktop_view/index.ts | 2 +- 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/widgets/ArticleStateBadge/Label.tsx b/src/widgets/ArticleStateBadge/Label.tsx index 82cceecdc..adbdeaa83 100644 --- a/src/widgets/ArticleStateBadge/Label.tsx +++ b/src/widgets/ArticleStateBadge/Label.tsx @@ -23,7 +23,7 @@ const Label: FC = ({ type, kanbanLayout, articleInfoLayout }) => { } case AS_TYPE.BUG: { - return Bug/吐槽 + return Bug / 吐槽 } case AS_TYPE.QUESTION: { diff --git a/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Header.tsx b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Header.tsx index 4407f612a..ffe645f73 100644 --- a/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Header.tsx +++ b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Header.tsx @@ -8,7 +8,7 @@ import { callWallpaperEditor } from '@/utils/helper' import { SIZE } from '@/constant' import Tooltip from '@/widgets/Tooltip' -import { SpaceGrow } from '@/widgets/Common' +import { SpaceGrow, Space } from '@/widgets/Common' import CommentsCount from '../../CommentsCount' @@ -50,7 +50,8 @@ const Header: FC = ({ article }) => { {author.nickname} - + + diff --git a/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/header.ts b/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/header.ts index 20278c5e6..ff01ae7e8 100644 --- a/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/header.ts +++ b/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/header.ts @@ -64,6 +64,7 @@ export const AuthorName = styled.a` } ` export const PublishTime = styled.div` + color: ${theme('thread.extraInfo')}; font-size: 11px; ` export const Dot = styled(DotDivider)` diff --git a/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/index.ts b/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/index.ts index e5b2bc79b..6b9a8c9db 100644 --- a/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/index.ts +++ b/src/widgets/PostItem/styles/upvote_fist_layout/desktop_view/index.ts @@ -12,7 +12,7 @@ export const Main = styled.div` margin-left: 6px; ` export const DigestWrapper = styled.div` - ${css.cutRest('500px')}; + ${css.cutRest('530px')}; color: ${theme('thread.articleDigest')}; margin-top: 6px; margin-bottom: 12px; From cd80c86112559fad7c748c99930f5331ce34b691 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sat, 28 May 2022 14:13:54 +0800 Subject: [PATCH 7/8] refactor(cat-state): bake cat into ArticleCatState & style adjust --- .../ArticleDigest/DesktopView/FixedHeader.tsx | 14 ++-- .../ArticleDigest/DesktopView/PostLayout.tsx | 14 ++-- src/containers/unit/ArticleFooter/index.tsx | 14 +--- .../unit/ArticleFooter/styles/index.ts | 4 - .../ArticleViewer/PostViewer/FixedHeader.tsx | 18 ++--- .../ArticleViewer/PostViewer/Header.tsx | 20 +++-- .../styles/post_viewer/header.ts | 6 +- src/spec/article.d.ts | 1 - src/spec/index.ts | 5 +- src/spec/utils.d.ts | 10 ++- src/widgets/ArticleCatLabel/Label.tsx | 41 ---------- src/widgets/ArticleCatLabel/index.tsx | 67 ---------------- src/widgets/ArticleCatLabel/styles/index.ts | 23 ------ src/widgets/ArticleCatLabel/styles/label.ts | 50 ------------ src/widgets/ArticleCatState/Label.tsx | 55 +++++++++++++ src/widgets/ArticleCatState/State.tsx | 76 ++++++++++++++++++ src/widgets/ArticleCatState/index.tsx | 53 ++++++++++++ .../styles/index.ts | 0 src/widgets/ArticleCatState/styles/label.ts | 55 +++++++++++++ src/widgets/ArticleCatState/styles/metric.ts | 19 +++++ src/widgets/ArticleCatState/styles/state.ts | 80 +++++++++++++++++++ .../tests/index.test.ts | 4 +- src/widgets/ArticleStateBadge/Label.tsx | 50 ------------ src/widgets/ArticleStateBadge/State.tsx | 70 ---------------- src/widgets/ArticleStateBadge/index.tsx | 58 -------------- src/widgets/ArticleStateBadge/styles/label.ts | 35 -------- src/widgets/ArticleStateBadge/styles/state.ts | 56 ------------- .../ArticleStateBadge/tests/index.test.ts | 10 --- src/widgets/Icons/Light.tsx | 2 +- src/widgets/KanbanItem/index.tsx | 8 +- .../CommentFirstLayout/DesktopView/Body.tsx | 48 ++++++----- .../UpvoteFirstLayout/DesktopView/Footer.tsx | 42 ++++++---- src/widgets/PostItem/styles/comments_count.ts | 4 +- src/widgets/PostItem/styles/views_count.ts | 1 + src/widgets/Upvote/styles/default_layout.ts | 3 +- .../Upvote/styles/fixed_header_layout.ts | 3 +- src/widgets/Upvote/styles/kanban_layout.ts | 2 +- src/widgets/Upvote/styles/metric.ts | 1 - src/widgets/Upvote/styles/upvote_btn.ts | 2 +- utils/constant/article_cat_state.ts | 18 +++++ utils/constant/article_state.ts | 18 ----- utils/constant/index.ts | 2 +- 42 files changed, 474 insertions(+), 588 deletions(-) delete mode 100644 src/widgets/ArticleCatLabel/Label.tsx delete mode 100644 src/widgets/ArticleCatLabel/index.tsx delete mode 100644 src/widgets/ArticleCatLabel/styles/index.ts delete mode 100644 src/widgets/ArticleCatLabel/styles/label.ts create mode 100644 src/widgets/ArticleCatState/Label.tsx create mode 100644 src/widgets/ArticleCatState/State.tsx create mode 100644 src/widgets/ArticleCatState/index.tsx rename src/widgets/{ArticleStateBadge => ArticleCatState}/styles/index.ts (100%) create mode 100644 src/widgets/ArticleCatState/styles/label.ts create mode 100644 src/widgets/ArticleCatState/styles/metric.ts create mode 100644 src/widgets/ArticleCatState/styles/state.ts rename src/widgets/{ArticleCatLabel => ArticleCatState}/tests/index.test.ts (64%) delete mode 100644 src/widgets/ArticleStateBadge/Label.tsx delete mode 100644 src/widgets/ArticleStateBadge/State.tsx delete mode 100644 src/widgets/ArticleStateBadge/index.tsx delete mode 100644 src/widgets/ArticleStateBadge/styles/label.ts delete mode 100644 src/widgets/ArticleStateBadge/styles/state.ts delete mode 100644 src/widgets/ArticleStateBadge/tests/index.test.ts create mode 100644 utils/constant/article_cat_state.ts delete mode 100644 utils/constant/article_state.ts diff --git a/src/containers/digest/ArticleDigest/DesktopView/FixedHeader.tsx b/src/containers/digest/ArticleDigest/DesktopView/FixedHeader.tsx index f80f257ec..3f6c62a80 100644 --- a/src/containers/digest/ArticleDigest/DesktopView/FixedHeader.tsx +++ b/src/containers/digest/ArticleDigest/DesktopView/FixedHeader.tsx @@ -3,7 +3,7 @@ import { FC, memo } from 'react' import type { TArticle, TMetric, TThread } from '@/spec' import { METRIC } from '@/constant' -import ArticleStateBadge from '@/widgets/ArticleStateBadge' +import ArticleCatState from '@/widgets/ArticleCatState' import ArticleBaseStats from '@/widgets/ArticleBaseStats' import { @@ -36,19 +36,19 @@ const FixedHeader: FC = ({ {article.title} - {article.id === '239' && } - {article.id === '231' && } + {article.id === '239' && } + {article.id === '231' && } {article.id === '227' && ( - + )} {article.id === '228' && ( - + )} {article.id === '226' && ( - + )} {article.id === '225' && ( - + )} diff --git a/src/containers/digest/ArticleDigest/DesktopView/PostLayout.tsx b/src/containers/digest/ArticleDigest/DesktopView/PostLayout.tsx index 52b3354ca..f25571c2f 100644 --- a/src/containers/digest/ArticleDigest/DesktopView/PostLayout.tsx +++ b/src/containers/digest/ArticleDigest/DesktopView/PostLayout.tsx @@ -17,7 +17,7 @@ import ArticleBaseStats from '@/widgets/ArticleBaseStats' import DotDivider from '@/widgets/DotDivider' // import ArticleMenu from '@/widgets/ArticleMenu' import ReadableDate from '@/widgets/ReadableDate' -import ArticleStateBadge from '@/widgets/ArticleStateBadge' +import ArticleCatState from '@/widgets/ArticleCatState' import { Main, @@ -69,19 +69,19 @@ const PostLayout: FC = ({ metric = METRIC.ARTICLE, article }) => { )} */}
- {article.id === '239' && } - {article.id === '231' && } + {article.id === '239' && } + {article.id === '231' && } {article.id === '227' && ( - + )} {article.id === '228' && ( - + )} {article.id === '226' && ( - + )} {article.id === '225' && ( - + )}
diff --git a/src/containers/unit/ArticleFooter/index.tsx b/src/containers/unit/ArticleFooter/index.tsx index c9edd353a..ab2cea36b 100755 --- a/src/containers/unit/ArticleFooter/index.tsx +++ b/src/containers/unit/ArticleFooter/index.tsx @@ -6,20 +6,19 @@ import { FC, useState } from 'react' -import type { TArticleCat, TMetric } from '@/spec' +import type { TMetric } from '@/spec' import { METRIC } from '@/constant' import { buildLog } from '@/utils/logger' import { bond } from '@/utils/mobx' -import ArticleCatLabel from '@/widgets/ArticleCatLabel' -import { SpaceGrow } from '@/widgets/Common' +// import { SpaceGrow } from '@/widgets/Common' import TagsList from '@/widgets/TagsList' import Panel from './Panel' import type { TStore } from './store' -import { Wrapper, BaseInfo, CatLabelWrapper } from './styles' +import { Wrapper, BaseInfo } from './styles' import { useInit } from './logic' /* eslint-disable-next-line */ @@ -46,13 +45,6 @@ const ArticleFooterContainer: FC = ({ - - setCat(key)} - /> -
Emoji
 diff --git a/src/containers/unit/ArticleFooter/styles/index.ts b/src/containers/unit/ArticleFooter/styles/index.ts index d28b1983c..149f7023c 100755 --- a/src/containers/unit/ArticleFooter/styles/index.ts +++ b/src/containers/unit/ArticleFooter/styles/index.ts @@ -17,7 +17,3 @@ export const BaseInfo = styled.div` margin-top: 20px; `}; ` - -export const CatLabelWrapper = styled.div` - margin-left: -25px; -` diff --git a/src/containers/viewer/ArticleViewer/PostViewer/FixedHeader.tsx b/src/containers/viewer/ArticleViewer/PostViewer/FixedHeader.tsx index f839973bf..7c5cdd917 100644 --- a/src/containers/viewer/ArticleViewer/PostViewer/FixedHeader.tsx +++ b/src/containers/viewer/ArticleViewer/PostViewer/FixedHeader.tsx @@ -2,7 +2,7 @@ import { FC, memo } from 'react' import type { TArticle } from '@/spec' import Upvote from '@/widgets/Upvote' -import ArticleStateBadge from '@/widgets/ArticleStateBadge' +import ArticleCatState from '@/widgets/ArticleCatState' import ArticleBaseStats from '@/widgets/ArticleBaseStats' import { @@ -35,20 +35,16 @@ const FixedHeader: FC = ({ article, visible, footerVisible }) => { {article.title} - {article.id === '239' && } - {article.id === '231' && } - {article.id === '227' && ( - - )} + {article.id === '239' && } + {article.id === '231' && } + {article.id === '227' && } {article.id === '228' && ( - + )} {article.id === '226' && ( - - )} - {article.id === '225' && ( - + )} + {article.id === '225' && } diff --git a/src/containers/viewer/ArticleViewer/PostViewer/Header.tsx b/src/containers/viewer/ArticleViewer/PostViewer/Header.tsx index ec5b771bf..b15afba07 100644 --- a/src/containers/viewer/ArticleViewer/PostViewer/Header.tsx +++ b/src/containers/viewer/ArticleViewer/PostViewer/Header.tsx @@ -4,7 +4,7 @@ import TimeAgo from 'timeago-react' import type { TPost } from '@/spec' import DotDivider from '@/widgets/DotDivider' -import ArticleStateBadge from '@/widgets/ArticleStateBadge' +import ArticleCatState from '@/widgets/ArticleCatState' import { Wrapper, @@ -41,15 +41,21 @@ const Header: FC = ({ article }) => { )} - {article.id === '239' && } - {article.id === '231' && } - {article.id === '227' && } - {article.id === '228' && } + {article.id === '239' && ( + + )} + {article.id === '231' && } + {article.id === '227' && ( + + )} + {article.id === '228' && ( + + )} {article.id === '226' && ( - + )} {article.id === '225' && ( - + )} ) diff --git a/src/containers/viewer/ArticleViewer/styles/post_viewer/header.ts b/src/containers/viewer/ArticleViewer/styles/post_viewer/header.ts index cd9e869fd..bc9a34d93 100644 --- a/src/containers/viewer/ArticleViewer/styles/post_viewer/header.ts +++ b/src/containers/viewer/ArticleViewer/styles/post_viewer/header.ts @@ -16,19 +16,19 @@ export const Avatar = styled(Img)` margin-right: 10px; ` export const AuthorName = styled.div` - color: ${theme('thread.articleDigest')}; + color: ${theme('thread.extraInfo')}; font-size: 15px; ` export const PublishWrapper = styled.div` ${css.flex('align-center')} ` export const PubDate = styled.div` - color: ${theme('thread.articleDigest')}; + color: ${theme('thread.extraInfo')}; font-size: 13px; ` export const EditedHint = styled.div` font-size: 13px; - color: ${theme('thread.articleDigest')}; + color: ${theme('thread.extraInfo')}; &:before { content: '('; diff --git a/src/spec/article.d.ts b/src/spec/article.d.ts index cf82c92d5..8271ab699 100644 --- a/src/spec/article.d.ts +++ b/src/spec/article.d.ts @@ -4,7 +4,6 @@ import type { TID } from './utils' import type { TEmotion } from './emotion' export type TCopyright = 'cc' | 'approve' | 'forbid' -export type TArticleCat = 'feature' | 'bug' | 'question' | 'other' export type TArticleMeta = { thread?: string diff --git a/src/spec/index.ts b/src/spec/index.ts index 61236e3a4..d2dc65b2f 100644 --- a/src/spec/index.ts +++ b/src/spec/index.ts @@ -77,8 +77,8 @@ export type { TEditMode, TOnlineStatus, TModelineType, - TASType, - TASState, + TArticleCat, + TArticleState, TTagMode, TMenuOption, TToastOption, @@ -109,7 +109,6 @@ export type { TPagedComments, TArticleFilter, TCopyright, - TArticleCat, TUpvoteLayout, TCommentsState, TWorksTab, diff --git a/src/spec/utils.d.ts b/src/spec/utils.d.ts index f9714b03d..5a865b8f4 100644 --- a/src/spec/utils.d.ts +++ b/src/spec/utils.d.ts @@ -184,8 +184,14 @@ export type TModelineType = | 'search' | 'more' -export type TASType = 'BUG' | 'FEATURE' | 'DEFAULT' | 'QUESTION' | 'LOCK' -export type TASState = 'TODO' | 'WIP' | 'DONE' | 'DEFAULT' | 'RESOLVE' | 'LOCK' +export type TArticleCat = 'BUG' | 'FEATURE' | 'DEFAULT' | 'QUESTION' | 'LOCK' +export type TArticleState = + | 'TODO' + | 'WIP' + | 'DONE' + | 'DEFAULT' + | 'RESOLVE' + | 'LOCK' export type TTagMode = 'default' | 'label' diff --git a/src/widgets/ArticleCatLabel/Label.tsx b/src/widgets/ArticleCatLabel/Label.tsx deleted file mode 100644 index 5319e53e8..000000000 --- a/src/widgets/ArticleCatLabel/Label.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { FC, memo } from 'react' - -import type { TArticleCat } from '@/spec' -import { Wrapper, Icon, Text } from './styles/label' - -type TProps = { - type?: TArticleCat -} - -const Label: FC = ({ type }) => { - switch (type) { - case 'feature': { - return ( - - - 功能建议 - - ) - } - - case 'bug': { - return ( - - - Bug / 吐槽 - - ) - } - - default: { - return ( - - - 问题 / 求助 - - ) - } - } -} - -export default memo(Label) diff --git a/src/widgets/ArticleCatLabel/index.tsx b/src/widgets/ArticleCatLabel/index.tsx deleted file mode 100644 index 6b75950fb..000000000 --- a/src/widgets/ArticleCatLabel/index.tsx +++ /dev/null @@ -1,67 +0,0 @@ -/* - * - * Copyright - * - */ - -import { FC, memo } from 'react' - -import type { TArticleCat } from '@/spec' -import Tooltip from '@/widgets/Tooltip' -import { buildLog } from '@/utils/logger' - -import Label from './Label' -import SettingMenu from '@/widgets/SettingMenu' -import { Wrapper } from './styles' - -/* eslint-disable-next-line */ -const log = buildLog('c:Copyright:index') - -const options = [ - { - title: '功能建议', - desc: '功能需求等建议和需求', - key: 'feature', - }, - { - title: 'Bug / 吐槽', - desc: '使用中遇到的 Bug，以及对于产品的吐槽 ', - key: 'bug', - }, - { - title: '问题 / 求助', - desc: '使用中遇到问题', - key: 'question', - }, -] - -type TProps = { - testid?: string - type?: TArticleCat - mode?: 'readonly' | 'editable' - onChange?: (type: string) => void -} - -const ArticleCatLabel: FC = ({ - testid = 'article-cat-label', - type = 'feature', - mode = 'readonly', - onChange = log, -}) => { - return ( - - - } - placement="top" - delay={800} - noPadding - > - - - ) -} - -export default memo(ArticleCatLabel) diff --git a/src/widgets/ArticleCatLabel/styles/index.ts b/src/widgets/ArticleCatLabel/styles/index.ts deleted file mode 100644 index ad9595aba..000000000 --- a/src/widgets/ArticleCatLabel/styles/index.ts +++ /dev/null @@ -1,23 +0,0 @@ -import styled from 'styled-components' - -import type { TTestable } from '@/spec' - -import Img from '@/Img' -import css, { theme } from '@/utils/css' - -export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ - 'data-test-id': testid, -}))`` - -export const Label = styled.div` - ${css.flex('align-center')}; -` -export const Icon = styled(Img)` - ${css.size(14)}; - fill: ${theme('thread.articleDigest')}; -` -export const Text = styled.div` - font-size: 12px; - color: ${theme('thread.articleDigest')}; - margin-right: 5px; -` diff --git a/src/widgets/ArticleCatLabel/styles/label.ts b/src/widgets/ArticleCatLabel/styles/label.ts deleted file mode 100644 index b2571e089..000000000 --- a/src/widgets/ArticleCatLabel/styles/label.ts +++ /dev/null @@ -1,50 +0,0 @@ -import styled from 'styled-components' - -import css, { theme } from '@/utils/css' - -import LightSVG from '@/icons/Light' -import BugSVG from '@/icons/Bug' -import QuestionSVG from '@/icons/Question' - -export const Wrapper = styled.div` - ${css.flex('align-center')}; - cursor: pointer; -` -const icon = ` - ${css.size(12)}; - - ${Wrapper}:hover & { - fill: ${theme('thread.articleTitle')}; - } - - transition: fill 0.2s; -` -const Feature = styled(LightSVG)` - ${icon}; - fill: ${theme('thread.extraInfo')}; -` -const Bug = styled(BugSVG)` - ${icon}; - fill: ${theme('thread.extraInfo')}; -` -const Question = styled(QuestionSVG)` - ${icon}; - fill: ${theme('thread.extraInfo')}; -` - -export const Icon = { - Feature, - Bug, - Question, -} - -export const Text = styled.div` - font-size: 12px; - color: ${theme('thread.extraInfo')}; - margin-left: 6px; - - ${Wrapper}:hover & { - color: ${theme('thread.articleTitle')}; - } - transition: color 0.2s; -` diff --git a/src/widgets/ArticleCatState/Label.tsx b/src/widgets/ArticleCatState/Label.tsx new file mode 100644 index 000000000..c036621c4 --- /dev/null +++ b/src/widgets/ArticleCatState/Label.tsx @@ -0,0 +1,55 @@ +import { FC, memo } from 'react' + +import type { TProps as TArticleStateBadgeProps } from './index' + +import { ARTICLE_STATE, ARTICLE_CAT } from '@/constant' + +import { + Wrapper, + BugWrapper, + QuestionWrapper, + LockWrapper, + OtherWrapper, +} from './styles/label' + +type TProps = Pick< + TArticleStateBadgeProps, + 'type' | 'kanbanLayout' | 'smaller' | 'state' +> + +const Label: FC = ({ type, state, kanbanLayout, smaller }) => { + switch (type) { + case ARTICLE_CAT.FEATURE: { + return ( + + 功能建议 + + ) + } + + case ARTICLE_CAT.BUG: { + return ( + + Bug / 吐槽 + + ) + } + + case ARTICLE_CAT.QUESTION: { + if (state === ARTICLE_STATE.RESOLVE) { + return 已解决 + } + + return 问题 / 求助 + } + + case ARTICLE_CAT.LOCK: { + return 重复问题 + } + + default: + return 其它 + } +} + +export default memo(Label) diff --git a/src/widgets/ArticleCatState/State.tsx b/src/widgets/ArticleCatState/State.tsx new file mode 100644 index 000000000..96fbd9dea --- /dev/null +++ b/src/widgets/ArticleCatState/State.tsx @@ -0,0 +1,76 @@ +import { FC, memo } from 'react' + +import { ARTICLE_STATE } from '@/constant' + +import type { TProps as TArticleStateBadgeProps } from './index' + +import { + Wrapper, + NoBgWrapper, + WipIcon, + TODOIcon, + DoneIcon, + ResolveIcon, + LockIcon, + // + NoBgIcon, +} from './styles/state' + +type TProps = Pick + +const State: FC = ({ state, type, smaller }) => { + switch (state) { + case ARTICLE_STATE.DONE: { + return ( + + + + ) + } + + case ARTICLE_STATE.WIP: { + return ( + + + + ) + } + + case ARTICLE_STATE.TODO: { + return ( + + + + ) + } + + case ARTICLE_STATE.RESOLVE: { + return ( + + + + ) + } + + case ARTICLE_STATE.LOCK: { + return ( + + + + ) + } + + default: { + const Icon = NoBgIcon[type] + if (!Icon) return null + + return ( + + + + ) + } + } +} + +export default memo(State) diff --git a/src/widgets/ArticleCatState/index.tsx b/src/widgets/ArticleCatState/index.tsx new file mode 100644 index 000000000..3053534ef --- /dev/null +++ b/src/widgets/ArticleCatState/index.tsx @@ -0,0 +1,53 @@ +/* + * + * ArticleCatState + * + */ + +import { FC, memo } from 'react' + +import type { TSpace, TArticleCat, TArticleState } from '@/spec' +import { ARTICLE_CAT, ARTICLE_STATE } from '@/constant' +import { buildLog } from '@/utils/logger' + +import State from './State' +import Label from './Label' + +import { Wrapper } from './styles' + +/* eslint-disable-next-line */ +const log = buildLog('c:ArticleCatState:index') + +export type TProps = { + testid?: string + type?: TArticleCat + state?: TArticleState + kanbanLayout?: boolean + smaller?: boolean + // size? +} & TSpace + +const ArticleCatState: FC = ({ + testid = 'article-cat-state', + type = ARTICLE_CAT.DEFAULT, + state = ARTICLE_STATE.DEFAULT, + kanbanLayout = false, + smaller = true, + ...restProps +}) => { + return ( + + {type && } + {type && ( + + ) +} + +export default memo(ArticleCatState) diff --git a/src/widgets/ArticleStateBadge/styles/index.ts b/src/widgets/ArticleCatState/styles/index.ts similarity index 100% rename from src/widgets/ArticleStateBadge/styles/index.ts rename to src/widgets/ArticleCatState/styles/index.ts diff --git a/src/widgets/ArticleCatState/styles/label.ts b/src/widgets/ArticleCatState/styles/label.ts new file mode 100644 index 000000000..0901d7389 --- /dev/null +++ b/src/widgets/ArticleCatState/styles/label.ts @@ -0,0 +1,55 @@ +import { theme } from '@/utils' +import styled from 'styled-components' + +import type { TArticleState } from '@/spec' +import { ARTICLE_STATE } from '@/constant' +import { isNoBgCase, getPadding } from './metric' +// import { theme } from '@/utils/css' + +type TWrapper = { + kanbanLayout: boolean + state: TArticleState + smaller: boolean +} + +export const Wrapper = styled.div` + color: ${({ state }) => + state === ARTICLE_STATE.DEFAULT + ? theme('thread.extraInfo') + : theme('gtdBadge.feat')}; + background-color: ${({ kanbanLayout, state }) => + isNoBgCase(kanbanLayout, state) ? 'transparent' : theme('gtdBadge.featBg')}; + padding: ${({ kanbanLayout, state, smaller }) => + getPadding(kanbanLayout, state, smaller)}|; + + font-weight: ${({ kanbanLayout, state }) => + isNoBgCase(kanbanLayout, state) ? 400 : 600}; + border-radius: ${({ kanbanLayout, state }) => + isNoBgCase(kanbanLayout, state) ? 0 : '6px'}; + font-size: 12px; +` +export const BugWrapper = styled(Wrapper)` + color: ${({ state }) => + state === ARTICLE_STATE.DEFAULT + ? theme('thread.extraInfo') + : theme('gtdBadge.bug')}; + background-color: ${({ kanbanLayout, state }) => + isNoBgCase(kanbanLayout, state) ? 'transparent' : theme('gtdBadge.bugBg')}; + /* font-size: 12px; */ +` +export const QuestionWrapper = styled.div<{ smaller: boolean }>` + color: ${theme('baseColor.green')}; + font-weight: 600; + font-size: ${({ smaller }) => (smaller ? '12px' : '13px')}; + margin-right: ${({ smaller }) => (smaller ? '0' : '6px')}; +` +export const LockWrapper = styled.div<{ smaller: boolean }>` + color: ${theme('thread.extraInfo')}; + font-size: ${({ smaller }) => (smaller ? '12px' : '14px')}; + margin-right: ${({ smaller }) => (smaller ? '0' : '6px')}; +` + +export const OtherWrapper = styled.div` + color: ${theme('thread.extraInfo')}; + font-size: 12px; +` diff --git a/src/widgets/ArticleCatState/styles/metric.ts b/src/widgets/ArticleCatState/styles/metric.ts new file mode 100644 index 000000000..1a0dc4d49 --- /dev/null +++ b/src/widgets/ArticleCatState/styles/metric.ts @@ -0,0 +1,19 @@ +import type { TArticleState } from '@/spec' +import { ARTICLE_STATE } from '@/constant' + +export const isNoBgCase = ( + kanbanLayout: boolean, + state: TArticleState, +): boolean => { + return kanbanLayout || state === ARTICLE_STATE.DEFAULT +} + +export const getPadding = ( + kanbanLayout: boolean, + state: TArticleState, + smaller: boolean, +): number | string => { + const padding = smaller ? '1px 4px 1px 6px;' : '3px 8px;' + + return isNoBgCase(kanbanLayout, state) ? 0 : padding +} diff --git a/src/widgets/ArticleCatState/styles/state.ts b/src/widgets/ArticleCatState/styles/state.ts new file mode 100644 index 000000000..60ef62ba9 --- /dev/null +++ b/src/widgets/ArticleCatState/styles/state.ts @@ -0,0 +1,80 @@ +import styled from 'styled-components' + +import type { TArticleCat } from '@/spec' +import { ARTICLE_CAT } from '@/constant' + +import css, { theme } from '@/utils/css' + +import GtdWipSVG from '@/icons/GtdWip' +import GtdDoneSVG from '@/icons/GtdDone' +import GtdTodoSVG from '@/icons/GtdTodo' +import ResolveSVG from '@/icons/Checked' +import LockSVG from '@/icons/Lock' + +import LightSVG from '@/icons/Light' +import BugSVG from '@/icons/Bug' +import QuestionSVG from '@/icons/Question' + +type TType = { type: TArticleCat; smaller: boolean } + +export const Wrapper = styled.div` + ${({ smaller }) => (smaller ? css.size(14) : css.size(18))}; + ${css.flex('align-both')}; + background: ${({ type }) => + type === ARTICLE_CAT.BUG + ? theme('gtdBadge.bugBg') + : theme('gtdBadge.featBg')}; + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + margin-right: ${({ smaller }) => (smaller ? '-3px' : '-5px')}; +` +export const NoBgWrapper = styled.div` + margin-right: 2px; + ${css.flex('align-both')}; +` +export const WipIcon = styled(GtdWipSVG)` + ${({ smaller }) => (smaller ? css.size(7) : css.size(9))}; + fill: ${({ type }) => + type === ARTICLE_CAT.BUG ? theme('gtdBadge.bug') : theme('gtdBadge.feat')}; +` +export const DoneIcon = styled(GtdDoneSVG)` + ${({ smaller }) => (smaller ? css.size(8) : css.size(10))}; + fill: ${({ type }) => + type === ARTICLE_CAT.BUG ? theme('gtdBadge.bug') : theme('gtdBadge.feat')}; +` +export const TODOIcon = styled(GtdTodoSVG)` + ${({ smaller }) => (smaller ? css.size(8) : css.size(10))}; + fill: ${({ type }) => + type === ARTICLE_CAT.BUG ? theme('gtdBadge.bug') : theme('gtdBadge.feat')}; +` +export const ResolveIcon = styled(ResolveSVG)<{ smaller: boolean }>` + ${({ smaller }) => (smaller ? css.size(16) : css.size(18))}; + fill: ${theme('baseColor.green')}; +` +export const LockIcon = styled(LockSVG)<{ smaller: boolean }>` + ${({ smaller }) => (smaller ? css.size(11) : css.size(13))}; + fill: ${theme('thread.extraInfo')}; + margin-right: 3px; +` +const LightIcon = styled(LightSVG)` + ${css.size(12)}; + fill: ${theme('thread.extraInfo')}; +` + +const BugIcon = styled(BugSVG)` + ${css.size(12)}; + fill: ${theme('thread.extraInfo')}; + margin-right: 2px; +` +const QuestionIcon = styled(QuestionSVG)` + ${css.size(9)}; + fill: ${theme('thread.extraInfo')}; + margin-right: 2px; + margin-top: -1px; +` + +export const NoBgIcon = { + [ARTICLE_CAT.FEATURE]: LightIcon, + [ARTICLE_CAT.BUG]: BugIcon, + [ARTICLE_CAT.QUESTION]: QuestionIcon, +} diff --git a/src/widgets/ArticleCatLabel/tests/index.test.ts b/src/widgets/ArticleCatState/tests/index.test.ts similarity index 64% rename from src/widgets/ArticleCatLabel/tests/index.test.ts rename to src/widgets/ArticleCatState/tests/index.test.ts index 53890bb26..783c73b67 100644 --- a/src/widgets/ArticleCatLabel/tests/index.test.ts +++ b/src/widgets/ArticleCatState/tests/index.test.ts @@ -1,9 +1,9 @@ // import React from 'react' // import { shallow } from 'enzyme' -// import Copyright from '../index' +// import ArticleCatState from '../index' -describe('TODO ', () => { +describe('TODO ', () => { it('Expect to have unit tests specified', () => { expect(true).toEqual(true) }) diff --git a/src/widgets/ArticleStateBadge/Label.tsx b/src/widgets/ArticleStateBadge/Label.tsx deleted file mode 100644 index adbdeaa83..000000000 --- a/src/widgets/ArticleStateBadge/Label.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { FC, memo } from 'react' - -import type { TProps as TArticleStateBadgeProps } from './index' - -import { AS_TYPE } from '@/constant' - -import { - Wrapper, - BugWrapper, - QuestionWrapper, - LockWrapper, -} from './styles/label' - -type TProps = Pick< - TArticleStateBadgeProps, - 'type' | 'kanbanLayout' | 'articleInfoLayout' -> - -const Label: FC = ({ type, kanbanLayout, articleInfoLayout }) => { - switch (type) { - case AS_TYPE.FEATURE: { - return 功能建议 - } - - case AS_TYPE.BUG: { - return Bug / 吐槽 - } - - case AS_TYPE.QUESTION: { - return ( - - 已解决 - - ) - } - - case AS_TYPE.LOCK: { - return ( - - 重复问题 - - ) - } - - default: - return null - } -} - -export default memo(Label) diff --git a/src/widgets/ArticleStateBadge/State.tsx b/src/widgets/ArticleStateBadge/State.tsx deleted file mode 100644 index d368447a4..000000000 --- a/src/widgets/ArticleStateBadge/State.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { FC, memo } from 'react' - -import { AS_STATE } from '@/constant' - -import type { TProps as TArticleStateBadgeProps } from './index' - -import { - Wrapper, - NoBgWrapper, - WipIcon, - TODOIcon, - DoneIcon, - ResolveIcon, - LockIcon, -} from './styles/state' - -type TProps = Pick< - TArticleStateBadgeProps, - 'state' | 'type' | 'articleInfoLayout' -> - -const State: FC = ({ state, type, articleInfoLayout }) => { - switch (state) { - case AS_STATE.DONE: { - return ( - - - - ) - } - - case AS_STATE.WIP: { - return ( - - - - ) - } - - case AS_STATE.TODO: { - return ( - - - - ) - } - - case AS_STATE.RESOLVE: { - return ( - - - - ) - } - - case AS_STATE.LOCK: { - return ( - - - - ) - } - - default: { - return null - } - } -} - -export default memo(State) diff --git a/src/widgets/ArticleStateBadge/index.tsx b/src/widgets/ArticleStateBadge/index.tsx deleted file mode 100644 index 1bbe4e58c..000000000 --- a/src/widgets/ArticleStateBadge/index.tsx +++ /dev/null @@ -1,58 +0,0 @@ -/* - * - * ArticleStateBadge - * - */ - -import { FC, memo } from 'react' - -import type { TSpace, TASType, TASState } from '@/spec' -import { AS_TYPE, AS_STATE } from '@/constant' -import { buildLog } from '@/utils/logger' - -import State from './State' -import Label from './Label' - -import { Wrapper } from './styles' - -/* eslint-disable-next-line */ -const log = buildLog('c:ArticleStateBadge:index') - -export type TProps = { - testid?: string - type?: TASType - state?: TASState - kanbanLayout?: boolean - articleInfoLayout?: boolean - // size? -} & TSpace - -const ArticleStateBadge: FC = ({ - testid = 'gtd-badge', - type = AS_TYPE.DEFAULT, - state = AS_STATE.DEFAULT, - kanbanLayout = false, - articleInfoLayout = false, - ...restProps -}) => { - return ( - - {type && ( - - )} - {type && ( - - ) -} - -export default memo(ArticleStateBadge) diff --git a/src/widgets/ArticleStateBadge/styles/label.ts b/src/widgets/ArticleStateBadge/styles/label.ts deleted file mode 100644 index 2e41ca0fd..000000000 --- a/src/widgets/ArticleStateBadge/styles/label.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { theme } from '@/utils' -import styled from 'styled-components' - -// import { theme } from '@/utils/css' - -export const Wrapper = styled.div<{ kanbanLayout: boolean }>` - color: ${theme('gtdBadge.feat')}; - background-color: ${({ kanbanLayout }) => - kanbanLayout ? 'transparent' : theme('gtdBadge.featBg')}; - padding: ${({ kanbanLayout }) => (kanbanLayout ? 0 : '2px 6px')}; - font-weight: ${({ kanbanLayout }) => (kanbanLayout ? 400 : 600)}; - border-radius: ${({ kanbanLayout }) => (kanbanLayout ? 0 : '6px')}; - border-radius: 6px; - font-size: 12px; -` -export const BugWrapper = styled(Wrapper)<{ kanbanLayout: boolean }>` - color: ${theme('gtdBadge.bug')}; - background-color: ${({ kanbanLayout }) => - kanbanLayout ? 'transparent' : theme('gtdBadge.bugBg')}; -` -export const QuestionWrapper = styled.div<{ articleInfoLayout: boolean }>` - color: ${theme('baseColor.green')}; - font-weight: 600; - font-size: ${({ articleInfoLayout }) => - articleInfoLayout ? '13px' : '12px'}; - margin-right: ${({ articleInfoLayout }) => (articleInfoLayout ? '0' : '6px')}; - margin-top: 2px; -` -export const LockWrapper = styled.div<{ articleInfoLayout: boolean }>` - color: ${theme('thread.extraInfo')}; - font-size: ${({ articleInfoLayout }) => - articleInfoLayout ? '14px' : '12px'}; - margin-right: ${({ articleInfoLayout }) => (articleInfoLayout ? '0' : '6px')}; - margin-top: 2px; -` diff --git a/src/widgets/ArticleStateBadge/styles/state.ts b/src/widgets/ArticleStateBadge/styles/state.ts deleted file mode 100644 index b80dbf8c8..000000000 --- a/src/widgets/ArticleStateBadge/styles/state.ts +++ /dev/null @@ -1,56 +0,0 @@ -import styled from 'styled-components' - -import type { TASType } from '@/spec' -import { AS_TYPE } from '@/constant' - -import css, { theme } from '@/utils/css' - -import GtdWipSVG from '@/icons/GtdWip' -import GtdDoneSVG from '@/icons/GtdDone' -import GtdTodoSVG from '@/icons/GtdTodo' -import ResolveSVG from '@/icons/Checked' -import LockSVG from '@/icons/Lock' - -type TType = { type: TASType } - -export const Wrapper = styled.div` - ${css.size(18)}; - ${css.flex('align-both')}; - background: ${({ type }) => - type === AS_TYPE.BUG ? theme('gtdBadge.bugBg') : theme('gtdBadge.featBg')}; - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - margin-right: -4px; -` -export const NoBgWrapper = styled.div` - margin-right: 2px; - ${css.flex('align-both')}; -` -export const WipIcon = styled(GtdWipSVG)` - ${css.size(9)}; - fill: ${({ type }) => - type === AS_TYPE.BUG ? theme('gtdBadge.bug') : theme('gtdBadge.feat')}; -` -export const DoneIcon = styled(GtdDoneSVG)` - ${css.size(10)}; - fill: ${({ type }) => - type === AS_TYPE.BUG ? theme('gtdBadge.bug') : theme('gtdBadge.feat')}; -` -export const TODOIcon = styled(GtdTodoSVG)` - ${css.size(10)}; - fill: ${({ type }) => - type === AS_TYPE.BUG ? theme('gtdBadge.bug') : theme('gtdBadge.feat')}; -` -export const ResolveIcon = styled(ResolveSVG)<{ articleInfoLayout: boolean }>` - ${({ articleInfoLayout }) => - articleInfoLayout ? css.size(18) : css.size(16)}; - fill: ${theme('baseColor.green')}; - margin-top: 1px; -` -export const LockIcon = styled(LockSVG)<{ articleInfoLayout: boolean }>` - ${({ articleInfoLayout }) => - articleInfoLayout ? css.size(13) : css.size(11)}; - fill: ${theme('thread.extraInfo')}; - margin-top: 1px; - margin-right: 2px; -` diff --git a/src/widgets/ArticleStateBadge/tests/index.test.ts b/src/widgets/ArticleStateBadge/tests/index.test.ts deleted file mode 100644 index 9f560a0be..000000000 --- a/src/widgets/ArticleStateBadge/tests/index.test.ts +++ /dev/null @@ -1,10 +0,0 @@ -// import React from 'react' -// import { shallow } from 'enzyme' - -// import ArticleStateBadge from '../index' - -describe('TODO ', () => { - it('Expect to have unit tests specified', () => { - expect(true).toEqual(true) - }) -}) diff --git a/src/widgets/Icons/Light.tsx b/src/widgets/Icons/Light.tsx index c94b1b76b..47131ea6b 100644 --- a/src/widgets/Icons/Light.tsx +++ b/src/widgets/Icons/Light.tsx @@ -10,7 +10,7 @@ const Light = (props: SVGProps) => { height={200} {...props} > - + ) } diff --git a/src/widgets/KanbanItem/index.tsx b/src/widgets/KanbanItem/index.tsx index a54395873..afec6618f 100644 --- a/src/widgets/KanbanItem/index.tsx +++ b/src/widgets/KanbanItem/index.tsx @@ -11,7 +11,7 @@ import { mockUsers } from '@/utils/mock' import { UPVOTE_LAYOUT } from '@/constant' import IconButton from '@/widgets/Buttons/IconButton' -import ArticleStateBadge from '@/widgets/ArticleStateBadge' +import ArticleCatState from '@/widgets/ArticleCatState' import Upvote from '@/widgets/Upvote' import TagsList from '@/widgets/TagsList' @@ -49,9 +49,9 @@ const KanbanItem: FC = ({ testid = 'gtd-item' }) => { avatarList={mockUsers(3)} type={UPVOTE_LAYOUT.KANBAN} /> - - {/* */} - {/* */} + + {/* */} + {/* */}
) diff --git a/src/widgets/PostItem/CommentFirstLayout/DesktopView/Body.tsx b/src/widgets/PostItem/CommentFirstLayout/DesktopView/Body.tsx index 43c65180b..45a56bd9e 100644 --- a/src/widgets/PostItem/CommentFirstLayout/DesktopView/Body.tsx +++ b/src/widgets/PostItem/CommentFirstLayout/DesktopView/Body.tsx @@ -1,5 +1,6 @@ import { FC, Fragment } from 'react' import dynamic from 'next/dynamic' +import { includes } from 'ramda' import TimeAgo from 'timeago-react' import Link from 'next/link' @@ -12,7 +13,7 @@ import { Space, SpaceGrow } from '@/widgets/Common' // import CommunityCard from '@/widgets/Cards/CommunityCard' // import UserCard from '@/widgets/Cards/UserCard' import Tooltip from '@/widgets/Tooltip' -import ArticleStateBadge from '@/widgets/ArticleStateBadge' +import ArticleCatState from '@/widgets/ArticleCatState' import ViewsCount from '../../ViewsCount' import CommentsCount from '../../CommentsCount' @@ -53,6 +54,7 @@ const Body: FC = ({ article, curCommunity }) => { const showOriginalCommunity = curCommunity === null || curCommunity.raw !== originalCommunity.raw + const demoList = ['239', '231', '227', '228', '226', '225'] return ( @@ -103,26 +105,32 @@ const Body: FC = ({ article, curCommunity }) => { {article.digest}
- - {article.id === '239' && } - {article.id === '231' && } - {article.id === '227' && ( - - )} - {article.id === '228' && ( - - )} - {article.id === '226' && ( - - )} - {article.id === '225' && ( - - )} - - + {!includes(article.id, demoList) ? ( + + ) : ( + + {article.id === '239' && } + {article.id === '231' && } + {article.id === '227' && ( + + )} + {article.id === '228' && ( + + )} + {article.id === '226' && ( + + )} + {article.id === '225' && ( + + )} + + )} + - - + + {article.commentsCount !== 0 && ( + + )}
) diff --git a/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Footer.tsx b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Footer.tsx index 7a74ada42..78f92931e 100644 --- a/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Footer.tsx +++ b/src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Footer.tsx @@ -1,13 +1,13 @@ -import { memo, FC } from 'react' +import { memo, FC, Fragment } from 'react' +import { includes } from 'ramda' import { UPVOTE_LAYOUT } from '@/constant' - import type { TPost } from '@/spec' import Upvote from '@/widgets/Upvote' import { Space } from '@/widgets/Common' -import ArticleStateBadge from '@/widgets/ArticleStateBadge' +import ArticleCatState from '@/widgets/ArticleCatState' import ViewsCount from '../../ViewsCount' import { Wrapper } from '../../styles/upvote_fist_layout/desktop_view/footer' @@ -19,6 +19,8 @@ type TProps = { const Footer: FC = ({ article }) => { const { upvotesCount, meta, viewerHasUpvoted } = article + const demoList = ['239', '231', '227', '228', '226', '225'] + return ( = ({ article }) => { left={-2} /> - {article.id === '239' && } - {article.id === '231' && } - {article.id === '227' && ( - - )} - {article.id === '228' && ( - - )} - {article.id === '226' && ( - - )} - {article.id === '225' && ( - + {!includes(article.id, demoList) ? ( + + ) : ( + + {article.id === '239' && } + {article.id === '231' && } + {article.id === '227' && ( + + )} + {article.id === '228' && ( + + )} + {article.id === '226' && ( + + )} + {article.id === '225' && ( + + )} + )} - + ) diff --git a/src/widgets/PostItem/styles/comments_count.ts b/src/widgets/PostItem/styles/comments_count.ts index 8a21a9e59..117bddf45 100644 --- a/src/widgets/PostItem/styles/comments_count.ts +++ b/src/widgets/PostItem/styles/comments_count.ts @@ -18,6 +18,6 @@ export const HighlightWrapper = styled(Wrapper)` export const CommentsIcon = styled(CommentSVG)<{ highlight?: boolean }>` fill: ${({ highlight }) => highlight ? theme('heightIcon') : theme('thread.extraInfo')}; - ${css.size(11)}; - margin-right: 5px; + ${css.size(10)}; + margin-right: 6px; ` diff --git a/src/widgets/PostItem/styles/views_count.ts b/src/widgets/PostItem/styles/views_count.ts index fe7b04ce0..36bcd21a5 100644 --- a/src/widgets/PostItem/styles/views_count.ts +++ b/src/widgets/PostItem/styles/views_count.ts @@ -6,6 +6,7 @@ import ViewedSVG from '@/icons/article/Viewed' export const Wrapper = styled.div` ${css.flex('align-center')}; + color: ${theme('thread.extraInfo')}; font-size: 13px; ` export const HighlightWrapper = styled(Wrapper)` diff --git a/src/widgets/Upvote/styles/default_layout.ts b/src/widgets/Upvote/styles/default_layout.ts index cdb44c4d3..e24df1f34 100755 --- a/src/widgets/Upvote/styles/default_layout.ts +++ b/src/widgets/Upvote/styles/default_layout.ts @@ -26,8 +26,7 @@ export const Text = styled.div` font-size: 14px; ` export const Count = styled.div<{ noOne: boolean }>` - color: ${({ noOne }) => - noOne ? theme('thread.articleDigest') : theme('thread.extraInfo')}; + color: ${theme('thread.extraInfo')}; font-weight: ${({ noOne }) => (noOne ? 400 : 600)}; font-size: 16px; margin-left: 3px; diff --git a/src/widgets/Upvote/styles/fixed_header_layout.ts b/src/widgets/Upvote/styles/fixed_header_layout.ts index 9ac868afe..aeee16d1c 100644 --- a/src/widgets/Upvote/styles/fixed_header_layout.ts +++ b/src/widgets/Upvote/styles/fixed_header_layout.ts @@ -17,8 +17,7 @@ export const UpvoteBtnWrapper = styled.div` margin-top: 4px; ` export const Count = styled.div<{ noOne: boolean }>` - color: ${({ noOne }) => - noOne ? theme('thread.articleDigest') : theme('thread.extraInfo')}; + color: ${theme('thread.extraInfo')}; font-weight: ${({ noOne }) => (noOne ? 400 : 600)}; font-size: 16px; ` diff --git a/src/widgets/Upvote/styles/kanban_layout.ts b/src/widgets/Upvote/styles/kanban_layout.ts index 018cb056d..fd969d1df 100644 --- a/src/widgets/Upvote/styles/kanban_layout.ts +++ b/src/widgets/Upvote/styles/kanban_layout.ts @@ -28,7 +28,7 @@ export const Text = styled.div` margin-top: 1px; ` export const Count = styled.div<{ noOne: boolean }>` - color: ${theme('thread.articleDigest')}; + color: ${theme('thread.extraInfo')}; font-weight: ${({ noOne }) => (noOne ? 400 : 600)}; font-size: 14px; margin-left: -3px; diff --git a/src/widgets/Upvote/styles/metric.ts b/src/widgets/Upvote/styles/metric.ts index 545c98196..d8e220fea 100644 --- a/src/widgets/Upvote/styles/metric.ts +++ b/src/widgets/Upvote/styles/metric.ts @@ -5,7 +5,6 @@ import { theme } from '@/utils/css' export const getIconColor = ($active: boolean, count: number): string => { if ($active) return theme('thread.articleTitle') - if (count === 0) return theme('thread.articleDigest') return theme('thread.extraInfo') } diff --git a/src/widgets/Upvote/styles/upvote_btn.ts b/src/widgets/Upvote/styles/upvote_btn.ts index bbc3c214a..7408ae2da 100644 --- a/src/widgets/Upvote/styles/upvote_btn.ts +++ b/src/widgets/Upvote/styles/upvote_btn.ts @@ -41,7 +41,7 @@ type TWrapper = { export const Wrapper = styled.div` display: inline-block; - color: ${theme('thread.articleTitle')}; + color: ${theme('thread.extraInfo')}; font-size: 15px; /* padding: 5px 0; */ margin-top: 0; diff --git a/utils/constant/article_cat_state.ts b/utils/constant/article_cat_state.ts new file mode 100644 index 000000000..1b243f5be --- /dev/null +++ b/utils/constant/article_cat_state.ts @@ -0,0 +1,18 @@ +import type { TArticleCat, TArticleState } from '@/spec' + +export const ARTICLE_CAT = { + FEATURE: 'FEATURE', + BUG: 'BUG', + QUESTION: 'QUESTION', + LOCK: 'LOCK', + DEFAULT: 'DEFAULT', +} as Record, Uppercase> + +export const ARTICLE_STATE = { + TODO: 'TODO', + WIP: 'WIP', + DONE: 'DONE', + DEFAULT: 'DEFAULT', + RESOLVE: 'RESOLVE', + LOCK: 'LOCK', +} as Record, Uppercase> diff --git a/utils/constant/article_state.ts b/utils/constant/article_state.ts deleted file mode 100644 index 67fb9b25b..000000000 --- a/utils/constant/article_state.ts +++ /dev/null @@ -1,18 +0,0 @@ -import type { TASType, TASState } from '@/spec' - -export const AS_TYPE = { - FEATURE: 'FEATURE', - BUG: 'BUG', - QUESTION: 'QUESTION', - LOCK: 'LOCK', - DEFAULT: 'DEFAULT', -} as Record, Uppercase> - -export const AS_STATE = { - TODO: 'TODO', - WIP: 'WIP', - DONE: 'DONE', - DEFAULT: 'DEFAULT', - RESOLVE: 'RESOLVE', - LOCK: 'LOCK', -} as Record, Uppercase> diff --git a/utils/constant/index.ts b/utils/constant/index.ts index e94ae04e6..812ce62e0 100755 --- a/utils/constant/index.ts +++ b/utils/constant/index.ts @@ -32,7 +32,7 @@ export { WORKS_TAB, WORKS_TAB_ITEMS, BLOG_TAB, BLOG_TAB_ITEMS } from './tab' export { COMMUNITY_MAP_ALIAS } from './alias' -export { AS_STATE, AS_TYPE } from './article_state' +export { ARTICLE_STATE, ARTICLE_CAT } from './article_cat_state' export { default as DEFAULT_TOAST_OPTIONS } from './toast' From 7d2759508017ec7459259b38541f30ba691d6ec0 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sat, 28 May 2022 16:41:48 +0800 Subject: [PATCH 8/8] style(tags-bar): adjust color --- .../unit/TagsBar/DesktopView/Folder.tsx | 4 ++-- .../TagsBar/styles/desktop_view/folder.ts | 24 +++++++++++-------- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/src/containers/unit/TagsBar/DesktopView/Folder.tsx b/src/containers/unit/TagsBar/DesktopView/Folder.tsx index 2a19173ff..3b03abc15 100644 --- a/src/containers/unit/TagsBar/DesktopView/Folder.tsx +++ b/src/containers/unit/TagsBar/DesktopView/Folder.tsx @@ -1,7 +1,7 @@ import { FC, useState, useRef, useEffect } from 'react' import { findIndex, reverse } from 'ramda' -import type { TTag, TTagMode } from '@/spec' +import type { TTag } from '@/spec' import { sortByColor } from '@/utils/helper' import TagItem from './TagItem' @@ -79,7 +79,7 @@ const Folder: FC = ({ > - <FolderTitle>{title}</FolderTitle> + <FolderTitle $isOpen={isFolderOpen}>{title}</FolderTitle> {!isFolderOpen && <Count>{sortedTags.length}</Count>} {!isFolderOpen && isActiveTagInFolder && ( diff --git a/src/containers/unit/TagsBar/styles/desktop_view/folder.ts b/src/containers/unit/TagsBar/styles/desktop_view/folder.ts index c5f968d5a..79efd402e 100644 --- a/src/containers/unit/TagsBar/styles/desktop_view/folder.ts +++ b/src/containers/unit/TagsBar/styles/desktop_view/folder.ts @@ -36,17 +36,17 @@ export const Title = styled.div` ${css.flex('align-center')}; margin-left: 7px; ` -export const FolderTitle = styled.div` - color: ${theme('thread.extraInfo')}; - opacity: 0.65; +export const FolderTitle = styled.div<{ $isOpen: boolean }>` + color: ${({ $isOpen }) => + !$isOpen ? theme('thread.articleDigest') : theme('lightText')}; + margin-left: 4px; - font-weight: 500; font-size: 13px; margin-right: 8px; ${css.cutRest('85px')}; ${Header}:hover & { - opacity: 1; + color: ${theme('thread.articleDigest')}; } ` export const Count = styled.div` @@ -74,22 +74,26 @@ export const SubToggle = styled.div` ${css.flex('align-center')}; margin-top: 5px; margin-left: 3px; - opacity: 0.8; &:hover { - opacity: 1; cursor: pointer; } ` export const SubToggleTitle = styled.div` - color: ${theme('thread.extraInfo')}; + color: ${theme('lightText')}; font-size: 12px; - margin-left: 10px; + margin-left: 11px; padding: 2px; border-radius: 5px; + + &:hover { + color: ${theme('thread.articleDigest')}; + } + + transition: color 0.2s; ` export const SubTogglePrefixIcon = styled(MoreSVG)` - fill: ${theme('thread.extraInfo')}; + fill: ${theme('lightText')}; ${css.size(12)}; margin-right: 2px; `