From ac471717f8e0ecd67bf2dec34e6974e2e8bc0d90 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Mon, 19 Jul 2021 15:16:14 +0800 Subject: [PATCH 01/13] refactor(post-content): extract common comp wip --- src/components/ArticleBaseStats/index.tsx | 50 +++++++++++++ .../ArticleBaseStats/styles/index.ts | 42 +++++++++++ .../ArticleBaseStats/tests/index.test.ts | 10 +++ src/components/Buttons/styles/icon_button.ts | 2 - .../Copyright/styles/readonly_panel.ts | 3 +- src/components/Tooltip/index.tsx | 2 +- src/components/Upvote/StickerView.tsx | 44 ++++++++++++ src/components/Upvote/UpvoteBtn.tsx | 16 +++-- src/components/Upvote/index.tsx | 27 +++---- src/components/Upvote/styles/metric.ts | 25 +++++++ src/components/Upvote/styles/sticker_view.ts | 18 +++++ src/components/Upvote/styles/upvote_btn.ts | 36 +++++++--- .../content/PostContent/DesktopView.tsx | 1 - .../digest/ArticleDigest/CityList.js | 30 -------- .../ArticleDigest/DesktopView/MiddleInfo.js | 21 ------ .../{PublishDate.js => PublishDate.tsx} | 10 ++- .../ArticleDigest/DesktopView/StateInfo.js | 39 ---------- .../DesktopView/{Title.js => Title.tsx} | 12 +++- .../ArticleDigest/DesktopView/index.tsx | 10 ++- .../digest/ArticleDigest/FavoriteReaction.js | 61 ---------------- .../digest/ArticleDigest/JobMiddleInfo.js | 34 --------- .../ArticleDigest/MobileView/StateInfo.js | 58 --------------- .../MobileView/{index.js => index.tsx} | 28 ++++---- .../digest/ArticleDigest/ReactionNumbers.js | 38 ---------- .../digest/ArticleDigest/RepoMiddleInfo.js | 19 ----- .../digest/ArticleDigest/StarReaction.js | 63 ---------------- .../digest/ArticleDigest/styles/city_list.ts | 15 ---- .../styles/desktop_view/index.ts | 12 +--- .../styles/desktop_view/state_info.ts | 61 ---------------- .../ArticleDigest/styles/job_middle_info.ts | 21 ------ .../styles/mobile_view/state_info.ts | 53 -------------- .../ArticleDigest/styles/reaction_numbers.ts | 71 ------------------- .../ArticleDigest/styles/repo_middle_info.ts | 24 ------- .../tool/ArticleSticker/ArticleSticker.tsx | 47 +++++------- src/containers/tool/ArticleSticker/index.tsx | 6 +- src/containers/tool/ArticleSticker/store.ts | 8 +-- .../ArticleSticker/styles/article_sticker.ts | 66 +---------------- .../ArticleSticker/styles/comment_sticker.ts | 1 + src/containers/unit/ArticleFooter/index.tsx | 2 +- src/containers/unit/Comments/index.tsx | 3 +- .../ArticleViewer/PostViewer/ArticleInfo.tsx | 11 +-- .../ArticleViewer/WorksViewer/Header.tsx | 13 +--- src/containers/viewer/ArticleViewer/index.tsx | 8 +-- .../styles/post_viewer/article_info.ts | 9 --- .../styles/works_viewer/header.ts | 9 --- src/pages/{post.js => post.tsx} | 3 +- src/spec/article.ts | 2 + src/spec/index.ts | 3 + utils/constant/anchor.ts | 2 + utils/dom.ts | 10 +++ utils/index.ts | 1 + 51 files changed, 339 insertions(+), 821 deletions(-) create mode 100755 src/components/ArticleBaseStats/index.tsx create mode 100755 src/components/ArticleBaseStats/styles/index.ts create mode 100755 src/components/ArticleBaseStats/tests/index.test.ts create mode 100644 src/components/Upvote/StickerView.tsx create mode 100644 src/components/Upvote/styles/metric.ts create mode 100755 src/components/Upvote/styles/sticker_view.ts delete mode 100755 src/containers/digest/ArticleDigest/CityList.js delete mode 100755 src/containers/digest/ArticleDigest/DesktopView/MiddleInfo.js rename src/containers/digest/ArticleDigest/DesktopView/{PublishDate.js => PublishDate.tsx} (82%) delete mode 100644 src/containers/digest/ArticleDigest/DesktopView/StateInfo.js rename src/containers/digest/ArticleDigest/DesktopView/{Title.js => Title.tsx} (56%) delete mode 100755 src/containers/digest/ArticleDigest/FavoriteReaction.js delete mode 100755 src/containers/digest/ArticleDigest/JobMiddleInfo.js delete mode 100644 src/containers/digest/ArticleDigest/MobileView/StateInfo.js rename src/containers/digest/ArticleDigest/MobileView/{index.js => index.tsx} (68%) delete mode 100755 src/containers/digest/ArticleDigest/ReactionNumbers.js delete mode 100755 src/containers/digest/ArticleDigest/RepoMiddleInfo.js delete mode 100755 src/containers/digest/ArticleDigest/StarReaction.js delete mode 100755 src/containers/digest/ArticleDigest/styles/city_list.ts delete mode 100644 src/containers/digest/ArticleDigest/styles/desktop_view/state_info.ts delete mode 100755 src/containers/digest/ArticleDigest/styles/job_middle_info.ts delete mode 100644 src/containers/digest/ArticleDigest/styles/mobile_view/state_info.ts delete mode 100755 src/containers/digest/ArticleDigest/styles/reaction_numbers.ts delete mode 100755 src/containers/digest/ArticleDigest/styles/repo_middle_info.ts rename src/pages/{post.js => post.tsx} (97%) diff --git a/src/components/ArticleBaseStats/index.tsx b/src/components/ArticleBaseStats/index.tsx new file mode 100755 index 000000000..d883d37f8 --- /dev/null +++ b/src/components/ArticleBaseStats/index.tsx @@ -0,0 +1,50 @@ +/* + * + * ArticleBaseStats + * + */ + +import { FC, memo } from 'react' + +import type { TArticle, TContainer } from '@/spec' +import { ICON } from '@/config' +import { buildLog, scrollToComments } from '@/utils' + +import { Space } from '@/components/Common' +import { + Wrapper, + ViewsIcon, + CommentWrapper, + CommentIcon, + Count, + CommentCount, +} from './styles' + +/* eslint-disable-next-line */ +const log = buildLog('c:ArticleBaseStats:index') + +type TProps = { + testid?: string + article: TArticle + container?: TContainer +} + +const ArticleBaseStats: FC = ({ + testid = 'article-base-stats', + container = 'body', + article, +}) => { + return ( + + + {article.views} + + scrollToComments(container)}> + + {article.commentsCount} + + + ) +} + +export default memo(ArticleBaseStats) diff --git a/src/components/ArticleBaseStats/styles/index.ts b/src/components/ArticleBaseStats/styles/index.ts new file mode 100755 index 000000000..24aa5cc7c --- /dev/null +++ b/src/components/ArticleBaseStats/styles/index.ts @@ -0,0 +1,42 @@ +import styled from 'styled-components' + +import type { TTestable } from '@/spec' + +import Img from '@/Img' +import { css, theme } from '@/utils' + +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` + ${css.flex('align-center')}; +` +const Icon = styled(Img)` + fill: ${theme('thread.articleDigest')}; + ${css.size(14)}; + transition: fill 0.25s; +` +export const ViewsIcon = styled(Icon)`` + +export const CommentWrapper = styled.div` + ${css.flex('align-center')}; +` +export const CommentIcon = styled(Icon)` + ${CommentWrapper}:hover & { + cursor: pointer; + fill: ${theme('thread.articleTitle')}; + } + + transition: fill 0.2s; +` +export const Count = styled.div` + color: ${theme('thread.articleDigest')}; + font-size: 15px; + margin-left: 5px; +` +export const CommentCount = styled(Count)` + ${CommentWrapper}:hover & { + cursor: pointer; + color: ${theme('thread.articleTitle')}; + } + transition: color 0.2s; +` diff --git a/src/components/ArticleBaseStats/tests/index.test.ts b/src/components/ArticleBaseStats/tests/index.test.ts new file mode 100755 index 000000000..41bd4cc20 --- /dev/null +++ b/src/components/ArticleBaseStats/tests/index.test.ts @@ -0,0 +1,10 @@ +// import React from 'react' +// import { shallow } from 'enzyme' + +// import ArticleBaseStats from '../index' + +describe('TODO ', () => { + it('Expect to have unit tests specified', () => { + expect(true).toEqual(true) + }) +}) diff --git a/src/components/Buttons/styles/icon_button.ts b/src/components/Buttons/styles/icon_button.ts index aa4be2db9..4c664e2a5 100644 --- a/src/components/Buttons/styles/icon_button.ts +++ b/src/components/Buttons/styles/icon_button.ts @@ -9,7 +9,6 @@ import type { TProps as TIconButtonProps } from '../IconButton' type TWrapper = Omit export const Wrapper = styled.div` - position: relative; ${css.flex('align-both')}; width: ${({ size }) => `${size}px`}; height: ${({ size }) => `${size}px`}; @@ -19,7 +18,6 @@ export const Wrapper = styled.div` margin-top: ${({ mTop }) => `${mTop}px`}; margin-bottom: ${({ mBottom }) => `${mBottom}px`}; ` - type TIcon = { size: number; dimWhenIdle: boolean } & TSpace & TActive export const Icon = styled(Img)` fill: ${({ $active }) => diff --git a/src/components/Copyright/styles/readonly_panel.ts b/src/components/Copyright/styles/readonly_panel.ts index e055e97b9..0909da93d 100755 --- a/src/components/Copyright/styles/readonly_panel.ts +++ b/src/components/Copyright/styles/readonly_panel.ts @@ -7,7 +7,8 @@ import { css, theme } from '@/utils' export const Wrapper = styled.div` ${css.flexColumn()}; width: 240px; - padding-left: 5px; + padding: 10px; + padding-left: 15px; ` export const Header = styled.div` ${css.flex('align-center')}; diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx index 9703b8455..1fed364d8 100755 --- a/src/components/Tooltip/index.tsx +++ b/src/components/Tooltip/index.tsx @@ -58,7 +58,7 @@ const Tooltip: FC = ({ duration = 0, content, hideOnClick = true, - showArrow = true, + showArrow = false, footerBehavior = 'default', trigger = 'mouseenter focus', onConfirm, diff --git a/src/components/Upvote/StickerView.tsx b/src/components/Upvote/StickerView.tsx new file mode 100644 index 000000000..66ff75810 --- /dev/null +++ b/src/components/Upvote/StickerView.tsx @@ -0,0 +1,44 @@ +/* + * + * Upvote + * + */ + +import { FC, memo } from 'react' + +import { buildLog } from '@/utils' + +import TotalCount from './TotalCount' +import UpvoteBtn from './UpvoteBtn' + +import { Wrapper, UpWrapper, CountWrapper } from './styles/sticker_view' + +/* eslint-disable-next-line */ +const log = buildLog('c:Upvote:index') + +type TProps = { + testid?: string + count?: number + viewerHasUpvoted?: boolean + alias?: string // 觉得很赞(default), 觉得很酷(works), 学到了(blog), 感兴趣(meetup), 有意思(Radar) +} + +const Upvote: FC = ({ + testid = 'upvote', + count = 0, + viewerHasUpvoted = false, + alias = '觉得很赞', +}) => { + return ( + + + + + + + + + ) +} + +export default memo(Upvote) diff --git a/src/components/Upvote/UpvoteBtn.tsx b/src/components/Upvote/UpvoteBtn.tsx index 46d48a126..227c8fe4d 100644 --- a/src/components/Upvote/UpvoteBtn.tsx +++ b/src/components/Upvote/UpvoteBtn.tsx @@ -6,7 +6,7 @@ import { FC, memo, useState, useCallback } from 'react' -import type { TUser } from '@/spec' +import type { TUser, TUpvote } from '@/spec' import { ICON } from '@/config' import { buildLog } from '@/utils' @@ -16,6 +16,7 @@ import { IconWrapper, IconShadow, ShipWindow, + StickerShipWindow, UpIcon, } from './styles/upvote_btn' @@ -24,13 +25,17 @@ const log = buildLog('c:Upvote:index') type TProps = { testid?: string + type?: TUpvote num?: number viewerHasUpvoted?: boolean alias?: string avatarList?: TUser[] } -const UpvoteBtn: FC = ({ viewerHasUpvoted = false }) => { +const UpvoteBtn: FC = ({ + type = 'default', + viewerHasUpvoted = false, +}) => { const [showAnimation, setShowAnimation] = useState(false) const [num, setNum] = useState(0) @@ -48,10 +53,11 @@ const UpvoteBtn: FC = ({ viewerHasUpvoted = false }) => { return ( - - - + + + {type === 'sticker' ? : } diff --git a/src/components/Upvote/index.tsx b/src/components/Upvote/index.tsx index fa42d26bf..3e83e7f2d 100755 --- a/src/components/Upvote/index.tsx +++ b/src/components/Upvote/index.tsx @@ -4,20 +4,21 @@ * */ -import { FC, Fragment, memo } from 'react' +import { FC, memo } from 'react' -import type { TUser } from '@/spec' +import type { TUser, TUpvote } from '@/spec' import { buildLog } from '@/utils' import DefaultView from './DefaultView' import CommentView from './CommentView' +import StickerView from './StickerView' /* eslint-disable-next-line */ const log = buildLog('c:Upvote:index') type TProps = { testid?: string - type?: 'default' | 'comment' + type?: TUpvote count?: number avatarsRowLimit?: number viewerHasUpvoted?: boolean @@ -26,15 +27,17 @@ type TProps = { } const Upvote: FC = ({ type = 'default', ...restProps }) => { - return ( - - {type === 'default' ? ( - - ) : ( - - )} - - ) + switch (type) { + case 'comment': { + return + } + case 'sticker': { + return + } + default: { + return + } + } } export default memo(Upvote) diff --git a/src/components/Upvote/styles/metric.ts b/src/components/Upvote/styles/metric.ts new file mode 100644 index 000000000..ffd502320 --- /dev/null +++ b/src/components/Upvote/styles/metric.ts @@ -0,0 +1,25 @@ +import type { TUpvote } from '@/spec' + +export const getIconSize = (type: TUpvote): string => { + switch (type) { + case 'sticker': { + return '30px;' + } + + default: { + return ' 18px;' + } + } +} + +export const getIconShadowSize = (type: TUpvote): string => { + switch (type) { + case 'sticker': { + return '36px;' + } + + default: { + return ' 23px;' + } + } +} diff --git a/src/components/Upvote/styles/sticker_view.ts b/src/components/Upvote/styles/sticker_view.ts new file mode 100755 index 000000000..442e40f6c --- /dev/null +++ b/src/components/Upvote/styles/sticker_view.ts @@ -0,0 +1,18 @@ +import styled from 'styled-components' + +import type { TTestable } from '@/spec' +import { css } from '@/utils' + +type TInnerWrapper = { + testid: string +} + +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` + ${css.flexColumn('align-both')}; +` +export const UpWrapper = styled.div`` +export const CountWrapper = styled.div` + margin-top: -4px; +` diff --git a/src/components/Upvote/styles/upvote_btn.ts b/src/components/Upvote/styles/upvote_btn.ts index 984f0536e..ded923bd2 100644 --- a/src/components/Upvote/styles/upvote_btn.ts +++ b/src/components/Upvote/styles/upvote_btn.ts @@ -1,10 +1,12 @@ import styled, { keyframes } from 'styled-components' -import type { TActive } from '@/spec' +import type { TUpvote, TActive } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' +import { getIconSize, getIconShadowSize } from './metric' + const topBubbles = keyframes` 0% { background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%; @@ -136,21 +138,23 @@ export const Wrapper = styled.div` export const ContentWrapper = styled.div` ${css.flex('align-center')}; ` -export const IconWrapper = styled.div` +export const IconWrapper = styled.div<{ type: TUpvote }>` ${css.flex('align-center', 'justify-start')}; - width: 20px; - margin-right: 5px; + width: ${({ type }) => (type !== 'sticker' ? '20px' : 'auto')}; + margin-right: ${({ type }) => (type !== 'sticker' ? '5px' : '0')}; position: relative; z-index: 1; ` -export const IconShadow = styled.div` +export const IconShadow = styled.div<{ type: TUpvote }>` position: absolute; left: -3px; top: -2px; - ${css.circle(23)}; + width: ${({ type }) => getIconShadowSize(type)}; + height: ${({ type }) => getIconShadowSize(type)}; + border-radius: 100%; background: #0f4052; z-index: -1; - opacity: 0; + opacity: ${({ type }) => (type !== 'sticker' ? 0 : 0.6)}; ${IconWrapper}:hover & { opacity: 1; @@ -171,10 +175,24 @@ export const ShipWindow = styled.div` opacity: 0.6; ` -export const UpIcon = styled(Img)` + +export const StickerShipWindow = styled(ShipWindow)` + position: absolute; + left: 11px; + top: 12px; + width: 10px; + height: 10px; + opacity: 0.5; +` + +type TUpIcon = { type: TUpvote } & TActive +export const UpIcon = styled(Img)` fill: ${({ $active }) => $active ? '#139B9D;' : theme('thread.articleDigest')}; - ${css.size(18)}; + + width: ${({ type }) => getIconSize(type)}; + height: ${({ type }) => getIconSize(type)}; + transform: scale(1, 0.8); margin-top: 1px; &:hover { diff --git a/src/containers/content/PostContent/DesktopView.tsx b/src/containers/content/PostContent/DesktopView.tsx index 5c3a881b8..db66cd185 100644 --- a/src/containers/content/PostContent/DesktopView.tsx +++ b/src/containers/content/PostContent/DesktopView.tsx @@ -68,7 +68,6 @@ const PostContentContainer: FC = ({ onLeave={() => checkAnchor(ref?.current)} /> - {/* @ts-ignore */} diff --git a/src/containers/digest/ArticleDigest/CityList.js b/src/containers/digest/ArticleDigest/CityList.js deleted file mode 100755 index e68a6deef..000000000 --- a/src/containers/digest/ArticleDigest/CityList.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react' -import { pluck } from 'ramda' - -import { Trans, nilOrEmpty } from '@/utils' -import { Wrapper, Item, SlashDivider } from './styles/city_list' - -const CityList = ({ data }) => { - const items = pluck('title', data) - if (nilOrEmpty(items)) return null - const itemsLength = items.length - - if (itemsLength === 1) { - return {Trans(items[0])} - } - - return ( - - {items.slice(0, itemsLength - 1).map((item) => ( - - {Trans(item)} - /{' '} - - ))} - - {Trans(items[itemsLength - 1])} - - ) -} - -export default React.memo(CityList) diff --git a/src/containers/digest/ArticleDigest/DesktopView/MiddleInfo.js b/src/containers/digest/ArticleDigest/DesktopView/MiddleInfo.js deleted file mode 100755 index fd7e84e10..000000000 --- a/src/containers/digest/ArticleDigest/DesktopView/MiddleInfo.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' - -import { THREAD } from '@/constant' - -import JobMiddleInfo from '../JobMiddleInfo' -import RepoMiddleInfo from '../RepoMiddleInfo' - -const MiddleInfo = ({ thread, data }) => { - switch (thread) { - case THREAD.REPO: - return - - case THREAD.JOB: - return - - default: - return null - } -} - -export default React.memo(MiddleInfo) diff --git a/src/containers/digest/ArticleDigest/DesktopView/PublishDate.js b/src/containers/digest/ArticleDigest/DesktopView/PublishDate.tsx similarity index 82% rename from src/containers/digest/ArticleDigest/DesktopView/PublishDate.js rename to src/containers/digest/ArticleDigest/DesktopView/PublishDate.tsx index ed03ac806..d602ac3a0 100644 --- a/src/containers/digest/ArticleDigest/DesktopView/PublishDate.js +++ b/src/containers/digest/ArticleDigest/DesktopView/PublishDate.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import { FC, memo } from 'react' import { Space } from '@/components/Common' import { Wrapper } from '../styles/desktop_view/publish_date' @@ -9,7 +9,11 @@ const calcRange = (hours) => { return hours >= 12 ? '下午' : '上午' } -const PublishDate = ({ insertedAt }) => { +type TProps = { + insertedAt: string +} + +const PublishDate: FC = ({ insertedAt }) => { const DateObj = new Date(insertedAt) const [month, date, year] = DateObj.toLocaleDateString().split('/') @@ -35,4 +39,4 @@ const PublishDate = ({ insertedAt }) => { ) } -export default PublishDate +export default memo(PublishDate) diff --git a/src/containers/digest/ArticleDigest/DesktopView/StateInfo.js b/src/containers/digest/ArticleDigest/DesktopView/StateInfo.js deleted file mode 100644 index ac9e58476..000000000 --- a/src/containers/digest/ArticleDigest/DesktopView/StateInfo.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react' - -import { ICON } from '@/config' - -import { - Wrapper, - Item, - Text, - ViewdIcon, - ViewsText, - LikeIcon, - NotifyIcon, - ReportIcon, - Divider, -} from '../styles/desktop_view/state_info' - -const StateInfo = ({ article }) => { - return ( - - - - {article.views} - - - - {article.commentsCount} - - - - - - - - - - ) -} - -export default React.memo(StateInfo) diff --git a/src/containers/digest/ArticleDigest/DesktopView/Title.js b/src/containers/digest/ArticleDigest/DesktopView/Title.tsx similarity index 56% rename from src/containers/digest/ArticleDigest/DesktopView/Title.js rename to src/containers/digest/ArticleDigest/DesktopView/Title.tsx index 14225bb22..e98d4ab79 100755 --- a/src/containers/digest/ArticleDigest/DesktopView/Title.js +++ b/src/containers/digest/ArticleDigest/DesktopView/Title.tsx @@ -1,11 +1,17 @@ -import React from 'react' +import { FC, memo } from 'react' +import type { TThread, TArticle } from '@/spec' import { THREAD } from '@/constant' import RepoTitle from './RepoTitle' import { Wrapper } from '../styles/desktop_view/title' -const Title = ({ thread, data }) => { +type TProps = { + thread: TThread + data: TArticle +} + +const Title: FC = ({ thread, data }) => { switch (thread) { case THREAD.REPO: return @@ -15,4 +21,4 @@ const Title = ({ thread, data }) => { } } -export default React.memo(Title) +export default memo(Title) diff --git a/src/containers/digest/ArticleDigest/DesktopView/index.tsx b/src/containers/digest/ArticleDigest/DesktopView/index.tsx index 457bbfa43..f27231088 100644 --- a/src/containers/digest/ArticleDigest/DesktopView/index.tsx +++ b/src/containers/digest/ArticleDigest/DesktopView/index.tsx @@ -13,9 +13,8 @@ import { METRIC } from '@/constant' import { useScroll } from '@/hooks' import { pluggedIn, buildLog } from '@/utils' -import FavoritesCats from '@/containers/tool/FavoritesCats' +import ArticleBaseStats from '@/components/ArticleBaseStats' import Author from './Author' -import StateInfo from './StateInfo' import PublishDate from './PublishDate' // import DotDivider from '@/components/DotDivider' // import { Space } from '@/components/Common' @@ -29,7 +28,7 @@ import { InnerWrapper, BannerContent, Main, - PublishDesc, + AuthorName, BottomInfo, AuthorWrapper, } from '../styles/desktop_view/index' @@ -58,15 +57,14 @@ const ArticleDigestContainer: FC = ({ return ( -
<BottomInfo> - <PublishDesc>Elixir 社区</PublishDesc> - <StateInfo article={viewingArticle} /> + <ArticleBaseStats article={viewingArticle} /> + <AuthorName>mydearxym</AuthorName> </BottomInfo> </Main> <AuthorWrapper> diff --git a/src/containers/digest/ArticleDigest/FavoriteReaction.js b/src/containers/digest/ArticleDigest/FavoriteReaction.js deleted file mode 100755 index 3b0e58a27..000000000 --- a/src/containers/digest/ArticleDigest/FavoriteReaction.js +++ /dev/null @@ -1,61 +0,0 @@ -import React from 'react' -import T from 'prop-types' - -import { ICON_CMD } from '@/config' -import { TYPE } from '@/constant' -import { numberWithCommas } from '@/utils' - -import Maybe from '@/components/Maybe' -import { - NumberSection, - NumberTitle, - NumberItem, - NumberLoading, -} from './styles/reaction_numbers' - -import { onReaction, onListReactionUsers } from './logic' - -const FavoriteReaction = ({ data, show, loading }) => ( - <Maybe test={show}> - <NumberSection active={data.viewerHasFavorited}> - <NumberTitle - onClick={() => onReaction(TYPE.FAVORITE, data.viewerHasFavorited, data)} - > - {data.viewerHasFavorited ? <span>已收藏</span> : <span>收藏</span>} - </NumberTitle> - {loading ? ( - <NumberLoading src={`${ICON_CMD}/reaction_loading.svg`} /> - ) : ( - <NumberItem - onClick={() => - onListReactionUsers(TYPE.USER_LISTER_STARS, { - id: data.id, - action: TYPE.FAVORITE, - brief: data.title || '', - }) - } - > - {numberWithCommas(data.favoritedCount)} - </NumberItem> - )} - </NumberSection> - </Maybe> -) - -FavoriteReaction.propTypes = { - data: T.shape({ - id: T.string, - title: T.string, - viewerHasFavorited: T.bool, - favoritedCount: T.number, - }).isRequired, - show: T.bool, - loading: T.bool, -} - -FavoriteReaction.defaultProps = { - show: true, - loading: false, -} - -export default React.memo(FavoriteReaction) diff --git a/src/containers/digest/ArticleDigest/JobMiddleInfo.js b/src/containers/digest/ArticleDigest/JobMiddleInfo.js deleted file mode 100755 index a6270cc65..000000000 --- a/src/containers/digest/ArticleDigest/JobMiddleInfo.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react' -import T from 'prop-types' - -import DotDivider from '@/components/DotDivider' -import CityList from './CityList' -import { Wrapper, Salary, Text, ExpLabel } from './styles/job_middle_info' - -const JobMiddleInfo = ({ data }) => ( - <Wrapper> - <Salary>{data.salary}</Salary> - <DotDivider /> - <Text>{data.education}</Text> - <DotDivider /> - <Text> - <ExpLabel>经验 </ExpLabel> - {data.exp} - </Text> - <DotDivider /> - <CityList data={data.tags} /> - </Wrapper> -) - -JobMiddleInfo.propTypes = { - data: T.shape({ - salary: T.string, - education: T.string, - exp: T.string, - tags: T.array, - }).isRequired, -} - -JobMiddleInfo.defaultProps = {} - -export default React.memo(JobMiddleInfo) diff --git a/src/containers/digest/ArticleDigest/MobileView/StateInfo.js b/src/containers/digest/ArticleDigest/MobileView/StateInfo.js deleted file mode 100644 index 709f59142..000000000 --- a/src/containers/digest/ArticleDigest/MobileView/StateInfo.js +++ /dev/null @@ -1,58 +0,0 @@ -import React from 'react' - -import { ICON } from '@/config' - -import ImgFallback from '@/components/ImgFallback' -import { Space } from '@/components/Common' -import { - Wrapper, - Section, - Item, - Text, - ViewdIcon, - ViewsText, - LikeIcon, - CommentIcon, - Divider, - AuthorWrapper, - Avatar, - Nickname, -} from '../styles/mobile_view/state_info' - -const StateInfo = ({ article, author }) => { - const { views, starredCount, commentsCount, viewerHasStarred } = article - - return ( - <Wrapper> - <Section> - <Item> - <ViewdIcon src={`${ICON}/article/viewed.svg`} /> - <ViewsText>{views}</ViewsText> - </Item> - <Space right={10} /> - <Item> - <CommentIcon src={`${ICON}/article/comment.svg`} /> - <Text>{commentsCount}</Text> - </Item> - <Divider /> - <Item> - {viewerHasStarred ? ( - <LikeIcon src={`${ICON}/article/heart-solid.svg`} red /> - ) : ( - <LikeIcon src={`${ICON}/article/heart.svg`} /> - )} - <Text>{starredCount}</Text> - </Item> - </Section> - <AuthorWrapper> - <Avatar - src={`${author.avatar}`} - fallback={<ImgFallback user={author} size={14} />} - /> - <Nickname>{author.nickname}</Nickname> - </AuthorWrapper> - </Wrapper> - ) -} - -export default React.memo(StateInfo) diff --git a/src/containers/digest/ArticleDigest/MobileView/index.js b/src/containers/digest/ArticleDigest/MobileView/index.tsx similarity index 68% rename from src/containers/digest/ArticleDigest/MobileView/index.js rename to src/containers/digest/ArticleDigest/MobileView/index.tsx index 9e9f9b204..aea4e08a9 100644 --- a/src/containers/digest/ArticleDigest/MobileView/index.js +++ b/src/containers/digest/ArticleDigest/MobileView/index.tsx @@ -4,19 +4,20 @@ * */ -import React from 'react' -import T from 'prop-types' +import { FC } from 'react' import { isNil } from 'ramda' import { Waypoint } from 'react-waypoint' +import type { TScrollDirection } from '@/spec' import { useScroll } from '@/hooks' import { pluggedIn, buildLog } from '@/utils' import FavoritesCats from '@/containers/tool/FavoritesCats' -import StateInfo from './StateInfo' +import ArticleBaseStats from '@/components/ArticleBaseStats' import PublishDate from '../DesktopView/PublishDate' +import type { TStore } from '../store' import { Wrapper, InnerWrapper, @@ -29,9 +30,13 @@ import { useInit, inAnchor, outAnchor } from '../logic' /* eslint-disable-next-line */ const log = buildLog('C:ArticleDigest') -const ArticleDigestContainer = ({ articleDigest: store }) => { +type TProps = { + articleDigest?: TStore +} + +const ArticleDigestContainer: FC<TProps> = ({ articleDigest: store }) => { const { direction: scrollDirection } = useScroll() - useInit(store, scrollDirection) + useInit(store, scrollDirection as TScrollDirection) const { viewingArticle } = store @@ -45,10 +50,7 @@ const ArticleDigestContainer = ({ articleDigest: store }) => { <Brief> <PublishDate insertedAt={viewingArticle.insertedAt} /> <Title>{viewingArticle.title} - + @@ -57,10 +59,4 @@ const ArticleDigestContainer = ({ articleDigest: store }) => { ) } -ArticleDigestContainer.propTypes = { - articleDigest: T.object.isRequired, -} - -ArticleDigestContainer.defaultProps = {} - -export default pluggedIn(ArticleDigestContainer) +export default pluggedIn(ArticleDigestContainer) as FC diff --git a/src/containers/digest/ArticleDigest/ReactionNumbers.js b/src/containers/digest/ArticleDigest/ReactionNumbers.js deleted file mode 100755 index dad8565af..000000000 --- a/src/containers/digest/ArticleDigest/ReactionNumbers.js +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react' - -import { prettyNum } from '@/utils' -import StarReaction from './StarReaction' -import FavoriteReaction from './FavoriteReaction' - -import { - NumbersInfo, - NumberSection, - NumberDivider, - NumberTitle, - NumberItem, -} from './styles/reaction_numbers' - -const ReactionNumbers = ({ data, starLoading, favoriteLoading, showStar }) => { - const { views } = data - - return ( - - - 浏览 - {prettyNum(views)} - - - {showStar && } - - {/* - - - 关注 - TD - - */} - - ) -} - -export default React.memo(ReactionNumbers) diff --git a/src/containers/digest/ArticleDigest/RepoMiddleInfo.js b/src/containers/digest/ArticleDigest/RepoMiddleInfo.js deleted file mode 100755 index cb529cb4f..000000000 --- a/src/containers/digest/ArticleDigest/RepoMiddleInfo.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react' - -// import { ICON_CMD } from '@/config' -import { - Wrapper, - DescriptionWrapper, - HomepageLink, -} from './styles/repo_middle_info' - -const RepoMiddleInfo = ({ data }) => ( - - - {data.desc} - {data.homepageUrl} - - -) - -export default React.memo(RepoMiddleInfo) diff --git a/src/containers/digest/ArticleDigest/StarReaction.js b/src/containers/digest/ArticleDigest/StarReaction.js deleted file mode 100755 index d75d6a9f7..000000000 --- a/src/containers/digest/ArticleDigest/StarReaction.js +++ /dev/null @@ -1,63 +0,0 @@ -import React from 'react' -import T from 'prop-types' - -import { ICON_CMD } from '@/config' -import { TYPE } from '@/constant' -import { numberWithCommas } from '@/utils' - -import Maybe from '@/components/Maybe' -import { - NumberSection, - NumberDivider, - NumberTitle, - NumberItem, - NumberLoading, -} from './styles/reaction_numbers' - -import { onReaction, onListReactionUsers } from './logic' - -const StarReaction = ({ data, show, loading }) => ( - - - onReaction(TYPE.STAR, data.viewerHasStarred, data)} - > - {data.viewerHasStarred ? 已赞 : 赞} - - {loading ? ( - - ) : ( - - onListReactionUsers(TYPE.USER_LISTER_STARS, { - id: data.id, - action: TYPE.STAR, - brief: data.title || '', - }) - } - > - {numberWithCommas(data.starredCount)} - - )} - - - -) - -StarReaction.propTypes = { - data: T.shape({ - id: T.string, - title: T.string, - viewerHasStarred: T.bool, - starredCount: T.number, - }).isRequired, - show: T.bool, - loading: T.bool, -} - -StarReaction.defaultProps = { - show: true, - loading: false, -} - -export default React.memo(StarReaction) diff --git a/src/containers/digest/ArticleDigest/styles/city_list.ts b/src/containers/digest/ArticleDigest/styles/city_list.ts deleted file mode 100755 index b5c32f64f..000000000 --- a/src/containers/digest/ArticleDigest/styles/city_list.ts +++ /dev/null @@ -1,15 +0,0 @@ -import styled from 'styled-components' - -import { theme, css } from '@/utils' - -export const Wrapper = styled.div` - ${css.flex('align-center')}; -` -export const Item = styled.div` - color: ${theme('thread.articleDigest')}; - font-size: 1rem; -` -export const SlashDivider = styled.span` - margin-left: 4px; - margin-right: 4px; -` diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts index aa7323fca..ec9e6f252 100644 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts +++ b/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts @@ -49,17 +49,7 @@ export const BottomInfo = styled.div` width: 100%; color: ${theme('thread.articleDigest')}; ` -export const PublishDesc = styled.div` +export const AuthorName = styled.div` color: ${theme('thread.articleDigest')}; font-size: 13px; - border-left: 4px solid; - border-left-color: #175473; - padding-left: 8px; - margin-left: 2px; - - &:hover { - cursor: pointer; - color: ${theme('thread.articleTitle')}; - } - transition: color 0.25s; ` diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/state_info.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/state_info.ts deleted file mode 100644 index 4e5154063..000000000 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/state_info.ts +++ /dev/null @@ -1,61 +0,0 @@ -import styled from 'styled-components' - -import Img from '@/Img' -import { theme, css } from '@/utils' - -export const Wrapper = styled.div` - ${css.flex('align-center')}; - margin-right: 6px; -` -export const Item = styled.div` - ${css.flex('align-center')}; - margin-left: 12px; -` -export const Divider = styled.div` - background-color: ${theme('thread.articleDigest')}; - height: 10px; - width: 1px; - opacity: 0.6; - margin-left: 12px; -` -export const ViewsText = styled.div` - color: ${theme('thread.articleDigest')}; - font-size: 13px; - margin-left: 5px; -` -export const Text = styled(ViewsText)` - cursor: pointer; - ${Item}:hover & { - color: ${theme('thread.articleTitle')}; - } -` -const Icon = styled(Img)` - fill: ${theme('thread.articleDigest')}; - ${css.size(14)}; - transition: fill 0.25s; -` -export const ViewdIcon = styled(Icon)`` -export const LikeIcon = styled(Icon)` - ${css.size(13)}; - - ${Item}:hover & { - fill: ${theme('thread.articleTitle')}; - cursor: pointer; - } -` -export const NotifyIcon = styled(Icon)` - ${css.size(15)}; - - ${Item}:hover & { - fill: ${theme('thread.articleTitle')}; - cursor: pointer; - } -` -export const ReportIcon = styled(Icon)` - ${css.size(13)}; - - ${Item}:hover & { - fill: ${theme('baseColor.red')}; - cursor: pointer; - } -` diff --git a/src/containers/digest/ArticleDigest/styles/job_middle_info.ts b/src/containers/digest/ArticleDigest/styles/job_middle_info.ts deleted file mode 100755 index ed6ad73f0..000000000 --- a/src/containers/digest/ArticleDigest/styles/job_middle_info.ts +++ /dev/null @@ -1,21 +0,0 @@ -import styled from 'styled-components' - -import { theme, css } from '@/utils' - -export const Wrapper = styled.div` - ${css.flex('align-center')}; - margin-top: 2px; - margin-bottom: 2px; -` -export const Salary = styled.div` - color: ${theme('contrastFg')}; - font-size: 1rem; -` -export const Text = styled.div` - color: ${theme('thread.articleDigest')}; - font-size: 1rem; -` - -export const ExpLabel = styled.span` - ${css.media.tablet`display: none`}; -` diff --git a/src/containers/digest/ArticleDigest/styles/mobile_view/state_info.ts b/src/containers/digest/ArticleDigest/styles/mobile_view/state_info.ts deleted file mode 100644 index fcc4ce8e2..000000000 --- a/src/containers/digest/ArticleDigest/styles/mobile_view/state_info.ts +++ /dev/null @@ -1,53 +0,0 @@ -import styled from 'styled-components' - -import Img from '@/Img' -import { theme, css } from '@/utils' - -export const Wrapper = styled.div` - ${css.flex('justify-between')}; - margin-top: 12px; -` -export const Section = styled.div` - ${css.flex('align-center')}; -` -export const Item = styled.div` - ${css.flex('align-center')}; -` -export const Divider = styled.div` - background-color: ${theme('thread.articleDigest')}; - height: 10px; - width: 1px; - opacity: 0.6; - margin-left: 10px; - margin-right: 10px; -` -export const ViewsText = styled.div` - color: ${theme('thread.articleDigest')}; - font-size: 13px; - margin-left: 5px; -` -export const Text = styled(ViewsText)` - cursor: pointer; -` -const Icon = styled(Img)` - fill: ${theme('thread.articleDigest')}; - ${css.size(14)}; -` -export const ViewdIcon = styled(Icon)`` -export const CommentIcon = styled(Icon)`` -export const LikeIcon = styled(Icon)<{ red: boolean }>` - fill: ${({ red }) => - red ? theme('baseColor.red') : theme('thread.articleDigest')}; - ${css.size(12)}; -` -export const AuthorWrapper = styled.div` - ${css.flex('align-center')}; -` -export const Avatar = styled(Img)` - ${css.circle(14)}; -` -export const Nickname = styled.div` - font-size: 12px; - color: ${theme('thread.articleDigest')}; - margin-left: 6px; -` diff --git a/src/containers/digest/ArticleDigest/styles/reaction_numbers.ts b/src/containers/digest/ArticleDigest/styles/reaction_numbers.ts deleted file mode 100755 index 7abe2d7f3..000000000 --- a/src/containers/digest/ArticleDigest/styles/reaction_numbers.ts +++ /dev/null @@ -1,71 +0,0 @@ -import styled from 'styled-components' - -import type { TActive } from '@/spec' -import Img from '@/Img' -import { theme, css, animate } from '@/utils' - -export const NumbersWrapper = styled.div` - ${css.flex('align-center')}; - margin-top: -10px; -` -export const NumbersInfo = styled(NumbersWrapper)`` - -type TNumberSection = TActive & { readOnly: boolean } -export const NumberSection = styled.div` - ${css.flexColumn('justify-center')}; - - padding: 0 5px; - border-radius: 4px; - - background: ${({ active }) => (active ? theme('banner.numberHoverBg') : '')}; - - &:hover { - background: ${({ readOnly }) => - readOnly ? '' : theme('banner.numberHoverBg')}; - cursor: ${({ readOnly }) => (readOnly ? '' : 'pointer')}; - } -` -export const NumberTitle = styled.div<{ readOnly: boolean }>` - color: ${theme('banner.numberDesc')}; - text-align: center; - &:hover { - color: ${({ readOnly }) => (readOnly ? '' : theme('banner.active'))}; - text-decoration: ${({ readOnly }) => (readOnly ? '' : 'underline')}; - animation: ${animate.pulse} 0.4s linear; - } - ${css.media.tablet`font-size: 0.9rem`}; - ${css.media.mobile`font-size: 0.9rem`}; -` -export const NumberItem = styled.div<{ readOnly: boolean }>` - font-size: 1.5rem; - text-align: center; - - color: ${theme('banner.number')}; - &:hover { - color: ${({ readOnly }) => (readOnly ? '' : theme('banner.active'))}; - text-decoration: ${({ readOnly }) => (readOnly ? '' : 'underline')}; - animation: ${animate.pulse} 0.4s linear; - } - - ${css.media.tablet`font-size: 1rem`}; - ${css.media.mobile`font-size: 1rem`}; -` -export const NumberLoading = styled(Img)` - fill: ${theme('banner.number')}; - ${css.size(24)}; - margin-top: 5px; - animation: ${animate.rotate360} 1s linear infinite; -` -export const NumberDivider = styled.div` - border: 1px solid; - border-color: ${theme('banner.numberDivider')}; - height: 70%; - align-self: center; - margin-left: 10px; - margin-right: 10px; - ${css.media.tablet` - margin-left: 2px; - margin-right: 2px; - height: 50%; - `}; -` diff --git a/src/containers/digest/ArticleDigest/styles/repo_middle_info.ts b/src/containers/digest/ArticleDigest/styles/repo_middle_info.ts deleted file mode 100755 index e2de1aa38..000000000 --- a/src/containers/digest/ArticleDigest/styles/repo_middle_info.ts +++ /dev/null @@ -1,24 +0,0 @@ -import styled from 'styled-components' - -// import Img from '@/Img' -import { theme, css } from '@/utils' - -export const Wrapper = styled.div` - ${css.flexColumn('align-center')}; -` -export const DescriptionWrapper = styled.div` - margin-top: 3px; - margin-bottom: 5px; - width: 100%; - color: ${theme('banner.desc')}; -` -export const HomepageLink = styled.a` - color: ${theme('markdown.link')}; - transition: color 0.3s; - margin-left: 12px; - &:hover { - color: ${theme('markdown.link')}; - text-decoration: underline; - cursor: pointer; - } -` diff --git a/src/containers/tool/ArticleSticker/ArticleSticker.tsx b/src/containers/tool/ArticleSticker/ArticleSticker.tsx index 18738e161..107fa4d5e 100644 --- a/src/containers/tool/ArticleSticker/ArticleSticker.tsx +++ b/src/containers/tool/ArticleSticker/ArticleSticker.tsx @@ -1,19 +1,11 @@ import { FC, memo } from 'react' import type { TArticle } from '@/spec' -import { ICON } from '@/config' -import { Br } from '@/components/Common' -import { - Wrapper, - ItemWrapper, - ItemHint, - LikeIcon, - CollectIcon, - ShareIcon, - Number, - Text, -} from './styles/article_sticker' +import { IconButton } from '@/components/Buttons' +import Upvote from '@/components/Upvote' + +import { Wrapper } from './styles/article_sticker' type TProps = { show: boolean @@ -23,22 +15,21 @@ type TProps = { const ArticleSticker: FC = ({ show, viewing }) => { return ( - - - - {viewing.starredCount} 喜欢 - - -
- - - 收藏 - -
- - - 分享 - + + + ) } diff --git a/src/containers/tool/ArticleSticker/index.tsx b/src/containers/tool/ArticleSticker/index.tsx index ce92cd7c1..a2416e6e5 100755 --- a/src/containers/tool/ArticleSticker/index.tsx +++ b/src/containers/tool/ArticleSticker/index.tsx @@ -16,7 +16,7 @@ import GotoTop from '@/components/GotoTop' import type { TStore } from './store' import LeftSticker from './LeftSticker/index' -import CommunitySticker from './CommunitySticker' +// import CommunitySticker from './CommunitySticker' import ArticleSticker from './ArticleSticker' import CommentSticker from './CommentSticker' @@ -39,7 +39,7 @@ const ArticleStickerContainer: FC = ({ const { showLeftSticker, - showCommunity, + // showCommunity, viewingData, isTocMenuOpened, showCommentSticker, @@ -57,7 +57,7 @@ const ArticleStickerContainer: FC = ({ - {showCommunity && } + {/* {showCommunity && } */} ` display: ${({ show }) => (show ? 'block' : 'none')}; - /* margin-left: -38px; */ -` -export const ItemWrapper = styled.div` - ${css.flexColumn('align-both')}; - position: relative; - width: 100%; -` -export const ItemHint = styled.div` - color: ${theme('thread.articleDigest')}; - position: absolute; - right: ${({ right }) => `${right}px` || '-12px'}; - bottom: ${({ bottom }) => `${bottom}px` || 0}; - font-size: 12px; - opacity: 0; - - ${ItemWrapper}:hover & { - opacity: 1; - } - - transition: all 0.25s; - transition-delay: 0.5s; -` -const Icon = styled(Img)` - ${css.size(22)}; - transition: all 0.25s; - cursor: pointer; -` - -export const LikeIcon = styled(Icon)` - fill: #0c5473; - ${css.size(22)}; - - &:hover { - fill: ${theme('baseColor.red')}; - animation: ${animate.pulse} 0.25s linear; - } -` -export const CollectIcon = styled(Icon)` - fill: #0c5473; - margin-left: 1px; - - &:hover { - fill: #107eae; - cursor: pointer; - } -` -export const ShareIcon = styled(Icon)` - fill: #0c5473; - ${css.size(16)}; - margin-left: -1px; -` -export const Number = styled.div` - ${css.flex('align-baseline')}; - color: ${theme('thread.articleTitle')}; - font-size: 13px; - margin-top: 5px; -` -export const Text = styled.div` - color: ${theme('thread.articleDigest')}; - font-size: 11px; + justify-content: center; ` +export const holder = 1 diff --git a/src/containers/tool/ArticleSticker/styles/comment_sticker.ts b/src/containers/tool/ArticleSticker/styles/comment_sticker.ts index df487ce34..2fbe9ca53 100644 --- a/src/containers/tool/ArticleSticker/styles/comment_sticker.ts +++ b/src/containers/tool/ArticleSticker/styles/comment_sticker.ts @@ -7,6 +7,7 @@ import Img from '@/Img' export const Wrapper = styled.div` min-height: 100px; margin-left: 35%; + margin-top: 50px; padding-bottom: 0; width: 65%; max-width: 200px; diff --git a/src/containers/unit/ArticleFooter/index.tsx b/src/containers/unit/ArticleFooter/index.tsx index a43d664e2..71844c4b3 100755 --- a/src/containers/unit/ArticleFooter/index.tsx +++ b/src/containers/unit/ArticleFooter/index.tsx @@ -48,7 +48,7 @@ const ArticleFooterContainer: FC = ({ setCopyright(key)} /> = ({ } = store return ( - + {showReplyBox && ( = ({ article }) => { return ( - {' '} - {article.views} - - - {article.commentsCount} + diff --git a/src/containers/viewer/ArticleViewer/WorksViewer/Header.tsx b/src/containers/viewer/ArticleViewer/WorksViewer/Header.tsx index 22c8e5e33..a374ddb06 100644 --- a/src/containers/viewer/ArticleViewer/WorksViewer/Header.tsx +++ b/src/containers/viewer/ArticleViewer/WorksViewer/Header.tsx @@ -2,12 +2,10 @@ import { FC, memo } from 'react' import TimeAgo from 'timeago-react' import type { TPost } from '@/spec' -import { SIZE } from '@/constant' -import { ICON } from '@/config' +import ArticleBaseStats from '@/components/ArticleBaseStats' import DotDivider from '@/components/DotDivider' import { IconButton } from '@/components/Buttons' -import { Space } from '@/components/Common' import { Wrapper, @@ -23,8 +21,6 @@ import { PubDate, EditedHint, BaseWrapper, - ViewIcon, - Count, } from '../styles/works_viewer/header' type TProps = { @@ -59,12 +55,7 @@ const Header: FC = ({ article }) => { 修改过 - {' '} - {article.views} - - - {article.commentsCount} - {/* */} + {/* */} diff --git a/src/containers/viewer/ArticleViewer/index.tsx b/src/containers/viewer/ArticleViewer/index.tsx index 77034f423..debd3c378 100755 --- a/src/containers/viewer/ArticleViewer/index.tsx +++ b/src/containers/viewer/ArticleViewer/index.tsx @@ -16,8 +16,8 @@ import ArticleFooter from '@/containers/unit/ArticleFooter' // TODO: remove // import ArticleViewerHeader from '@/containers/unit/ArticleViewerHeader' -import PostViewer from './PostViewer' -// import WorksViewer from './WorksViewer' +// import PostViewer from './PostViewer' +import WorksViewer from './WorksViewer' import type { TStore } from './store' import { Wrapper, CommentsWrapper } from './styles' @@ -40,8 +40,8 @@ const ArticleViewerContainer: FC = ({ return ( - {/* */} - + + {/* */} diff --git a/src/containers/viewer/ArticleViewer/styles/post_viewer/article_info.ts b/src/containers/viewer/ArticleViewer/styles/post_viewer/article_info.ts index ff6492e49..8cbb30851 100644 --- a/src/containers/viewer/ArticleViewer/styles/post_viewer/article_info.ts +++ b/src/containers/viewer/ArticleViewer/styles/post_viewer/article_info.ts @@ -37,13 +37,4 @@ export const CollectText = styled.div` export const BaseWrapper = styled.div` ${css.flex('align-center')}; ` -export const ViewIcon = styled(Img)` - fill: ${theme('thread.articleDigest')}; - ${css.size(16)}; - margin-right: 5px; -` -export const Count = styled.div` - color: ${theme('thread.articleDigest')}; - font-size: 15px; -` export const UpvoteWrapper = styled.div`` diff --git a/src/containers/viewer/ArticleViewer/styles/works_viewer/header.ts b/src/containers/viewer/ArticleViewer/styles/works_viewer/header.ts index 1155119e9..2f33bdd0e 100644 --- a/src/containers/viewer/ArticleViewer/styles/works_viewer/header.ts +++ b/src/containers/viewer/ArticleViewer/styles/works_viewer/header.ts @@ -66,12 +66,3 @@ export const BaseWrapper = styled.div` ${css.flex('align-center')}; margin-top: 9px; ` -export const ViewIcon = styled(Img)` - fill: ${theme('thread.articleDigest')}; - ${css.size(15)}; - margin-right: 5px; -` -export const Count = styled.div` - color: ${theme('thread.articleDigest')}; - font-size: 14px; -` diff --git a/src/pages/post.js b/src/pages/post.tsx similarity index 97% rename from src/pages/post.js rename to src/pages/post.tsx index 698cabae1..5eed53dc9 100755 --- a/src/pages/post.js +++ b/src/pages/post.tsx @@ -1,4 +1,5 @@ import React from 'react' +// import { GetServerSideProps } from 'next' import { Provider } from 'mobx-react' import { merge, toUpper } from 'ramda' @@ -20,7 +21,7 @@ import PostContent from '@/containers/content/PostContent' import { P } from '@/schemas' -const fetchData = async (props, opt) => { +const fetchData = async (props, opt = {}) => { const { realname } = merge({ realname: true }, opt) const token = realname ? getJwtToken(props) : null diff --git a/src/spec/article.ts b/src/spec/article.ts index 40f679a9c..ef42d5fe5 100644 --- a/src/spec/article.ts +++ b/src/spec/article.ts @@ -71,3 +71,5 @@ export type TArticleFilter = { length?: string read?: string } + +export type TUpvote = 'default' | 'comment' | 'sticker' diff --git a/src/spec/index.ts b/src/spec/index.ts index adcb14d89..64efdd508 100644 --- a/src/spec/index.ts +++ b/src/spec/index.ts @@ -56,6 +56,7 @@ export type { TPagedComments, TArticleFilter, TCopyright, + TUpvote, } from './article' export type { @@ -83,3 +84,5 @@ export type TRootStore = RootStoreType export type TViewing = TCommunity | TArticle export type TThread = string + +export type TContainer = 'body' | 'drawer' diff --git a/utils/constant/anchor.ts b/utils/constant/anchor.ts index 1f8b1caf7..bc8452904 100644 --- a/utils/constant/anchor.ts +++ b/utils/constant/anchor.ts @@ -4,6 +4,8 @@ const ANCHOR = { GLOBAL_BLUR_CLASS: 'GLOBAL_BLUR_CLASS', GLOBAL_HEADER_ID: 'GLOBAL_HEADER_ID', GLOBAL_TABBER_ID: 'GLOBAL_TABBER_ID', + + COMMENTS_ID: 'COMMENTS_ID', } export default ANCHOR diff --git a/utils/dom.ts b/utils/dom.ts index a68d52c69..f1eb6440d 100755 --- a/utils/dom.ts +++ b/utils/dom.ts @@ -1,3 +1,4 @@ +import type { TContainer } from '@/spec' import { ANCHOR, BODY_SCROLLER, DRAWER_SCROLLER } from '@/constant' // side effects, need refactor @@ -54,6 +55,15 @@ export const scrollDrawerToTop = (): void => { } } +export const scrollToComments = (view: TContainer = 'body'): void => { + if (typeof window === 'object') { + const scroller = + view === 'body' ? window[BODY_SCROLLER] : window[DRAWER_SCROLLER] + const el = document.getElementById(ANCHOR.COMMENTS_ID) + + scroller?.scroll(el, 500) + } +} /** * froze page's body element * @returns {void} diff --git a/utils/index.ts b/utils/index.ts index f62f4cb65..1bbb9ffdf 100755 --- a/utils/index.ts +++ b/utils/index.ts @@ -111,6 +111,7 @@ export { scrollToTabber, scrollToTop, scrollDrawerToTop, + scrollToComments, lockPage, unlockPage, focusDoraemonBar, From d7c619ec81236443a19f676091971b17c644dd69 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Mon, 19 Jul 2021 18:15:41 +0800 Subject: [PATCH 02/13] refactor(article-digest): re-org layout --- .../ArticleDigest/DesktopView/Author.tsx | 25 ---------------- .../DesktopView/SubCommunity.tsx | 30 +++++++++++++++++++ .../ArticleDigest/DesktopView/index.tsx | 10 +++---- .../styles/desktop_view/index.ts | 4 +-- .../{author.ts => sub_community.ts} | 11 ++++++- 5 files changed, 47 insertions(+), 33 deletions(-) delete mode 100644 src/containers/digest/ArticleDigest/DesktopView/Author.tsx create mode 100644 src/containers/digest/ArticleDigest/DesktopView/SubCommunity.tsx rename src/containers/digest/ArticleDigest/styles/desktop_view/{author.ts => sub_community.ts} (64%) diff --git a/src/containers/digest/ArticleDigest/DesktopView/Author.tsx b/src/containers/digest/ArticleDigest/DesktopView/Author.tsx deleted file mode 100644 index 9e2053bd1..000000000 --- a/src/containers/digest/ArticleDigest/DesktopView/Author.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { FC } from 'react' - -import type { TUser } from '@/spec' -import { Button } from '@/components/Buttons' -import TheAvatar from '@/components/TheAvatar' - -import { Wrapper, Name } from '../styles/desktop_view/author' - -type TProps = { - user: TUser -} - -const Author: FC = ({ user }) => { - return ( - - - {user.nickname} - - - ) -} - -export default Author diff --git a/src/containers/digest/ArticleDigest/DesktopView/SubCommunity.tsx b/src/containers/digest/ArticleDigest/DesktopView/SubCommunity.tsx new file mode 100644 index 000000000..097ace43b --- /dev/null +++ b/src/containers/digest/ArticleDigest/DesktopView/SubCommunity.tsx @@ -0,0 +1,30 @@ +import { FC, memo } from 'react' + +import { ICON_BASE } from '@/config' + +import { Button } from '@/components/Buttons' + +import { + Wrapper, + Icon, + Name, + JoinDesc, +} from '../styles/desktop_view/sub_community' + +// type TProps = { +// } + +const SubCommunity: FC = () => { + return ( + + + javascript + 34 关注者 + + + ) +} + +export default memo(SubCommunity) diff --git a/src/containers/digest/ArticleDigest/DesktopView/index.tsx b/src/containers/digest/ArticleDigest/DesktopView/index.tsx index f27231088..a86f18ff9 100644 --- a/src/containers/digest/ArticleDigest/DesktopView/index.tsx +++ b/src/containers/digest/ArticleDigest/DesktopView/index.tsx @@ -14,7 +14,7 @@ import { useScroll } from '@/hooks' import { pluggedIn, buildLog } from '@/utils' import ArticleBaseStats from '@/components/ArticleBaseStats' -import Author from './Author' +import SubCommunity from './SubCommunity' import PublishDate from './PublishDate' // import DotDivider from '@/components/DotDivider' // import { Space } from '@/components/Common' @@ -30,7 +30,7 @@ import { Main, AuthorName, BottomInfo, - AuthorWrapper, + SubWrapper, } from '../styles/desktop_view/index' import { useInit, inAnchor, outAnchor } from '../logic' @@ -67,9 +67,9 @@ const ArticleDigestContainer: FC = ({ mydearxym
- - - + + + diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts index ec9e6f252..c605368b8 100644 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts +++ b/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts @@ -31,10 +31,10 @@ export const Main = styled.div<{ metric: string }>` ${({ metric }) => css.fitContentWidth(metric)}; width: 100%; ` -export const AuthorWrapper = styled.div` +export const SubWrapper = styled.div` ${css.flex('align-start', 'justify-center')}; width: ${WIDTH.ARTICLE.STICKER}; - margin-top: 32px; + margin-top: 33px; ${css.media.laptopL` width: ${WIDTH.ARTICLE.STICKER_LAPTOPL}; diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/author.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/sub_community.ts similarity index 64% rename from src/containers/digest/ArticleDigest/styles/desktop_view/author.ts rename to src/containers/digest/ArticleDigest/styles/desktop_view/sub_community.ts index fe888e149..8132cc442 100644 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/author.ts +++ b/src/containers/digest/ArticleDigest/styles/desktop_view/sub_community.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import Img from '@/Img' import { theme, css } from '@/utils' export const Wrapper = styled.nav` @@ -10,9 +11,17 @@ export const Wrapper = styled.nav` margin-left: -40px; `} */ ` +export const Icon = styled(Img)` + ${css.size(32)}; +` export const Name = styled.div` - color: ${theme('thread.articleDigest')}; + color: ${theme('thread.articleTitle')}; font-size: 14px; margin-top: 12px; + margin-bottom: 2px; +` +export const JoinDesc = styled.div` + color: ${theme('thread.articleDigest')}; + font-size: 12px; margin-bottom: 10px; ` From f0c1ab01fedf9c676f2432987ca957a61ae9eca3 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Mon, 19 Jul 2021 23:08:29 +0800 Subject: [PATCH 03/13] refactor(article-digest): wip --- src/components/Maybe/{index.js => index.tsx} | 27 ++--- .../{StickerView.tsx => ArticleLayout.tsx} | 4 +- .../{CommentView.tsx => CommentLayout.tsx} | 2 +- .../{DefaultView.tsx => DefaultLayout.tsx} | 2 +- src/components/Upvote/Desc.tsx | 25 ++-- .../Upvote/TotalCount/AnimatedCount.tsx | 8 +- src/components/Upvote/TotalCount/index.tsx | 16 ++- src/components/Upvote/UpvoteBtn.tsx | 10 +- src/components/Upvote/WorksArticleLayout.tsx | 111 ++++++++++++++++++ src/components/Upvote/index.tsx | 18 +-- .../{sticker_view.ts => article_layout.ts} | 0 .../{comment_view.ts => comment_layout.ts} | 0 .../{default_view.ts => default_layout.ts} | 3 + src/components/Upvote/styles/metric.ts | 60 +++++++++- src/components/Upvote/styles/total_count.ts | 6 +- src/components/Upvote/styles/upvote_btn.ts | 31 +++-- .../Upvote/styles/works_article_layout.ts | 30 +++++ .../content/PostContent/DesktopView.tsx | 2 +- .../content/PostContent/MobileView.tsx | 2 +- .../{ => PostLayout}/PublishDate.tsx | 2 +- .../{ => PostLayout}/SubCommunity.tsx | 2 +- .../DesktopView/PostLayout/index.tsx | 49 ++++++++ .../ArticleDigest/DesktopView/RepoTitle.js | 32 ----- .../ArticleDigest/DesktopView/Title.tsx | 24 ---- .../DesktopView/WorksLayout/index.tsx | 47 ++++++++ .../ArticleDigest/DesktopView/index.tsx | 31 +---- .../digest/ArticleDigest/MobileView/index.tsx | 2 +- src/containers/digest/ArticleDigest/index.tsx | 2 +- .../desktop_view/{ => post_layout}/index.ts | 7 +- .../{ => post_layout}/publish_date.ts | 0 .../{ => post_layout}/repo_title.ts | 0 .../{ => post_layout}/sub_community.ts | 0 .../styles/desktop_view/title.ts | 11 -- .../tool/ArticleSticker/ArticleSticker.tsx | 2 +- src/spec/article.ts | 2 +- 35 files changed, 405 insertions(+), 165 deletions(-) rename src/components/Maybe/{index.js => index.tsx} (61%) rename src/components/Upvote/{StickerView.tsx => ArticleLayout.tsx} (83%) rename src/components/Upvote/{CommentView.tsx => CommentLayout.tsx} (98%) rename src/components/Upvote/{DefaultView.tsx => DefaultLayout.tsx} (96%) create mode 100644 src/components/Upvote/WorksArticleLayout.tsx rename src/components/Upvote/styles/{sticker_view.ts => article_layout.ts} (100%) rename src/components/Upvote/styles/{comment_view.ts => comment_layout.ts} (100%) rename src/components/Upvote/styles/{default_view.ts => default_layout.ts} (84%) create mode 100755 src/components/Upvote/styles/works_article_layout.ts rename src/containers/digest/ArticleDigest/DesktopView/{ => PostLayout}/PublishDate.tsx (91%) rename src/containers/digest/ArticleDigest/DesktopView/{ => PostLayout}/SubCommunity.tsx (89%) create mode 100644 src/containers/digest/ArticleDigest/DesktopView/PostLayout/index.tsx delete mode 100755 src/containers/digest/ArticleDigest/DesktopView/RepoTitle.js delete mode 100755 src/containers/digest/ArticleDigest/DesktopView/Title.tsx create mode 100644 src/containers/digest/ArticleDigest/DesktopView/WorksLayout/index.tsx rename src/containers/digest/ArticleDigest/styles/desktop_view/{ => post_layout}/index.ts (90%) rename src/containers/digest/ArticleDigest/styles/desktop_view/{ => post_layout}/publish_date.ts (100%) rename src/containers/digest/ArticleDigest/styles/desktop_view/{ => post_layout}/repo_title.ts (100%) rename src/containers/digest/ArticleDigest/styles/desktop_view/{ => post_layout}/sub_community.ts (100%) delete mode 100755 src/containers/digest/ArticleDigest/styles/desktop_view/title.ts diff --git a/src/components/Maybe/index.js b/src/components/Maybe/index.tsx similarity index 61% rename from src/components/Maybe/index.js rename to src/components/Maybe/index.tsx index 6361462b9..368a001f9 100755 --- a/src/components/Maybe/index.js +++ b/src/components/Maybe/index.tsx @@ -1,11 +1,8 @@ /* - * * Maybe - * */ -import React from 'react' -import T from 'prop-types' +import { FC, memo, ReactNode } from 'react' import { isEmpty } from 'ramda' import { buildLog } from '@/utils' @@ -18,7 +15,13 @@ const MaybeLoading = ({ loading }) => { return
{loading}
} -const Maybe = ({ children, test, loading }) => { +type TProps = { + children: ReactNode + test: boolean + loading?: boolean +} + +const Maybe: FC = ({ children, test, loading = false }) => { if (Array.isArray(test) && isEmpty(test)) { return } @@ -29,16 +32,4 @@ const Maybe = ({ children, test, loading }) => { return <>{children} } -Maybe.propTypes = { - // https://www.npmjs.com/package/prop-types - children: T.node.isRequired, - test: T.any, - loading: T.node, -} - -Maybe.defaultProps = { - test: '', - loading: null, -} - -export default Maybe +export default memo(Maybe) diff --git a/src/components/Upvote/StickerView.tsx b/src/components/Upvote/ArticleLayout.tsx similarity index 83% rename from src/components/Upvote/StickerView.tsx rename to src/components/Upvote/ArticleLayout.tsx index 66ff75810..00d9cd28a 100644 --- a/src/components/Upvote/StickerView.tsx +++ b/src/components/Upvote/ArticleLayout.tsx @@ -11,7 +11,7 @@ import { buildLog } from '@/utils' import TotalCount from './TotalCount' import UpvoteBtn from './UpvoteBtn' -import { Wrapper, UpWrapper, CountWrapper } from './styles/sticker_view' +import { Wrapper, UpWrapper, CountWrapper } from './styles/article_layout' /* eslint-disable-next-line */ const log = buildLog('c:Upvote:index') @@ -32,7 +32,7 @@ const Upvote: FC = ({ return ( - + diff --git a/src/components/Upvote/CommentView.tsx b/src/components/Upvote/CommentLayout.tsx similarity index 98% rename from src/components/Upvote/CommentView.tsx rename to src/components/Upvote/CommentLayout.tsx index d390e686e..2da4402b9 100644 --- a/src/components/Upvote/CommentView.tsx +++ b/src/components/Upvote/CommentLayout.tsx @@ -11,7 +11,7 @@ import { buildLog } from '@/utils' import TotalCount from './TotalCount' import UpvoteBtn from './UpvoteBtn' -import { Wrapper, UpWrapper, CountWrapper } from './styles/comment_view' +import { Wrapper, UpWrapper, CountWrapper } from './styles/comment_layout' /* eslint-disable-next-line */ const log = buildLog('c:Upvote:index') diff --git a/src/components/Upvote/DefaultView.tsx b/src/components/Upvote/DefaultLayout.tsx similarity index 96% rename from src/components/Upvote/DefaultView.tsx rename to src/components/Upvote/DefaultLayout.tsx index 217aae608..0d31327af 100644 --- a/src/components/Upvote/DefaultView.tsx +++ b/src/components/Upvote/DefaultLayout.tsx @@ -14,7 +14,7 @@ import AvatarsRow from '@/components/AvatarsRow' import UpvoteBtn from './UpvoteBtn' import Desc from './Desc' -import { Wrapper } from './styles/default_view' +import { Wrapper } from './styles/default_layout' /* eslint-disable-next-line */ const log = buildLog('c:Upvote:index') diff --git a/src/components/Upvote/Desc.tsx b/src/components/Upvote/Desc.tsx index 1a6e6b445..38a7baccd 100644 --- a/src/components/Upvote/Desc.tsx +++ b/src/components/Upvote/Desc.tsx @@ -6,15 +6,17 @@ import { FC, Fragment, memo } from 'react' import { buildLog } from '@/utils' import { Space } from '@/components/Common' +import Maybe from '@/components/Maybe' import TotalCount from './TotalCount' -import { Text } from './styles/default_view' +import { Text, DescWrapper } from './styles/default_layout' /* eslint-disable-next-line */ const log = buildLog('c:Upvote:Desc') type TProps = { count?: number + showCount?: boolean avatarsRowLimit?: number noOne: boolean alias?: string // 觉得很赞(default), 觉得很酷(works), 学到了(blog), 感兴趣(meetup), 有意思(Radar) @@ -23,30 +25,33 @@ type TProps = { const Desc: FC = ({ noOne, count = 4, + showCount = true, avatarsRowLimit = 3, alias = '觉得很赞', }) => { const onlyOne = count === 1 return ( - + {!noOne && !onlyOne && count > avatarsRowLimit && ( - + 等 - - - 人 - + + + + 人 + + )} {noOne ? ( - + - + ) : ( {alias} )} - + ) } diff --git a/src/components/Upvote/TotalCount/AnimatedCount.tsx b/src/components/Upvote/TotalCount/AnimatedCount.tsx index 8b5f48620..2bf67c00e 100644 --- a/src/components/Upvote/TotalCount/AnimatedCount.tsx +++ b/src/components/Upvote/TotalCount/AnimatedCount.tsx @@ -1,15 +1,19 @@ import { FC, memo } from 'react' +import type { TSIZE_SML } from '@/spec' +import { SIZE } from '@/constant' + import { AnimateOnChange } from 'react-animation' import { Wrapper } from '../styles/total_count' type TProps = { count?: number + size?: TSIZE_SML } -const AnimatedCount: FC = ({ count = 0 }) => { +const AnimatedCount: FC = ({ count = 0, size = SIZE.SMALL }) => { return ( - + import('./AnimatedCount'), { /* eslint-disable react/display-name */ loading: () => { // eslint-disable-next-line react-hooks/rules-of-hooks - const value = useContext(LoadingValueContext) as number - return {value} + const { count, size } = useContext(LoadingValueContext) as { + count: number + size: TSIZE_SML + } + return {count} }, ssr: false, }) type TProps = { count?: number + size?: TSIZE_SML } -const TotalCount: FC = ({ count }) => { +const TotalCount: FC = ({ count = 0, size = SIZE.SMALL }) => { return ( - - + + ) } diff --git a/src/components/Upvote/UpvoteBtn.tsx b/src/components/Upvote/UpvoteBtn.tsx index 227c8fe4d..fc08ad247 100644 --- a/src/components/Upvote/UpvoteBtn.tsx +++ b/src/components/Upvote/UpvoteBtn.tsx @@ -16,7 +16,7 @@ import { IconWrapper, IconShadow, ShipWindow, - StickerShipWindow, + ArticleShipWindow, UpIcon, } from './styles/upvote_btn' @@ -51,11 +51,15 @@ const UpvoteBtn: FC = ({ }, [showAnimation, viewerHasUpvoted, num]) return ( - + - {type === 'sticker' ? : } + {type === 'article' ? ( + + ) : ( + + )} = ({ + testid = 'upvote', + count = 0, + viewerHasUpvoted = false, + avatarsRowLimit = 3, + alias = '觉得很酷', +}) => { + const noOne = count === 0 + + return ( + + + + + + + + + + {!noOne && ( + + + + )} + + + + ) +} + +export default memo(Upvote) diff --git a/src/components/Upvote/index.tsx b/src/components/Upvote/index.tsx index 3e83e7f2d..574e19f1f 100755 --- a/src/components/Upvote/index.tsx +++ b/src/components/Upvote/index.tsx @@ -9,9 +9,10 @@ import { FC, memo } from 'react' import type { TUser, TUpvote } from '@/spec' import { buildLog } from '@/utils' -import DefaultView from './DefaultView' -import CommentView from './CommentView' -import StickerView from './StickerView' +import DefaultLayout from './DefaultLayout' +import CommentLayout from './CommentLayout' +import ArticleLayout from './ArticleLayout' +import WorksArticleLayout from './WorksArticleLayout' /* eslint-disable-next-line */ const log = buildLog('c:Upvote:index') @@ -29,13 +30,16 @@ type TProps = { const Upvote: FC = ({ type = 'default', ...restProps }) => { switch (type) { case 'comment': { - return + return } - case 'sticker': { - return + case 'works-article': { + return + } + case 'article': { + return } default: { - return + return } } } diff --git a/src/components/Upvote/styles/sticker_view.ts b/src/components/Upvote/styles/article_layout.ts similarity index 100% rename from src/components/Upvote/styles/sticker_view.ts rename to src/components/Upvote/styles/article_layout.ts diff --git a/src/components/Upvote/styles/comment_view.ts b/src/components/Upvote/styles/comment_layout.ts similarity index 100% rename from src/components/Upvote/styles/comment_view.ts rename to src/components/Upvote/styles/comment_layout.ts diff --git a/src/components/Upvote/styles/default_view.ts b/src/components/Upvote/styles/default_layout.ts similarity index 84% rename from src/components/Upvote/styles/default_view.ts rename to src/components/Upvote/styles/default_layout.ts index 1e7184c8c..fb207fcfa 100755 --- a/src/components/Upvote/styles/default_view.ts +++ b/src/components/Upvote/styles/default_layout.ts @@ -12,6 +12,9 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ }))` ${css.flex('align-center')}; ` +export const DescWrapper = styled.div` + ${css.flex('align-center')}; +` export const Text = styled.div` color: ${theme('thread.articleDigest')}; font-size: 14px; diff --git a/src/components/Upvote/styles/metric.ts b/src/components/Upvote/styles/metric.ts index ffd502320..20ee48a89 100644 --- a/src/components/Upvote/styles/metric.ts +++ b/src/components/Upvote/styles/metric.ts @@ -2,10 +2,14 @@ import type { TUpvote } from '@/spec' export const getIconSize = (type: TUpvote): string => { switch (type) { - case 'sticker': { + case 'article': { return '30px;' } + case 'works-article': { + return '22px;' + } + default: { return ' 18px;' } @@ -14,12 +18,64 @@ export const getIconSize = (type: TUpvote): string => { export const getIconShadowSize = (type: TUpvote): string => { switch (type) { - case 'sticker': { + case 'article': { return '36px;' } + case 'works-article': { + return '30px;' + } + default: { return ' 23px;' } } } + +export const getShadowLeftOffset = (type: TUpvote): string => { + switch (type) { + case 'works-article': { + return '-4px' + } + + default: { + return '-3px' + } + } +} + +export const getShadowTopOffset = (type: TUpvote): string => { + switch (type) { + case 'works-article': { + return '-3px' + } + + default: { + return '-2px' + } + } +} + +export const getWindowLeftOffset = (type: TUpvote): string => { + switch (type) { + case 'works-article': { + return '8px' + } + + default: { + return '7px' + } + } +} + +export const getWindowTopOffset = (type: TUpvote): string => { + switch (type) { + case 'works-article': { + return '10px' + } + + default: { + return '8px' + } + } +} diff --git a/src/components/Upvote/styles/total_count.ts b/src/components/Upvote/styles/total_count.ts index 5aa3e886f..e46ce41f8 100644 --- a/src/components/Upvote/styles/total_count.ts +++ b/src/components/Upvote/styles/total_count.ts @@ -1,10 +1,12 @@ import styled from 'styled-components' +import type { TSIZE_SML } from '@/spec' +import { SIZE } from '@/constant' import { theme } from '@/utils' -export const Wrapper = styled.div` +export const Wrapper = styled.div<{ size: TSIZE_SML }>` color: ${theme('thread.articleTitle')}; - font-size: 15px; + font-size: ${({ size }) => (size === SIZE.SMALL ? '15px' : '23px')}; overflow-y: hidden; ` export const holder = 1 diff --git a/src/components/Upvote/styles/upvote_btn.ts b/src/components/Upvote/styles/upvote_btn.ts index ded923bd2..b5322f4e4 100644 --- a/src/components/Upvote/styles/upvote_btn.ts +++ b/src/components/Upvote/styles/upvote_btn.ts @@ -5,7 +5,14 @@ import type { TUpvote, TActive } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' -import { getIconSize, getIconShadowSize } from './metric' +import { + getIconSize, + getIconShadowSize, + getShadowLeftOffset, + getShadowTopOffset, + getWindowLeftOffset, + getWindowTopOffset, +} from './metric' const topBubbles = keyframes` 0% { @@ -35,6 +42,7 @@ const bottomBubbles = keyframes` ` type TWrapper = { showAnimation: boolean + type: TUpvote } export const Wrapper = styled.div` @@ -42,6 +50,7 @@ export const Wrapper = styled.div` color: ${theme('thread.articleTitle')}; font-size: 15px; padding: 5px 0; + margin-top: ${({ type }) => (type === 'default' ? '4px' : 0)}; appearance: none; background-color: transparent; border: none; @@ -140,21 +149,21 @@ export const ContentWrapper = styled.div` ` export const IconWrapper = styled.div<{ type: TUpvote }>` ${css.flex('align-center', 'justify-start')}; - width: ${({ type }) => (type !== 'sticker' ? '20px' : 'auto')}; - margin-right: ${({ type }) => (type !== 'sticker' ? '5px' : '0')}; + width: ${({ type }) => (type !== 'article' ? '20px' : 'auto')}; + margin-right: ${({ type }) => (type !== 'article' ? '3px' : '0')}; position: relative; z-index: 1; ` export const IconShadow = styled.div<{ type: TUpvote }>` position: absolute; - left: -3px; - top: -2px; + left: ${({ type }) => getShadowLeftOffset(type)}; + top: ${({ type }) => getShadowTopOffset(type)}; width: ${({ type }) => getIconShadowSize(type)}; height: ${({ type }) => getIconShadowSize(type)}; border-radius: 100%; background: #0f4052; z-index: -1; - opacity: ${({ type }) => (type !== 'sticker' ? 0 : 0.6)}; + opacity: ${({ type }) => (type !== 'article' ? 0 : 0.6)}; ${IconWrapper}:hover & { opacity: 1; @@ -163,11 +172,11 @@ export const IconShadow = styled.div<{ type: TUpvote }>` transform: opacity 0.2s; ` -export const ShipWindow = styled.div` +export const ShipWindow = styled.div<{ type?: TUpvote }>` position: absolute; - left: 7px; - top: 8px; - width: 5px; + left: ${({ type }) => getWindowLeftOffset(type)}; + top: ${({ type }) => getWindowTopOffset(type)}; + width: 6px; height: 4px; border-radius: 100%; display: block; @@ -176,7 +185,7 @@ export const ShipWindow = styled.div` opacity: 0.6; ` -export const StickerShipWindow = styled(ShipWindow)` +export const ArticleShipWindow = styled(ShipWindow)` position: absolute; left: 11px; top: 12px; diff --git a/src/components/Upvote/styles/works_article_layout.ts b/src/components/Upvote/styles/works_article_layout.ts new file mode 100755 index 000000000..afbc98321 --- /dev/null +++ b/src/components/Upvote/styles/works_article_layout.ts @@ -0,0 +1,30 @@ +import styled from 'styled-components' + +import type { TTestable } from '@/spec' +import { css } from '@/utils' + +type TInnerWrapper = { + testid: string +} + +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` + ${css.flexColumn('align-both')}; +` +export const UpWrapper = styled.div` + ${css.flex('align-center')}; + margin-bottom: 2px; +` +export const CountWrapper = styled.div` + margin-left: 7px; + margin-top: -4px; +` +export const Avatars = styled.div` + ${css.flex('align-center')}; + margin-bottom: 10px; +` +export const DescWrapper = styled.div` + ${css.flexColumn('align-center')}; + min-width: 150px; +` diff --git a/src/containers/content/PostContent/DesktopView.tsx b/src/containers/content/PostContent/DesktopView.tsx index db66cd185..9f9eb756a 100644 --- a/src/containers/content/PostContent/DesktopView.tsx +++ b/src/containers/content/PostContent/DesktopView.tsx @@ -51,7 +51,7 @@ const PostContentContainer: FC = ({ return ( - + checkAnchor(ref?.current)} diff --git a/src/containers/content/PostContent/MobileView.tsx b/src/containers/content/PostContent/MobileView.tsx index aa850c8f2..0e680ebdb 100644 --- a/src/containers/content/PostContent/MobileView.tsx +++ b/src/containers/content/PostContent/MobileView.tsx @@ -45,7 +45,7 @@ const PostContentContainer: FC = ({ return ( - + diff --git a/src/containers/digest/ArticleDigest/DesktopView/PublishDate.tsx b/src/containers/digest/ArticleDigest/DesktopView/PostLayout/PublishDate.tsx similarity index 91% rename from src/containers/digest/ArticleDigest/DesktopView/PublishDate.tsx rename to src/containers/digest/ArticleDigest/DesktopView/PostLayout/PublishDate.tsx index d602ac3a0..8f86f90b7 100644 --- a/src/containers/digest/ArticleDigest/DesktopView/PublishDate.tsx +++ b/src/containers/digest/ArticleDigest/DesktopView/PostLayout/PublishDate.tsx @@ -1,7 +1,7 @@ import { FC, memo } from 'react' import { Space } from '@/components/Common' -import { Wrapper } from '../styles/desktop_view/publish_date' +import { Wrapper } from '../../styles/desktop_view/post_layout/publish_date' const calcRange = (hours) => { if (hours >= 0 && hours <= 6) return '凌晨' diff --git a/src/containers/digest/ArticleDigest/DesktopView/SubCommunity.tsx b/src/containers/digest/ArticleDigest/DesktopView/PostLayout/SubCommunity.tsx similarity index 89% rename from src/containers/digest/ArticleDigest/DesktopView/SubCommunity.tsx rename to src/containers/digest/ArticleDigest/DesktopView/PostLayout/SubCommunity.tsx index 097ace43b..98ac68e06 100644 --- a/src/containers/digest/ArticleDigest/DesktopView/SubCommunity.tsx +++ b/src/containers/digest/ArticleDigest/DesktopView/PostLayout/SubCommunity.tsx @@ -9,7 +9,7 @@ import { Icon, Name, JoinDesc, -} from '../styles/desktop_view/sub_community' +} from '../../styles/desktop_view/post_layout/sub_community' // type TProps = { // } diff --git a/src/containers/digest/ArticleDigest/DesktopView/PostLayout/index.tsx b/src/containers/digest/ArticleDigest/DesktopView/PostLayout/index.tsx new file mode 100644 index 000000000..a856078d3 --- /dev/null +++ b/src/containers/digest/ArticleDigest/DesktopView/PostLayout/index.tsx @@ -0,0 +1,49 @@ +/* + * PostLayout + */ + +import { FC, Fragment, memo } from 'react' + +import type { TPost } from '@/spec' +import { METRIC } from '@/constant' +import { buildLog } from '@/utils' + +import ArticleBaseStats from '@/components/ArticleBaseStats' +import SubCommunity from './SubCommunity' +import PublishDate from './PublishDate' + +import { + Main, + Title, + AuthorName, + BottomInfo, + SubWrapper, +} from '../../styles/desktop_view/post_layout/index' + +/* eslint-disable-next-line */ +const log = buildLog('C:ArticleDigest') + +type TProps = { + article: TPost + metric?: string +} + +const PostLayout: FC = ({ metric = METRIC.ARTICLE, article }) => { + return ( + +
+ + {article.title} + + + by: mydearxym + +
+ + + + + ) +} + +export default memo(PostLayout) diff --git a/src/containers/digest/ArticleDigest/DesktopView/RepoTitle.js b/src/containers/digest/ArticleDigest/DesktopView/RepoTitle.js deleted file mode 100755 index b0354f8bd..000000000 --- a/src/containers/digest/ArticleDigest/DesktopView/RepoTitle.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react' - -import Tooltip from '@/components/Tooltip' - -import { cutRest } from '@/utils' -import { - Wrapper, - LanguageDot, - LanguagePopover, - TitleLink, - Slash, -} from '../styles/desktop_view/repo_title' - -const RepoTitle = ({ repo }) => ( - - {repo.primaryLanguage.name}} - placement="bottom" - > - - - - {repo.ownerName} - - / - - {cutRest(repo.title, 20)} - {' '} - -) - -export default React.memo(RepoTitle) diff --git a/src/containers/digest/ArticleDigest/DesktopView/Title.tsx b/src/containers/digest/ArticleDigest/DesktopView/Title.tsx deleted file mode 100755 index e98d4ab79..000000000 --- a/src/containers/digest/ArticleDigest/DesktopView/Title.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { FC, memo } from 'react' - -import type { TThread, TArticle } from '@/spec' -import { THREAD } from '@/constant' - -import RepoTitle from './RepoTitle' -import { Wrapper } from '../styles/desktop_view/title' - -type TProps = { - thread: TThread - data: TArticle -} - -const Title: FC = ({ thread, data }) => { - switch (thread) { - case THREAD.REPO: - return - - default: - return {data.title} - } -} - -export default memo(Title) diff --git a/src/containers/digest/ArticleDigest/DesktopView/WorksLayout/index.tsx b/src/containers/digest/ArticleDigest/DesktopView/WorksLayout/index.tsx new file mode 100644 index 000000000..519e1f1d6 --- /dev/null +++ b/src/containers/digest/ArticleDigest/DesktopView/WorksLayout/index.tsx @@ -0,0 +1,47 @@ +/* + * PostLayout + */ + +import { FC, Fragment, memo } from 'react' + +import type { TPost } from '@/spec' +import { METRIC } from '@/constant' +import { buildLog } from '@/utils' + +import ArticleBaseStats from '@/components/ArticleBaseStats' +import Upvote from '@/components/Upvote' + +import { + Main, + Title, + AuthorName, + BottomInfo, + SubWrapper, +} from '../../styles/desktop_view/post_layout/index' + +/* eslint-disable-next-line */ +const log = buildLog('C:ArticleDigest') + +type TProps = { + article: TPost + metric?: string +} + +const WorksLayout: FC = ({ metric = METRIC.ARTICLE, article }) => { + return ( + +
+ {article.title} + + + by: mydearxym + +
+ + + + + ) +} + +export default memo(WorksLayout) diff --git a/src/containers/digest/ArticleDigest/DesktopView/index.tsx b/src/containers/digest/ArticleDigest/DesktopView/index.tsx index a86f18ff9..080b8498d 100644 --- a/src/containers/digest/ArticleDigest/DesktopView/index.tsx +++ b/src/containers/digest/ArticleDigest/DesktopView/index.tsx @@ -13,25 +13,15 @@ import { METRIC } from '@/constant' import { useScroll } from '@/hooks' import { pluggedIn, buildLog } from '@/utils' -import ArticleBaseStats from '@/components/ArticleBaseStats' -import SubCommunity from './SubCommunity' -import PublishDate from './PublishDate' -// import DotDivider from '@/components/DotDivider' -// import { Space } from '@/components/Common' - -import Title from './Title' +// import PostLayout from './PostLayout' +import WorksLayout from './WorksLayout' import type { TStore } from '../store' - import { Wrapper, InnerWrapper, BannerContent, - Main, - AuthorName, - BottomInfo, - SubWrapper, -} from '../styles/desktop_view/index' +} from '../styles/desktop_view/post_layout/index' import { useInit, inAnchor, outAnchor } from '../logic' /* eslint-disable-next-line */ @@ -51,7 +41,7 @@ const ArticleDigestContainer: FC = ({ const { direction: scrollDirection } = useScroll() useInit(store, scrollDirection as TScrollDirection) - const { activeThread, viewingArticle } = store + const { viewingArticle } = store if (isNil(viewingArticle.id)) return null @@ -59,17 +49,8 @@ const ArticleDigestContainer: FC = ({ -
- - - <BottomInfo> - <ArticleBaseStats article={viewingArticle} /> - <AuthorName>mydearxym</AuthorName> - </BottomInfo> - </Main> - <SubWrapper> - <SubCommunity /> - </SubWrapper> + <WorksLayout article={viewingArticle} /> + {/* <PostLayout article={viewingArticle} /> */} </BannerContent> </InnerWrapper> <Waypoint onEnter={inAnchor} onLeave={outAnchor} /> diff --git a/src/containers/digest/ArticleDigest/MobileView/index.tsx b/src/containers/digest/ArticleDigest/MobileView/index.tsx index aea4e08a9..e81f57c66 100644 --- a/src/containers/digest/ArticleDigest/MobileView/index.tsx +++ b/src/containers/digest/ArticleDigest/MobileView/index.tsx @@ -15,7 +15,7 @@ import { pluggedIn, buildLog } from '@/utils' import FavoritesCats from '@/containers/tool/FavoritesCats' import ArticleBaseStats from '@/components/ArticleBaseStats' -import PublishDate from '../DesktopView/PublishDate' +import PublishDate from '../DesktopView/PostLayout/PublishDate' import type { TStore } from '../store' import { diff --git a/src/containers/digest/ArticleDigest/index.tsx b/src/containers/digest/ArticleDigest/index.tsx index 6643301a4..6e54d60f6 100755 --- a/src/containers/digest/ArticleDigest/index.tsx +++ b/src/containers/digest/ArticleDigest/index.tsx @@ -8,7 +8,7 @@ import { Fragment } from 'react' import { useDevice } from '@/hooks' -import DesktopView from './DesktopView/index' +import DesktopView from './DesktopView' import MobileView from './MobileView/index' const ArticleDigest = (props) => { diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout/index.ts similarity index 90% rename from src/containers/digest/ArticleDigest/styles/desktop_view/index.ts rename to src/containers/digest/ArticleDigest/styles/desktop_view/post_layout/index.ts index c605368b8..8d8e20f35 100644 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts +++ b/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout/index.ts @@ -40,6 +40,11 @@ export const SubWrapper = styled.div` width: ${WIDTH.ARTICLE.STICKER_LAPTOPL}; `} ` +export const Title = styled.div` + font-size: 26px; + color: ${theme('thread.articleTitle')}; + margin-bottom: 30px; +` export const BottomInfo = styled.div` ${css.flex('align-end', 'justify-between')}; margin-top: 15px; @@ -51,5 +56,5 @@ export const BottomInfo = styled.div` ` export const AuthorName = styled.div` color: ${theme('thread.articleDigest')}; - font-size: 13px; + font-size: 14px; ` diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/publish_date.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout/publish_date.ts similarity index 100% rename from src/containers/digest/ArticleDigest/styles/desktop_view/publish_date.ts rename to src/containers/digest/ArticleDigest/styles/desktop_view/post_layout/publish_date.ts diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/repo_title.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout/repo_title.ts similarity index 100% rename from src/containers/digest/ArticleDigest/styles/desktop_view/repo_title.ts rename to src/containers/digest/ArticleDigest/styles/desktop_view/post_layout/repo_title.ts diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/sub_community.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout/sub_community.ts similarity index 100% rename from src/containers/digest/ArticleDigest/styles/desktop_view/sub_community.ts rename to src/containers/digest/ArticleDigest/styles/desktop_view/post_layout/sub_community.ts diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/title.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/title.ts deleted file mode 100755 index d11937b11..000000000 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/title.ts +++ /dev/null @@ -1,11 +0,0 @@ -import styled from 'styled-components' - -import { theme } from '@/utils' - -export const Wrapper = styled.div` - font-size: 26px; - color: ${theme('thread.articleTitle')}; - margin-bottom: 30px; -` - -export const holder = 1 diff --git a/src/containers/tool/ArticleSticker/ArticleSticker.tsx b/src/containers/tool/ArticleSticker/ArticleSticker.tsx index 107fa4d5e..e4e3e8735 100644 --- a/src/containers/tool/ArticleSticker/ArticleSticker.tsx +++ b/src/containers/tool/ArticleSticker/ArticleSticker.tsx @@ -15,7 +15,7 @@ type TProps = { const ArticleSticker: FC<TProps> = ({ show, viewing }) => { return ( <Wrapper show={show}> - <Upvote count={viewing.starredCount} type="sticker" /> + <Upvote count={viewing.starredCount} type="article" /> <IconButton path="article/collect-bookmark.svg" size={24} diff --git a/src/spec/article.ts b/src/spec/article.ts index ef42d5fe5..d39fb1411 100644 --- a/src/spec/article.ts +++ b/src/spec/article.ts @@ -72,4 +72,4 @@ export type TArticleFilter = { read?: string } -export type TUpvote = 'default' | 'comment' | 'sticker' +export type TUpvote = 'default' | 'comment' | 'article' | 'works-article' From a75032cf5fe2280ef6d8237eaba1bc2d65d90846 Mon Sep 17 00:00:00 2001 From: mydearxym <mydearxym@qq.com> Date: Mon, 19 Jul 2021 23:37:48 +0800 Subject: [PATCH 04/13] refactor(avatars-row): new hover effect, awesome --- src/components/AvatarsRow/RealAvatar.tsx | 2 +- src/components/AvatarsRow/styles/real_avatar.ts | 11 +++-------- src/components/Tooltip/styles/index.ts | 2 +- 3 files changed, 5 insertions(+), 10 deletions(-) diff --git a/src/components/AvatarsRow/RealAvatar.tsx b/src/components/AvatarsRow/RealAvatar.tsx index 5c0a84c82..4ccf51fce 100644 --- a/src/components/AvatarsRow/RealAvatar.tsx +++ b/src/components/AvatarsRow/RealAvatar.tsx @@ -24,7 +24,7 @@ const RealAvatar: FC<TProps> = ({ user, size, onUserSelect }) => { return ( <Tooltip content={<UserPopContent>{user.nickname}</UserPopContent>} - delay={200} + delay={0} contentHeight={getAvatarSize(size, 'number') as string} showArrow={false} noPadding diff --git a/src/components/AvatarsRow/styles/real_avatar.ts b/src/components/AvatarsRow/styles/real_avatar.ts index a7815346b..7317f29e6 100644 --- a/src/components/AvatarsRow/styles/real_avatar.ts +++ b/src/components/AvatarsRow/styles/real_avatar.ts @@ -7,8 +7,6 @@ import ImgFallback from '@/components/ImgFallback' import { getLiSize, getAvatarSize } from './metric' import type { TAvatarSize } from '../spec' -import { AvatarsWrapper } from './index' - // height: 49px; type TWrapper = { size: TAvatarSize } export const Wrapper = styled.li<TWrapper>` @@ -19,16 +17,13 @@ export const Wrapper = styled.li<TWrapper>` z-index: 2; filter: grayscale(0.3); - ${AvatarsWrapper}:hover & { - margin: 0 5px; - transition-delay: 0.3s; - } - &:hover { filter: grayscale(0); + z-index: 3; + transform: scale(1.2); } - transition: all 0.25s; + transition: all 0.2s; ` type TAvatarsImg = { size: string; onClick: () => void; scrollPosition: any } export const AvatarsImg = styled(Img)<TAvatarsImg>` diff --git a/src/components/Tooltip/styles/index.ts b/src/components/Tooltip/styles/index.ts index b7c1bc904..26b29d5c7 100755 --- a/src/components/Tooltip/styles/index.ts +++ b/src/components/Tooltip/styles/index.ts @@ -29,7 +29,7 @@ export const NoPaddingStyledTippy = styled(StyledTippy)` export const ContentWrapper = styled.div<{ contentHeight: string }>` position: relative; height: ${({ contentHeight }) => contentHeight}; - z-index: 1; + /* z-index: 1; */ ` const Arrow = styled.div` position: absolute; From cf931d23ad1dd5de0600ccd4830db45528823b36 Mon Sep 17 00:00:00 2001 From: mydearxym <mydearxym@qq.com> Date: Tue, 20 Jul 2021 00:00:48 +0800 Subject: [PATCH 05/13] refactor(upvote): enhance TS support --- src/components/Upvote/ArticleLayout.tsx | 6 +++- src/components/Upvote/UpvoteBtn.tsx | 4 +-- src/components/Upvote/WorksArticleLayout.tsx | 7 +++-- src/components/Upvote/index.tsx | 13 +++++---- src/components/Upvote/styles/metric.ts | 29 ++++++++++--------- src/components/Upvote/styles/upvote_btn.ts | 21 +++++++------- .../DesktopView/WorksLayout/index.tsx | 4 +-- src/spec/article.ts | 2 +- src/spec/index.ts | 2 +- utils/constant/index.ts | 1 + utils/constant/layout.ts | 10 +++++++ 11 files changed, 60 insertions(+), 39 deletions(-) create mode 100644 utils/constant/layout.ts diff --git a/src/components/Upvote/ArticleLayout.tsx b/src/components/Upvote/ArticleLayout.tsx index 00d9cd28a..4bc7f8efa 100644 --- a/src/components/Upvote/ArticleLayout.tsx +++ b/src/components/Upvote/ArticleLayout.tsx @@ -7,6 +7,7 @@ import { FC, memo } from 'react' import { buildLog } from '@/utils' +import { UPVOTE_LAYOUT } from '@/constant' import TotalCount from './TotalCount' import UpvoteBtn from './UpvoteBtn' @@ -32,7 +33,10 @@ const Upvote: FC<TProps> = ({ return ( <Wrapper testid={testid}> <UpWrapper> - <UpvoteBtn viewerHasUpvoted={viewerHasUpvoted} type="article" /> + <UpvoteBtn + viewerHasUpvoted={viewerHasUpvoted} + type={UPVOTE_LAYOUT.ARTICLE} + /> </UpWrapper> <CountWrapper> <TotalCount count={count} /> diff --git a/src/components/Upvote/UpvoteBtn.tsx b/src/components/Upvote/UpvoteBtn.tsx index fc08ad247..50bf35a74 100644 --- a/src/components/Upvote/UpvoteBtn.tsx +++ b/src/components/Upvote/UpvoteBtn.tsx @@ -6,7 +6,7 @@ import { FC, memo, useState, useCallback } from 'react' -import type { TUser, TUpvote } from '@/spec' +import type { TUser, TUpvoteLayout } from '@/spec' import { ICON } from '@/config' import { buildLog } from '@/utils' @@ -25,7 +25,7 @@ const log = buildLog('c:Upvote:index') type TProps = { testid?: string - type?: TUpvote + type?: TUpvoteLayout num?: number viewerHasUpvoted?: boolean alias?: string diff --git a/src/components/Upvote/WorksArticleLayout.tsx b/src/components/Upvote/WorksArticleLayout.tsx index ec1a7a140..53aa317a9 100644 --- a/src/components/Upvote/WorksArticleLayout.tsx +++ b/src/components/Upvote/WorksArticleLayout.tsx @@ -7,7 +7,7 @@ import { FC, memo } from 'react' import { buildLog } from '@/utils' -import { SIZE } from '@/constant' +import { SIZE, UPVOTE_LAYOUT } from '@/constant' import AvatarsRow from '@/components/AvatarsRow' import TotalCount from './TotalCount' @@ -84,7 +84,10 @@ const Upvote: FC<TProps> = ({ return ( <Wrapper testid={testid}> <UpWrapper> - <UpvoteBtn viewerHasUpvoted={viewerHasUpvoted} type="works-article" /> + <UpvoteBtn + viewerHasUpvoted={viewerHasUpvoted} + type={UPVOTE_LAYOUT.WORKS_ARTICLE} + /> <CountWrapper> <TotalCount count={count} size={SIZE.LARGE} /> </CountWrapper> diff --git a/src/components/Upvote/index.tsx b/src/components/Upvote/index.tsx index 574e19f1f..a9bb8fbcd 100755 --- a/src/components/Upvote/index.tsx +++ b/src/components/Upvote/index.tsx @@ -6,7 +6,8 @@ import { FC, memo } from 'react' -import type { TUser, TUpvote } from '@/spec' +import type { TUser, TUpvoteLayout } from '@/spec' +import { UPVOTE_LAYOUT } from '@/constant' import { buildLog } from '@/utils' import DefaultLayout from './DefaultLayout' @@ -19,7 +20,7 @@ const log = buildLog('c:Upvote:index') type TProps = { testid?: string - type?: TUpvote + type?: TUpvoteLayout count?: number avatarsRowLimit?: number viewerHasUpvoted?: boolean @@ -27,15 +28,15 @@ type TProps = { avatarList?: TUser[] } -const Upvote: FC<TProps> = ({ type = 'default', ...restProps }) => { +const Upvote: FC<TProps> = ({ type = UPVOTE_LAYOUT.DEFAULT, ...restProps }) => { switch (type) { - case 'comment': { + case UPVOTE_LAYOUT.COMMENT: { return <CommentLayout {...restProps} /> } - case 'works-article': { + case UPVOTE_LAYOUT.WORKS_ARTICLE: { return <WorksArticleLayout {...restProps} /> } - case 'article': { + case UPVOTE_LAYOUT.ARTICLE: { return <ArticleLayout {...restProps} /> } default: { diff --git a/src/components/Upvote/styles/metric.ts b/src/components/Upvote/styles/metric.ts index 20ee48a89..ad480513a 100644 --- a/src/components/Upvote/styles/metric.ts +++ b/src/components/Upvote/styles/metric.ts @@ -1,12 +1,13 @@ -import type { TUpvote } from '@/spec' +import type { TUpvoteLayout } from '@/spec' +import { UPVOTE_LAYOUT } from '@/constant' -export const getIconSize = (type: TUpvote): string => { +export const getIconSize = (type: TUpvoteLayout): string => { switch (type) { - case 'article': { + case UPVOTE_LAYOUT.ARTICLE: { return '30px;' } - case 'works-article': { + case UPVOTE_LAYOUT.WORKS_ARTICLE: { return '22px;' } @@ -16,13 +17,13 @@ export const getIconSize = (type: TUpvote): string => { } } -export const getIconShadowSize = (type: TUpvote): string => { +export const getIconShadowSize = (type: TUpvoteLayout): string => { switch (type) { case 'article': { return '36px;' } - case 'works-article': { + case UPVOTE_LAYOUT.WORKS_ARTICLE: { return '30px;' } @@ -32,9 +33,9 @@ export const getIconShadowSize = (type: TUpvote): string => { } } -export const getShadowLeftOffset = (type: TUpvote): string => { +export const getShadowLeftOffset = (type: TUpvoteLayout): string => { switch (type) { - case 'works-article': { + case UPVOTE_LAYOUT.WORKS_ARTICLE: { return '-4px' } @@ -44,9 +45,9 @@ export const getShadowLeftOffset = (type: TUpvote): string => { } } -export const getShadowTopOffset = (type: TUpvote): string => { +export const getShadowTopOffset = (type: TUpvoteLayout): string => { switch (type) { - case 'works-article': { + case UPVOTE_LAYOUT.WORKS_ARTICLE: { return '-3px' } @@ -56,9 +57,9 @@ export const getShadowTopOffset = (type: TUpvote): string => { } } -export const getWindowLeftOffset = (type: TUpvote): string => { +export const getWindowLeftOffset = (type: TUpvoteLayout): string => { switch (type) { - case 'works-article': { + case UPVOTE_LAYOUT.WORKS_ARTICLE: { return '8px' } @@ -68,9 +69,9 @@ export const getWindowLeftOffset = (type: TUpvote): string => { } } -export const getWindowTopOffset = (type: TUpvote): string => { +export const getWindowTopOffset = (type: TUpvoteLayout): string => { switch (type) { - case 'works-article': { + case UPVOTE_LAYOUT.WORKS_ARTICLE: { return '10px' } diff --git a/src/components/Upvote/styles/upvote_btn.ts b/src/components/Upvote/styles/upvote_btn.ts index b5322f4e4..09b0e03ac 100644 --- a/src/components/Upvote/styles/upvote_btn.ts +++ b/src/components/Upvote/styles/upvote_btn.ts @@ -1,6 +1,7 @@ import styled, { keyframes } from 'styled-components' -import type { TUpvote, TActive } from '@/spec' +import type { TUpvoteLayout, TActive } from '@/spec' +import { UPVOTE_LAYOUT } from '@/constant' import Img from '@/Img' import { css, theme } from '@/utils' @@ -42,7 +43,7 @@ const bottomBubbles = keyframes` ` type TWrapper = { showAnimation: boolean - type: TUpvote + type: TUpvoteLayout } export const Wrapper = styled.div<TWrapper>` @@ -50,7 +51,7 @@ export const Wrapper = styled.div<TWrapper>` color: ${theme('thread.articleTitle')}; font-size: 15px; padding: 5px 0; - margin-top: ${({ type }) => (type === 'default' ? '4px' : 0)}; + margin-top: ${({ type }) => (type === UPVOTE_LAYOUT.DEFAULT ? '4px' : 0)}; appearance: none; background-color: transparent; border: none; @@ -147,14 +148,14 @@ export const Wrapper = styled.div<TWrapper>` export const ContentWrapper = styled.div` ${css.flex('align-center')}; ` -export const IconWrapper = styled.div<{ type: TUpvote }>` +export const IconWrapper = styled.div<{ type: TUpvoteLayout }>` ${css.flex('align-center', 'justify-start')}; - width: ${({ type }) => (type !== 'article' ? '20px' : 'auto')}; - margin-right: ${({ type }) => (type !== 'article' ? '3px' : '0')}; + width: ${({ type }) => (type !== UPVOTE_LAYOUT.ARTICLE ? '20px' : 'auto')}; + margin-right: ${({ type }) => (type !== UPVOTE_LAYOUT.ARTICLE ? '3px' : '0')}; position: relative; z-index: 1; ` -export const IconShadow = styled.div<{ type: TUpvote }>` +export const IconShadow = styled.div<{ type: TUpvoteLayout }>` position: absolute; left: ${({ type }) => getShadowLeftOffset(type)}; top: ${({ type }) => getShadowTopOffset(type)}; @@ -163,7 +164,7 @@ export const IconShadow = styled.div<{ type: TUpvote }>` border-radius: 100%; background: #0f4052; z-index: -1; - opacity: ${({ type }) => (type !== 'article' ? 0 : 0.6)}; + opacity: ${({ type }) => (type !== UPVOTE_LAYOUT.ARTICLE ? 0 : 0.6)}; ${IconWrapper}:hover & { opacity: 1; @@ -172,7 +173,7 @@ export const IconShadow = styled.div<{ type: TUpvote }>` transform: opacity 0.2s; ` -export const ShipWindow = styled.div<{ type?: TUpvote }>` +export const ShipWindow = styled.div<{ type?: TUpvoteLayout }>` position: absolute; left: ${({ type }) => getWindowLeftOffset(type)}; top: ${({ type }) => getWindowTopOffset(type)}; @@ -194,7 +195,7 @@ export const ArticleShipWindow = styled(ShipWindow)` opacity: 0.5; ` -type TUpIcon = { type: TUpvote } & TActive +type TUpIcon = { type: TUpvoteLayout } & TActive export const UpIcon = styled(Img)<TUpIcon>` fill: ${({ $active }) => $active ? '#139B9D;' : theme('thread.articleDigest')}; diff --git a/src/containers/digest/ArticleDigest/DesktopView/WorksLayout/index.tsx b/src/containers/digest/ArticleDigest/DesktopView/WorksLayout/index.tsx index 519e1f1d6..426530c81 100644 --- a/src/containers/digest/ArticleDigest/DesktopView/WorksLayout/index.tsx +++ b/src/containers/digest/ArticleDigest/DesktopView/WorksLayout/index.tsx @@ -5,7 +5,7 @@ import { FC, Fragment, memo } from 'react' import type { TPost } from '@/spec' -import { METRIC } from '@/constant' +import { METRIC, UPVOTE_LAYOUT } from '@/constant' import { buildLog } from '@/utils' import ArticleBaseStats from '@/components/ArticleBaseStats' @@ -38,7 +38,7 @@ const WorksLayout: FC<TProps> = ({ metric = METRIC.ARTICLE, article }) => { </BottomInfo> </Main> <SubWrapper> - <Upvote count={17} type="works-article" /> + <Upvote count={17} type={UPVOTE_LAYOUT.WORKS_ARTICLE} /> </SubWrapper> </Fragment> ) diff --git a/src/spec/article.ts b/src/spec/article.ts index d39fb1411..1e2f7e90a 100644 --- a/src/spec/article.ts +++ b/src/spec/article.ts @@ -72,4 +72,4 @@ export type TArticleFilter = { read?: string } -export type TUpvote = 'default' | 'comment' | 'article' | 'works-article' +export type TUpvoteLayout = 'default' | 'comment' | 'article' | 'works-article' diff --git a/src/spec/index.ts b/src/spec/index.ts index 64efdd508..12cc81fd5 100644 --- a/src/spec/index.ts +++ b/src/spec/index.ts @@ -56,7 +56,7 @@ export type { TPagedComments, TArticleFilter, TCopyright, - TUpvote, + TUpvoteLayout, } from './article' export type { diff --git a/utils/constant/index.ts b/utils/constant/index.ts index eaa3bf0c3..44d0ace1c 100755 --- a/utils/constant/index.ts +++ b/utils/constant/index.ts @@ -16,6 +16,7 @@ export { default as GUIDE } from './guide' export { default as RECIPE } from './recipe' export { default as GALLERY } from './gallery' export { default as VIEW } from './view' +export { UPVOTE_LAYOUT } from './layout' export { default as ANCHOR } from './anchor' export { default as METRIC } from './metric' export { default as SIZE } from './size' diff --git a/utils/constant/layout.ts b/utils/constant/layout.ts new file mode 100644 index 000000000..fea507461 --- /dev/null +++ b/utils/constant/layout.ts @@ -0,0 +1,10 @@ +import type { TUpvoteLayout } from '@/spec' + +export const UPVOTE_LAYOUT = { + DEFAULT: 'default' as TUpvoteLayout, + COMMENT: 'comment' as TUpvoteLayout, + ARTICLE: 'article' as TUpvoteLayout, + WORKS_ARTICLE: 'works-article' as TUpvoteLayout, +} + +export const holder = 1 From 3b26f0285c1fda4485e221b8e82522a6cc2a5e65 Mon Sep 17 00:00:00 2001 From: mydearxym <mydearxym@qq.com> Date: Tue, 20 Jul 2021 10:50:49 +0800 Subject: [PATCH 06/13] refactor(article-digest): redesign works digest --- .../DesktopView/WorksLayout/index.tsx | 30 +++++++--- .../ArticleDigest/DesktopView/index.tsx | 2 +- .../styles/desktop_view/index.ts | 29 ++++++++++ .../styles/desktop_view/post_layout/index.ts | 25 -------- .../styles/desktop_view/works_layout/index.ts | 57 +++++++++++++++++++ 5 files changed, 110 insertions(+), 33 deletions(-) create mode 100644 src/containers/digest/ArticleDigest/styles/desktop_view/index.ts create mode 100644 src/containers/digest/ArticleDigest/styles/desktop_view/works_layout/index.ts diff --git a/src/containers/digest/ArticleDigest/DesktopView/WorksLayout/index.tsx b/src/containers/digest/ArticleDigest/DesktopView/WorksLayout/index.tsx index 426530c81..5941b1c53 100644 --- a/src/containers/digest/ArticleDigest/DesktopView/WorksLayout/index.tsx +++ b/src/containers/digest/ArticleDigest/DesktopView/WorksLayout/index.tsx @@ -9,15 +9,21 @@ import { METRIC, UPVOTE_LAYOUT } from '@/constant' import { buildLog } from '@/utils' import ArticleBaseStats from '@/components/ArticleBaseStats' +import { IconButton } from '@/components/Buttons' import Upvote from '@/components/Upvote' import { Main, + WorksWrapper, + Cover, + Intro, Title, - AuthorName, + Desc, + Other, + Actions, BottomInfo, SubWrapper, -} from '../../styles/desktop_view/post_layout/index' +} from '../../styles/desktop_view/works_layout' /* eslint-disable-next-line */ const log = buildLog('C:ArticleDigest') @@ -31,11 +37,21 @@ const WorksLayout: FC<TProps> = ({ metric = METRIC.ARTICLE, article }) => { return ( <Fragment> <Main metric={metric}> - <Title>{article.title} - - - by: mydearxym - + + + + CoderPlanets + 可能是最性感的开发者社区, web first, pure ~ + + + + + + + + + +
diff --git a/src/containers/digest/ArticleDigest/DesktopView/index.tsx b/src/containers/digest/ArticleDigest/DesktopView/index.tsx index 080b8498d..4cd146619 100644 --- a/src/containers/digest/ArticleDigest/DesktopView/index.tsx +++ b/src/containers/digest/ArticleDigest/DesktopView/index.tsx @@ -21,7 +21,7 @@ import { Wrapper, InnerWrapper, BannerContent, -} from '../styles/desktop_view/post_layout/index' +} from '../styles/desktop_view/index' import { useInit, inAnchor, outAnchor } from '../logic' /* eslint-disable-next-line */ diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts new file mode 100644 index 000000000..93130a3cb --- /dev/null +++ b/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts @@ -0,0 +1,29 @@ +import styled from 'styled-components' + +import type { TTestable } from '@/spec' +import { theme, css, WIDTH } from '@/utils' + +export const Wrapper = styled.nav.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` + ${css.flexColumn('justify-end')}; + position: relative; + background: transparent; + border-bottom: ${theme('banner.spliter')}; + min-height: 220px; + margin-bottom: 15px; + width: 100%; + max-width: ${WIDTH.ARTICLE.PAGE}; + + ${css.media.laptopL` + min-height: 230px; + `} +` +export const InnerWrapper = styled.div` + ${css.flex('justify-center')}; + width: 100%; +` +export const BannerContent = styled.div` + ${css.flex()}; + width: 100%; +` diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout/index.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout/index.ts index 8d8e20f35..82b3d7317 100644 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout/index.ts +++ b/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout/index.ts @@ -1,32 +1,7 @@ import styled from 'styled-components' -import type { TTestable } from '@/spec' import { theme, css, WIDTH } from '@/utils' -export const Wrapper = styled.nav.attrs(({ testid }: TTestable) => ({ - 'data-test-id': testid, -}))` - ${css.flexColumn('justify-end')}; - position: relative; - background: transparent; - border-bottom: ${theme('banner.spliter')}; - min-height: 251px; - margin-bottom: 15px; - width: 100%; - max-width: ${WIDTH.ARTICLE.PAGE}; - - ${css.media.laptopL` - min-height: 230px; - `} -` -export const InnerWrapper = styled.div` - ${css.flex('justify-center')}; - width: 100%; -` -export const BannerContent = styled.div` - ${css.flex()}; - width: 100%; -` export const Main = styled.div<{ metric: string }>` ${({ metric }) => css.fitContentWidth(metric)}; width: 100%; diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/works_layout/index.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/works_layout/index.ts new file mode 100644 index 000000000..6d65cc97c --- /dev/null +++ b/src/containers/digest/ArticleDigest/styles/desktop_view/works_layout/index.ts @@ -0,0 +1,57 @@ +import styled from 'styled-components' + +import Img from '@/Img' +import { theme, css, WIDTH } from '@/utils' + +export const Main = styled.div<{ metric: string }>` + ${({ metric }) => css.fitContentWidth(metric)}; + width: 100%; +` +export const WorksWrapper = styled.div` + ${css.flex('align-center')}; +` +export const Intro = styled.div` + ${css.flexColumn()}; + width: 100%; +` +export const Cover = styled(Img)` + ${css.size(85)}; + border-radius: 4px; + margin-right: 20px; +` +export const Title = styled.div` + font-size: 26px; + color: ${theme('thread.articleTitle')}; +` +export const Desc = styled.div` + font-size: 15px; + color: ${theme('thread.articleDigest')}; + margin-bottom: 12px; +` +export const Other = styled.div` + ${css.flex('justify-between', 'align-end')}; +` +export const Actions = styled.div` + ${css.flex('align-center')}; +` +export const SubWrapper = styled.div` + ${css.flex('align-start', 'justify-center')}; + width: ${WIDTH.ARTICLE.STICKER}; + + ${css.media.laptopL` + width: ${WIDTH.ARTICLE.STICKER_LAPTOPL}; + `} +` +export const BottomInfo = styled.div` + ${css.flex('align-end', 'justify-between')}; + color: ${theme('thread.articleDigest')}; + margin-top: 15px; + padding-bottom: 36px; + border-bottom: 1px solid; + border-bottom-color: #004251; + width: 100%; +` +export const AuthorName = styled.div` + color: ${theme('thread.articleDigest')}; + font-size: 14px; +` From dc42744970b154977213aaf66fdc03360f69f2c6 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Tue, 20 Jul 2021 18:35:41 +0800 Subject: [PATCH 07/13] refactor(article): adjust metric system on works --- .../Upvote/styles/works_article_layout.ts | 2 +- .../content/PostContent/DesktopView.tsx | 2 +- .../PostContent/styles/desktop_view.ts | 4 +- .../DesktopView/WorksLayout/index.tsx | 2 +- .../ArticleDigest/DesktopView/index.tsx | 6 +- .../styles/desktop_view/index.ts | 5 +- .../styles/desktop_view/works_layout/index.ts | 10 +-- .../ArticleSticker/WorksSticker/About.tsx | 47 ++++++++++++++ .../ArticleSticker/WorksSticker/Others.tsx | 19 ++++++ .../ArticleSticker/WorksSticker/Teams.tsx | 54 ++++++++++++++++ .../WorksSticker/TechStacks.tsx | 62 +++++++++++++++++++ .../ArticleSticker/WorksSticker/index.tsx | 52 ++++++++++++++++ src/containers/tool/ArticleSticker/index.tsx | 13 ++-- .../tool/ArticleSticker/styles/index.ts | 9 +-- .../styles/works_sticker/about.ts | 62 +++++++++++++++++++ .../styles/works_sticker/index.ts | 37 +++++++++++ .../styles/works_sticker/others.ts | 13 ++++ .../styles/works_sticker/teams.ts | 31 ++++++++++ .../styles/works_sticker/tech_stacks.ts | 33 ++++++++++ .../unit/ArticleFooter/Actions/index.tsx | 3 +- .../Header/DesktopView/ArticleEditorView.tsx | 2 +- .../unit/Header/DesktopView/ArticleView.tsx | 2 +- .../unit/Header/DesktopView/index.tsx | 21 +++---- src/containers/unit/Header/index.tsx | 10 +-- .../styles/desktop_view/article_view.ts | 19 ++---- src/pages/post.tsx | 3 +- utils/constant/metric.ts | 1 + utils/css/media.ts | 9 +++ 28 files changed, 473 insertions(+), 60 deletions(-) create mode 100644 src/containers/tool/ArticleSticker/WorksSticker/About.tsx create mode 100644 src/containers/tool/ArticleSticker/WorksSticker/Others.tsx create mode 100644 src/containers/tool/ArticleSticker/WorksSticker/Teams.tsx create mode 100644 src/containers/tool/ArticleSticker/WorksSticker/TechStacks.tsx create mode 100644 src/containers/tool/ArticleSticker/WorksSticker/index.tsx create mode 100644 src/containers/tool/ArticleSticker/styles/works_sticker/about.ts create mode 100644 src/containers/tool/ArticleSticker/styles/works_sticker/index.ts create mode 100644 src/containers/tool/ArticleSticker/styles/works_sticker/others.ts create mode 100644 src/containers/tool/ArticleSticker/styles/works_sticker/teams.ts create mode 100644 src/containers/tool/ArticleSticker/styles/works_sticker/tech_stacks.ts diff --git a/src/components/Upvote/styles/works_article_layout.ts b/src/components/Upvote/styles/works_article_layout.ts index afbc98321..a34fa9f0b 100755 --- a/src/components/Upvote/styles/works_article_layout.ts +++ b/src/components/Upvote/styles/works_article_layout.ts @@ -26,5 +26,5 @@ export const Avatars = styled.div` ` export const DescWrapper = styled.div` ${css.flexColumn('align-center')}; - min-width: 150px; + min-width: 80px; ` diff --git a/src/containers/content/PostContent/DesktopView.tsx b/src/containers/content/PostContent/DesktopView.tsx index 9f9eb756a..40cfe5693 100644 --- a/src/containers/content/PostContent/DesktopView.tsx +++ b/src/containers/content/PostContent/DesktopView.tsx @@ -72,7 +72,7 @@ const PostContentContainer: FC = ({ - + diff --git a/src/containers/content/PostContent/styles/desktop_view.ts b/src/containers/content/PostContent/styles/desktop_view.ts index 436c40bd0..88b7a0a27 100644 --- a/src/containers/content/PostContent/styles/desktop_view.ts +++ b/src/containers/content/PostContent/styles/desktop_view.ts @@ -27,9 +27,7 @@ export const MainWrapper = styled.div<{ metric: string }>` flex-grow: 1; ${({ metric }) => css.fitContentWidth(metric)}; ` -export const SidebarWrapper = styled.div` - margin-top: 4px; -` +export const SidebarWrapper = styled.div`` /* background: ${theme('drawer.articleBg')}; */ export const ArticleWrapper = styled.div` font-size: 15px; diff --git a/src/containers/digest/ArticleDigest/DesktopView/WorksLayout/index.tsx b/src/containers/digest/ArticleDigest/DesktopView/WorksLayout/index.tsx index 5941b1c53..054b7c02e 100644 --- a/src/containers/digest/ArticleDigest/DesktopView/WorksLayout/index.tsx +++ b/src/containers/digest/ArticleDigest/DesktopView/WorksLayout/index.tsx @@ -53,7 +53,7 @@ const WorksLayout: FC = ({ metric = METRIC.ARTICLE, article }) => { - + diff --git a/src/containers/digest/ArticleDigest/DesktopView/index.tsx b/src/containers/digest/ArticleDigest/DesktopView/index.tsx index 4cd146619..b69f19539 100644 --- a/src/containers/digest/ArticleDigest/DesktopView/index.tsx +++ b/src/containers/digest/ArticleDigest/DesktopView/index.tsx @@ -41,15 +41,17 @@ const ArticleDigestContainer: FC = ({ const { direction: scrollDirection } = useScroll() useInit(store, scrollDirection as TScrollDirection) + console.log('article digest metric: ', metric) + const { viewingArticle } = store if (isNil(viewingArticle.id)) return null return ( - + - + {/* */} diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts index 93130a3cb..2f01d30cb 100644 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts +++ b/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts @@ -3,9 +3,10 @@ import styled from 'styled-components' import type { TTestable } from '@/spec' import { theme, css, WIDTH } from '@/utils' +type TWrapper = { metric: string } & TTestable export const Wrapper = styled.nav.attrs(({ testid }: TTestable) => ({ 'data-test-id': testid, -}))` +}))` ${css.flexColumn('justify-end')}; position: relative; background: transparent; @@ -16,7 +17,7 @@ export const Wrapper = styled.nav.attrs(({ testid }: TTestable) => ({ max-width: ${WIDTH.ARTICLE.PAGE}; ${css.media.laptopL` - min-height: 230px; + min-height: 200px; `} ` export const InnerWrapper = styled.div` diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/works_layout/index.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/works_layout/index.ts index 6d65cc97c..949dafd86 100644 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/works_layout/index.ts +++ b/src/containers/digest/ArticleDigest/styles/desktop_view/works_layout/index.ts @@ -34,12 +34,12 @@ export const Other = styled.div` export const Actions = styled.div` ${css.flex('align-center')}; ` -export const SubWrapper = styled.div` - ${css.flex('align-start', 'justify-center')}; - width: ${WIDTH.ARTICLE.STICKER}; - +export const SubWrapper = styled.div<{ metric: string }>` + ${css.flex('align-start', 'justify-end')}; + margin-top: 2px; + width: ${({ metric }) => WIDTH[metric].STICKER}; ${css.media.laptopL` - width: ${WIDTH.ARTICLE.STICKER_LAPTOPL}; + width: ${({ metric }) => WIDTH[metric].STICKER_LAPTOPL}; `} ` export const BottomInfo = styled.div` diff --git a/src/containers/tool/ArticleSticker/WorksSticker/About.tsx b/src/containers/tool/ArticleSticker/WorksSticker/About.tsx new file mode 100644 index 000000000..c998bcf69 --- /dev/null +++ b/src/containers/tool/ArticleSticker/WorksSticker/About.tsx @@ -0,0 +1,47 @@ +import { FC, memo } from 'react' + +import { ICON } from '@/config' + +import { + Wrapper, + Row, + LinkIcon, + LinkAddr, + SocialWrapper, + SocialItem, + SocialIcon, + SocialName, +} from '../styles/works_sticker/about' + +// type TProps = { +// show: boolean +// viewing: TArticle +// } + +const About: FC = () => { + return ( + + + + coderplanets.com + + + + + + github + + + + twitter + + + + 微信群 + + + + ) +} + +export default memo(About) diff --git a/src/containers/tool/ArticleSticker/WorksSticker/Others.tsx b/src/containers/tool/ArticleSticker/WorksSticker/Others.tsx new file mode 100644 index 000000000..95db06fa9 --- /dev/null +++ b/src/containers/tool/ArticleSticker/WorksSticker/Others.tsx @@ -0,0 +1,19 @@ +import { FC, memo } from 'react' + +import { Wrapper } from '../styles/works_sticker/others' + +// type TProps = { +// show: boolean +// viewing: TArticle +// } + +const Others: FC = () => { + return ( + +
是否盈利:
+
盈利模式:
+ + ) +} + +export default memo(Others) diff --git a/src/containers/tool/ArticleSticker/WorksSticker/Teams.tsx b/src/containers/tool/ArticleSticker/WorksSticker/Teams.tsx new file mode 100644 index 000000000..30235df2d --- /dev/null +++ b/src/containers/tool/ArticleSticker/WorksSticker/Teams.tsx @@ -0,0 +1,54 @@ +import { FC, memo } from 'react' + +import { + Wrapper, + Member, + Avatar, + Intro, + Name, + Bio, +} from '../styles/works_sticker/teams' + +// type TProps = { +// show: boolean +// viewing: TArticle +// } + +const tmpList = [ + { + id: '1', + avatar: 'https://avatars.githubusercontent.com/u/17426470?s=64&v=4', + nickname: 'coolMan', + bio: '这是一个随机头像，from github', + }, + { + id: '2', + avatar: 'https://avatars.githubusercontent.com/u/5580297?s=64&v=4', + nickname: 'coolMan', + bio: '这是一个随机头像，from github', + }, + { + id: '3', + avatar: 'https://avatars.githubusercontent.com/u/2041385?s=64&v=4', + nickname: 'coolMan', + bio: '这是一个随机头像，from github', + }, +] + +const Teams: FC = () => { + return ( + + {tmpList.map((item) => ( + + + + {item.nickname} + {item.bio} + + + ))} + + ) +} + +export default memo(Teams) diff --git a/src/containers/tool/ArticleSticker/WorksSticker/TechStacks.tsx b/src/containers/tool/ArticleSticker/WorksSticker/TechStacks.tsx new file mode 100644 index 000000000..e8e0372c4 --- /dev/null +++ b/src/containers/tool/ArticleSticker/WorksSticker/TechStacks.tsx @@ -0,0 +1,62 @@ +import { FC, memo } from 'react' + +import { ICON, ICON_BASE } from '@/config' +import { Wrapper, Tech, Logo, Name } from '../styles/works_sticker/tech_stacks' + +// type TProps = { +// show: boolean +// viewing: TArticle +// } + +const tmpList = [ + { + id: '1', + name: 'elixir', + logo: `${ICON_BASE}/pl/elixir.svg`, + }, + { + id: '2', + name: 'javascript', + logo: `${ICON_BASE}/pl/javascript.svg`, + }, + { + id: '3', + name: 'php', + logo: `${ICON_BASE}/pl/php.svg`, + }, + { + id: '4', + name: 'ts', + logo: `${ICON_BASE}/pl/typescript.svg`, + }, + { + id: '5', + name: 'clojure', + logo: `${ICON_BASE}/pl/clojure.svg`, + }, + { + id: '6', + name: 'java', + logo: `${ICON_BASE}/pl/java.svg`, + }, + { + id: '7', + name: 'react', + logo: `${ICON_BASE}/framework/react.svg`, + }, +] + +const TechStacks: FC = () => { + return ( + + {tmpList.map((item) => ( + + + {item.name} + + ))} + + ) +} + +export default memo(TechStacks) diff --git a/src/containers/tool/ArticleSticker/WorksSticker/index.tsx b/src/containers/tool/ArticleSticker/WorksSticker/index.tsx new file mode 100644 index 000000000..ef30f7c39 --- /dev/null +++ b/src/containers/tool/ArticleSticker/WorksSticker/index.tsx @@ -0,0 +1,52 @@ +/* eslint-disable react/jsx-no-comment-textnodes */ +import { FC, memo } from 'react' + +import type { TArticle } from '@/spec' + +import { Br } from '@/components/Common' + +import About from './About' +import Teams from './Teams' +import TechStacks from './TechStacks' +import Others from './Others' + +import { Wrapper, Row, Title, CommentSign } from '../styles/works_sticker' + +type TProps = { + show: boolean + viewing: TArticle +} + +const WorksSticker: FC = ({ show, viewing }) => { + return ( + + + // + 关于 + + +
+ + // + 团队成员 + +
+ +
+ + // + 技术栈 + +
+ +
+ + // + 其他 + + + + ) +} + +export default memo(WorksSticker) diff --git a/src/containers/tool/ArticleSticker/index.tsx b/src/containers/tool/ArticleSticker/index.tsx index a2416e6e5..faf11efbb 100755 --- a/src/containers/tool/ArticleSticker/index.tsx +++ b/src/containers/tool/ArticleSticker/index.tsx @@ -9,6 +9,7 @@ import { FC, Fragment } from 'react' import { pluggedIn, buildLog } from '@/utils' +import { METRIC } from '@/constant' import Sticky from '@/components/Sticky' import GotoTop from '@/components/GotoTop' @@ -17,7 +18,8 @@ import type { TStore } from './store' import LeftSticker from './LeftSticker/index' // import CommunitySticker from './CommunitySticker' -import ArticleSticker from './ArticleSticker' +// import ArticleSticker from './ArticleSticker' +import WorksSticker from './WorksSticker/index' import CommentSticker from './CommentSticker' import { Wrapper, InnerWrapper, MainWrapper, GoTopWrapper } from './styles' @@ -29,11 +31,13 @@ const log = buildLog('C:ArticleSticker') type TProps = { articleSticker?: TStore testid?: string + metric?: string } const ArticleStickerContainer: FC = ({ articleSticker: store, testid = 'article-sticker', + metric = METRIC.ARTICLE, }) => { useInit(store) @@ -54,14 +58,15 @@ const ArticleStickerContainer: FC = ({ /> - + {/* {showCommunity && } */} - + {/* + /> */} diff --git a/src/containers/tool/ArticleSticker/styles/index.ts b/src/containers/tool/ArticleSticker/styles/index.ts index 3ed02775f..3512eec2b 100755 --- a/src/containers/tool/ArticleSticker/styles/index.ts +++ b/src/containers/tool/ArticleSticker/styles/index.ts @@ -4,17 +4,18 @@ import type { TTestable } from '@/spec' import Img from '@/Img' import { animate, theme, css, WIDTH } from '@/utils' +type TWrapper = { metric: string } & TTestable export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ 'data-test-id': testid, -}))` +}))` ${css.flexColumn('align-center', 'justify-start')}; - width: ${WIDTH.ARTICLE.STICKER}; + width: ${({ metric }) => WIDTH[metric].STICKER}; /* bottom has a go-to-top button */ height: 85vh; - margin-top: -4px; + /* border: 1px solid tomato; */ ${css.media.laptopL` - width: ${WIDTH.ARTICLE.STICKER_LAPTOPL}; + width: ${({ metric }) => WIDTH[metric].STICKER_LAPTOPL}; `} ` export const InnerWrapper = styled.div` diff --git a/src/containers/tool/ArticleSticker/styles/works_sticker/about.ts b/src/containers/tool/ArticleSticker/styles/works_sticker/about.ts new file mode 100644 index 000000000..a27ec7dd8 --- /dev/null +++ b/src/containers/tool/ArticleSticker/styles/works_sticker/about.ts @@ -0,0 +1,62 @@ +import styled from 'styled-components' + +import type { TActive } from '@/spec' +import { css, theme } from '@/utils' +import Img from '@/Img' + +export const Wrapper = styled.div` + ${css.flexColumn()}; + color: ${theme('thread.articleDigest')}; + margin-bottom: 15px; +` +export const Row = styled.div` + ${css.flex('align-center')}; +` +export const LinkIcon = styled(Img)` + ${css.size(13)}; + fill: ${theme('thread.articleDigest')}; + margin-right: 6px; + margin-top: 2px; +` +export const LinkAddr = styled.a` + display: block; + color: #139c9e; + font-size: 15px; + font-weight: 600; + text-decoration: none; + + &:hover { + text-decoration: underline; + color: #139c9e; + } +` +export const SocialWrapper = styled.div` + ${css.flex('align-center')}; + flex-wrap: wrap; + margin-left: -4px; +` +export const SocialItem = styled.div` + ${css.flex('align-center')}; + padding: 1px 5px; + background: #00333e; + color: ${theme('thread.articleTitle')}; + margin-top: 8px; + margin-right: 6px; + border-radius: 5px; +` +export const SocialIcon = styled(LinkIcon)` + cursor: pointer; + ${SocialItem}:hover & { + fill: ${theme('thread.articleTitle')}; + } +` +export const SocialName = styled.div` + color: ${theme('thread.articleTitle')}; + font-size: 13px; + opacity: 0.9; + + &:hover { + opacity: 1; + cursor: pointer; + } +` diff --git a/src/containers/tool/ArticleSticker/styles/works_sticker/index.ts b/src/containers/tool/ArticleSticker/styles/works_sticker/index.ts new file mode 100644 index 000000000..9a7525e47 --- /dev/null +++ b/src/containers/tool/ArticleSticker/styles/works_sticker/index.ts @@ -0,0 +1,37 @@ +import styled from 'styled-components' + +import type { TActive } from '@/spec' +import { css, theme } from '@/utils' + +export const Wrapper = styled.div` + background: #0a313e; + display: ${({ show }) => (show ? 'block' : 'none')}; + color: ${theme('thread.articleDigest')}; + width: 100%; + min-height: 400px; + border-radius: 8px; + justify-content: center; + border: 1px solid; + border-color: #004250; + padding: 20px; + padding-right: 0; + /* sticker 的宽度是 260, 偏移后使视觉居中 */ + margin-right: -145px; + margin-top: -38px; +` +export const Row = styled.div` + ${css.flex('align-center')}; + margin-bottom: 10px; +` +export const CommentSign = styled.div` + margin-top: 1px; + margin-right: 6px; + font-size: 11px; + font-weight: 500; + color: #0082c1; + transform: rotate(12deg); +` +export const Title = styled.div` + color: ${theme('thread.articleDigest')}; + font-size: 14px; +` diff --git a/src/containers/tool/ArticleSticker/styles/works_sticker/others.ts b/src/containers/tool/ArticleSticker/styles/works_sticker/others.ts new file mode 100644 index 000000000..b42873714 --- /dev/null +++ b/src/containers/tool/ArticleSticker/styles/works_sticker/others.ts @@ -0,0 +1,13 @@ +import styled from 'styled-components' + +import type { TActive } from '@/spec' +import { css, theme } from '@/utils' + +export const Wrapper = styled.div` + ${css.flexColumn()}; + color: ${theme('thread.articleDigest')}; +` +export const Title = styled.div` + color: ${theme('thread.articleTitle')}; + font-size: 16px; +` diff --git a/src/containers/tool/ArticleSticker/styles/works_sticker/teams.ts b/src/containers/tool/ArticleSticker/styles/works_sticker/teams.ts new file mode 100644 index 000000000..92756b668 --- /dev/null +++ b/src/containers/tool/ArticleSticker/styles/works_sticker/teams.ts @@ -0,0 +1,31 @@ +import styled from 'styled-components' + +import type { TActive } from '@/spec' +import { css, theme } from '@/utils' + +import Img from '@/Img' + +export const Wrapper = styled.div` + ${css.flexColumn()}; + color: ${theme('thread.articleDigest')}; +` +export const Member = styled.div` + ${css.flex('align-center')}; + margin-bottom: 10px; +` +export const Avatar = styled(Img)` + ${css.circle(24)}; + margin-right: 12px; +` +export const Intro = styled.div` + ${css.flexColumn()}; +` +export const Name = styled.div` + color: ${theme('thread.articleTitle')}; + font-size: 14px; +` +export const Bio = styled.div` + color: ${theme('thread.articleDigest')}; + font-size: 13px; + ${css.cutRest('190px')}; +` diff --git a/src/containers/tool/ArticleSticker/styles/works_sticker/tech_stacks.ts b/src/containers/tool/ArticleSticker/styles/works_sticker/tech_stacks.ts new file mode 100644 index 000000000..1cc358847 --- /dev/null +++ b/src/containers/tool/ArticleSticker/styles/works_sticker/tech_stacks.ts @@ -0,0 +1,33 @@ +import styled from 'styled-components' + +import type { TActive } from '@/spec' +import { css, theme } from '@/utils' +import Img from '@/Img' + +export const Wrapper = styled.div` + ${css.flex('align-center')}; + flex-wrap: wrap; + margin-left: -4px; +` +export const Tech = styled.div` + ${css.flex('align-center')}; + margin-bottom: 10px; + margin-right: 10px; + border: 1px solid; + border-color: #144958; + background: #0c3a4a; + padding: 0 6px; + border-radius: 7px; +` +export const Logo = styled(Img)` + margin-right: 6px; + ${css.size(15)}; +` +export const Name = styled.a` + color: ${theme('thread.articleTitle')}; + font-size: 14px; + + &:hover { + cursor: pointer; + } +` diff --git a/src/containers/unit/ArticleFooter/Actions/index.tsx b/src/containers/unit/ArticleFooter/Actions/index.tsx index eb4eea473..57aade781 100644 --- a/src/containers/unit/ArticleFooter/Actions/index.tsx +++ b/src/containers/unit/ArticleFooter/Actions/index.tsx @@ -1,6 +1,7 @@ import { FC, memo } from 'react' import { useDevice } from '@/hooks' +import { report } from '@/utils' import DotDivider from '@/components/DotDivider' @@ -29,7 +30,7 @@ const Actions: FC = ({ showReferenceList, showOperationList }) => { 日志 - + report('USER')}> 举报 diff --git a/src/containers/unit/Header/DesktopView/ArticleEditorView.tsx b/src/containers/unit/Header/DesktopView/ArticleEditorView.tsx index 2bf050249..73f54854e 100644 --- a/src/containers/unit/Header/DesktopView/ArticleEditorView.tsx +++ b/src/containers/unit/Header/DesktopView/ArticleEditorView.tsx @@ -57,7 +57,7 @@ const ArticleEditorHeader: FC = ({ header: store, metric }) => { noBorder > - + = ({ header: store, metric }) => { noBorder > - + { +type TProps = { + metric: string +} + +const DesktopView: FC = ({ metric }) => { switch (metric) { case METRIC.ARTICLE: { return } + case METRIC.WORKS_ARTICLE: { + return + } case METRIC.ARTICLE_EDITOR: { return } @@ -20,12 +27,4 @@ const renderHeader = (metric: string): ReactNode => { } } -type TProps = { - metric: string -} - -const DesktopView: FC = ({ metric }) => { - return {renderHeader(metric)} -} - -export default DesktopView +export default memo(DesktopView) diff --git a/src/containers/unit/Header/index.tsx b/src/containers/unit/Header/index.tsx index 81ce5ccc8..4636e1576 100755 --- a/src/containers/unit/Header/index.tsx +++ b/src/containers/unit/Header/index.tsx @@ -6,7 +6,6 @@ import { ANCHOR } from '@/constant' import { useDevice } from '@/hooks' -import { report } from '@/utils' import DesktopView from './DesktopView/index' @@ -16,14 +15,7 @@ const HeaderContainer = ({ metric }) => { const { isMobile } = useDevice() return ( - { - console.log('report it!') - report('USER') - }} - > + {!isMobile ? : } ) diff --git a/src/containers/unit/Header/styles/desktop_view/article_view.ts b/src/containers/unit/Header/styles/desktop_view/article_view.ts index 911dc81a0..2184ddfbd 100644 --- a/src/containers/unit/Header/styles/desktop_view/article_view.ts +++ b/src/containers/unit/Header/styles/desktop_view/article_view.ts @@ -7,28 +7,21 @@ import { Wrapper as CommunityWrapper } from './community_view' export const Wrapper = styled(CommunityWrapper)` box-shadow: none; + justify-content: flex-start !important; ` export const InnerWrapper = styled.div` ${css.flex('justify-start', 'align-center')}; - width: ${WIDTH.ARTICLE.PAGE}; - margin-left: ${WIDTH.ARTICLE.CONTENT_OFFSET}; + width: 100%; height: 33px; - - ${css.media.desktopL` - margin-left: ${WIDTH.ARTICLE.CONTENT_OFFSET_DESKTOPL}; - `} - - ${css.media.laptopL` - margin-left: ${WIDTH.ARTICLE.CONTENT_OFFSET_LAPTOPL}; - `} ` -export const RouterWrapper = styled.div` +export const RouterWrapper = styled.div<{ metric: string }>` ${css.flex('align-center')}; + width: 100%; height: 100%; - width: ${WIDTH.ARTICLE.CONTENT}; + ${({ metric }) => css.fitContentWidth(metric)}; ` export const Operations = styled.div` - ${css.flex('align-both')}; + ${css.flex('align-center', 'justify-end')}; width: ${WIDTH.ARTICLE.STICKER}; ${css.media.laptopL` diff --git a/src/pages/post.tsx b/src/pages/post.tsx index 5eed53dc9..e451ed51b 100755 --- a/src/pages/post.tsx +++ b/src/pages/post.tsx @@ -113,7 +113,8 @@ const PostPage = (props) => { return ( Date: Tue, 20 Jul 2021 23:04:30 +0800 Subject: [PATCH 08/13] refactor(spec): add TMetrice --- src/components/ErrorPage/index.tsx | 3 +- src/components/Navigator/DigestView.tsx | 4 +- src/components/Navigator/index.tsx | 10 +-- .../content/CoolGuideContent/index.tsx | 3 +- .../content/CoolGuideContent/styles/index.ts | 4 +- .../content/DiscoveryContent/styles/index.ts | 3 +- .../content/FriendsContent/styles/index.ts | 4 +- .../content/HaveADrinkContent/index.tsx | 3 +- .../content/HaveADrinkContent/styles/index.ts | 3 +- .../content/HelpCenterContent/Digest.tsx | 6 +- .../content/HelpCenterContent/index.tsx | 3 +- .../HelpCenterContent/styles/digest.ts | 7 +- .../content/HelpCenterContent/styles/index.ts | 4 +- .../content/MeetupsContent/index.tsx | 3 +- .../content/MeetupsContent/styles/index.ts | 4 +- .../content/MembershipContent/index.tsx | 4 +- .../content/MembershipContent/styles/index.ts | 6 +- .../content/PostContent/DesktopView.tsx | 3 +- .../PostContent/styles/desktop_view.ts | 4 +- .../content/SponsorContent/index.tsx | 3 +- .../content/SponsorContent/styles/index.ts | 4 +- .../content/TrendingContent/styles/index.ts | 3 +- src/containers/content/UserContent/index.tsx | 3 +- .../content/UserContent/styles/index.ts | 5 +- src/containers/content/WorksContent/index.tsx | 3 +- .../content/WorksContent/styles/index.ts | 4 +- .../DesktopView/PostLayout/index.tsx | 4 +- .../DesktopView/WorksLayout/index.tsx | 4 +- .../ArticleDigest/DesktopView/index.tsx | 4 +- .../styles/desktop_view/index.ts | 4 +- .../styles/desktop_view/post_layout/index.ts | 3 +- .../styles/desktop_view/works_layout/index.ts | 7 +- .../CommunityDigest/ClassicView/index.tsx | 4 +- .../digest/CommunityDigest/index.tsx | 3 +- .../styles/classic_view/index.ts | 3 +- .../editor/ArticleEditor/styles/index.ts | 4 +- .../editor/CommunityEditor/styles/index.ts | 5 +- .../editor/WorksEditor/styles/index.ts | 4 +- src/containers/layout/GlobalLayout/SEO.tsx | 3 +- src/containers/layout/GlobalLayout/index.tsx | 6 +- .../layout/GlobalLayout/styles/index.ts | 3 +- src/containers/tool/ArticleSticker/index.tsx | 3 +- .../tool/ArticleSticker/styles/index.ts | 4 +- .../unit/Footer/DesktopView/ArticleView.tsx | 12 ++- .../unit/Footer/DesktopView/BottomInfo.tsx | 19 ++++- .../unit/Footer/DesktopView/CommunityView.tsx | 10 +-- .../unit/Footer/DesktopView/HomeView.tsx | 4 +- .../DesktopView/HostingCommunityView.tsx | 4 +- .../DesktopView/TopInfo/WorksArticle.tsx | 31 ++++++++ .../unit/Footer/DesktopView/TopInfo/index.tsx | 21 +++-- .../Footer/DesktopView/WorksArticleLayout.tsx | 79 +++++++++++++++++++ .../unit/Footer/DesktopView/index.tsx | 23 ++++-- src/containers/unit/Footer/logic.ts | 4 +- src/containers/unit/Footer/store.ts | 40 +++++----- .../styles/desktop_view/article_view.ts | 4 +- .../Footer/styles/desktop_view/bottom_info.ts | 5 +- .../styles/desktop_view/community_view.ts | 4 +- .../Footer/styles/desktop_view/home_view.ts | 4 +- .../desktop_view/hosting_community_view.ts | 4 +- .../desktop_view/works_article_layout.ts | 33 ++++++++ src/containers/unit/Footer/styles/index.ts | 8 +- .../Header/DesktopView/ArticleEditorView.tsx | 3 +- .../unit/Header/DesktopView/ArticleView.tsx | 3 +- .../unit/Header/DesktopView/CommunityVIew.tsx | 3 +- .../unit/Header/DesktopView/index.tsx | 3 +- src/containers/unit/Header/logic.ts | 4 +- .../styles/desktop_view/article_view.ts | 4 +- .../styles/desktop_view/community_view.ts | 4 +- src/containers/unit/ModeLine/index.tsx | 7 +- src/pages/post.tsx | 3 +- src/spec/index.ts | 1 + src/spec/metric.ts | 28 +++++++ utils/constant/metric.ts | 45 +++++------ utils/css/media.ts | 3 +- 74 files changed, 412 insertions(+), 182 deletions(-) create mode 100644 src/containers/unit/Footer/DesktopView/TopInfo/WorksArticle.tsx create mode 100755 src/containers/unit/Footer/DesktopView/WorksArticleLayout.tsx create mode 100755 src/containers/unit/Footer/styles/desktop_view/works_article_layout.ts create mode 100644 src/spec/metric.ts diff --git a/src/components/ErrorPage/index.tsx b/src/components/ErrorPage/index.tsx index 582cc6c0b..bd583039b 100755 --- a/src/components/ErrorPage/index.tsx +++ b/src/components/ErrorPage/index.tsx @@ -8,6 +8,7 @@ import { FC, memo } from 'react' import { useRouter } from 'next/router' import Link from 'next/link' +import type { TMetric } from '@/spec' import { METRIC } from '@/constant' import { ICON_BASE } from '@/config' import { buildLog } from '@/utils' @@ -37,7 +38,7 @@ export type TProps = { errorCode?: number // 400 | 500 | 404 target?: string testid?: string - metric?: string + metric?: TMetric } const ErrorPage: FC = ({ diff --git a/src/components/Navigator/DigestView.tsx b/src/components/Navigator/DigestView.tsx index 5aba14e76..8b91c6f7d 100755 --- a/src/components/Navigator/DigestView.tsx +++ b/src/components/Navigator/DigestView.tsx @@ -1,7 +1,7 @@ import { FC, memo } from 'react' +import type { TMetric } from '@/spec' import { METRIC } from '@/constant' - import BlinkCursor from '@/components/BlinkCursor' import { @@ -30,7 +30,7 @@ const renderMainEntries = (metric) => { } type TProps = { - metric: string + metric: TMetric layout: TC11NLayout showLogoText: boolean isOnline: boolean diff --git a/src/components/Navigator/index.tsx b/src/components/Navigator/index.tsx index d69fbed7f..49bcdc74c 100755 --- a/src/components/Navigator/index.tsx +++ b/src/components/Navigator/index.tsx @@ -2,10 +2,10 @@ * Navigator */ -import { FC, memo, Fragment } from 'react' -import { contains, values } from 'ramda' +import { FC, memo } from 'react' +import { contains } from 'ramda' -import type { TCommunity, TC11NLayout } from '@/spec' +import type { TCommunity, TC11NLayout, TMetric } from '@/spec' import { C11N, METRIC, HCN } from '@/constant' import { buildLog } from '@/utils' @@ -17,7 +17,7 @@ const log = buildLog('c:Navigator:index') const shouldShowLogoText = ( communityRaw: string, - metric: string, + metric: TMetric, layout: TC11NLayout, ): boolean => { if (contains(metric, [METRIC.ARTICLE, METRIC.ARTICLE_EDITOR])) return false @@ -30,7 +30,7 @@ type TProps = { community: TCommunity isOnline?: boolean layout: TC11NLayout - metric?: string + metric?: TMetric } const Navigator: FC = ({ diff --git a/src/containers/content/CoolGuideContent/index.tsx b/src/containers/content/CoolGuideContent/index.tsx index 1cb3aa71e..6466e91a2 100755 --- a/src/containers/content/CoolGuideContent/index.tsx +++ b/src/containers/content/CoolGuideContent/index.tsx @@ -6,6 +6,7 @@ import { FC } from 'react' +import type { TMetric } from '@/spec' import { pluggedIn, buildLog } from '@/utils' import FilterBar from './FilterBar' @@ -20,7 +21,7 @@ const log = buildLog('C:CoolGuideContent') type TProps = { coolGuideContent: TStore - metric: string + metric: TMetric testid?: string } diff --git a/src/containers/content/CoolGuideContent/styles/index.ts b/src/containers/content/CoolGuideContent/styles/index.ts index 7764633bd..e942d0e17 100755 --- a/src/containers/content/CoolGuideContent/styles/index.ts +++ b/src/containers/content/CoolGuideContent/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import type { TTestable } from '@/spec' +import type { TTestable, TMetric } from '@/spec' import { css } from '@/utils' import { SIDEBAR_WIDTH } from './metric' @@ -11,7 +11,7 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ width: 100%; margin-top: 12px; ` -export const InnerWrapper = styled.div<{ metric: string }>` +export const InnerWrapper = styled.div<{ metric: TMetric }>` ${css.flex('justify-center')}; margin-top: 30px; width: 100%; diff --git a/src/containers/content/DiscoveryContent/styles/index.ts b/src/containers/content/DiscoveryContent/styles/index.ts index f1f73a54f..a24527a5f 100755 --- a/src/containers/content/DiscoveryContent/styles/index.ts +++ b/src/containers/content/DiscoveryContent/styles/index.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import type { TMetric } from '@/spec' import { css, theme } from '@/utils' import Img from '@/Img' @@ -13,7 +14,7 @@ export const ContentWrapper = styled.div<{ center: boolean }>` margin-left: ${({ center }) => (center ? '5%' : 'none')}; transition: all 0.25s; ` -export const InnerWrapper = styled.div<{ metric: string }>` +export const InnerWrapper = styled.div<{ metric: TMetric }>` ${css.flex()}; width: 100%; height: 100%; diff --git a/src/containers/content/FriendsContent/styles/index.ts b/src/containers/content/FriendsContent/styles/index.ts index 515054228..d82ea2ca2 100755 --- a/src/containers/content/FriendsContent/styles/index.ts +++ b/src/containers/content/FriendsContent/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import type { TTestable } from '@/spec' +import type { TTestable, TMetric } from '@/spec' import { css, theme } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ @@ -12,7 +12,7 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ margin-bottom: 50px; background-image: ${theme('banner.linearGradient')}; ` -export const InnerWrapper = styled.div<{ metric: string }>` +export const InnerWrapper = styled.div<{ metric: TMetric }>` ${css.flexColumn('align-both')} ${({ metric }) => css.fitContentWidth(metric)}; padding: 10px 0; diff --git a/src/containers/content/HaveADrinkContent/index.tsx b/src/containers/content/HaveADrinkContent/index.tsx index 575191d4a..1b1f8e8b1 100755 --- a/src/containers/content/HaveADrinkContent/index.tsx +++ b/src/containers/content/HaveADrinkContent/index.tsx @@ -7,6 +7,7 @@ import { FC } from 'react' import dynamic from 'next/dynamic' +import type { TMetric } from '@/spec' import { pluggedIn, buildLog, scrollToTop, lockPage, unlockPage } from '@/utils' import { useShortcut } from '@/hooks' @@ -33,7 +34,7 @@ const log = buildLog('C:HaveADrinkContent') type TProps = { haveADrinkContent: TStore - metric: string + metric: TMetric } const HaveADrinkContentContainer: FC = ({ diff --git a/src/containers/content/HaveADrinkContent/styles/index.ts b/src/containers/content/HaveADrinkContent/styles/index.ts index 3a8cb0e83..5a184985b 100755 --- a/src/containers/content/HaveADrinkContent/styles/index.ts +++ b/src/containers/content/HaveADrinkContent/styles/index.ts @@ -1,12 +1,13 @@ import styled from 'styled-components' +import type { TMetric } from '@/spec' import { theme, css } from '@/utils' export const Wrapper = styled.div` ${css.flexColumn('align-both')} width: 100%; ` -export const InnerWrapper = styled.div<{ metric: string }>` +export const InnerWrapper = styled.div<{ metric: TMetric }>` ${css.flexColumn('align-center', 'justify-between')}; margin-top: 25px; margin-bottom: 40px; diff --git a/src/containers/content/HelpCenterContent/Digest.tsx b/src/containers/content/HelpCenterContent/Digest.tsx index e522a6e00..05473ea23 100644 --- a/src/containers/content/HelpCenterContent/Digest.tsx +++ b/src/containers/content/HelpCenterContent/Digest.tsx @@ -1,8 +1,6 @@ import { FC } from 'react' -// import { METRIC } from '@/constant' - -import type { TCommunity } from '@/spec' +import type { TCommunity, TMetric } from '@/spec' import { Wrapper, @@ -17,7 +15,7 @@ import { type TProps = { community: TCommunity - metric: string + metric: TMetric } const Digest: FC = ({ metric, community }) => { diff --git a/src/containers/content/HelpCenterContent/index.tsx b/src/containers/content/HelpCenterContent/index.tsx index aa8b78fce..2bd582cf3 100755 --- a/src/containers/content/HelpCenterContent/index.tsx +++ b/src/containers/content/HelpCenterContent/index.tsx @@ -8,6 +8,7 @@ import { FC } from 'react' +import type { TMetric } from '@/spec' import { METRIC } from '@/constant' import { pluggedIn, buildLog } from '@/utils' @@ -47,7 +48,7 @@ const items = [ type TProps = { helpCenterContent?: TStore testid?: string - metric?: string + metric?: TMetric } const HelpCenterContentContainer: FC = ({ diff --git a/src/containers/content/HelpCenterContent/styles/digest.ts b/src/containers/content/HelpCenterContent/styles/digest.ts index bc6c75b85..a7c6b8682 100644 --- a/src/containers/content/HelpCenterContent/styles/digest.ts +++ b/src/containers/content/HelpCenterContent/styles/digest.ts @@ -1,16 +1,17 @@ import styled from 'styled-components' -import Img from '@/Img' +import type { TMetric } from '@/spec' import { css, theme } from '@/utils' +import Img from '@/Img' -export const Wrapper = styled.div<{ metric: string }>` +export const Wrapper = styled.div<{ metric: TMetric }>` ${css.flex('justify-center')}; width: 100%; height: 100px; background: ${theme('banner.bg')}; ${({ metric }) => css.fitPageWidth(metric)}; ` -export const InnerWrapper = styled.div<{ metric: string }>` +export const InnerWrapper = styled.div<{ metric: TMetric }>` ${css.flex('align-center')}; width: 100%; height: 100%; diff --git a/src/containers/content/HelpCenterContent/styles/index.ts b/src/containers/content/HelpCenterContent/styles/index.ts index bd039a5d4..a4f2a5ddc 100755 --- a/src/containers/content/HelpCenterContent/styles/index.ts +++ b/src/containers/content/HelpCenterContent/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import type { TTestable } from '@/spec' +import type { TTestable, TMetric } from '@/spec' import { css } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ @@ -10,7 +10,7 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ width: 100%; min-height: 80vh; ` -export const ContentWrapper = styled.div<{ metric: string }>` +export const ContentWrapper = styled.div<{ metric: TMetric }>` ${css.flex('justify-center')}; ${({ metric }) => css.fitContentWidth(metric)}; width: 100%; diff --git a/src/containers/content/MeetupsContent/index.tsx b/src/containers/content/MeetupsContent/index.tsx index a9725f0db..43ebff38f 100755 --- a/src/containers/content/MeetupsContent/index.tsx +++ b/src/containers/content/MeetupsContent/index.tsx @@ -6,6 +6,7 @@ import { FC } from 'react' +import type { TMetric } from '@/spec' import { ASSETS_ENDPOINT } from '@/config' import { GALLERY } from '@/constant' import { pluggedIn, buildLog } from '@/utils' @@ -45,7 +46,7 @@ const GALLERY_TYPES = [ type TProps = { meetupsContent?: TStore testid?: string - metric?: string + metric?: TMetric } const MeetupsContentContainer: FC = ({ diff --git a/src/containers/content/MeetupsContent/styles/index.ts b/src/containers/content/MeetupsContent/styles/index.ts index f06410f49..e6c61cc52 100755 --- a/src/containers/content/MeetupsContent/styles/index.ts +++ b/src/containers/content/MeetupsContent/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import type { TTestable } from '@/spec' +import type { TTestable, TMetric } from '@/spec' import { css } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ @@ -9,7 +9,7 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ ${css.flex('justify-center')}; width: 100%; ` -export const InnerWrapper = styled.div<{ metric: string }>` +export const InnerWrapper = styled.div<{ metric: TMetric }>` ${css.flex()}; margin-top: 40px; ${({ metric }) => css.fitContentWidth(metric)}; diff --git a/src/containers/content/MembershipContent/index.tsx b/src/containers/content/MembershipContent/index.tsx index 12700b14a..7eb8a8f98 100755 --- a/src/containers/content/MembershipContent/index.tsx +++ b/src/containers/content/MembershipContent/index.tsx @@ -6,8 +6,8 @@ import { FC } from 'react' +import type { TMetric } from '@/spec' import { pluggedIn, buildLog } from '@/utils' - import { OrButton, Button } from '@/components/Buttons' import Checker from '@/components/Checker' @@ -68,7 +68,7 @@ const PayButton = ({ pkgType, payType }) => { type TProps = { membershipContent: TStore - metric: string + metric: TMetric testid?: string } diff --git a/src/containers/content/MembershipContent/styles/index.ts b/src/containers/content/MembershipContent/styles/index.ts index 1d25e5ebb..fe1a3f4db 100755 --- a/src/containers/content/MembershipContent/styles/index.ts +++ b/src/containers/content/MembershipContent/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import type { TTestable, TActive } from '@/spec' +import type { TTestable, TActive, TMetric } from '@/spec' import { theme, css } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ @@ -10,7 +10,7 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ background-image: ${theme('banner.linearGradient')}; width: 100%; ` -export const InnerWrapper = styled.div<{ metric: string }>` +export const InnerWrapper = styled.div<{ metric: TMetric }>` ${css.flexColumn('align-both')} padding: 10px 0; margin-top: 12px; @@ -49,7 +49,7 @@ export const InviteCodeWrapper = styled.div` transition: color 0.25s; ` -export const ContentWrapper = styled.div<{ metric: string }>` +export const ContentWrapper = styled.div<{ metric: TMetric }>` ${css.flex('justify-between')}; width: 100%; ${({ metric }) => css.fitContentWidth(metric)}; diff --git a/src/containers/content/PostContent/DesktopView.tsx b/src/containers/content/PostContent/DesktopView.tsx index 40cfe5693..e3e229313 100644 --- a/src/containers/content/PostContent/DesktopView.tsx +++ b/src/containers/content/PostContent/DesktopView.tsx @@ -7,6 +7,7 @@ import React, { FC, useRef } from 'react' import { Waypoint } from 'react-waypoint' +import type { TMetric } from '@/spec' import { pluggedIn, buildLog } from '@/utils' import Comments from '@/containers/unit/Comments' @@ -36,7 +37,7 @@ const log = buildLog('C:PostContent') type TProps = { postContent?: TStore testid?: string - metric?: string + metric?: TMetric } const PostContentContainer: FC = ({ diff --git a/src/containers/content/PostContent/styles/desktop_view.ts b/src/containers/content/PostContent/styles/desktop_view.ts index 88b7a0a27..b49030cc8 100644 --- a/src/containers/content/PostContent/styles/desktop_view.ts +++ b/src/containers/content/PostContent/styles/desktop_view.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import type { TTestable } from '@/spec' +import type { TTestable, TMetric } from '@/spec' import { theme, css, WIDTH } from '@/utils' export const Wrapper = styled.article.attrs(({ testid }: TTestable) => ({ @@ -23,7 +23,7 @@ export const InnerWrapper = styled.div` padding-left: 0; padding-right: 0; ` -export const MainWrapper = styled.div<{ metric: string }>` +export const MainWrapper = styled.div<{ metric: TMetric }>` flex-grow: 1; ${({ metric }) => css.fitContentWidth(metric)}; ` diff --git a/src/containers/content/SponsorContent/index.tsx b/src/containers/content/SponsorContent/index.tsx index b3745f921..11d9999c7 100755 --- a/src/containers/content/SponsorContent/index.tsx +++ b/src/containers/content/SponsorContent/index.tsx @@ -9,6 +9,7 @@ // import { FC } from 'react' import { FC } from 'react' +import type { TMetric } from '@/spec' import { pluggedIn, buildLog } from '@/utils' import { Br } from '@/components/Common' @@ -120,7 +121,7 @@ const items = [ type TProps = { sponsorContent?: TStore testid?: string - metric?: string + metric?: TMetric } const SponsorContentContainer: FC = ({ diff --git a/src/containers/content/SponsorContent/styles/index.ts b/src/containers/content/SponsorContent/styles/index.ts index 3bbf81c17..6ea5a6dbd 100755 --- a/src/containers/content/SponsorContent/styles/index.ts +++ b/src/containers/content/SponsorContent/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import type { TTestable } from '@/spec' +import type { TTestable, TMetric } from '@/spec' import { css, theme } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ @@ -20,7 +20,7 @@ export const InnerWrapper = styled.div<{ bannerVisiable: boolean }>` margin-top: ${({ bannerVisiable }) => (bannerVisiable ? '40vh' : '20vh')}; transition: margin-top 0.25s; ` -export const ContentWrapper = styled.div<{ metric: string }>` +export const ContentWrapper = styled.div<{ metric: TMetric }>` ${css.flexColumn('align-center')}; ${({ metric }) => css.fitContentWidth(metric)}; ` diff --git a/src/containers/content/TrendingContent/styles/index.ts b/src/containers/content/TrendingContent/styles/index.ts index 7c2d80452..721fc2d15 100755 --- a/src/containers/content/TrendingContent/styles/index.ts +++ b/src/containers/content/TrendingContent/styles/index.ts @@ -1,13 +1,14 @@ import styled from 'styled-components' // import Img from '@/Img' +import type { TMetric } from '@/spec' import { css } from '@/utils' export const Wrapper = styled.div` ${css.flexColumn('align-both')} width: 100%; ` -export const InnerWrapper = styled.div<{ metric: string }>` +export const InnerWrapper = styled.div<{ metric: TMetric }>` ${css.flex()}; padding: 10px 0; margin-top: 12px; diff --git a/src/containers/content/UserContent/index.tsx b/src/containers/content/UserContent/index.tsx index 0b7e94f2e..1dcb81472 100755 --- a/src/containers/content/UserContent/index.tsx +++ b/src/containers/content/UserContent/index.tsx @@ -6,6 +6,7 @@ import { FC } from 'react' +import type { TMetric } from '@/spec' import { USER_THREAD } from '@/constant' import { pluggedIn, buildLog } from '@/utils' @@ -99,7 +100,7 @@ const TabberContent = ({ active }) => { type TProps = { userContent: TStore - metric: string + metric: TMetric } const UserContentContainer: FC = ({ userContent: store, metric }) => { diff --git a/src/containers/content/UserContent/styles/index.ts b/src/containers/content/UserContent/styles/index.ts index 26568d5d3..6b4fe3fe1 100755 --- a/src/containers/content/UserContent/styles/index.ts +++ b/src/containers/content/UserContent/styles/index.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import type { TMetric } from '@/spec' import { theme, css } from '@/utils' export const Wrapper = styled.div` @@ -7,12 +8,12 @@ export const Wrapper = styled.div` width: 100%; overflow-x: hidden; ` -export const InnerWrapper = styled.div<{ metric: string }>` +export const InnerWrapper = styled.div<{ metric: TMetric }>` ${css.flex()}; width: 100%; ${({ metric }) => css.fitContentWidth(metric)}; ` -export const BannerWrapper = styled.div<{ metric: string }>` +export const BannerWrapper = styled.div<{ metric: TMetric }>` position: relative; background: ${theme('banner.bg')}; width: 100%; diff --git a/src/containers/content/WorksContent/index.tsx b/src/containers/content/WorksContent/index.tsx index e33676b9b..9893a7ff4 100755 --- a/src/containers/content/WorksContent/index.tsx +++ b/src/containers/content/WorksContent/index.tsx @@ -6,6 +6,7 @@ import { FC } from 'react' +import type { TMetric } from '@/spec' import { pluggedIn, buildLog } from '@/utils' import Pagi from '@/components/Pagi' @@ -69,7 +70,7 @@ const tmpUsers = [ type TProps = { worksContent: TStore - metric: string + metric: TMetric testid?: string } const WorksContentContainer: FC = ({ diff --git a/src/containers/content/WorksContent/styles/index.ts b/src/containers/content/WorksContent/styles/index.ts index 6195226d5..7d97068c8 100755 --- a/src/containers/content/WorksContent/styles/index.ts +++ b/src/containers/content/WorksContent/styles/index.ts @@ -1,11 +1,11 @@ import styled from 'styled-components' -import type { TTestable } from '@/spec' +import type { TTestable, TMetric } from '@/spec' import { css } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ 'data-test-id': testid, -}))` +}))` ${css.flexColumn('align-center')}; width: 100%; min-height: 80vh; diff --git a/src/containers/digest/ArticleDigest/DesktopView/PostLayout/index.tsx b/src/containers/digest/ArticleDigest/DesktopView/PostLayout/index.tsx index a856078d3..39b94006b 100644 --- a/src/containers/digest/ArticleDigest/DesktopView/PostLayout/index.tsx +++ b/src/containers/digest/ArticleDigest/DesktopView/PostLayout/index.tsx @@ -4,7 +4,7 @@ import { FC, Fragment, memo } from 'react' -import type { TPost } from '@/spec' +import type { TPost, TMetric } from '@/spec' import { METRIC } from '@/constant' import { buildLog } from '@/utils' @@ -25,7 +25,7 @@ const log = buildLog('C:ArticleDigest') type TProps = { article: TPost - metric?: string + metric?: TMetric } const PostLayout: FC = ({ metric = METRIC.ARTICLE, article }) => { diff --git a/src/containers/digest/ArticleDigest/DesktopView/WorksLayout/index.tsx b/src/containers/digest/ArticleDigest/DesktopView/WorksLayout/index.tsx index 054b7c02e..d969e8737 100644 --- a/src/containers/digest/ArticleDigest/DesktopView/WorksLayout/index.tsx +++ b/src/containers/digest/ArticleDigest/DesktopView/WorksLayout/index.tsx @@ -4,7 +4,7 @@ import { FC, Fragment, memo } from 'react' -import type { TPost } from '@/spec' +import type { TPost, TMetric } from '@/spec' import { METRIC, UPVOTE_LAYOUT } from '@/constant' import { buildLog } from '@/utils' @@ -30,7 +30,7 @@ const log = buildLog('C:ArticleDigest') type TProps = { article: TPost - metric?: string + metric?: TMetric } const WorksLayout: FC = ({ metric = METRIC.ARTICLE, article }) => { diff --git a/src/containers/digest/ArticleDigest/DesktopView/index.tsx b/src/containers/digest/ArticleDigest/DesktopView/index.tsx index b69f19539..580753640 100644 --- a/src/containers/digest/ArticleDigest/DesktopView/index.tsx +++ b/src/containers/digest/ArticleDigest/DesktopView/index.tsx @@ -8,7 +8,7 @@ import { FC } from 'react' import { isNil } from 'ramda' import { Waypoint } from 'react-waypoint' -import type { TScrollDirection } from '@/spec' +import type { TScrollDirection, TMetric } from '@/spec' import { METRIC } from '@/constant' import { useScroll } from '@/hooks' import { pluggedIn, buildLog } from '@/utils' @@ -30,7 +30,7 @@ const log = buildLog('C:ArticleDigest') type TProps = { articleDigest?: TStore testid?: string - metric?: string + metric?: TMetric } const ArticleDigestContainer: FC = ({ diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts index 2f01d30cb..e879b53ad 100644 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts +++ b/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts @@ -1,9 +1,9 @@ import styled from 'styled-components' -import type { TTestable } from '@/spec' +import type { TTestable, TMetric } from '@/spec' import { theme, css, WIDTH } from '@/utils' -type TWrapper = { metric: string } & TTestable +type TWrapper = { metric: TMetric } & TTestable export const Wrapper = styled.nav.attrs(({ testid }: TTestable) => ({ 'data-test-id': testid, }))` diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout/index.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout/index.ts index 82b3d7317..908a29a99 100644 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout/index.ts +++ b/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout/index.ts @@ -1,8 +1,9 @@ import styled from 'styled-components' +import type { TMetric } from '@/spec' import { theme, css, WIDTH } from '@/utils' -export const Main = styled.div<{ metric: string }>` +export const Main = styled.div<{ metric: TMetric }>` ${({ metric }) => css.fitContentWidth(metric)}; width: 100%; ` diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/works_layout/index.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/works_layout/index.ts index 949dafd86..38fc07f50 100644 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/works_layout/index.ts +++ b/src/containers/digest/ArticleDigest/styles/desktop_view/works_layout/index.ts @@ -1,9 +1,10 @@ import styled from 'styled-components' -import Img from '@/Img' +import type { TMetric } from '@/spec' import { theme, css, WIDTH } from '@/utils' +import Img from '@/Img' -export const Main = styled.div<{ metric: string }>` +export const Main = styled.div<{ metric: TMetric }>` ${({ metric }) => css.fitContentWidth(metric)}; width: 100%; ` @@ -34,7 +35,7 @@ export const Other = styled.div` export const Actions = styled.div` ${css.flex('align-center')}; ` -export const SubWrapper = styled.div<{ metric: string }>` +export const SubWrapper = styled.div<{ metric: TMetric }>` ${css.flex('align-start', 'justify-end')}; margin-top: 2px; width: ${({ metric }) => WIDTH[metric].STICKER}; diff --git a/src/containers/digest/CommunityDigest/ClassicView/index.tsx b/src/containers/digest/CommunityDigest/ClassicView/index.tsx index 2b6dc0b50..47d029aa5 100644 --- a/src/containers/digest/CommunityDigest/ClassicView/index.tsx +++ b/src/containers/digest/CommunityDigest/ClassicView/index.tsx @@ -2,7 +2,7 @@ import { FC, memo } from 'react' import { contains } from 'ramda' import { Waypoint } from 'react-waypoint' -import type { TC11NLayout, TThread, TCommunity } from '@/spec' +import type { TC11NLayout, TThread, TCommunity, TMetric } from '@/spec' import { HCN, EVENT } from '@/constant' import { useDevice } from '@/hooks' import { send } from '@/utils' @@ -30,7 +30,7 @@ type TProps = { descExpand: boolean activeThread: TThread layout: TC11NLayout - metric: string + metric: TMetric } const ClassicView: FC = ({ diff --git a/src/containers/digest/CommunityDigest/index.tsx b/src/containers/digest/CommunityDigest/index.tsx index bb77ab3c0..0c73e1053 100755 --- a/src/containers/digest/CommunityDigest/index.tsx +++ b/src/containers/digest/CommunityDigest/index.tsx @@ -5,6 +5,7 @@ */ import { FC } from 'react' +import type { TMetric } from '@/spec' import { METRIC } from '@/constant' import { pluggedIn, buildLog } from '@/utils' @@ -18,7 +19,7 @@ const log = buildLog('C:CommunityDigest') type TProps = { communityDigest?: TStore - metric?: string + metric?: TMetric } const CommunityDigestContainer: FC = ({ diff --git a/src/containers/digest/CommunityDigest/styles/classic_view/index.ts b/src/containers/digest/CommunityDigest/styles/classic_view/index.ts index 7da2d3b28..bc665d2cd 100644 --- a/src/containers/digest/CommunityDigest/styles/classic_view/index.ts +++ b/src/containers/digest/CommunityDigest/styles/classic_view/index.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import type { TMetric } from '@/spec' import { css, WIDTH, pixelAdd } from '@/utils' import { BaseBanner } from '../index' @@ -16,7 +17,7 @@ type TWrapper = { descExpand: boolean noSocial: boolean isMobile: boolean - metric?: string + metric?: TMetric } export const Wrapper = styled(BaseBanner)` width: 100%; diff --git a/src/containers/editor/ArticleEditor/styles/index.ts b/src/containers/editor/ArticleEditor/styles/index.ts index 2c8316a5e..85dce350d 100755 --- a/src/containers/editor/ArticleEditor/styles/index.ts +++ b/src/containers/editor/ArticleEditor/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import type { TTestable } from '@/spec' +import type { TTestable, TMetric } from '@/spec' import { css, theme } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ @@ -10,7 +10,7 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ width: 100%; margin-top: 40px; ` -export const InnerWrapper = styled.div<{ metric: string }>` +export const InnerWrapper = styled.div<{ metric: TMetric }>` ${css.flexColumn()}; width: 100%; min-height: 50vh; diff --git a/src/containers/editor/CommunityEditor/styles/index.ts b/src/containers/editor/CommunityEditor/styles/index.ts index 5c78e8107..b8b408165 100755 --- a/src/containers/editor/CommunityEditor/styles/index.ts +++ b/src/containers/editor/CommunityEditor/styles/index.ts @@ -1,13 +1,14 @@ import styled from 'styled-components' +import type { TMetric } from '@/spec' import { css, theme } from '@/utils' -export const Wrapper = styled.div<{ metric: string }>` +export const Wrapper = styled.div<{ metric: TMetric }>` ${css.flexColumn('align-both')}; width: 100%; ${({ metric }) => css.fitPageWidth(metric)}; ` -export const InnerWrapper = styled.div<{ metric: string }>` +export const InnerWrapper = styled.div<{ metric: TMetric }>` ${css.flexColumn('justify-center')}; width: 100%; ${({ metric }) => css.fitContentWidth(metric)}; diff --git a/src/containers/editor/WorksEditor/styles/index.ts b/src/containers/editor/WorksEditor/styles/index.ts index ebcaf3914..7708934cb 100755 --- a/src/containers/editor/WorksEditor/styles/index.ts +++ b/src/containers/editor/WorksEditor/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import type { TTestable } from '@/spec' +import type { TTestable, TMetric } from '@/spec' import { css, theme } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ @@ -11,7 +11,7 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ color: ${theme('thread.articleDigest')}; margin-top: 30px; ` -export const InnerWrapper = styled.div<{ metric: string }>` +export const InnerWrapper = styled.div<{ metric: TMetric }>` ${css.flexColumn('align-center')}; width: 100%; min-height: 80vh; diff --git a/src/containers/layout/GlobalLayout/SEO.tsx b/src/containers/layout/GlobalLayout/SEO.tsx index 731eaddfa..9c5f5aed3 100755 --- a/src/containers/layout/GlobalLayout/SEO.tsx +++ b/src/containers/layout/GlobalLayout/SEO.tsx @@ -7,10 +7,11 @@ import { FC } from 'react' import { NextSeo, BlogJsonLd, SocialProfileJsonLd } from 'next-seo' +import type { TMetric } from '@/spec' import { METRIC } from '@/constant' type TProps = { - metric: string + metric: TMetric config: any } diff --git a/src/containers/layout/GlobalLayout/index.tsx b/src/containers/layout/GlobalLayout/index.tsx index 96538d6ee..5e8872f65 100755 --- a/src/containers/layout/GlobalLayout/index.tsx +++ b/src/containers/layout/GlobalLayout/index.tsx @@ -6,7 +6,7 @@ import React, { FC, ReactNode, useEffect } from 'react' -import type { Nullable, TSEO } from '@/spec' +import type { TSEO, TMetric } from '@/spec' import { ANCHOR, SIZE, C11N, BODY_SCROLLER } from '@/constant' import AnalysisService from '@/services/Analysis' import { useNetwork, useShortcut, usePlatform, useDevice } from '@/hooks' @@ -39,11 +39,11 @@ type TProps = { children: ReactNode seoConfig: TSEO errorCode?: number // 400 | 500 | 404 - errorPath?: Nullable + errorPath?: string | null noSidebar?: boolean noFooter?: boolean - metric: string + metric: TMetric } const GlobalLayoutContainer: FC = ({ diff --git a/src/containers/layout/GlobalLayout/styles/index.ts b/src/containers/layout/GlobalLayout/styles/index.ts index 8685960f8..44c827c85 100755 --- a/src/containers/layout/GlobalLayout/styles/index.ts +++ b/src/containers/layout/GlobalLayout/styles/index.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import type { TMetric } from '@/spec' import { C11N } from '@/constant' import { ASSETS_ENDPOINT } from '@/config' import { theme, css } from '@/utils' @@ -24,7 +25,7 @@ export const Wrapper = styled.div` } ` -type TInner = { metric: string; sidebarPin: boolean } +type TInner = { metric: TMetric; sidebarPin: boolean } /* min-width: ${({ minWidth }) => minWidth}; */ /* padding-left: ${({ noSidebar }) => (noSidebar ? '0' : '56px')}; diff --git a/src/containers/tool/ArticleSticker/index.tsx b/src/containers/tool/ArticleSticker/index.tsx index faf11efbb..13c565ca6 100755 --- a/src/containers/tool/ArticleSticker/index.tsx +++ b/src/containers/tool/ArticleSticker/index.tsx @@ -8,6 +8,7 @@ import { FC, Fragment } from 'react' +import type { TMetric } from '@/spec' import { pluggedIn, buildLog } from '@/utils' import { METRIC } from '@/constant' @@ -31,7 +32,7 @@ const log = buildLog('C:ArticleSticker') type TProps = { articleSticker?: TStore testid?: string - metric?: string + metric?: TMetric } const ArticleStickerContainer: FC = ({ diff --git a/src/containers/tool/ArticleSticker/styles/index.ts b/src/containers/tool/ArticleSticker/styles/index.ts index 3512eec2b..3667d46bb 100755 --- a/src/containers/tool/ArticleSticker/styles/index.ts +++ b/src/containers/tool/ArticleSticker/styles/index.ts @@ -1,10 +1,10 @@ import styled from 'styled-components' -import type { TTestable } from '@/spec' +import type { TTestable, TMetric } from '@/spec' import Img from '@/Img' import { animate, theme, css, WIDTH } from '@/utils' -type TWrapper = { metric: string } & TTestable +type TWrapper = { metric: TMetric } & TTestable export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ 'data-test-id': testid, }))` diff --git a/src/containers/unit/Footer/DesktopView/ArticleView.tsx b/src/containers/unit/Footer/DesktopView/ArticleView.tsx index 1695fc83e..5fc3f692f 100755 --- a/src/containers/unit/Footer/DesktopView/ArticleView.tsx +++ b/src/containers/unit/Footer/DesktopView/ArticleView.tsx @@ -1,7 +1,9 @@ import { FC, memo } from 'react' -import type { TArticle, TC11NLayout } from '@/spec' +import type { TArticle, TC11NLayout, TMetric } from '@/spec' import { ISSUE_ADDR, API_SERVER_ADDR } from '@/config' +import { METRIC } from '@/constant' + import TopInfo from './TopInfo' import BottomInfo from './BottomInfo' @@ -15,7 +17,7 @@ import { type TProps = { viewingArticle: TArticle - metric: string + metric: TMetric layout: TC11NLayout } @@ -23,7 +25,11 @@ const BriefView: FC = ({ metric, viewingArticle, layout }) => { return ( - + diff --git a/src/containers/unit/Footer/DesktopView/BottomInfo.tsx b/src/containers/unit/Footer/DesktopView/BottomInfo.tsx index 9c1f8db6e..772a10e2e 100755 --- a/src/containers/unit/Footer/DesktopView/BottomInfo.tsx +++ b/src/containers/unit/Footer/DesktopView/BottomInfo.tsx @@ -1,9 +1,10 @@ import { FC, memo } from 'react' -import type { TC11NLayout } from '@/spec' -import { C11N } from '@/constant' +import type { TC11NLayout, TMetric } from '@/spec' +import { C11N, METRIC } from '@/constant' import { + RawWrapper, InnerWrapper, ClassicWrapper, HolyGrailWrapper, @@ -11,11 +12,23 @@ import { } from '../styles/desktop_view/bottom_info' type TProps = { - metric: string + metric: TMetric layout?: TC11NLayout } const BottomInfo: FC = ({ metric, layout }) => { + if (metric !== METRIC.COMMUNITY) { + return ( + + + + 蜀ICP备17043722号-4 + + + + ) + } + const Wrapper = layout === C11N.CLASSIC ? ClassicWrapper : HolyGrailWrapper return ( diff --git a/src/containers/unit/Footer/DesktopView/CommunityView.tsx b/src/containers/unit/Footer/DesktopView/CommunityView.tsx index 0d8ad764f..0605af17e 100755 --- a/src/containers/unit/Footer/DesktopView/CommunityView.tsx +++ b/src/containers/unit/Footer/DesktopView/CommunityView.tsx @@ -1,12 +1,12 @@ import { FC, memo } from 'react' -import type { TArticle, TC11NLayout } from '@/spec' +import type { TArticle, TC11NLayout, TMetric } from '@/spec' import { ISSUE_ADDR, API_SERVER_ADDR } from '@/config' +import { METRIC } from '@/constant' + import TopInfo from './TopInfo' import BottomInfo from './BottomInfo' -import { VIEW } from '../constants' - import { Wrapper, InnerWrapper, @@ -17,7 +17,7 @@ import { type TProps = { viewingArticle: TArticle - metric: string + metric: TMetric layout: TC11NLayout } @@ -25,7 +25,7 @@ const CommunityView: FC = ({ metric, layout }) => { return ( - + diff --git a/src/containers/unit/Footer/DesktopView/HomeView.tsx b/src/containers/unit/Footer/DesktopView/HomeView.tsx index 6b6a55ea9..f1c3682ac 100644 --- a/src/containers/unit/Footer/DesktopView/HomeView.tsx +++ b/src/containers/unit/Footer/DesktopView/HomeView.tsx @@ -1,7 +1,7 @@ import { FC, memo } from 'react' import { useTheme } from 'styled-components' -import type { TThemeMap, TC11NLayout } from '@/spec' +import type { TThemeMap, TC11NLayout, TMetric } from '@/spec' import { GITHUB, API_SERVER_ADDR, ISSUE_ADDR, BUILD_VERSION } from '@/config' import { ROUTE } from '@/constant' @@ -21,7 +21,7 @@ import { } from '../styles/desktop_view/home_view' type TProps = { - metric: string + metric: TMetric layout: TC11NLayout } diff --git a/src/containers/unit/Footer/DesktopView/HostingCommunityView.tsx b/src/containers/unit/Footer/DesktopView/HostingCommunityView.tsx index 29db81ddc..8e3d22b17 100755 --- a/src/containers/unit/Footer/DesktopView/HostingCommunityView.tsx +++ b/src/containers/unit/Footer/DesktopView/HostingCommunityView.tsx @@ -1,6 +1,6 @@ import { FC, memo } from 'react' -import type { TArticle, TC11NLayout } from '@/spec' +import type { TArticle, TC11NLayout, TMetric } from '@/spec' import { SITE_LOGO } from '@/config' import BlinkCursor from '@/components/BlinkCursor' @@ -15,7 +15,7 @@ import { type TProps = { viewingArticle: TArticle - metric: string + metric: TMetric layout: TC11NLayout } diff --git a/src/containers/unit/Footer/DesktopView/TopInfo/WorksArticle.tsx b/src/containers/unit/Footer/DesktopView/TopInfo/WorksArticle.tsx new file mode 100644 index 000000000..2f5d4e242 --- /dev/null +++ b/src/containers/unit/Footer/DesktopView/TopInfo/WorksArticle.tsx @@ -0,0 +1,31 @@ +import { FC, memo } from 'react' + +import { ICON } from '@/config' +import type { TProps as TTopInfoProps } from './index' + +import { + Wrapper, + InfoBar, + CommunityTitle, + ArticleTitle, + ArrowDividerIcon, + Logo, +} from '../../styles/desktop_view/top_info/article' + +type TProps = Pick + +const Article: FC = ({ title = 'article', noBottomBorder = false }) => { + return ( + + + + + + 作品集市 + + CoderPlaents + + ) +} + +export default memo(Article) diff --git a/src/containers/unit/Footer/DesktopView/TopInfo/index.tsx b/src/containers/unit/Footer/DesktopView/TopInfo/index.tsx index 2ea20e8bb..bb527bfd8 100644 --- a/src/containers/unit/Footer/DesktopView/TopInfo/index.tsx +++ b/src/containers/unit/Footer/DesktopView/TopInfo/index.tsx @@ -1,29 +1,34 @@ import { FC, memo } from 'react' -import { TFooterView, VIEW } from '../../constants' +import type { TMetric } from '@/spec' +import { METRIC } from '@/constant' import HomeCommunity from './HomeCommunity' import Community from './Community' import Article from './Article' +import WorksArticle from './WorksArticle' export type TProps = { - type?: TFooterView + metric?: TMetric title?: string noBottomBorder?: boolean } -const TopInfo: FC = ({ type, ...restProps }) => { - switch (type) { - case VIEW.HOME: { +const TopInfo: FC = ({ metric = METRIC.COMMUNITY, ...restProps }) => { + switch (metric) { + case METRIC.COMMUNITY: { return } - case VIEW.COMMUNITY: { - return + // case VIEW.COMMUNITY: { + // return + // } + case METRIC.WORKS_ARTICLE: { + return } // case VIEW.HOSTING_COMMUNITY: { // return // } - case VIEW.ARTICLE: { + case METRIC.ARTICLE: { return
} default: diff --git a/src/containers/unit/Footer/DesktopView/WorksArticleLayout.tsx b/src/containers/unit/Footer/DesktopView/WorksArticleLayout.tsx new file mode 100755 index 000000000..ce9a6508d --- /dev/null +++ b/src/containers/unit/Footer/DesktopView/WorksArticleLayout.tsx @@ -0,0 +1,79 @@ +import { FC, memo } from 'react' + +import type { TArticle } from '@/spec' +import { ISSUE_ADDR, API_SERVER_ADDR } from '@/config' +import { METRIC } from '@/constant' + +import TopInfo from './TopInfo' +import BottomInfo from './BottomInfo' + +import { + Wrapper, + InnerWrapper, + MainInfos, + BaseInfo, + Item, +} from '../styles/desktop_view/works_article_layout' + +type TProps = { + viewingArticle: TArticle +} + +const WorksArticleLayout: FC = ({ viewingArticle }) => { + return ( + + + + + + + 关于 + + + 创建社区 + + + 加入我们 + + + OpenSource + + + 特别感谢 + + + 反馈与建议 + + + + + + + ) +} + +export default memo(WorksArticleLayout) diff --git a/src/containers/unit/Footer/DesktopView/index.tsx b/src/containers/unit/Footer/DesktopView/index.tsx index a753778fb..5b27f0c22 100644 --- a/src/containers/unit/Footer/DesktopView/index.tsx +++ b/src/containers/unit/Footer/DesktopView/index.tsx @@ -8,17 +8,18 @@ import { FC } from 'react' import dynamic from 'next/dynamic' import { pluggedIn, buildLog } from '@/utils' +import type { TMetric } from '@/spec' +import { METRIC } from '@/constant' import JoinModal from '@/containers/tool/JoinModal' -import type { TStore } from '../store' -import { VIEW } from '../constants' - -import HomeView from './HomeView' +import HomeLayout from './HomeView' import ArticleView from './ArticleView' +import WorksArticleLayout from './WorksArticleLayout' import CommunityView from './CommunityView' import HostingCommunityView from './HostingCommunityView' +import type { TStore } from '../store' import { Wrapper } from '../styles' import { useInit, toggleSponsorHelper, onLogin, onPay } from '../logic' @@ -36,7 +37,7 @@ export const BuyMeChuanChuan = dynamic( type TProps = { footer?: TStore - metric?: string // TODO + metric?: TMetric testid?: string } @@ -46,6 +47,7 @@ const FooterContainer: FC = ({ testid = 'footer', }) => { useInit(store, metric) + const { showSponsor, accountInfo, @@ -53,7 +55,7 @@ const FooterContainer: FC = ({ accountInfo: { customization: { bannerLayout }, }, - type, + // type, } = store return ( @@ -67,14 +69,19 @@ const FooterContainer: FC = ({ onPay={onPay} /> - {type === VIEW.HOME && } + {metric === METRIC.COMMUNITY && ( + + )} + {metric === METRIC.WORKS_ARTICLE && ( + + )} {/* {type === VIEW.HOME && ( )} */} {/* {type === VIEW.HOME && ( )} */} - {type === VIEW.ARTICLE && ( + {metric === METRIC.ARTICLE && ( { +export const useInit = (_store: TStore, metric: TMetric): void => { useEffect(() => { store = _store + console.log('the metric inited >: ', metric) store.mark({ metric }) sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver)) diff --git a/src/containers/unit/Footer/store.ts b/src/containers/unit/Footer/store.ts index 40b90d089..ac149ecaf 100755 --- a/src/containers/unit/Footer/store.ts +++ b/src/containers/unit/Footer/store.ts @@ -4,13 +4,12 @@ */ import { types as T, getParent, Instance } from 'mobx-state-tree' -import { contains } from 'ramda' import type { TRootStore, TAccount, TArticle, TCommunity } from '@/spec' import { HCN, METRIC } from '@/constant' import { markStates, buildLog, stripMobx } from '@/utils' -import { VIEW, TFooterView } from './constants' +// import { VIEW, TFooterView } from './constants' /* eslint-disable-next-line */ const log = buildLog('S:FooterStore') @@ -39,25 +38,26 @@ const FooterStore = T.model('FooterStore', { return stripMobx(root.viewing.community) }, - get type(): TFooterView { - const root = getParent(self) as TRootStore - if (root.viewing.community.raw === HCN) return VIEW.HOME - // TODO: check if the community is hosting - // if (self.curCommunity.isHosting) return VIEW.COMMUNITY - if (self.metric === METRIC.COMMUNITY) return VIEW.HOSTING_COMMUNITY + // get type(): TFooterView { + // const root = getParent(self) as TRootStore + // if (root.viewing.community.raw === HCN) return VIEW.HOME + // // TODO: check if the community is hosting + // // if (self.curCommunity.isHosting) return VIEW.COMMUNITY + // if (self.metric === METRIC.COMMUNITY) return VIEW.HOSTING_COMMUNITY + // if (self.metric === METRIC.WORKS_ARTICLE) return METRIC.WORKS_ARTICLE - if ( - contains(self.metric, [ - METRIC.USER, - METRIC.DISCOVERY, - METRIC.ARTICLE, - METRIC.WORKS_EDITOR, - METRIC.COMMUNITY_EDITOR, - ]) - ) { - return VIEW.ARTICLE - } - }, + // if ( + // contains(self.metric, [ + // METRIC.USER, + // METRIC.DISCOVERY, + // METRIC.ARTICLE, + // METRIC.WORKS_EDITOR, + // METRIC.COMMUNITY_EDITOR, + // ]) + // ) { + // return VIEW.ARTICLE + // } + // }, })) .actions((self) => ({ authWarning(options?: Record): void { diff --git a/src/containers/unit/Footer/styles/desktop_view/article_view.ts b/src/containers/unit/Footer/styles/desktop_view/article_view.ts index 3a06ce8f6..4699bfd8f 100755 --- a/src/containers/unit/Footer/styles/desktop_view/article_view.ts +++ b/src/containers/unit/Footer/styles/desktop_view/article_view.ts @@ -1,10 +1,10 @@ import styled from 'styled-components' -import type { TC11NLayout } from '@/spec' +import type { TC11NLayout, TMetric } from '@/spec' import { C11N } from '@/constant' import { theme, css } from '@/utils' -type TWrapper = { metric: string; layout: TC11NLayout } +type TWrapper = { metric: TMetric; layout: TC11NLayout } export const Wrapper = styled.div` ${css.flexColumn('align-end')}; width: 100%; diff --git a/src/containers/unit/Footer/styles/desktop_view/bottom_info.ts b/src/containers/unit/Footer/styles/desktop_view/bottom_info.ts index 7326d4703..4362b5030 100755 --- a/src/containers/unit/Footer/styles/desktop_view/bottom_info.ts +++ b/src/containers/unit/Footer/styles/desktop_view/bottom_info.ts @@ -1,8 +1,9 @@ import styled from 'styled-components' +import type { TMetric } from '@/spec' import { theme, css } from '@/utils' -const Wrapper = styled.div<{ metric: string }>` +const Wrapper = styled.div<{ metric: TMetric }>` ${css.flex('align-center', 'justify-between')}; /* TODO: remove footer.bottomBg key */ /* background: ${theme('footer.bottomBg')}; */ @@ -13,9 +14,9 @@ const Wrapper = styled.div<{ metric: string }>` padding-bottom: 30px; ${({ metric }) => css.fitContentWidth(metric)}; - ${css.media.tablet`display: none;`}; ` +export const RawWrapper = styled(Wrapper)`` export const ClassicWrapper = styled(Wrapper)` padding-left: 24px; ${css.media.laptopM` diff --git a/src/containers/unit/Footer/styles/desktop_view/community_view.ts b/src/containers/unit/Footer/styles/desktop_view/community_view.ts index 9b335d847..f47d7ab67 100755 --- a/src/containers/unit/Footer/styles/desktop_view/community_view.ts +++ b/src/containers/unit/Footer/styles/desktop_view/community_view.ts @@ -1,10 +1,10 @@ import styled from 'styled-components' -import type { TC11NLayout } from '@/spec' +import type { TC11NLayout, TMetric } from '@/spec' import { C11N } from '@/constant' import { theme, css } from '@/utils' -type TWrapper = { metric: string; layout: TC11NLayout } +type TWrapper = { metric: TMetric; layout: TC11NLayout } export const Wrapper = styled.div` ${css.flexColumn('align-end')}; width: 100%; diff --git a/src/containers/unit/Footer/styles/desktop_view/home_view.ts b/src/containers/unit/Footer/styles/desktop_view/home_view.ts index e05bdfaba..1f4865e92 100644 --- a/src/containers/unit/Footer/styles/desktop_view/home_view.ts +++ b/src/containers/unit/Footer/styles/desktop_view/home_view.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' +import type { TMetric } from '@/spec' import { theme, css } from '@/utils' - import { ArrowLink } from '@/components/Buttons' // import { getPadding } from '../../metrics' @@ -12,7 +12,7 @@ export const Wrapper = styled.footer` padding-top: 30px; background: #06262f; ` -export const InnerWrapper = styled.div<{ metric: string }>` +export const InnerWrapper = styled.div<{ metric: TMetric }>` width: 100%; ${({ metric }) => css.fitContentWidth(metric)}; // 20 是经典布局为缩小帖子列表"视觉宽度"手动缩小的值 diff --git a/src/containers/unit/Footer/styles/desktop_view/hosting_community_view.ts b/src/containers/unit/Footer/styles/desktop_view/hosting_community_view.ts index d85f303b9..61627eb86 100755 --- a/src/containers/unit/Footer/styles/desktop_view/hosting_community_view.ts +++ b/src/containers/unit/Footer/styles/desktop_view/hosting_community_view.ts @@ -1,11 +1,11 @@ import styled from 'styled-components' import Img from '@/Img' -import type { TC11NLayout } from '@/spec' +import type { TC11NLayout, TMetric } from '@/spec' import { C11N } from '@/constant' import { theme, css } from '@/utils' -type TWrapper = { metric: string; layout: TC11NLayout } +type TWrapper = { metric: TMetric; layout: TC11NLayout } export const Wrapper = styled.div` ${css.flexColumn('align-end')}; width: 100%; diff --git a/src/containers/unit/Footer/styles/desktop_view/works_article_layout.ts b/src/containers/unit/Footer/styles/desktop_view/works_article_layout.ts new file mode 100755 index 000000000..13b8d0879 --- /dev/null +++ b/src/containers/unit/Footer/styles/desktop_view/works_article_layout.ts @@ -0,0 +1,33 @@ +import styled from 'styled-components' + +import { METRIC } from '@/constant' +import { theme, css } from '@/utils' + +export const Wrapper = styled.div` + ${css.flexColumn('align-end')}; + width: 100%; + ${css.fitContentWidth(METRIC.WORKS_ARTICLE)}; +` +export const InnerWrapper = styled.div` + width: 100%; +` +export const MainInfos = styled.footer` + margin-bottom: 20px; + ${css.media.tablet`display: none;`}; +` +const Link = styled.a` + text-decoration: none; + font-weight: bolder; + color: ${theme('footer.text')}; + transition: color 0.3s; + &:hover { + text-decoration: underline; + color: ${theme('footer.hover')}; + } +` +export const BaseInfo = styled.div` + ${css.flex()}; +` +export const Item = styled(Link)` + margin-right: 25px; +` diff --git a/src/containers/unit/Footer/styles/index.ts b/src/containers/unit/Footer/styles/index.ts index a3b257acc..66d3b31f2 100755 --- a/src/containers/unit/Footer/styles/index.ts +++ b/src/containers/unit/Footer/styles/index.ts @@ -1,14 +1,16 @@ import styled from 'styled-components' -import type { TTestable, TC11NLayout } from '@/spec' -import { C11N } from '@/constant' +import type { TTestable, TC11NLayout, TMetric } from '@/spec' +import { C11N, METRIC } from '@/constant' import { css } from '@/utils' -type TWrapper = TTestable & { metric: string; layout: TC11NLayout } +type TWrapper = TTestable & { metric: TMetric; layout: TC11NLayout } export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ 'data-test-id': testid, }))` ${css.flex('justify-center')}; + justify-content: ${({ metric }) => + metric === METRIC.WORKS_ARTICLE ? 'start' : 'center'}; margin-top: ${({ layout }) => (layout === C11N.HOLY_GRAIL ? '50px' : '80px')}; ${({ metric }) => css.fitPageWidth(metric)}; ` diff --git a/src/containers/unit/Header/DesktopView/ArticleEditorView.tsx b/src/containers/unit/Header/DesktopView/ArticleEditorView.tsx index 73f54854e..c75552554 100644 --- a/src/containers/unit/Header/DesktopView/ArticleEditorView.tsx +++ b/src/containers/unit/Header/DesktopView/ArticleEditorView.tsx @@ -7,6 +7,7 @@ import { FC, useEffect } from 'react' import dynamic from 'next/dynamic' +import type { TMetric } from '@/spec' import { ICON } from '@/config' import { METRIC } from '@/constant' import { pluggedIn, buildLog } from '@/utils' @@ -31,7 +32,7 @@ let MailBox type TProps = { header?: TStore - metric?: string + metric?: TMetric } const ArticleEditorHeader: FC = ({ header: store, metric }) => { diff --git a/src/containers/unit/Header/DesktopView/ArticleView.tsx b/src/containers/unit/Header/DesktopView/ArticleView.tsx index 7bcb33402..b3f946763 100644 --- a/src/containers/unit/Header/DesktopView/ArticleView.tsx +++ b/src/containers/unit/Header/DesktopView/ArticleView.tsx @@ -7,6 +7,7 @@ import React, { FC, useEffect } from 'react' import dynamic from 'next/dynamic' +import type { TMetric } from '@/spec' import { ICON } from '@/config' import { pluggedIn, buildLog } from '@/utils' @@ -32,7 +33,7 @@ let MailBox type TProps = { header?: TStore - metric?: string + metric?: TMetric } const ArticleHeaderContainer: FC = ({ header: store, metric }) => { diff --git a/src/containers/unit/Header/DesktopView/CommunityVIew.tsx b/src/containers/unit/Header/DesktopView/CommunityVIew.tsx index 0a0a83dd9..5329c90c2 100644 --- a/src/containers/unit/Header/DesktopView/CommunityVIew.tsx +++ b/src/containers/unit/Header/DesktopView/CommunityVIew.tsx @@ -7,6 +7,7 @@ import React, { FC, useEffect } from 'react' import dynamic from 'next/dynamic' +import type { TMetric } from '@/spec' import { C11N, METRIC } from '@/constant' import { pluggedIn, buildLog } from '@/utils' @@ -35,7 +36,7 @@ let MailBox type TProps = { // T.oneOf(values(METRIC)) TODO - metric?: string + metric?: TMetric header?: TStore } diff --git a/src/containers/unit/Header/DesktopView/index.tsx b/src/containers/unit/Header/DesktopView/index.tsx index d3f773ba6..74c396780 100644 --- a/src/containers/unit/Header/DesktopView/index.tsx +++ b/src/containers/unit/Header/DesktopView/index.tsx @@ -1,5 +1,6 @@ import { FC, memo } from 'react' +import type { TMetric } from '@/spec' import { METRIC } from '@/constant' import CommunityView from './CommunityVIew' @@ -7,7 +8,7 @@ import ArticleView from './ArticleView' import ArticleEditorView from './ArticleEditorView' type TProps = { - metric: string + metric: TMetric } const DesktopView: FC = ({ metric }) => { diff --git a/src/containers/unit/Header/logic.ts b/src/containers/unit/Header/logic.ts index 08a551256..21122f2c5 100755 --- a/src/containers/unit/Header/logic.ts +++ b/src/containers/unit/Header/logic.ts @@ -1,6 +1,6 @@ import { useEffect } from 'react' -import type { TThread } from '@/spec' +import type { TThread, TMetric } from '@/spec' // eslint-disable-next-line import/named import { TYPE, EVENT, ERR } from '@/constant' @@ -121,7 +121,7 @@ const ErrSolver = [ // ############################### // init & unInit // ############################### -export const useInit = (_store: TStore, metric: string): void => { +export const useInit = (_store: TStore, metric: TMetric): void => { useEffect(() => { store = _store store.mark({ metric }) diff --git a/src/containers/unit/Header/styles/desktop_view/article_view.ts b/src/containers/unit/Header/styles/desktop_view/article_view.ts index 2184ddfbd..fedbabb76 100644 --- a/src/containers/unit/Header/styles/desktop_view/article_view.ts +++ b/src/containers/unit/Header/styles/desktop_view/article_view.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' +import type { TMetric } from '@/spec' import { css, theme, WIDTH } from '@/utils' - import Img from '@/Img' import { Wrapper as CommunityWrapper } from './community_view' @@ -14,7 +14,7 @@ export const InnerWrapper = styled.div` width: 100%; height: 33px; ` -export const RouterWrapper = styled.div<{ metric: string }>` +export const RouterWrapper = styled.div<{ metric: TMetric }>` ${css.flex('align-center')}; width: 100%; height: 100%; diff --git a/src/containers/unit/Header/styles/desktop_view/community_view.ts b/src/containers/unit/Header/styles/desktop_view/community_view.ts index 1fe63343e..92af3a990 100644 --- a/src/containers/unit/Header/styles/desktop_view/community_view.ts +++ b/src/containers/unit/Header/styles/desktop_view/community_view.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import type { TTestable } from '@/spec' +import type { TTestable, TMetric } from '@/spec' import { theme, css, pixelAdd, WIDTH } from '@/utils' import HeaderSearchSVG from '@/SvgIcons/HeaderSearchSVG' @@ -25,7 +25,7 @@ export const Wrapper = styled.header.attrs(({ testid }: TTestable) => ({ box-shadow: ${({ noBorder }) => (noBorder ? 'none' : theme('drawer.shadow'))}; ` -type TInnerWrapper = { metric: string } +type TInnerWrapper = { metric: TMetric } const InnerWrapper = styled.div` ${css.flex('align-center')}; padding: 0 4px; diff --git a/src/containers/unit/ModeLine/index.tsx b/src/containers/unit/ModeLine/index.tsx index f8b41309d..71a75c040 100755 --- a/src/containers/unit/ModeLine/index.tsx +++ b/src/containers/unit/ModeLine/index.tsx @@ -1,14 +1,11 @@ -// - /* - * * ModeLine - * */ import React, { FC, useEffect } from 'react' import dynamic from 'next/dynamic' +import type { TMetric } from '@/spec' import { METRIC } from '@/constant' import { useDevice } from '@/hooks' import { pluggedIn, buildLog } from '@/utils' @@ -26,7 +23,7 @@ let BottomBar = null type TProps = { modeLine?: TStore - metric?: string + metric?: TMetric } const ModeLineContainer: FC = ({ diff --git a/src/pages/post.tsx b/src/pages/post.tsx index e451ed51b..36d78471b 100755 --- a/src/pages/post.tsx +++ b/src/pages/post.tsx @@ -80,11 +80,10 @@ export const getServerSideProps = async (props) => { isValidSession: sessionState.isValid, userSubscribedCommunities: subscribedCommunities, }, - route: { mainPath: community.raw, subPath: ROUTE.POST }, + route: { mainPath: ROUTE.POST, subPath: viewingContent.id }, viewing: { post: viewingContent, activeThread: THREAD.POST, - community, }, // TODO: load comments on Client comments: { pagedComments }, diff --git a/src/spec/index.ts b/src/spec/index.ts index 12cc81fd5..656c48338 100644 --- a/src/spec/index.ts +++ b/src/spec/index.ts @@ -2,6 +2,7 @@ import type { TRootStore as RootStoreType } from '@/stores/RootStore' import type { TArticle } from './article' import type { TCommunity } from './community' +export type { TMetric } from './metric' export type { TSIZE, TSIZE_T, diff --git a/src/spec/metric.ts b/src/spec/metric.ts new file mode 100644 index 000000000..4f49fba7e --- /dev/null +++ b/src/spec/metric.ts @@ -0,0 +1,28 @@ +export type TMetric = + | 'COMMUNITY' + | 'USER' + // articles + | 'ARTICLE' + | 'WORKS_ARTICLE' + + // 版块 + | 'WORKS' + | 'DISCOVERY' + | 'SPONSOR' + | 'FRIENDS' + | 'SUBSCRIBE' + | 'MEETUPS' + | 'TRENDING' + | 'COOL_GUIDE' + | 'HAVE_A_DRINK' + | 'RECIPES' + | 'MEMBERSHIP' + + // editor + | 'WORKS_EDITOR' + | 'COMMUNITY_EDITOR' + | 'ARTICLE_EDITOR' + // others + | 'HELP_CENTER' + +export const holder = 1 diff --git a/utils/constant/metric.ts b/utils/constant/metric.ts index 32cbd4185..204afe681 100644 --- a/utils/constant/metric.ts +++ b/utils/constant/metric.ts @@ -1,30 +1,31 @@ +import type { TMetric } from '@/spec' // NOTE: the value is mapping to @/utils/media's key // so do not change to lowercase etc... const METRIC = { - COMMUNITY: 'COMMUNITY', - USER: 'USER', - ARTICLE: 'ARTICLE', - WORKS_ARTICLE: 'WORKS_ARTICLE', - WORKS: 'WORKS', + COMMUNITY: 'COMMUNITY' as TMetric, + USER: 'USER' as TMetric, + // article + ARTICLE: 'ARTICLE' as TMetric, + WORKS_ARTICLE: 'WORKS_ARTICLE' as TMetric, - DISCOVERY: 'DISCOVERY', - SPONSOR: 'SPONSOR', - FRIENDS: 'FRIENDS', - SUBSCRIBE: 'SUBSCRIBE', - MEETUPS: 'MEETUPS', + // 版块 + WORKS: 'WORKS' as TMetric, + TRENDING: 'TRENDING' as TMetric, + COOL_GUIDE: 'COOL_GUIDE' as TMetric, + HAVE_A_DRINK: 'HAVE_A_DRINK' as TMetric, + RECIPES: 'RECIPES' as TMetric, + DISCOVERY: 'DISCOVERY' as TMetric, + SPONSOR: 'SPONSOR' as TMetric, + FRIENDS: 'FRIENDS' as TMetric, + SUBSCRIBE: 'SUBSCRIBE' as TMetric, + MEETUPS: 'MEETUPS' as TMetric, + MEMBERSHIP: 'MEMBERSHIP' as TMetric, + HELP_CENTER: 'HELP_CENTER' as TMetric, - TRENDING: 'TRENDING', - COOL_GUIDE: 'COOL_GUIDE', - HAVE_A_DRINK: 'HAVE_A_DRINK', - RECIPES: 'RECIPES', - - MEMBERSHIP: 'MEMBERSHIP', - - WORKS_EDITOR: 'WORKS_EDITOR', - COMMUNITY_EDITOR: 'COMMUNITY_EDITOR', - ARTICLE_EDITOR: 'ARTICLE_EDITOR', - - HELP_CENTER: 'HELP_CENTER', + // eidtors + WORKS_EDITOR: 'WORKS_EDITOR' as TMetric, + COMMUNITY_EDITOR: 'COMMUNITY_EDITOR' as TMetric, + ARTICLE_EDITOR: 'ARTICLE_EDITOR' as TMetric, } export default METRIC diff --git a/utils/css/media.ts b/utils/css/media.ts index ccab8d974..d927a5ddb 100644 --- a/utils/css/media.ts +++ b/utils/css/media.ts @@ -1,5 +1,6 @@ import { css as styledCss } from 'styled-components' +import type { TMetric } from '@/spec' import { METRIC } from '../constant' export const mediaBreakPoints = { @@ -141,7 +142,7 @@ export const fitContentWidth = (metric = METRIC.COMMUNITY): string => { } // get page max width -export const fitPageWidth = (metric: string): string => { +export const fitPageWidth = (metric: TMetric): string => { return `max-width: ${WIDTH[metric]?.PAGE || WIDTH.COMMUNITY.PAGE};` } From 59368668fba067d96fbf741ea47ae7530333abf3 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Wed, 21 Jul 2021 12:00:00 +0800 Subject: [PATCH 09/13] refactor(article): use common article content --- .../DesktopView/index.tsx} | 18 ++-- .../MobileView/index.tsx} | 6 +- .../{PostContent => ArticleContent}/index.tsx | 4 +- .../{PostContent => ArticleContent}/logic.ts | 0 .../{PostContent => ArticleContent}/schema.ts | 0 .../{PostContent => ArticleContent}/store.ts | 10 +-- .../styles/desktop_view/index.tsx} | 0 .../content/ArticleContent/styles/index.ts | 11 +++ .../styles/mobile_view.ts | 0 .../tests/index.test.js} | 4 +- .../ArticleContent/tests/store.test.js | 10 +++ .../content/JobContent/CommunityCard.js | 59 ------------- .../content/JobContent/SideCards.js | 17 ---- src/containers/content/JobContent/index.js | 87 ------------------- src/containers/content/JobContent/logic.js | 85 ------------------ src/containers/content/JobContent/schema.ts | 15 ---- src/containers/content/JobContent/store.js | 43 --------- .../content/JobContent/styles/company_card.js | 75 ---------------- .../content/JobContent/styles/index.js | 74 ---------------- .../content/JobContent/styles/side_cards.js | 10 --- .../content/JobContent/tests/index.test.ts | 10 --- .../content/JobContent/tests/store.test.ts | 10 --- .../content/PostContent/tests/store.test.ts | 10 --- .../content/RepoContent/ContributorList.js | 42 --------- .../content/RepoContent/RepoCounters.js | 43 --------- .../content/RepoContent/RepoStatusCard.js | 28 ------ .../content/RepoContent/SideCards.js | 18 ---- src/containers/content/RepoContent/index.js | 74 ---------------- src/containers/content/RepoContent/logic.js | 51 ----------- src/containers/content/RepoContent/schema.ts | 23 ----- src/containers/content/RepoContent/store.js | 28 ------ .../RepoContent/styles/contributor_list.ts | 39 --------- .../content/RepoContent/styles/index.ts | 70 --------------- .../RepoContent/styles/repo_counters.ts | 34 -------- .../RepoContent/styles/repo_status_card.ts | 44 ---------- .../content/RepoContent/styles/side_cards.ts | 10 --- .../content/RepoContent/tests/index.test.ts | 10 --- .../content/RepoContent/tests/store.test.ts | 10 --- src/containers/tool/ArticleSticker/store.ts | 2 +- src/pages/post.tsx | 4 +- src/stores/RootStore/index.ts | 8 +- src/stores/index.ts | 4 +- 42 files changed, 48 insertions(+), 1052 deletions(-) rename src/containers/content/{PostContent/DesktopView.tsx => ArticleContent/DesktopView/index.tsx} (82%) rename src/containers/content/{PostContent/MobileView.tsx => ArticleContent/MobileView/index.tsx} (91%) rename src/containers/content/{PostContent => ArticleContent}/index.tsx (81%) rename src/containers/content/{PostContent => ArticleContent}/logic.ts (100%) rename src/containers/content/{PostContent => ArticleContent}/schema.ts (100%) rename src/containers/content/{PostContent => ArticleContent}/store.ts (81%) rename src/containers/content/{PostContent/styles/desktop_view.ts => ArticleContent/styles/desktop_view/index.tsx} (100%) create mode 100755 src/containers/content/ArticleContent/styles/index.ts rename src/containers/content/{PostContent => ArticleContent}/styles/mobile_view.ts (100%) rename src/containers/content/{PostContent/tests/index.test.ts => ArticleContent/tests/index.test.js} (65%) create mode 100755 src/containers/content/ArticleContent/tests/store.test.js delete mode 100755 src/containers/content/JobContent/CommunityCard.js delete mode 100755 src/containers/content/JobContent/SideCards.js delete mode 100755 src/containers/content/JobContent/index.js delete mode 100755 src/containers/content/JobContent/logic.js delete mode 100755 src/containers/content/JobContent/schema.ts delete mode 100755 src/containers/content/JobContent/store.js delete mode 100755 src/containers/content/JobContent/styles/company_card.js delete mode 100755 src/containers/content/JobContent/styles/index.js delete mode 100755 src/containers/content/JobContent/styles/side_cards.js delete mode 100755 src/containers/content/JobContent/tests/index.test.ts delete mode 100755 src/containers/content/JobContent/tests/store.test.ts delete mode 100755 src/containers/content/PostContent/tests/store.test.ts delete mode 100755 src/containers/content/RepoContent/ContributorList.js delete mode 100755 src/containers/content/RepoContent/RepoCounters.js delete mode 100755 src/containers/content/RepoContent/RepoStatusCard.js delete mode 100755 src/containers/content/RepoContent/SideCards.js delete mode 100755 src/containers/content/RepoContent/index.js delete mode 100755 src/containers/content/RepoContent/logic.js delete mode 100755 src/containers/content/RepoContent/schema.ts delete mode 100755 src/containers/content/RepoContent/store.js delete mode 100755 src/containers/content/RepoContent/styles/contributor_list.ts delete mode 100755 src/containers/content/RepoContent/styles/index.ts delete mode 100755 src/containers/content/RepoContent/styles/repo_counters.ts delete mode 100755 src/containers/content/RepoContent/styles/repo_status_card.ts delete mode 100755 src/containers/content/RepoContent/styles/side_cards.ts delete mode 100755 src/containers/content/RepoContent/tests/index.test.ts delete mode 100755 src/containers/content/RepoContent/tests/store.test.ts diff --git a/src/containers/content/PostContent/DesktopView.tsx b/src/containers/content/ArticleContent/DesktopView/index.tsx similarity index 82% rename from src/containers/content/PostContent/DesktopView.tsx rename to src/containers/content/ArticleContent/DesktopView/index.tsx index e3e229313..c8022e486 100644 --- a/src/containers/content/PostContent/DesktopView.tsx +++ b/src/containers/content/ArticleContent/DesktopView/index.tsx @@ -1,10 +1,10 @@ /* * - * PostContent + * general ArticleContent for Post, Job, Blog, Radar .. * */ -import React, { FC, useRef } from 'react' +import { FC, useRef } from 'react' import { Waypoint } from 'react-waypoint' import type { TMetric } from '@/spec' @@ -18,7 +18,7 @@ import ArticleFooter from '@/containers/unit/ArticleFooter' import Maybe from '@/components/Maybe' import MarkDownRender from '@/components/MarkDownRender' -import type { TStore } from './store' +import type { TStore } from '../store' import { Wrapper, @@ -27,21 +27,21 @@ import { SidebarWrapper, ArticleWrapper, CommentsWrapper, -} from './styles/desktop_view' +} from '../styles/desktop_view' -import { useInit, checkAnchor } from './logic' +import { useInit, checkAnchor } from '../logic' /* eslint-disable-next-line */ const log = buildLog('C:PostContent') type TProps = { - postContent?: TStore + articleContent?: TStore testid?: string metric?: TMetric } -const PostContentContainer: FC = ({ - postContent: store, +const ArticleContentContainer: FC = ({ + articleContent: store, metric, testid, }) => { @@ -81,4 +81,4 @@ const PostContentContainer: FC = ({ ) } -export default pluggedIn(PostContentContainer) as FC +export default pluggedIn(ArticleContentContainer) as FC diff --git a/src/containers/content/PostContent/MobileView.tsx b/src/containers/content/ArticleContent/MobileView/index.tsx similarity index 91% rename from src/containers/content/PostContent/MobileView.tsx rename to src/containers/content/ArticleContent/MobileView/index.tsx index 0e680ebdb..6ecae0116 100644 --- a/src/containers/content/PostContent/MobileView.tsx +++ b/src/containers/content/ArticleContent/MobileView/index.tsx @@ -16,7 +16,7 @@ import ArticleFooter from '@/containers/unit/ArticleFooter' import Maybe from '@/components/Maybe' import MarkDownRender from '@/components/MarkDownRender' -import type { TStore } from './store' +import type { TStore } from '../store' import { Wrapper, @@ -24,9 +24,9 @@ import { MainWrapper, ArticleWrapper, CommentsWrapper, -} from './styles/mobile_view' +} from '../styles/mobile_view' -import { useInit, articleInAnchor, articleOutAnchor } from './logic' +import { useInit, articleInAnchor, articleOutAnchor } from '../logic' /* eslint-disable-next-line */ const log = buildLog('C:PostContent') diff --git a/src/containers/content/PostContent/index.tsx b/src/containers/content/ArticleContent/index.tsx similarity index 81% rename from src/containers/content/PostContent/index.tsx rename to src/containers/content/ArticleContent/index.tsx index 8c027330b..0e0e39fd9 100755 --- a/src/containers/content/PostContent/index.tsx +++ b/src/containers/content/ArticleContent/index.tsx @@ -11,7 +11,7 @@ import { useDevice } from '@/hooks' import DesktopView from './DesktopView' import MobileView from './MobileView' -const PostContentContainer = (props) => { +const ArticleContent = (props) => { const { isMobile } = useDevice() return ( @@ -21,4 +21,4 @@ const PostContentContainer = (props) => { ) } -export default PostContentContainer +export default ArticleContent diff --git a/src/containers/content/PostContent/logic.ts b/src/containers/content/ArticleContent/logic.ts similarity index 100% rename from src/containers/content/PostContent/logic.ts rename to src/containers/content/ArticleContent/logic.ts diff --git a/src/containers/content/PostContent/schema.ts b/src/containers/content/ArticleContent/schema.ts similarity index 100% rename from src/containers/content/PostContent/schema.ts rename to src/containers/content/ArticleContent/schema.ts diff --git a/src/containers/content/PostContent/store.ts b/src/containers/content/ArticleContent/store.ts similarity index 81% rename from src/containers/content/PostContent/store.ts rename to src/containers/content/ArticleContent/store.ts index 9ba9a9d6d..1acf07a1d 100755 --- a/src/containers/content/PostContent/store.ts +++ b/src/containers/content/ArticleContent/store.ts @@ -1,5 +1,5 @@ /* - * PostContentStore store + * ArticleContent store * */ @@ -9,9 +9,9 @@ import type { TRootStore, TRoute, TArticle } from '@/spec' import { markStates, buildLog } from '@/utils' /* eslint-disable-next-line */ -const log = buildLog('S:PostContentStore') +const log = buildLog('S:ArticleContentStore') -const PostContentStore = T.model('PostContentStore', { +const ArticleContent = T.model('ArticleContent', { articleInViewport: T.optional(T.boolean, true), }) .views((self) => ({ @@ -38,5 +38,5 @@ const PostContentStore = T.model('PostContentStore', { }, })) -export type TStore = Instance -export default PostContentStore +export type TStore = Instance +export default ArticleContent diff --git a/src/containers/content/PostContent/styles/desktop_view.ts b/src/containers/content/ArticleContent/styles/desktop_view/index.tsx similarity index 100% rename from src/containers/content/PostContent/styles/desktop_view.ts rename to src/containers/content/ArticleContent/styles/desktop_view/index.tsx diff --git a/src/containers/content/ArticleContent/styles/index.ts b/src/containers/content/ArticleContent/styles/index.ts new file mode 100755 index 000000000..1c0b72a65 --- /dev/null +++ b/src/containers/content/ArticleContent/styles/index.ts @@ -0,0 +1,11 @@ +import styled from 'styled-components' + +import type { TTestable } from '@/spec' +// import { theme } from '@/utils' + +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` + // +` +export const Title = styled.div`` diff --git a/src/containers/content/PostContent/styles/mobile_view.ts b/src/containers/content/ArticleContent/styles/mobile_view.ts similarity index 100% rename from src/containers/content/PostContent/styles/mobile_view.ts rename to src/containers/content/ArticleContent/styles/mobile_view.ts diff --git a/src/containers/content/PostContent/tests/index.test.ts b/src/containers/content/ArticleContent/tests/index.test.js similarity index 65% rename from src/containers/content/PostContent/tests/index.test.ts rename to src/containers/content/ArticleContent/tests/index.test.js index da92ca43e..253c19dd3 100755 --- a/src/containers/content/PostContent/tests/index.test.ts +++ b/src/containers/content/ArticleContent/tests/index.test.js @@ -1,9 +1,9 @@ // import React from 'react' // import { shallow } from 'enzyme' -// import PostContent from '../index' +// import ArticleContent from '../index' -describe('TODO ', () => { +describe('TODO ', () => { it('Expect to have unit tests specified', () => { expect(true).toEqual(true) }) diff --git a/src/containers/content/ArticleContent/tests/store.test.js b/src/containers/content/ArticleContent/tests/store.test.js new file mode 100755 index 000000000..f7a1b2453 --- /dev/null +++ b/src/containers/content/ArticleContent/tests/store.test.js @@ -0,0 +1,10 @@ +/* + * ArticleContent store test + * + */ + +// import ArticleContent from '../index' + +it('TODO: store test ArticleContent', () => { + expect(1 + 1).toBe(2) +}) diff --git a/src/containers/content/JobContent/CommunityCard.js b/src/containers/content/JobContent/CommunityCard.js deleted file mode 100755 index c029b0e0a..000000000 --- a/src/containers/content/JobContent/CommunityCard.js +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react' - -import { ICON_CMD } from '@/config' - -import { cutRest } from '@/utils' -import { - Wrapper, - Divider, - CompanyBrand, - CompanyLogo, - CompanyLabel, - Title, - HomePage, - LinkIcon, - Link, - CompanyStates, - StateLabel, - StateIcon, - StateText, -} from './styles/company_card' - -const CompanyCard = ({ data }) => ( - - - - - {cutRest(data.company, 9)} - - - - {cutRest(data.companyLink, 30)} - - - - - - - - - - {data.finance} - - - - {data.field} - - - - {data.scale} - - - -) - -export default React.memo(CompanyCard) diff --git a/src/containers/content/JobContent/SideCards.js b/src/containers/content/JobContent/SideCards.js deleted file mode 100755 index f29873ca3..000000000 --- a/src/containers/content/JobContent/SideCards.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react' - -import ArticleAuthorCard from '@/containers/unit/ArticleAuthorCard' -import ContentSourceCard from '@/components/ContentSourceCard' - -import CompanyCard from './CommunityCard' -import { Wrapper } from './styles/side_cards' - -const SideCards = ({ data }) => ( - - - - - -) - -export default React.memo(SideCards) diff --git a/src/containers/content/JobContent/index.js b/src/containers/content/JobContent/index.js deleted file mode 100755 index 7560284ea..000000000 --- a/src/containers/content/JobContent/index.js +++ /dev/null @@ -1,87 +0,0 @@ -/* - * - * JobContent - * - */ - -import React from 'react' - -import { THREAD } from '@/constant' -import { pluggedIn, buildLog } from '@/utils' - -import ArticleBodyHeader from '@/containers/unit/ArticleBodyHeader' -import Comments from '@/containers/unit/Comments' - -import Sticky from '@/components/Sticky' -import MarkDownRender from '@/components/MarkDownRender' -import Maybe from '@/components/Maybe' -import ArticleAuthorCard from '@/containers/unit/ArticleAuthorCard' -import ContentSourceCard from '@/components/ContentSourceCard' - -import CompanyCard from './CommunityCard' -import SideCards from './SideCards' - -import { - Wrapper, - InnerWrapper, - MainWrapper, - SidebarWrapper, - ArticleWrapper, - BodyHeaderWrapper, - CommentsWrapper, - MobileWrapper, - MobileContentCard, -} from './styles' - -import { useInit } from './logic' - -/* eslint-disable-next-line */ -const log = buildLog('C:JobContent') - -const JobContentContainer = ({ jobContent: store }) => { - useInit(store) - - const { curRoute, viewingData } = store - const { mainPath: communityRaw } = curRoute - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ) -} - -export default pluggedIn(JobContentContainer) diff --git a/src/containers/content/JobContent/logic.js b/src/containers/content/JobContent/logic.js deleted file mode 100755 index b42a21405..000000000 --- a/src/containers/content/JobContent/logic.js +++ /dev/null @@ -1,85 +0,0 @@ -import { useEffect } from 'react' - -import { EVENT, ERR } from '@/constant' -import { asyncSuit, buildLog, errRescue } from '@/utils' -import S from './schema' - -/* eslint-disable-next-line */ -const log = buildLog('L:JobContent') - -const { SR71, $solver, asyncRes, asyncErr } = asyncSuit -const sr71$ = new SR71({ - receive: [EVENT.REFRESH_JOBS], -}) - -let sub$ = null -let store = null - -const loadJob = () => { - const { id } = store.viewingData - sr71$.query(S.job, { id, userHasLogin: store.isLogin }) -} - -/* - NOTE: in job page, if you want to update the job content - you need load tags by your self, because the this ssr dones't - load the the partialTags(cities infos) for you - */ -const loadCityTags = () => { - if (!store.isLogin) return false - const community = store.curCommunity.raw - // tagsBar: { tags: partialTags }, - sr71$.query(S.partialTags, { community, thread: 'JOB' }) -} - -// ############################### -// Data & Error handlers -// ############################### - -const DataSolver = [ - { - match: asyncRes('job'), - action: ({ job }) => store.setViewing({ job }), - }, - { - match: asyncRes('partialTags'), - action: ({ partialTags }) => store.updateTagsBar(partialTags), - }, - { - match: asyncRes(EVENT.REFRESH_JOBS), - action: () => loadJob(), - }, -] -const ErrSolver = [ - { - match: asyncErr(ERR.GRAPHQL), - action: () => {}, - }, - { - match: asyncErr(ERR.TIMEOUT), - action: ({ details }) => { - errRescue({ type: ERR.TIMEOUT, details, path: 'JobContent' }) - }, - }, - { - match: asyncErr(ERR.NETWORK), - action: () => errRescue({ type: ERR.NETWORK, path: 'JobContent' }), - }, -] - -export const holder = 1 - -// ############################### -// init & uninit -// ############################### -export const useInit = (_store) => - useEffect(() => { - store = _store - // log('effect init') - sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver)) - loadCityTags() - return () => { - sr71$.stop() - sub$.unsubscribe() - } - }, [_store]) diff --git a/src/containers/content/JobContent/schema.ts b/src/containers/content/JobContent/schema.ts deleted file mode 100755 index 3f9a6a304..000000000 --- a/src/containers/content/JobContent/schema.ts +++ /dev/null @@ -1,15 +0,0 @@ -import gql from 'graphql-tag' -import { P } from '@/schemas' - -const job = gql` - ${P.job} -` -const partialTags = gql` - ${P.partialTags} -` -const schema = { - job, - partialTags, -} - -export default schema diff --git a/src/containers/content/JobContent/store.js b/src/containers/content/JobContent/store.js deleted file mode 100755 index d178fdc83..000000000 --- a/src/containers/content/JobContent/store.js +++ /dev/null @@ -1,43 +0,0 @@ -/* - * JobContent store - * - */ - -import { types as T, getParent } from 'mobx-state-tree' - -import { markStates, buildLog, stripMobx } from '@/utils' - -/* eslint-disable-next-line */ -const log = buildLog('S:JobContent') - -const JobContent = T.model('JobContent', {}) - .views((self) => ({ - get root() { - return getParent(self) - }, - get curRoute() { - return self.root.curRoute - }, - get isLogin() { - return self.root.account.isLogin - }, - get curCommunity() { - return stripMobx(self.root.viewing.community) - }, - get viewingData() { - return self.root.viewingData - }, - })) - .actions((self) => ({ - setViewing(sobj) { - self.root.setViewing(sobj) - }, - updateTagsBar(tags) { - self.root.tagsBar.mark({ tags }) - }, - mark(sobj) { - markStates(sobj, self) - }, - })) - -export default JobContent diff --git a/src/containers/content/JobContent/styles/company_card.js b/src/containers/content/JobContent/styles/company_card.js deleted file mode 100755 index 50bb9f555..000000000 --- a/src/containers/content/JobContent/styles/company_card.js +++ /dev/null @@ -1,75 +0,0 @@ -import styled from 'styled-components' - -import Img from '@/Img' -import { theme, css } from '@/utils' - -export const Wrapper = styled.div` - ${css.flexColumn()}; - min-height: 140px; - padding: 20px; - max-width: 300px; - width: 100%; - background: ${theme('drawer.articleBg')}; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); - margin-bottom: 15px; - ${css.media.mobile` - width: 100%; - `}; -` -export const CompanyBrand = styled.div` - ${css.flex()}; -` -export const CompanyLogo = styled(Img)` - ${css.size(40)}; - margin-right: 12px; -` -export const CompanyLabel = styled.div` - ${css.flexColumn()}; -` -export const Title = styled.div` - color: ${theme('thread.articleTitle')}; -` -export const HomePage = styled.div` - ${css.flex('align-center')}; - color: ${theme('thread.articleDigest')}; -` -export const LinkIcon = styled(Img)` - fill: ${theme('thread.articleDigest')}; - ${css.size(15)}; - margin-right: 5px; -` -export const Link = styled.a` - transition: color 0.3s; - color: ${theme('markdown.link')}; - - &:hover { - cursor: pointer; - color: ${theme('markdown.link')}; - text-decoration: underline; - } -` -export const CompanyStates = styled.div` - ${css.flexColumn()}; -` -export const StateLabel = styled.div` - ${css.flex('align-center')}; - margin-bottom: 10px; - margin-left: 5px; -` -export const StateIcon = styled(Img)` - fill: ${theme('thread.articleDigest')}; - ${css.size(16)}; - margin-right: 15px; -` -export const StateText = styled.div` - color: ${theme('thread.articleDigest')}; - font-size: 0.9rem; - margin-top: 1px; -` -export const Divider = styled.div` - border-bottom: 1px solid; - border-bottom-color: ${theme('thread.articleDigest')}; - opacity: 0.4; - margin-top: 14px; - margin-bottom: 15px; -` diff --git a/src/containers/content/JobContent/styles/index.js b/src/containers/content/JobContent/styles/index.js deleted file mode 100755 index e9221bfd7..000000000 --- a/src/containers/content/JobContent/styles/index.js +++ /dev/null @@ -1,74 +0,0 @@ -import styled from 'styled-components' - -import { theme, css, WIDTH } from '@/utils' - -export const Wrapper = styled.article` - ${css.flexGrow('justify-center')}; - padding: 20px; - min-height: 300px; - ${css.media.tablet` - padding: 8px 0; - `}; -` -export const InnerWrapper = styled.div` - ${css.flex()}; - width: 100%; - max-width: ${WIDTH.ARTICLE.PAGE}; - padding: 0 6vw; - ${css.media.desktop` - padding: 0 4vw; - `}; -` -export const MainWrapper = styled.div` - flex-grow: 1; - ${css.media.tablet` - width: 100%; - `}; -` -export const SidebarWrapper = styled.div` - min-width: 250px; - ${css.media.mobile` - display: none; - `}; -` -/* background: ${theme('drawer.articleBg')}; */ -export const ArticleWrapper = styled.div` - font-size: 1.1rem; - margin-right: 1.6vw; - background: ${theme('drawer.articleBg')}; - border-radius: 5px; - padding: 35px 40px; - min-height: 200px; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); - - ${css.media.tablet` - padding: 30px 10px; - min-height: 40vh; - margin-right: 0; - `}; -` -export const BodyHeaderWrapper = styled.div` - margin-top: -18px; - margin-bottom: 18px; -` -export const CommentsWrapper = styled.div` - margin: 30px 0; - margin-right: 25px; - - ${css.media.tablet` - margin: 10px; - `}; -` - -export const MobileWrapper = styled.div` - margin-top: 10px; - ${css.flexColumn('align-center')}; - display: none; - ${css.media.tablet` - ${css.flex()}; - `}; -` -export const MobileContentCard = styled.div` - ${css.flex('justify-center')}; - width: 100%; -` diff --git a/src/containers/content/JobContent/styles/side_cards.js b/src/containers/content/JobContent/styles/side_cards.js deleted file mode 100755 index e9de58a2a..000000000 --- a/src/containers/content/JobContent/styles/side_cards.js +++ /dev/null @@ -1,10 +0,0 @@ -import styled from 'styled-components' - -import { css } from '@/utils' - -export const Wrapper = styled.div` - ${css.flexColumn()}; - min-width: 250px; - ${css.media.tablet`display: none`}; -` -export const holder = 1 diff --git a/src/containers/content/JobContent/tests/index.test.ts b/src/containers/content/JobContent/tests/index.test.ts deleted file mode 100755 index 199aa6b58..000000000 --- a/src/containers/content/JobContent/tests/index.test.ts +++ /dev/null @@ -1,10 +0,0 @@ -// import React from 'react' -// import { shallow } from 'enzyme' - -// import JobContent from '../index' - -describe('TODO ', () => { - it('Expect to have unit tests specified', () => { - expect(true).toEqual(true) - }) -}) diff --git a/src/containers/content/JobContent/tests/store.test.ts b/src/containers/content/JobContent/tests/store.test.ts deleted file mode 100755 index d8c25f1ad..000000000 --- a/src/containers/content/JobContent/tests/store.test.ts +++ /dev/null @@ -1,10 +0,0 @@ -/* - * JobContent store test - * - */ - -// import JobContent from '../index' - -it('TODO: store test JobContent', () => { - expect(1 + 1).toBe(2) -}) diff --git a/src/containers/content/PostContent/tests/store.test.ts b/src/containers/content/PostContent/tests/store.test.ts deleted file mode 100755 index 849df4f33..000000000 --- a/src/containers/content/PostContent/tests/store.test.ts +++ /dev/null @@ -1,10 +0,0 @@ -/* - * PostContentStore store test - * - */ - -// import PostContentStore from '../index' - -it('TODO: test PostContentStore', () => { - expect(1 + 1).toBe(2) -}) diff --git a/src/containers/content/RepoContent/ContributorList.js b/src/containers/content/RepoContent/ContributorList.js deleted file mode 100755 index eca0ccedc..000000000 --- a/src/containers/content/RepoContent/ContributorList.js +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react' - -// import { ICON_CMD } from '@/config' -import Tooltip from '@/components/Tooltip' - -import { - Wrapper, - Builder, - Avatar, - PopoverInfo, - PopAvatar, - PopLink, -} from './styles/contributor_list' - -const ContributorList = ({ items }) => ( - - {items.map((user) => ( - - - - @{user.nickname} - - - } - > - - - - - ))} - -) - -export default React.memo(ContributorList) diff --git a/src/containers/content/RepoContent/RepoCounters.js b/src/containers/content/RepoContent/RepoCounters.js deleted file mode 100755 index 7f711e33d..000000000 --- a/src/containers/content/RepoContent/RepoCounters.js +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react' - -import { ICON_CMD } from '@/config' - -import { numberWithCommas } from '@/utils' -import { - Wrapper, - CountItem, - CountIcon, - StarIcon, - CountText, -} from './styles/repo_counters' - -const RepoCounters = ({ repo }) => ( - - - - {numberWithCommas(repo.starCount)} - - - - {numberWithCommas(repo.forkCount)} - - - - {numberWithCommas(repo.watchCount)} - - -) - -export default React.memo(RepoCounters) diff --git a/src/containers/content/RepoContent/RepoStatusCard.js b/src/containers/content/RepoContent/RepoStatusCard.js deleted file mode 100755 index adb923a35..000000000 --- a/src/containers/content/RepoContent/RepoStatusCard.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react' - -import RepoCounters from './RepoCounters' -import ContributorList from './ContributorList' - -import { - Wrapper, - ReleaseWrapper, - ReleaseTag, - Label, - Divider, -} from './styles/repo_status_card' - -const RepoStatusCard = ({ data }) => ( - - - - {data.releaseTag} - - - - - - - -) - -export default React.memo(RepoStatusCard) diff --git a/src/containers/content/RepoContent/SideCards.js b/src/containers/content/RepoContent/SideCards.js deleted file mode 100755 index 7323eebf1..000000000 --- a/src/containers/content/RepoContent/SideCards.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react' - -import ArticleAuthorCard from '@/containers/unit/ArticleAuthorCard' -import ContentSourceCard from '@/components/ContentSourceCard' - -import RepoStatusCard from './RepoStatusCard' - -import { Wrapper } from './styles/side_cards' - -const SideCards = ({ data }) => ( - - - - - -) - -export default React.memo(SideCards) diff --git a/src/containers/content/RepoContent/index.js b/src/containers/content/RepoContent/index.js deleted file mode 100755 index 3ccab6481..000000000 --- a/src/containers/content/RepoContent/index.js +++ /dev/null @@ -1,74 +0,0 @@ -/* - * - * RepoContent - * - */ - -import React from 'react' - -import { pluggedIn, buildLog } from '@/utils' - -import Comments from '@/containers/unit/Comments' -import ArticleAuthorCard from '@/containers/unit/ArticleAuthorCard' - -import Sticky from '@/components/Sticky' -import ContentSourceCard from '@/components/ContentSourceCard' -import Maybe from '@/components/Maybe' -import MarkDownRender from '@/components/MarkDownRender' - -import SideCards from './SideCards' -import RepoStatusCard from './RepoStatusCard' - -import { - Wrapper, - InnerWrapper, - MainWrapper, - SidebarWrapper, - ArticleWrapper, - CommentsWrapper, - MobileWrapper, - MobileContentCard, -} from './styles' - -import { useInit } from './logic' - -/* eslint-disable-next-line */ -const log = buildLog('C:RepoContent') - -const RepoContentContainer = ({ repoContent: store }) => { - useInit(store) - - const { viewingData } = store - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - ) -} - -export default pluggedIn(RepoContentContainer) diff --git a/src/containers/content/RepoContent/logic.js b/src/containers/content/RepoContent/logic.js deleted file mode 100755 index f3cc5673b..000000000 --- a/src/containers/content/RepoContent/logic.js +++ /dev/null @@ -1,51 +0,0 @@ -import { useEffect } from 'react' - -import { ERR } from '@/constant' -import { asyncSuit, buildLog, errRescue } from '@/utils' -// import S from './schema' - -/* eslint-disable-next-line */ -const log = buildLog('L:RepoContent') - -const { SR71, $solver, asyncErr } = asyncSuit -const sr71$ = new SR71() - -let sub$ = null -let store = null - -export const someMethod = () => {} - -// ############################### -// Data & Error handlers -// ############################### - -const DataSolver = [] -const ErrSolver = [ - { - match: asyncErr(ERR.GRAPHQL), - action: () => {}, - }, - { - match: asyncErr(ERR.TIMEOUT), - action: () => {}, - }, - { - match: asyncErr(ERR.NETWORK), - action: () => errRescue({ type: ERR.NETWORK, path: 'RepoContent' }), - }, -] - -// ############################### -// init & uninit -// ############################### -export const useInit = (_store) => - useEffect(() => { - store = _store - log('init store: ', store) - sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver)) - - return () => { - sr71$.stop() - sub$.unsubscribe() - } - }, [_store]) diff --git a/src/containers/content/RepoContent/schema.ts b/src/containers/content/RepoContent/schema.ts deleted file mode 100755 index 0035db982..000000000 --- a/src/containers/content/RepoContent/schema.ts +++ /dev/null @@ -1,23 +0,0 @@ -import gql from 'graphql-tag' - -const simpleMutation = gql` - mutation($id: ID!) { - post(id: $id) { - id - } - } -` -const simpleQuery = gql` - query($filter: filter!) { - post(id: $id) { - id - } - } -` - -const schema = { - simpleMutation, - simpleQuery, -} - -export default schema diff --git a/src/containers/content/RepoContent/store.js b/src/containers/content/RepoContent/store.js deleted file mode 100755 index 3d7324cee..000000000 --- a/src/containers/content/RepoContent/store.js +++ /dev/null @@ -1,28 +0,0 @@ -/* - * RepoContent store - * - */ - -import { types as T, getParent } from 'mobx-state-tree' - -import { markStates, buildLog } from '@/utils' - -/* eslint-disable-next-line */ -const log = buildLog('S:RepoContent') - -const RepoContent = T.model('RepoContent', {}) - .views((self) => ({ - get root() { - return getParent(self) - }, - get viewingData() { - return self.root.viewingData - }, - })) - .actions((self) => ({ - mark(sobj) { - markStates(sobj, self) - }, - })) - -export default RepoContent diff --git a/src/containers/content/RepoContent/styles/contributor_list.ts b/src/containers/content/RepoContent/styles/contributor_list.ts deleted file mode 100755 index 9ca378d5a..000000000 --- a/src/containers/content/RepoContent/styles/contributor_list.ts +++ /dev/null @@ -1,39 +0,0 @@ -import styled from 'styled-components' - -import Img from '@/Img' -import { theme, css } from '@/utils' - -export const Wrapper = styled.div` - ${css.flexGrow()}; - flex-warp: wrap; -` -export const Builder = styled.div`` - -export const Avatar = styled(Img)` - ${css.size(20)}; - border-radius: 3px; - margin-right: 6px; - opacity: 0.8; - &:hover { - cursor: pointer; - opacity: 1; - } -` -export const PopoverInfo = styled.div` - ${css.flexColumn('align-center')}; - padding: 10px; - padding-bottom: 5px; -` -export const PopAvatar = styled(Img)` - width: 80px; - height: 80px; - border-radius: 3px; -` -export const PopLink = styled.a` - color: ${theme('thread.articleTitle')}; - margin-top: 5px; - &:hover { - text-decoration: underline; - color: ${theme('thread.articleTitle')}; - } -` diff --git a/src/containers/content/RepoContent/styles/index.ts b/src/containers/content/RepoContent/styles/index.ts deleted file mode 100755 index 0d0230659..000000000 --- a/src/containers/content/RepoContent/styles/index.ts +++ /dev/null @@ -1,70 +0,0 @@ -import styled from 'styled-components' - -import { theme, css, WIDTH } from '@/utils' - -export const Wrapper = styled.article` - ${css.flexGrow('justify-center')}; - padding: 20px; - min-height: 300px; - ${css.media.tablet` - padding: 8px 0; - `}; -` -export const InnerWrapper = styled.div` - ${css.flex()}; - width: 100%; - max-width: ${WIDTH.ARTICLE.PAGE}; - padding: 0 6vw; - ${css.media.desktop` - padding: 0 4vw; - `}; -` -export const MainWrapper = styled.div` - flex-grow: 1; - ${css.media.tablet` - width: 100%; - `}; -` -export const SidebarWrapper = styled.div` - min-width: 250px; - ${css.media.mobile` - display: none; - `}; -` -/* background: ${theme('drawer.articleBg')}; */ -export const ArticleWrapper = styled.div` - font-size: 1.1rem; - margin-right: 1.6vw; - background: ${theme('drawer.articleBg')}; - border-radius: 5px; - padding: 35px 40px; - min-height: 200px; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); - ${css.media.tablet` - padding: 30px 10px; - min-height: 30vh; - margin-right: 0; - `}; -` - -export const CommentsWrapper = styled.div` - margin: 30px 0; - margin-right: 25px; - - ${css.media.tablet` - margin: 5px; - `}; -` - -export const MobileWrapper = styled.div` - margin-top: 10px; - ${css.flexColumn('align-center')}; - display: none; - ${css.media.tablet` -display: flex; - `}; -` -export const MobileContentCard = styled.div` - ${css.flex('justify-center')}; - width: 100%; -` diff --git a/src/containers/content/RepoContent/styles/repo_counters.ts b/src/containers/content/RepoContent/styles/repo_counters.ts deleted file mode 100755 index 44cb743f8..000000000 --- a/src/containers/content/RepoContent/styles/repo_counters.ts +++ /dev/null @@ -1,34 +0,0 @@ -import styled from 'styled-components' - -import Img from '@/Img' -import { theme, css } from '@/utils' - -export const Wrapper = styled.div` - ${css.flex('justify-between')}; - margin-bottom: 13px; -` -export const CountItem = styled.a` - ${css.flex('align-center')}; - - color: ${theme('thread.articleTitle')}; - transition: color 0.2s; - &:hover { - color: ${theme('thread.articleTitle')}; - text-decoration: underline; - cursor: pointer; - } -` -export const CountIcon = styled(Img)` - fill: ${theme('thread.articleTitle')}; - ${css.size(13)}; - margin-right: 4px; - margin-top: -1px; -` -export const StarIcon = styled(CountIcon)` - margin-top: -4px; -` -export const CountText = styled.div` - font-size: 0.9rem; - color: ${theme('thread.articleTitle')}; - margin-right: 2px; -` diff --git a/src/containers/content/RepoContent/styles/repo_status_card.ts b/src/containers/content/RepoContent/styles/repo_status_card.ts deleted file mode 100755 index 260e92bdd..000000000 --- a/src/containers/content/RepoContent/styles/repo_status_card.ts +++ /dev/null @@ -1,44 +0,0 @@ -import styled from 'styled-components' - -import { theme, css } from '@/utils' - -export const Wrapper = styled.div` - min-height: 100px; - padding: 20px; - padding-bottom: 0; - max-width: 300px; - width: 100%; - flex-wrap: wrap; - background: ${theme('drawer.articleBg')}; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); - margin-bottom: 15px; - ${css.media.mobile` - width: 100%; - `}; -` -export const ReleaseWrapper = styled.div` - ${css.flex('justify-between')}; -` -export const ReleaseTag = styled.div` - color: ${theme('banner.title')}; - border: 1px solid; - border-color: ${theme('banner.title')}; - padding: 0 4px; - border-radius: 3px; -` -export const Title = styled.div` - color: ${theme('thread.articleTitle')}; - font-size: 1em; -` -export const Label = styled.div` - color: ${theme('thread.articleTitle')}; - margin-bottom: 4px; -` - -export const Divider = styled.div` - border-bottom: 1px solid; - border-bottom-color: ${theme('thread.articleDigest')}; - opacity: 0.4; - margin-top: 14px; - margin-bottom: 15px; -` diff --git a/src/containers/content/RepoContent/styles/side_cards.ts b/src/containers/content/RepoContent/styles/side_cards.ts deleted file mode 100755 index e9de58a2a..000000000 --- a/src/containers/content/RepoContent/styles/side_cards.ts +++ /dev/null @@ -1,10 +0,0 @@ -import styled from 'styled-components' - -import { css } from '@/utils' - -export const Wrapper = styled.div` - ${css.flexColumn()}; - min-width: 250px; - ${css.media.tablet`display: none`}; -` -export const holder = 1 diff --git a/src/containers/content/RepoContent/tests/index.test.ts b/src/containers/content/RepoContent/tests/index.test.ts deleted file mode 100755 index ba1c38108..000000000 --- a/src/containers/content/RepoContent/tests/index.test.ts +++ /dev/null @@ -1,10 +0,0 @@ -// import React from 'react' -// import { shallow } from 'enzyme' - -// import RepoContent from '../index' - -describe('TODO ', () => { - it('Expect to have unit tests specified', () => { - expect(true).toEqual(true) - }) -}) diff --git a/src/containers/content/RepoContent/tests/store.test.ts b/src/containers/content/RepoContent/tests/store.test.ts deleted file mode 100755 index a1bec4cda..000000000 --- a/src/containers/content/RepoContent/tests/store.test.ts +++ /dev/null @@ -1,10 +0,0 @@ -/* - * RepoContent store test - * - */ - -// import RepoContent from '../index' - -it('TODO: store test RepoContent', () => { - expect(1 + 1).toBe(2) -}) diff --git a/src/containers/tool/ArticleSticker/store.ts b/src/containers/tool/ArticleSticker/store.ts index dbf04098e..50d2b63be 100755 --- a/src/containers/tool/ArticleSticker/store.ts +++ b/src/containers/tool/ArticleSticker/store.ts @@ -31,7 +31,7 @@ const ArticleSticker = T.model('ArticleSticker', { }, get isArticleInViewport(): boolean { const root = getParent(self) as TRootStore - const { articleInViewport } = root.postContent + const { articleInViewport } = root.articleContent return articleInViewport }, diff --git a/src/pages/post.tsx b/src/pages/post.tsx index 36d78471b..51f3a5eff 100755 --- a/src/pages/post.tsx +++ b/src/pages/post.tsx @@ -17,7 +17,7 @@ import { useStore } from '@/stores/init' import GlobalLayout from '@/containers/layout/GlobalLayout' import ArticleDigest from '@/containers/digest/ArticleDigest' -import PostContent from '@/containers/content/PostContent' +import ArticleContent from '@/containers/content/ArticleContent' import { P } from '@/schemas' @@ -120,7 +120,7 @@ const PostPage = (props) => { noSidebar > - + ) diff --git a/src/stores/RootStore/index.ts b/src/stores/RootStore/index.ts index 291fefb34..f609eb369 100755 --- a/src/stores/RootStore/index.ts +++ b/src/stores/RootStore/index.ts @@ -42,9 +42,6 @@ import { CommunityDigestStore, // content CommunityContentStore, - PostContentStore, - JobContentStore, - RepoContentStore, DiscoveryContentStore, CommunityEditorStore, UserContentStore, @@ -91,6 +88,7 @@ import { CoolGuideContentStore, // GEN: IMPORT SUBSTORE + ArticleContentStore, ArticleViewerStore, ArticlesThreadStore, ThreadSidebarStore, @@ -164,9 +162,6 @@ const rootStore = T.model({ discoveryContent: T.optional(DiscoveryContentStore, {}), communityEditor: T.optional(CommunityEditorStore, {}), - postContent: T.optional(PostContentStore, {}), - jobContent: T.optional(JobContentStore, {}), - repoContent: T.optional(RepoContentStore, {}), userContent: T.optional(UserContentStore, {}), // content end @@ -206,6 +201,7 @@ const rootStore = T.model({ coolGuideContent: T.optional(CoolGuideContentStore, {}), // GEN: PLUG SUBSTORE TO ROOTSTORE + articleContent: T.optional(ArticleContentStore, {}), articleViewer: T.optional(ArticleViewerStore, {}), articlesThread: T.optional(ArticlesThreadStore, {}), threadSidebar: T.optional(ThreadSidebarStore, {}), diff --git a/src/stores/index.ts b/src/stores/index.ts index 87d34b86e..94bc43d4a 100755 --- a/src/stores/index.ts +++ b/src/stores/index.ts @@ -43,9 +43,6 @@ export { default as ArticleDigestStore } from '@/containers/digest/ArticleDigest export { default as CommunityContentStore } from '@/containers/content/CommunityContent/store' export { default as DiscoveryContentStore } from '@/containers/content/DiscoveryContent/store' -export { default as PostContentStore } from '@/containers/content/PostContent/store' -export { default as JobContentStore } from '@/containers/content/JobContent/store' -export { default as RepoContentStore } from '@/containers/content/RepoContent/store' export { default as UserContentStore } from '@/containers/content/UserContent/store' // footer @@ -97,6 +94,7 @@ export { default as CommunityEditorStore } from '@/containers/editor/CommunityEd export { default as WorksEditorStore } from '@/containers/editor/WorksEditor/store' // GEN: EXPORT CONTAINERS STORE HERE +export { default as ArticleContentStore } from '@/containers/content/ArticleContent/store' export { default as ArticleViewerStore } from '@/containers/viewer/ArticleViewer/store' export { default as ArticlesThreadStore } from '@/containers/thread/ArticlesThread/store' export { default as ThreadSidebarStore } from '@/containers/thread/ThreadSidebar/store' From eb38ecb78260f4685e54811176bf7ff0414d3133 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Wed, 21 Jul 2021 16:19:43 +0800 Subject: [PATCH 10/13] refactor(article): basic fixed header UI/UX --- .../ArticleDigest/DesktopView/FixedHeader.tsx | 67 +++++++++++++++++++ .../index.tsx => WorksLayout.tsx} | 2 +- .../ArticleDigest/DesktopView/index.tsx | 12 ++-- .../styles/desktop_view/fixed_header.ts | 59 ++++++++++++++++ .../styles/desktop_view/metric.ts | 20 ++++++ .../index.ts => works_layout.ts} | 5 +- src/containers/tool/ArticleSticker/index.tsx | 2 +- src/containers/unit/Footer/logic.ts | 1 - utils/css/index.ts | 9 ++- utils/css/media.ts | 18 +++++ utils/css/zindex.ts | 2 +- 11 files changed, 183 insertions(+), 14 deletions(-) create mode 100644 src/containers/digest/ArticleDigest/DesktopView/FixedHeader.tsx rename src/containers/digest/ArticleDigest/DesktopView/{WorksLayout/index.tsx => WorksLayout.tsx} (96%) create mode 100644 src/containers/digest/ArticleDigest/styles/desktop_view/fixed_header.ts create mode 100644 src/containers/digest/ArticleDigest/styles/desktop_view/metric.ts rename src/containers/digest/ArticleDigest/styles/desktop_view/{works_layout/index.ts => works_layout.ts} (90%) diff --git a/src/containers/digest/ArticleDigest/DesktopView/FixedHeader.tsx b/src/containers/digest/ArticleDigest/DesktopView/FixedHeader.tsx new file mode 100644 index 000000000..d6cea34c7 --- /dev/null +++ b/src/containers/digest/ArticleDigest/DesktopView/FixedHeader.tsx @@ -0,0 +1,67 @@ +import { FC, memo, Fragment } from 'react' + +import type { TArticle, TMetric } from '@/spec' +import { METRIC } from '@/constant' + +import Upvote from '@/components/Upvote' +import DotDivider from '@/components/DotDivider' + +import { + Wrapper, + InnerWrapper, + ContentWrapper, + StickerWrapper, + Cover, + Title, + Desc, +} from '../styles/desktop_view/fixed_header' + +const TitleContent: FC<{ article: TArticle; metric: TMetric }> = ({ + article, + metric, +}) => { + switch (metric) { + case METRIC.WORKS_ARTICLE: { + return ( + + + CoderPlanets + + 可能是最性感的开发者社区, 可能是最性感的开发者社区 + + ) + } + + default: { + return {article.title} + } + } +} + +type TProps = { + article: TArticle + metric?: TMetric + show?: boolean + testid?: string +} +const FixedHeader: FC = ({ + article, + show = false, + metric = METRIC.ARTICLE, + testid = 'article-fixed-header', +}) => { + return ( + + + + + + + + + + + ) +} + +export default memo(FixedHeader) diff --git a/src/containers/digest/ArticleDigest/DesktopView/WorksLayout/index.tsx b/src/containers/digest/ArticleDigest/DesktopView/WorksLayout.tsx similarity index 96% rename from src/containers/digest/ArticleDigest/DesktopView/WorksLayout/index.tsx rename to src/containers/digest/ArticleDigest/DesktopView/WorksLayout.tsx index d969e8737..2886b68aa 100644 --- a/src/containers/digest/ArticleDigest/DesktopView/WorksLayout/index.tsx +++ b/src/containers/digest/ArticleDigest/DesktopView/WorksLayout.tsx @@ -23,7 +23,7 @@ import { Actions, BottomInfo, SubWrapper, -} from '../../styles/desktop_view/works_layout' +} from '../styles/desktop_view/works_layout' /* eslint-disable-next-line */ const log = buildLog('C:ArticleDigest') diff --git a/src/containers/digest/ArticleDigest/DesktopView/index.tsx b/src/containers/digest/ArticleDigest/DesktopView/index.tsx index 580753640..5274fb41e 100644 --- a/src/containers/digest/ArticleDigest/DesktopView/index.tsx +++ b/src/containers/digest/ArticleDigest/DesktopView/index.tsx @@ -1,7 +1,5 @@ /* - * * ArticleDigest - * */ import { FC } from 'react' @@ -13,6 +11,7 @@ import { METRIC } from '@/constant' import { useScroll } from '@/hooks' import { pluggedIn, buildLog } from '@/utils' +import FixedHeader from './FixedHeader' // import PostLayout from './PostLayout' import WorksLayout from './WorksLayout' @@ -41,14 +40,17 @@ const ArticleDigestContainer: FC = ({ const { direction: scrollDirection } = useScroll() useInit(store, scrollDirection as TScrollDirection) - console.log('article digest metric: ', metric) - - const { viewingArticle } = store + const { viewingArticle, inViewport } = store if (isNil(viewingArticle.id)) return null return ( + diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/fixed_header.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/fixed_header.ts new file mode 100644 index 000000000..52fedfef7 --- /dev/null +++ b/src/containers/digest/ArticleDigest/styles/desktop_view/fixed_header.ts @@ -0,0 +1,59 @@ +import styled from 'styled-components' + +import type { TTestable, TMetric, TActive } from '@/spec' +import { theme, css } from '@/utils' +import Img from '@/Img' + +import { getFixStickerOffset } from './metric' + +type TWrapper = TTestable & TActive +export const Wrapper = styled.nav.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` + ${css.flex('justify-center')}; + top: ${({ show }) => (show ? 0 : '-48px;')}; + opacity: ${({ show }) => (show ? 1 : 0)}; + + z-index: ${css.zIndex.articleFixedHeader}; + + position: fixed; + top: 0; + left: 0; + width: 100%; + + transition: all 0.2s; +` +export const InnerWrapper = styled.div<{ metric: TMetric }>` + ${css.flex('align-center')}; + background: #002a34; // ${theme('header.bg')}; + width: 100%; + height: 48px; + ${({ metric }) => css.fitPageWidth(metric)}; + border-bottom: 1px solid; + border-bottom-color: ${theme('drawer.divider')}; +` +export const ContentWrapper = styled.div<{ metric: TMetric }>` + ${css.flex('align-center')}; + width: 100%; + height: 100%; + ${({ metric }) => css.fitContentWidth(metric)}; +` +export const StickerWrapper = styled.div<{ metric: TMetric }>` + ${({ metric }) => css.fitStickerWidth(metric)}; + ${css.flex('justify-end')}; + margin-left: ${({ metric }) => getFixStickerOffset(metric)}; +` +export const Cover = styled(Img)` + ${css.size(28)}; + margin-right: 15px; +` +export const Title = styled.div` + color: ${theme('thread.articleTitle')}; + font-weight: bold; + font-size: 17px; +` +export const Desc = styled.div` + color: ${theme('thread.articleDigest')}; + font-size: 14px; + ${css.cutRest('300px')}; +` diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/metric.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/metric.ts new file mode 100644 index 000000000..ee5030d7f --- /dev/null +++ b/src/containers/digest/ArticleDigest/styles/desktop_view/metric.ts @@ -0,0 +1,20 @@ +import type { TMetric } from '@/spec' +import { METRIC } from '@/constant' + +/** + * for fixedheader sticker margin-left offset + */ +export const getFixStickerOffset = (metric: TMetric): string => { + switch (metric) { + case METRIC.WORKS_ARTICLE: { + // 和 关于，成员，技术栈等靠左对齐 + return '14px' + } + + default: { + return '0' + } + } +} + +export const holder = 1 diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/works_layout/index.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/works_layout.ts similarity index 90% rename from src/containers/digest/ArticleDigest/styles/desktop_view/works_layout/index.ts rename to src/containers/digest/ArticleDigest/styles/desktop_view/works_layout.ts index 38fc07f50..9d439bf88 100644 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/works_layout/index.ts +++ b/src/containers/digest/ArticleDigest/styles/desktop_view/works_layout.ts @@ -38,10 +38,7 @@ export const Actions = styled.div` export const SubWrapper = styled.div<{ metric: TMetric }>` ${css.flex('align-start', 'justify-end')}; margin-top: 2px; - width: ${({ metric }) => WIDTH[metric].STICKER}; - ${css.media.laptopL` - width: ${({ metric }) => WIDTH[metric].STICKER_LAPTOPL}; - `} + ${({ metric }) => css.fitStickerWidth(metric)}; ` export const BottomInfo = styled.div` ${css.flex('align-end', 'justify-between')}; diff --git a/src/containers/tool/ArticleSticker/index.tsx b/src/containers/tool/ArticleSticker/index.tsx index 13c565ca6..08d28d49f 100755 --- a/src/containers/tool/ArticleSticker/index.tsx +++ b/src/containers/tool/ArticleSticker/index.tsx @@ -58,7 +58,7 @@ const ArticleStickerContainer: FC = ({ isTocMenuOpened={isTocMenuOpened} /> - + diff --git a/src/containers/unit/Footer/logic.ts b/src/containers/unit/Footer/logic.ts index 289bb7c6b..18afd94fc 100755 --- a/src/containers/unit/Footer/logic.ts +++ b/src/containers/unit/Footer/logic.ts @@ -40,7 +40,6 @@ const ErrSolver = [] export const useInit = (_store: TStore, metric: TMetric): void => { useEffect(() => { store = _store - console.log('the metric inited >: ', metric) store.mark({ metric }) sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver)) diff --git a/utils/css/index.ts b/utils/css/index.ts index ec61d44d8..7218278d6 100644 --- a/utils/css/index.ts +++ b/utils/css/index.ts @@ -7,7 +7,13 @@ import { css as styledCss, CSSProp } from 'styled-components' import { theme } from '../themes' -import { media, mediaBreakPoints, fitContentWidth, fitPageWidth } from './media' +import { + media, + mediaBreakPoints, + fitContentWidth, + fitStickerWidth, + fitPageWidth, +} from './media' import { flex, flexGrow, flexColumn, flexColumnGrow } from './flex' import { circle, size } from './shape' @@ -51,6 +57,7 @@ const css = { mediaBreakPoints, media, fitContentWidth, + fitStickerWidth, fitPageWidth, threadTitleHover, } diff --git a/utils/css/media.ts b/utils/css/media.ts index d927a5ddb..4f4d34d07 100644 --- a/utils/css/media.ts +++ b/utils/css/media.ts @@ -141,6 +141,24 @@ export const fitContentWidth = (metric = METRIC.COMMUNITY): string => { ` } +// fit article sticker width +export const fitStickerWidth = (metric = METRIC.ARTICLE): string => { + // const laptopMmediaQuery = media.laptopM` + // ` + // const desktopLmediaQuery = media.desktopL` + // ` + const laptopLmediaQuery = media.laptopL` + width: ${WIDTH[metric].STICKER_LAPTOPL}; + ` + return ` + width: ${WIDTH[metric].STICKER}; + ${laptopLmediaQuery}; + ` + // ${desktopLmediaQuery}; + // ${laptopLmediaQuery}; + // ${laptopMmediaQuery}; +} + // get page max width export const fitPageWidth = (metric: TMetric): string => { return `max-width: ${WIDTH[metric]?.PAGE || WIDTH.COMMUNITY.PAGE};` diff --git a/utils/css/zindex.ts b/utils/css/zindex.ts index 809acaaed..046132b0a 100644 --- a/utils/css/zindex.ts +++ b/utils/css/zindex.ts @@ -1,6 +1,7 @@ const zIndex = { img: 2, header: 3, + articleFixedHeader: 10, popover: 2000, modalOverlay: 2500, drawerOverlay: 2000, @@ -9,7 +10,6 @@ const zIndex = { doraemonOverlay: 2600, doraemon: 2601, modalCloseBtn: 2000, - // sidebar: 1999, } From 01a4f355212a44e8941d8c8964d3054faf539189 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Wed, 21 Jul 2021 19:03:25 +0800 Subject: [PATCH 11/13] refactor(article): wip --- .../ArticleDigest/DesktopView/Layout.tsx | 27 ++++++++++++++++++ .../ArticleDigest/DesktopView/index.tsx | 12 ++++---- .../styles/desktop_view/fixed_header.ts | 6 ++-- .../styles/desktop_view/index.ts | 9 +++--- .../styles/desktop_view/metric.ts | 12 ++++++++ .../styles/desktop_view/post_layout/index.ts | 11 +++----- .../DefaultSticker.tsx} | 8 +++--- .../{ => RightSticker}/WorksSticker/About.tsx | 2 +- .../WorksSticker/Others.tsx | 2 +- .../{ => RightSticker}/WorksSticker/Teams.tsx | 2 +- .../WorksSticker/TechStacks.tsx | 9 ++++-- .../{ => RightSticker}/WorksSticker/index.tsx | 11 ++++++-- .../ArticleSticker/RightSticker/index.tsx | 28 +++++++++++++++++++ src/containers/tool/ArticleSticker/index.tsx | 15 ++++------ src/containers/tool/ArticleSticker/store.ts | 8 +++++- .../tool/ArticleSticker/styles/index.ts | 8 ++---- .../default_sticker.ts} | 0 .../works_sticker/about.ts | 0 .../works_sticker/index.ts | 2 +- .../works_sticker/others.ts | 0 .../works_sticker/teams.ts | 0 .../works_sticker/tech_stacks.ts | 0 src/pages/post.tsx | 4 +-- utils/constant/thread.ts | 1 + 24 files changed, 127 insertions(+), 50 deletions(-) create mode 100644 src/containers/digest/ArticleDigest/DesktopView/Layout.tsx rename src/containers/tool/ArticleSticker/{ArticleSticker.tsx => RightSticker/DefaultSticker.tsx} (73%) rename src/containers/tool/ArticleSticker/{ => RightSticker}/WorksSticker/About.tsx (94%) rename src/containers/tool/ArticleSticker/{ => RightSticker}/WorksSticker/Others.tsx (78%) rename src/containers/tool/ArticleSticker/{ => RightSticker}/WorksSticker/Teams.tsx (94%) rename src/containers/tool/ArticleSticker/{ => RightSticker}/WorksSticker/TechStacks.tsx (87%) rename src/containers/tool/ArticleSticker/{ => RightSticker}/WorksSticker/index.tsx (84%) create mode 100644 src/containers/tool/ArticleSticker/RightSticker/index.tsx rename src/containers/tool/ArticleSticker/styles/{article_sticker.ts => right_sticker/default_sticker.ts} (100%) rename src/containers/tool/ArticleSticker/styles/{ => right_sticker}/works_sticker/about.ts (100%) rename src/containers/tool/ArticleSticker/styles/{ => right_sticker}/works_sticker/index.ts (97%) rename src/containers/tool/ArticleSticker/styles/{ => right_sticker}/works_sticker/others.ts (100%) rename src/containers/tool/ArticleSticker/styles/{ => right_sticker}/works_sticker/teams.ts (100%) rename src/containers/tool/ArticleSticker/styles/{ => right_sticker}/works_sticker/tech_stacks.ts (100%) diff --git a/src/containers/digest/ArticleDigest/DesktopView/Layout.tsx b/src/containers/digest/ArticleDigest/DesktopView/Layout.tsx new file mode 100644 index 000000000..1fc5841dd --- /dev/null +++ b/src/containers/digest/ArticleDigest/DesktopView/Layout.tsx @@ -0,0 +1,27 @@ +import { FC, memo } from 'react' +import type { TArticle, TMetric, TThread } from '@/spec' + +import { THREAD, METRIC } from '@/constant' + +import PostLayout from './PostLayout' +import WorksLayout from './WorksLayout' + +type TProps = { + article: TArticle + thread: TThread + metric?: TMetric +} + +const Layout: FC = ({ article, thread, metric = METRIC.ARTICLE }) => { + switch (thread) { + case THREAD.WORKS: { + return + } + + default: { + return + } + } +} + +export default memo(Layout) diff --git a/src/containers/digest/ArticleDigest/DesktopView/index.tsx b/src/containers/digest/ArticleDigest/DesktopView/index.tsx index 5274fb41e..7e6756d3e 100644 --- a/src/containers/digest/ArticleDigest/DesktopView/index.tsx +++ b/src/containers/digest/ArticleDigest/DesktopView/index.tsx @@ -12,8 +12,7 @@ import { useScroll } from '@/hooks' import { pluggedIn, buildLog } from '@/utils' import FixedHeader from './FixedHeader' -// import PostLayout from './PostLayout' -import WorksLayout from './WorksLayout' +import Layout from './Layout' import type { TStore } from '../store' import { @@ -40,7 +39,7 @@ const ArticleDigestContainer: FC = ({ const { direction: scrollDirection } = useScroll() useInit(store, scrollDirection as TScrollDirection) - const { viewingArticle, inViewport } = store + const { viewingArticle, inViewport, activeThread } = store if (isNil(viewingArticle.id)) return null @@ -53,8 +52,11 @@ const ArticleDigestContainer: FC = ({ /> - - {/* */} + diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/fixed_header.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/fixed_header.ts index 52fedfef7..4d03aebca 100644 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/fixed_header.ts +++ b/src/containers/digest/ArticleDigest/styles/desktop_view/fixed_header.ts @@ -14,14 +14,16 @@ export const Wrapper = styled.nav.attrs(({ testid }: TTestable) => ({ top: ${({ show }) => (show ? 0 : '-48px;')}; opacity: ${({ show }) => (show ? 1 : 0)}; - z-index: ${css.zIndex.articleFixedHeader}; + z-index: ${({ show }) => (show ? css.zIndex.articleFixedHeader : -1)}; position: fixed; top: 0; left: 0; width: 100%; - transition: all 0.2s; + transition-property: top, opacity; + transition-duration: 0.25s; + transition-timing-function: ease-out; ` export const InnerWrapper = styled.div<{ metric: TMetric }>` ${css.flex('align-center')}; diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts index e879b53ad..a617076f6 100644 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts +++ b/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts @@ -3,6 +3,8 @@ import styled from 'styled-components' import type { TTestable, TMetric } from '@/spec' import { theme, css, WIDTH } from '@/utils' +import { getDigestHeight } from './metric' + type TWrapper = { metric: TMetric } & TTestable export const Wrapper = styled.nav.attrs(({ testid }: TTestable) => ({ 'data-test-id': testid, @@ -11,14 +13,11 @@ export const Wrapper = styled.nav.attrs(({ testid }: TTestable) => ({ position: relative; background: transparent; border-bottom: ${theme('banner.spliter')}; - min-height: 220px; + min-height: ${({ metric }) => getDigestHeight(metric)}; + margin-bottom: 15px; width: 100%; max-width: ${WIDTH.ARTICLE.PAGE}; - - ${css.media.laptopL` - min-height: 200px; - `} ` export const InnerWrapper = styled.div` ${css.flex('justify-center')}; diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/metric.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/metric.ts index ee5030d7f..070e6c504 100644 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/metric.ts +++ b/src/containers/digest/ArticleDigest/styles/desktop_view/metric.ts @@ -1,6 +1,18 @@ import type { TMetric } from '@/spec' import { METRIC } from '@/constant' +export const getDigestHeight = (metric: TMetric): string => { + switch (metric) { + case METRIC.WORKS_ARTICLE: { + return '220px' + } + + default: { + return '240px' + } + } +} + /** * for fixedheader sticker margin-left offset */ diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout/index.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout/index.ts index 908a29a99..fb286a3f8 100644 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout/index.ts +++ b/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout/index.ts @@ -1,7 +1,8 @@ import styled from 'styled-components' import type { TMetric } from '@/spec' -import { theme, css, WIDTH } from '@/utils' +import { METRIC } from '@/constant' +import { theme, css } from '@/utils' export const Main = styled.div<{ metric: TMetric }>` ${({ metric }) => css.fitContentWidth(metric)}; @@ -9,12 +10,8 @@ export const Main = styled.div<{ metric: TMetric }>` ` export const SubWrapper = styled.div` ${css.flex('align-start', 'justify-center')}; - width: ${WIDTH.ARTICLE.STICKER}; - margin-top: 33px; - - ${css.media.laptopL` - width: ${WIDTH.ARTICLE.STICKER_LAPTOPL}; - `} + margin-top: 5px; + ${css.fitStickerWidth(METRIC.ARTICLE)}; ` export const Title = styled.div` font-size: 26px; diff --git a/src/containers/tool/ArticleSticker/ArticleSticker.tsx b/src/containers/tool/ArticleSticker/RightSticker/DefaultSticker.tsx similarity index 73% rename from src/containers/tool/ArticleSticker/ArticleSticker.tsx rename to src/containers/tool/ArticleSticker/RightSticker/DefaultSticker.tsx index e4e3e8735..005d415da 100644 --- a/src/containers/tool/ArticleSticker/ArticleSticker.tsx +++ b/src/containers/tool/ArticleSticker/RightSticker/DefaultSticker.tsx @@ -5,17 +5,17 @@ import type { TArticle } from '@/spec' import { IconButton } from '@/components/Buttons' import Upvote from '@/components/Upvote' -import { Wrapper } from './styles/article_sticker' +import { Wrapper } from '../styles/right_sticker/default_sticker' type TProps = { show: boolean - viewing: TArticle + article: TArticle } -const ArticleSticker: FC = ({ show, viewing }) => { +const ArticleSticker: FC = ({ show, article }) => { return ( - + = ({ show, viewing }) => { +const WorksSticker: FC = ({ show, article }) => { return ( diff --git a/src/containers/tool/ArticleSticker/RightSticker/index.tsx b/src/containers/tool/ArticleSticker/RightSticker/index.tsx new file mode 100644 index 000000000..a22003a67 --- /dev/null +++ b/src/containers/tool/ArticleSticker/RightSticker/index.tsx @@ -0,0 +1,28 @@ +import { FC, memo } from 'react' +import type { TArticle, TMetric, TThread } from '@/spec' + +import { THREAD } from '@/constant' + +import DefaultSticker from './DefaultSticker' +import WorksSticker from './WorksSticker' + +type TProps = { + article: TArticle + thread: TThread + metric?: TMetric + show?: boolean +} + +const RightSticker: FC = ({ article, thread, show }) => { + switch (thread) { + case THREAD.WORKS: { + return + } + + default: { + return + } + } +} + +export default memo(RightSticker) diff --git a/src/containers/tool/ArticleSticker/index.tsx b/src/containers/tool/ArticleSticker/index.tsx index 08d28d49f..bc4e5f534 100755 --- a/src/containers/tool/ArticleSticker/index.tsx +++ b/src/containers/tool/ArticleSticker/index.tsx @@ -18,9 +18,7 @@ import GotoTop from '@/components/GotoTop' import type { TStore } from './store' import LeftSticker from './LeftSticker/index' -// import CommunitySticker from './CommunitySticker' -// import ArticleSticker from './ArticleSticker' -import WorksSticker from './WorksSticker/index' +import RightSticker from './RightSticker' import CommentSticker from './CommentSticker' import { Wrapper, InnerWrapper, MainWrapper, GoTopWrapper } from './styles' @@ -44,8 +42,8 @@ const ArticleStickerContainer: FC = ({ const { showLeftSticker, - // showCommunity, viewingData, + activeThread, isTocMenuOpened, showCommentSticker, } = store @@ -62,12 +60,11 @@ const ArticleStickerContainer: FC = ({ - {/* {showCommunity && } */} - - {/* */} + article={viewingData} + thread={activeThread} + /> diff --git a/src/containers/tool/ArticleSticker/store.ts b/src/containers/tool/ArticleSticker/store.ts index 50d2b63be..310bf3fe5 100755 --- a/src/containers/tool/ArticleSticker/store.ts +++ b/src/containers/tool/ArticleSticker/store.ts @@ -6,7 +6,7 @@ import { types as T, getParent, Instance } from 'mobx-state-tree' // import {} from 'ramda' -import type { TRootStore, TViewing, TScrollDirection } from '@/spec' +import type { TRootStore, TViewing, TScrollDirection, TThread } from '@/spec' import { markStates, buildLog } from '@/utils' /* eslint-disable-next-line */ const log = buildLog('S:ArticleSticker') @@ -21,6 +21,12 @@ const ArticleSticker = T.model('ArticleSticker', { const root = getParent(self) as TRootStore return root.viewingData }, + get activeThread(): TThread { + const root = getParent(self) as TRootStore + + const { activeThread } = root.viewing + return activeThread + }, get bodyScrollDirection(): TScrollDirection { const root = getParent(self) as TRootStore return root.globalLayout.bodyScrollDirection diff --git a/src/containers/tool/ArticleSticker/styles/index.ts b/src/containers/tool/ArticleSticker/styles/index.ts index 3667d46bb..6e91138bb 100755 --- a/src/containers/tool/ArticleSticker/styles/index.ts +++ b/src/containers/tool/ArticleSticker/styles/index.ts @@ -2,21 +2,17 @@ import styled from 'styled-components' import type { TTestable, TMetric } from '@/spec' import Img from '@/Img' -import { animate, theme, css, WIDTH } from '@/utils' +import { animate, theme, css } from '@/utils' type TWrapper = { metric: TMetric } & TTestable export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ 'data-test-id': testid, }))` ${css.flexColumn('align-center', 'justify-start')}; - width: ${({ metric }) => WIDTH[metric].STICKER}; + ${({ metric }) => css.fitStickerWidth(metric)}; /* bottom has a go-to-top button */ height: 85vh; /* border: 1px solid tomato; */ - - ${css.media.laptopL` - width: ${({ metric }) => WIDTH[metric].STICKER_LAPTOPL}; - `} ` export const InnerWrapper = styled.div` ${css.flexColumn('justify-between')} diff --git a/src/containers/tool/ArticleSticker/styles/article_sticker.ts b/src/containers/tool/ArticleSticker/styles/right_sticker/default_sticker.ts similarity index 100% rename from src/containers/tool/ArticleSticker/styles/article_sticker.ts rename to src/containers/tool/ArticleSticker/styles/right_sticker/default_sticker.ts diff --git a/src/containers/tool/ArticleSticker/styles/works_sticker/about.ts b/src/containers/tool/ArticleSticker/styles/right_sticker/works_sticker/about.ts similarity index 100% rename from src/containers/tool/ArticleSticker/styles/works_sticker/about.ts rename to src/containers/tool/ArticleSticker/styles/right_sticker/works_sticker/about.ts diff --git a/src/containers/tool/ArticleSticker/styles/works_sticker/index.ts b/src/containers/tool/ArticleSticker/styles/right_sticker/works_sticker/index.ts similarity index 97% rename from src/containers/tool/ArticleSticker/styles/works_sticker/index.ts rename to src/containers/tool/ArticleSticker/styles/right_sticker/works_sticker/index.ts index 9a7525e47..990360ce7 100644 --- a/src/containers/tool/ArticleSticker/styles/works_sticker/index.ts +++ b/src/containers/tool/ArticleSticker/styles/right_sticker/works_sticker/index.ts @@ -16,7 +16,7 @@ export const Wrapper = styled.div` padding: 20px; padding-right: 0; /* sticker 的宽度是 260, 偏移后使视觉居中 */ - margin-right: -145px; + margin-right: -152px; margin-top: -38px; ` export const Row = styled.div` diff --git a/src/containers/tool/ArticleSticker/styles/works_sticker/others.ts b/src/containers/tool/ArticleSticker/styles/right_sticker/works_sticker/others.ts similarity index 100% rename from src/containers/tool/ArticleSticker/styles/works_sticker/others.ts rename to src/containers/tool/ArticleSticker/styles/right_sticker/works_sticker/others.ts diff --git a/src/containers/tool/ArticleSticker/styles/works_sticker/teams.ts b/src/containers/tool/ArticleSticker/styles/right_sticker/works_sticker/teams.ts similarity index 100% rename from src/containers/tool/ArticleSticker/styles/works_sticker/teams.ts rename to src/containers/tool/ArticleSticker/styles/right_sticker/works_sticker/teams.ts diff --git a/src/containers/tool/ArticleSticker/styles/works_sticker/tech_stacks.ts b/src/containers/tool/ArticleSticker/styles/right_sticker/works_sticker/tech_stacks.ts similarity index 100% rename from src/containers/tool/ArticleSticker/styles/works_sticker/tech_stacks.ts rename to src/containers/tool/ArticleSticker/styles/right_sticker/works_sticker/tech_stacks.ts diff --git a/src/pages/post.tsx b/src/pages/post.tsx index 51f3a5eff..915a4e0b7 100755 --- a/src/pages/post.tsx +++ b/src/pages/post.tsx @@ -112,8 +112,8 @@ const PostPage = (props) => { return ( Date: Wed, 21 Jul 2021 20:47:07 +0800 Subject: [PATCH 12/13] refactor(article): header style adjust --- src/components/Navigator/DigestView.tsx | 6 +----- .../unit/Header/DesktopView/ArticleView.tsx | 7 ++----- .../Header/styles/desktop_view/article_view.ts | 16 +++++++--------- .../unit/Header/styles/desktop_view/metric.ts | 16 ++++++++++++++++ 4 files changed, 26 insertions(+), 19 deletions(-) create mode 100644 src/containers/unit/Header/styles/desktop_view/metric.ts diff --git a/src/components/Navigator/DigestView.tsx b/src/components/Navigator/DigestView.tsx index 8b91c6f7d..3dfc2904c 100755 --- a/src/components/Navigator/DigestView.tsx +++ b/src/components/Navigator/DigestView.tsx @@ -44,11 +44,7 @@ const DigestView: FC = ({ metric, showLogoText, isOnline, layout }) => { {showLogoText && oderPlanets} - {showLogoText ? ( - - ) : ( - - )} + {isOnline ? ( renderMainEntries(metric) diff --git a/src/containers/unit/Header/DesktopView/ArticleView.tsx b/src/containers/unit/Header/DesktopView/ArticleView.tsx index b3f946763..fa683dbb3 100644 --- a/src/containers/unit/Header/DesktopView/ArticleView.tsx +++ b/src/containers/unit/Header/DesktopView/ArticleView.tsx @@ -21,7 +21,6 @@ import { InnerWrapper, RouterWrapper, Operations, - UserInfoWrapper, MoreIcon, } from '../styles/desktop_view/article_view' import { useInit } from '../logic' @@ -75,13 +74,11 @@ const ArticleHeaderContainer: FC = ({ header: store, metric }) => { // showLogoText /> - + {MailBox && } {/* */} - - - + diff --git a/src/containers/unit/Header/styles/desktop_view/article_view.ts b/src/containers/unit/Header/styles/desktop_view/article_view.ts index fedbabb76..25aa550f0 100644 --- a/src/containers/unit/Header/styles/desktop_view/article_view.ts +++ b/src/containers/unit/Header/styles/desktop_view/article_view.ts @@ -1,10 +1,12 @@ import styled from 'styled-components' import type { TMetric } from '@/spec' -import { css, theme, WIDTH } from '@/utils' +import { css, theme } from '@/utils' import Img from '@/Img' import { Wrapper as CommunityWrapper } from './community_view' +import { getStickerJustify } from './metric' + export const Wrapper = styled(CommunityWrapper)` box-shadow: none; justify-content: flex-start !important; @@ -20,15 +22,11 @@ export const RouterWrapper = styled.div<{ metric: TMetric }>` height: 100%; ${({ metric }) => css.fitContentWidth(metric)}; ` -export const Operations = styled.div` - ${css.flex('align-center', 'justify-end')}; - width: ${WIDTH.ARTICLE.STICKER}; - - ${css.media.laptopL` - width: ${WIDTH.ARTICLE.STICKER_LAPTOPL}; - `} +export const Operations = styled.div<{ metric: TMetric }>` + ${css.flex('align-center')}; + justify-content: ${({ metric }) => getStickerJustify(metric)}; + ${({ metric }) => css.fitStickerWidth(metric)}; ` -export const UserInfoWrapper = styled.div`` export const MoreIcon = styled(Img)` fill: ${theme('banner.desc')}; ${css.size(24)}; diff --git a/src/containers/unit/Header/styles/desktop_view/metric.ts b/src/containers/unit/Header/styles/desktop_view/metric.ts new file mode 100644 index 000000000..8ef798698 --- /dev/null +++ b/src/containers/unit/Header/styles/desktop_view/metric.ts @@ -0,0 +1,16 @@ +import { METRIC } from '@/constant' +import type { TMetric } from '@/spec' + +export const getStickerJustify = (metric: TMetric): string => { + switch (metric) { + case METRIC.WORKS_ARTICLE: { + return 'flex-start' + } + + default: { + return 'center' + } + } +} + +export const holder = 1 From a80e4d59fc4865142d0189c911f85c0e78b2b553 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Wed, 21 Jul 2021 20:54:00 +0800 Subject: [PATCH 13/13] chore: clean up --- src/pages/job.js | 4 ++-- src/pages/repo.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/job.js b/src/pages/job.js index b655aac45..abb6949d3 100755 --- a/src/pages/job.js +++ b/src/pages/job.js @@ -16,7 +16,7 @@ import { useStore } from '@/stores/init' import GlobalLayout from '@/containers/layout/GlobalLayout' import ArticleDigest from '@/containers/digest/ArticleDigest' -import JobContent from '@/containers/content/JobContent' +import ArticleContent from '@/containers/content/ArticleContent' import { P } from '@/schemas' @@ -119,7 +119,7 @@ const JobPage = (props) => { noSidebar > - + ) diff --git a/src/pages/repo.js b/src/pages/repo.js index e367c1955..789e1746c 100755 --- a/src/pages/repo.js +++ b/src/pages/repo.js @@ -16,7 +16,7 @@ import { useStore } from '@/stores/init' import GlobalLayout from '@/containers/layout/GlobalLayout' import ArticleDigest from '@/containers/digest/ArticleDigest' -import RepoContent from '@/containers/content/RepoContent' +import ArticleContent from '@/containers/content/ArticleContent' import { P } from '@/schemas' @@ -118,7 +118,7 @@ const RepoPage = (props) => { noSidebar > - + )