From cae60463b5fbb8c76c9c07b067b9c76720c7b39d Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sat, 17 Jul 2021 16:45:33 +0800 Subject: [PATCH 1/5] feat(copyright): basic demo --- public/icons/static/article/cc-by.svg | 1 + public/icons/static/article/cc-nc.svg | 1 + public/icons/static/article/cc-nd.svg | 1 + public/icons/static/article/cc-raw.svg | 1 + public/icons/static/article/cc.svg | 27 ++++++ .../static/article/copyright-approve.svg | 1 + .../icons/static/article/copyright-forbid.svg | 1 + .../static/article/copyright-printer.svg | 1 + public/icons/static/article/copyright.svg | 1 + src/components/Buttons/styles/arrow_link.ts | 8 +- src/components/Copyright/Label.tsx | 41 +++++++++ src/components/Copyright/ReadOnlyPanel.tsx | 88 +++++++++++++++++++ src/components/Copyright/index.tsx | 43 +++++++++ src/components/Copyright/styles/index.ts | 23 +++++ src/components/Copyright/styles/label.ts | 29 ++++++ .../Copyright/styles/readonly_panel.ts | 39 ++++++++ src/components/Copyright/tests/index.test.ts | 10 +++ src/components/IconText/index.tsx | 39 +++++--- src/components/IconText/styles/index.ts | 14 ++- .../viewer/ArticleViewer/PostViewer/index.tsx | 3 +- src/containers/viewer/ArticleViewer/index.tsx | 6 +- 21 files changed, 357 insertions(+), 21 deletions(-) create mode 100644 public/icons/static/article/cc-by.svg create mode 100644 public/icons/static/article/cc-nc.svg create mode 100644 public/icons/static/article/cc-nd.svg create mode 100644 public/icons/static/article/cc-raw.svg create mode 100644 public/icons/static/article/cc.svg create mode 100644 public/icons/static/article/copyright-approve.svg create mode 100644 public/icons/static/article/copyright-forbid.svg create mode 100644 public/icons/static/article/copyright-printer.svg create mode 100644 public/icons/static/article/copyright.svg create mode 100644 src/components/Copyright/Label.tsx create mode 100644 src/components/Copyright/ReadOnlyPanel.tsx create mode 100755 src/components/Copyright/index.tsx create mode 100755 src/components/Copyright/styles/index.ts create mode 100755 src/components/Copyright/styles/label.ts create mode 100755 src/components/Copyright/styles/readonly_panel.ts create mode 100755 src/components/Copyright/tests/index.test.ts diff --git a/public/icons/static/article/cc-by.svg b/public/icons/static/article/cc-by.svg new file mode 100644 index 000000000..211260d5b --- /dev/null +++ b/public/icons/static/article/cc-by.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/static/article/cc-nc.svg b/public/icons/static/article/cc-nc.svg new file mode 100644 index 000000000..0db547ce7 --- /dev/null +++ b/public/icons/static/article/cc-nc.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/static/article/cc-nd.svg b/public/icons/static/article/cc-nd.svg new file mode 100644 index 000000000..a632ac135 --- /dev/null +++ b/public/icons/static/article/cc-nd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/static/article/cc-raw.svg b/public/icons/static/article/cc-raw.svg new file mode 100644 index 000000000..99b55cc9f --- /dev/null +++ b/public/icons/static/article/cc-raw.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/static/article/cc.svg b/public/icons/static/article/cc.svg new file mode 100644 index 000000000..3dfd59cf0 --- /dev/null +++ b/public/icons/static/article/cc.svg @@ -0,0 +1,27 @@ + + + + + + + + + diff --git a/public/icons/static/article/copyright-approve.svg b/public/icons/static/article/copyright-approve.svg new file mode 100644 index 000000000..7dd38a7cd --- /dev/null +++ b/public/icons/static/article/copyright-approve.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/static/article/copyright-forbid.svg b/public/icons/static/article/copyright-forbid.svg new file mode 100644 index 000000000..a8c511d08 --- /dev/null +++ b/public/icons/static/article/copyright-forbid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/static/article/copyright-printer.svg b/public/icons/static/article/copyright-printer.svg new file mode 100644 index 000000000..34ea8a5a0 --- /dev/null +++ b/public/icons/static/article/copyright-printer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/static/article/copyright.svg b/public/icons/static/article/copyright.svg new file mode 100644 index 000000000..191dbc07d --- /dev/null +++ b/public/icons/static/article/copyright.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Buttons/styles/arrow_link.ts b/src/components/Buttons/styles/arrow_link.ts index ff0ba243e..45d00662a 100644 --- a/src/components/Buttons/styles/arrow_link.ts +++ b/src/components/Buttons/styles/arrow_link.ts @@ -14,17 +14,17 @@ export const Wrapper = styled.a` ` type TText = { hoverColor: string; size: string } export const Text = styled.div` - color: ${({ color }) => color || theme('thread.articleDigest')}; + color: ${({ color }) => color || '#327ca1'}; font-size: ${({ size }) => getTextSize(size)}; ${Wrapper}:hover & { - color: ${({ hoverColor }) => hoverColor || theme('thread.articleTitle')}; + color: ${({ hoverColor }) => hoverColor || '#327ca1'}; visibility: visible; } ` type TIcon = { color: string; size: string } const Icon = styled(Img)` - fill: ${({ color }) => color || theme('thread.articleDigest')}; + fill: ${({ color }) => color || '#327ca1'}; width: ${({ size }) => getIconSize(size)}; height: ${({ size }) => getIconSize(size)}; display: block; @@ -37,7 +37,7 @@ export const RightIcon = styled(Icon)<{ hoverColor: string }>` visibility: hidden; ${Wrapper}:hover & { - fill: ${({ hoverColor }) => hoverColor || theme('thread.articleTitle')}; + fill: ${({ hoverColor }) => hoverColor || '#327ca1'}; margin-left: 10px; visibility: visible; } diff --git a/src/components/Copyright/Label.tsx b/src/components/Copyright/Label.tsx new file mode 100644 index 000000000..c561d40b1 --- /dev/null +++ b/src/components/Copyright/Label.tsx @@ -0,0 +1,41 @@ +import { FC, memo } from 'react' + +import { ICON } from '@/config' +import { Wrapper, Icon, Text } from './styles/label' + +type TProps = { + type?: 'cc' | 'approve' | 'forbid' +} + +const Label: FC = ({ type }) => { + switch (type) { + case 'approve': { + return ( + + + 转载需授权 + + ) + } + + case 'forbid': { + return ( + + + 禁止转载 + + ) + } + + default: { + return ( + + + 知识共享 4.0 + + ) + } + } +} + +export default memo(Label) diff --git a/src/components/Copyright/ReadOnlyPanel.tsx b/src/components/Copyright/ReadOnlyPanel.tsx new file mode 100644 index 000000000..6508ed241 --- /dev/null +++ b/src/components/Copyright/ReadOnlyPanel.tsx @@ -0,0 +1,88 @@ +import { FC, memo } from 'react' + +import { ICON } from '@/config' +import { ArrowLink } from '@/components/Buttons' + +import { + Wrapper, + Header, + Icon, + Title, + Desc, + Items, + DescItem, + Footer, +} from './styles/readonly_panel' + +type TProps = { + type?: 'cc' | 'approve' | 'forbid' +} + +const ReadOnlyPanel: FC = ({ type }) => { + switch (type) { + case 'approve': { + return ( + +
+ + 转载需授权 +
+ + 根据作者设置，转载需获取本人授权。相关联系方式可参考作者主页。 + + + ) + } + + case 'forbid': { + return ( + +
+ + 禁止转载 +
+ + 根据作者设置，本文严禁任何方式的转载，如有疑问，请尝试联系作者。 + + + ) + } + + default: { + return ( + +
+ + 知识共享 4.0 +
+ + + 本作品采用知识共享「署名-非商业性使用-禁止演绎 4.0 + 国际」许可证授权。 + + + 署名 + + + 非商业性使用 + + + 禁止演绎 + + + +
+ + 查看完整版本 + +
+ + ) + } + } +} + +export default memo(ReadOnlyPanel) diff --git a/src/components/Copyright/index.tsx b/src/components/Copyright/index.tsx new file mode 100755 index 000000000..64b0af8f3 --- /dev/null +++ b/src/components/Copyright/index.tsx @@ -0,0 +1,43 @@ +/* + * + * Copyright + * + */ + +import { FC, memo } from 'react' + +import Tooltip from '@/components/Tooltip' +import { buildLog } from '@/utils' + +import Label from './Label' +import ReadOnlyPanel from './ReadOnlyPanel' +import { Wrapper } from './styles' + +/* eslint-disable-next-line */ +const log = buildLog('c:Copyright:index') + +type TProps = { + testid?: string + type?: 'cc' | 'approve' | 'forbid' + mode?: 'readonly' | 'editable' +} + +const Copyright: FC = ({ + testid = 'copyright', + type = 'cc', + mode = 'readonly', +}) => { + return ( + + } + placement="top" + trigger="mouseenter focus" + > + + + ) +} + +export default memo(Copyright) diff --git a/src/components/Copyright/styles/index.ts b/src/components/Copyright/styles/index.ts new file mode 100755 index 000000000..82dbbc6f1 --- /dev/null +++ b/src/components/Copyright/styles/index.ts @@ -0,0 +1,23 @@ +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, +}))`` + +export const Label = styled.div` + ${css.flex('align-center')}; +` +export const Icon = styled(Img)` + ${css.size(14)}; + fill: ${theme('thread.articleDigest')}; +` +export const Text = styled.div` + font-size: 12px; + color: ${theme('thread.articleDigest')}; + margin-right: 5px; +` diff --git a/src/components/Copyright/styles/label.ts b/src/components/Copyright/styles/label.ts new file mode 100755 index 000000000..d5c3eba51 --- /dev/null +++ b/src/components/Copyright/styles/label.ts @@ -0,0 +1,29 @@ +import styled from 'styled-components' + +import Img from '@/Img' +import { css, theme } from '@/utils' + +export const Wrapper = styled.div` + ${css.flex('align-center')}; + cursor: pointer; +` +export const Icon = styled(Img)` + fill: ${theme('thread.articleDigest')}; + ${css.size(13)}; + + ${Wrapper}:hover & { + fill: ${theme('thread.articleTitle')}; + } + + transition: fill 0.2s; +` +export const Text = styled.div` + font-size: 13px; + color: ${theme('thread.articleDigest')}; + margin-left: 6px; + + ${Wrapper}:hover & { + color: ${theme('thread.articleTitle')}; + } + transition: color 0.2s; +` diff --git a/src/components/Copyright/styles/readonly_panel.ts b/src/components/Copyright/styles/readonly_panel.ts new file mode 100755 index 000000000..e055e97b9 --- /dev/null +++ b/src/components/Copyright/styles/readonly_panel.ts @@ -0,0 +1,39 @@ +import styled from 'styled-components' +import IconText from '@/components/IconText' + +import Img from '@/Img' +import { css, theme } from '@/utils' + +export const Wrapper = styled.div` + ${css.flexColumn()}; + width: 240px; + padding-left: 5px; +` +export const Header = styled.div` + ${css.flex('align-center')}; +` +export const Icon = styled(Img)` + ${css.size(18)}; + fill: ${theme('thread.articleTitle')}; +` +export const Title = styled.div` + font-size: 16px; + color: ${theme('thread.articleTitle')}; + margin-left: 8px; +` +export const Desc = styled.div` + font-size: 13px; + color: ${theme('thread.articleDigest')}; + margin-top: 8px; + margin-bottom: 8px; +` +export const Items = styled.div` + margin-top: 10px; + margin-bottom: 6px; +` +export const DescItem = styled(IconText)` + margin-bottom: 3px; +` +export const Footer = styled.div` + ${css.flex('align-center')}; +` diff --git a/src/components/Copyright/tests/index.test.ts b/src/components/Copyright/tests/index.test.ts new file mode 100755 index 000000000..53890bb26 --- /dev/null +++ b/src/components/Copyright/tests/index.test.ts @@ -0,0 +1,10 @@ +// import React from 'react' +// import { shallow } from 'enzyme' + +// import Copyright from '../index' + +describe('TODO ', () => { + it('Expect to have unit tests specified', () => { + expect(true).toEqual(true) + }) +}) diff --git a/src/components/IconText/index.tsx b/src/components/IconText/index.tsx index aea5babc2..239ea4139 100755 --- a/src/components/IconText/index.tsx +++ b/src/components/IconText/index.tsx @@ -7,6 +7,7 @@ import { FC, ReactNode, memo } from 'react' import type { TSIZE } from '@/spec' +import { ICON } from '@/config' import { buildLog, nilOrEmpty } from '@/utils' import { SIZE } from '@/constant' @@ -16,26 +17,44 @@ import { Wrapper, Icon, Text } from './styles' const log = buildLog('c:IconText:index') type TProps = { - iconSrc: string + iconSrc?: string | null + path?: string | null round?: boolean children: ReactNode size?: TSIZE margin?: string + highlight?: boolean + className?: string } const IconText: FC = ({ - iconSrc, + className = '', + iconSrc = null, + path = null, round = false, children, size = SIZE.SMALL, margin, -}) => ( - - {!nilOrEmpty(iconSrc) && ( - - )} - {children} - -) + highlight = false, +}) => { + const src = iconSrc || `${ICON}/${path}` + + return ( + + {!nilOrEmpty(src) && ( + + )} + + {children} + + + ) +} export default memo(IconText) diff --git a/src/components/IconText/styles/index.ts b/src/components/IconText/styles/index.ts index c437d2764..8e7eb61c0 100755 --- a/src/components/IconText/styles/index.ts +++ b/src/components/IconText/styles/index.ts @@ -10,6 +10,7 @@ type TIcon = { size: TSIZE margin: string round: boolean + highlight: boolean } export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ @@ -18,15 +19,22 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ ${css.flex('align-center')}; ` export const Icon = styled(Img)` - fill: ${theme('thread.articleDigest')}; + fill: ${({ highlight }) => + highlight ? theme('thread.articleTitle') : theme('thread.articleDigest')}; width: ${({ size }) => getIconSize(size)}; height: ${({ size }) => getIconSize(size)}; margin-right: ${({ size, margin }) => margin || getMargin(size)}; display: block; border-radius: ${({ round }) => (round ? '100%' : '0')}; ` -export const Text = styled.div<{ size: TSIZE }>` +type TText = { + size: TSIZE + highlight: boolean +} + +export const Text = styled.div` ${css.flex('align-center')}; - color: ${theme('thread.articleDigest')}; + color: ${({ highlight }) => + highlight ? theme('thread.articleTitle') : theme('thread.articleDigest')}; font-size: ${({ size }) => getTextSize(size)}; ` diff --git a/src/containers/viewer/ArticleViewer/PostViewer/index.tsx b/src/containers/viewer/ArticleViewer/PostViewer/index.tsx index 8366ec35d..132ccef00 100644 --- a/src/containers/viewer/ArticleViewer/PostViewer/index.tsx +++ b/src/containers/viewer/ArticleViewer/PostViewer/index.tsx @@ -12,6 +12,7 @@ import FixedHeader from './FixedHeader' import Header from './Header' import ArticleInfo from './ArticleInfo' +import Copyright from '@/components/Copyright' import { ArticleContentLoading } from '@/components/Loading' import { @@ -53,7 +54,7 @@ const PostViewer: FC = ({ article, loading }) => { )}
-
tagger
+
diff --git a/src/containers/viewer/ArticleViewer/index.tsx b/src/containers/viewer/ArticleViewer/index.tsx index bc4bb7320..6a8821f7e 100755 --- a/src/containers/viewer/ArticleViewer/index.tsx +++ b/src/containers/viewer/ArticleViewer/index.tsx @@ -17,7 +17,7 @@ import Comments from '@/containers/unit/Comments' import type { TStore } from './store' import PostViewer from './PostViewer' -import WorksViewer from './WorksViewer' +// import WorksViewer from './WorksViewer' import { Wrapper, CommentsWrapper } from './styles' import { useInit } from './logic' @@ -39,8 +39,8 @@ const ArticleViewerContainer: FC = ({ return ( - - {/* */} + {/* */} + From f8b5fb2640a2f1ed9e508f0e0e8a31f227633580 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sat, 17 Jul 2021 23:27:43 +0800 Subject: [PATCH 2/5] style(article-viewer): collect icon style & common footer --- .../icons/static/article/collect-bookmark.svg | 1 + src/components/Buttons/IconButton.tsx | 2 +- .../ArticleViewer/PostViewer/ArticleInfo.tsx | 9 +++++-- .../viewer/ArticleViewer/PostViewer/index.tsx | 16 +++---------- .../ArticleViewer/WorksViewer/index.tsx | 10 +------- src/containers/viewer/ArticleViewer/index.tsx | 9 ++++++- .../viewer/ArticleViewer/styles/index.ts | 6 +++++ .../styles/post_viewer/article_info.ts | 24 +++++++++++++++++++ .../styles/post_viewer/index.tsx | 3 --- .../styles/works_viewer/index.tsx | 5 +--- 10 files changed, 52 insertions(+), 33 deletions(-) create mode 100644 public/icons/static/article/collect-bookmark.svg diff --git a/public/icons/static/article/collect-bookmark.svg b/public/icons/static/article/collect-bookmark.svg new file mode 100644 index 000000000..c568aa01a --- /dev/null +++ b/public/icons/static/article/collect-bookmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Buttons/IconButton.tsx b/src/components/Buttons/IconButton.tsx index 87667ab6d..c34b1c8f0 100644 --- a/src/components/Buttons/IconButton.tsx +++ b/src/components/Buttons/IconButton.tsx @@ -30,7 +30,7 @@ const IconButton: FC = ({ active = false, dimWhenIdle = false, hint = null, - hintDelay = 1000, + hintDelay = 500, hintPlacement = 'top', onClick = console.log, }) => { diff --git a/src/containers/viewer/ArticleViewer/PostViewer/ArticleInfo.tsx b/src/containers/viewer/ArticleViewer/PostViewer/ArticleInfo.tsx index 21868ab52..6b33f896c 100644 --- a/src/containers/viewer/ArticleViewer/PostViewer/ArticleInfo.tsx +++ b/src/containers/viewer/ArticleViewer/PostViewer/ArticleInfo.tsx @@ -10,6 +10,9 @@ import Upvote from '@/components/Upvote' import { Wrapper, + CollectWrapper, + CollectIcon, + CollectText, BaseWrapper, ViewIcon, Count, @@ -30,8 +33,10 @@ const ArticleInfo: FC = ({ article }) => { {article.commentsCount} - - + + + 收藏 + diff --git a/src/containers/viewer/ArticleViewer/PostViewer/index.tsx b/src/containers/viewer/ArticleViewer/PostViewer/index.tsx index 132ccef00..0392b8245 100644 --- a/src/containers/viewer/ArticleViewer/PostViewer/index.tsx +++ b/src/containers/viewer/ArticleViewer/PostViewer/index.tsx @@ -8,20 +8,13 @@ import { Waypoint } from 'react-waypoint' import type { TPost } from '@/spec' import { buildLog } from '@/utils' +import { ArticleContentLoading } from '@/components/Loading' + import FixedHeader from './FixedHeader' import Header from './Header' import ArticleInfo from './ArticleInfo' -import Copyright from '@/components/Copyright' -import { ArticleContentLoading } from '@/components/Loading' - -import { - Wrapper, - BodyWrapper, - Title, - ArticleBody, - Footer, -} from '../styles/post_viewer' +import { Wrapper, BodyWrapper, Title, ArticleBody } from '../styles/post_viewer' /* eslint-disable-next-line */ const log = buildLog('C:ArticleViewer') @@ -53,9 +46,6 @@ const PostViewer: FC = ({ article, loading }) => {
article body
)} -
- -
diff --git a/src/containers/viewer/ArticleViewer/WorksViewer/index.tsx b/src/containers/viewer/ArticleViewer/WorksViewer/index.tsx index d1460dbb6..bab6b919b 100644 --- a/src/containers/viewer/ArticleViewer/WorksViewer/index.tsx +++ b/src/containers/viewer/ArticleViewer/WorksViewer/index.tsx @@ -14,12 +14,7 @@ import ArticleInfo from './ArticleInfo' import { ArticleContentLoading } from '@/components/Loading' -import { - Wrapper, - BodyWrapper, - ArticleBody, - Footer, -} from '../styles/works_viewer' +import { Wrapper, BodyWrapper, ArticleBody } from '../styles/works_viewer' /* eslint-disable-next-line */ const log = buildLog('C:ArticleViewer') @@ -50,9 +45,6 @@ const WorksViewer: FC = ({ article, loading }) => {
article body
)} -
-
tagger
-
diff --git a/src/containers/viewer/ArticleViewer/index.tsx b/src/containers/viewer/ArticleViewer/index.tsx index 6a8821f7e..04d8a3c5c 100755 --- a/src/containers/viewer/ArticleViewer/index.tsx +++ b/src/containers/viewer/ArticleViewer/index.tsx @@ -8,6 +8,8 @@ import { FC } from 'react' import { pluggedIn, buildLog } from '@/utils' +import { IconButton } from '@/components/Buttons' +import Copyright from '@/components/Copyright' import Comments from '@/containers/unit/Comments' // TODO: remove // import ArticleBodyHeader from '@/containers/unit/ArticleBodyHeader' @@ -19,7 +21,7 @@ import type { TStore } from './store' import PostViewer from './PostViewer' // import WorksViewer from './WorksViewer' -import { Wrapper, CommentsWrapper } from './styles' +import { Wrapper, ArticleFooter, CommentsWrapper } from './styles' import { useInit } from './logic' /* eslint-disable-next-line */ @@ -41,6 +43,11 @@ const ArticleViewerContainer: FC = ({ {/* */} + +
#tag
+ + + diff --git a/src/containers/viewer/ArticleViewer/styles/index.ts b/src/containers/viewer/ArticleViewer/styles/index.ts index 02ed06875..dcda9151e 100755 --- a/src/containers/viewer/ArticleViewer/styles/index.ts +++ b/src/containers/viewer/ArticleViewer/styles/index.ts @@ -1,6 +1,7 @@ import styled from 'styled-components' import type { TTestable } from '@/spec' +import { css, theme } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ 'data-test-id': testid, @@ -8,6 +9,11 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ padding: 32px 80px; padding-right: 85px; ` +export const ArticleFooter = styled.div` + width: 100%; + ${css.flex('align-both', 'justify-between')}; + color: ${theme('thread.articleDigest')}; +` export const CommentsWrapper = styled.div` min-height: 400px; margin-top: 32px; 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 cf275b0d8..ff6492e49 100644 --- a/src/containers/viewer/ArticleViewer/styles/post_viewer/article_info.ts +++ b/src/containers/viewer/ArticleViewer/styles/post_viewer/article_info.ts @@ -10,6 +10,30 @@ export const Wrapper = styled.div` border-bottom: 1px solid; border-bottom-color: ${theme('drawer.divider')}; ` +export const CollectWrapper = styled.div` + ${css.flex('align-center')}; + cursor: pointer; +` +export const CollectIcon = styled(Img)` + ${css.size(16)}; + fill: ${theme('thread.articleDigest')}; + + ${CollectWrapper}:hover & { + fill: #129497; + } + transition: fill 0.2s; +` +export const CollectText = styled.div` + font-size: 14px; + color: ${theme('thread.articleDigest')}; + margin-top: 1px; + margin-left: 4px; + + ${CollectWrapper}:hover & { + color: #129497; + } + transition: color 0.2s; +` export const BaseWrapper = styled.div` ${css.flex('align-center')}; ` diff --git a/src/containers/viewer/ArticleViewer/styles/post_viewer/index.tsx b/src/containers/viewer/ArticleViewer/styles/post_viewer/index.tsx index e33fa18e3..72b78f56c 100644 --- a/src/containers/viewer/ArticleViewer/styles/post_viewer/index.tsx +++ b/src/containers/viewer/ArticleViewer/styles/post_viewer/index.tsx @@ -23,6 +23,3 @@ export const ArticleBody = styled.article` line-height: 2em; flex-grow: 1; ` -export const Footer = styled.div` - ${css.flex('align-both')}; -` diff --git a/src/containers/viewer/ArticleViewer/styles/works_viewer/index.tsx b/src/containers/viewer/ArticleViewer/styles/works_viewer/index.tsx index 8dbc24bef..24f44aae4 100644 --- a/src/containers/viewer/ArticleViewer/styles/works_viewer/index.tsx +++ b/src/containers/viewer/ArticleViewer/styles/works_viewer/index.tsx @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { css, theme } from '@/utils' +import { css } from '@/utils' export const Wrapper = styled.div` padding: 0 8px; @@ -19,6 +19,3 @@ export const ArticleBody = styled.article` line-height: 2em; flex-grow: 1; ` -export const Footer = styled.div` - ${css.flex('align-both')}; -` From e5cc7483f0241c78c1304ccccc91b15217846898 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sun, 18 Jul 2021 13:11:03 +0800 Subject: [PATCH 3/5] refactor(article-footer): js -> ts, style adjust --- .../Actions/{ActionItem.js => ActionItem.tsx} | 18 +++++-- .../{OperationPanel.js => OperationPanel.tsx} | 6 +-- .../{RefersPanel.js => RefersPanel.tsx} | 6 +-- .../unit/ArticleFooter/Actions/index.js | 43 ----------------- .../unit/ArticleFooter/Actions/index.tsx | 39 +++++++++++++++ .../ArticleFooter/AuthorInfo/SocialList.js | 17 ------- .../ArticleFooter/AuthorInfo/SocialList.tsx | 22 +++++++++ .../AuthorInfo/{index.js => index.tsx} | 47 ++++++------------- .../ArticleFooter/{TagList.js => TagList.tsx} | 13 +++-- .../ArticleFooter/{index.js => index.tsx} | 28 ++++++----- .../unit/ArticleFooter/{logic.js => logic.ts} | 8 ++-- .../unit/ArticleFooter/{store.js => store.ts} | 18 +++---- .../ArticleFooter/styles/actions/index.ts | 21 ++++----- .../unit/ArticleFooter/styles/index.ts | 2 +- .../unit/ArticleFooter/styles/tag_list.ts | 17 +++++-- src/containers/viewer/ArticleViewer/index.tsx | 15 ++---- .../viewer/ArticleViewer/styles/index.ts | 6 --- .../styles/post_viewer/fixed_header.ts | 2 +- .../works_viewer/{index.tsx => index.ts} | 0 src/spec/account.ts | 15 ++++++ src/spec/article.ts | 9 +--- 21 files changed, 179 insertions(+), 173 deletions(-) rename src/containers/unit/ArticleFooter/Actions/{ActionItem.js => ActionItem.tsx} (70%) rename src/containers/unit/ArticleFooter/Actions/{OperationPanel.js => OperationPanel.tsx} (87%) rename src/containers/unit/ArticleFooter/Actions/{RefersPanel.js => RefersPanel.tsx} (91%) delete mode 100644 src/containers/unit/ArticleFooter/Actions/index.js create mode 100644 src/containers/unit/ArticleFooter/Actions/index.tsx delete mode 100644 src/containers/unit/ArticleFooter/AuthorInfo/SocialList.js create mode 100644 src/containers/unit/ArticleFooter/AuthorInfo/SocialList.tsx rename src/containers/unit/ArticleFooter/AuthorInfo/{index.js => index.tsx} (54%) rename src/containers/unit/ArticleFooter/{TagList.js => TagList.tsx} (63%) rename src/containers/unit/ArticleFooter/{index.js => index.tsx} (72%) rename src/containers/unit/ArticleFooter/{logic.js => logic.ts} (78%) rename src/containers/unit/ArticleFooter/{store.js => store.ts} (66%) rename src/containers/viewer/ArticleViewer/styles/works_viewer/{index.tsx => index.ts} (100%) diff --git a/src/containers/unit/ArticleFooter/Actions/ActionItem.js b/src/containers/unit/ArticleFooter/Actions/ActionItem.tsx similarity index 70% rename from src/containers/unit/ArticleFooter/Actions/ActionItem.js rename to src/containers/unit/ArticleFooter/Actions/ActionItem.tsx index 0df945244..f2dd461ba 100644 --- a/src/containers/unit/ArticleFooter/Actions/ActionItem.js +++ b/src/containers/unit/ArticleFooter/Actions/ActionItem.tsx @@ -1,5 +1,6 @@ -import React from 'react' +import { FC, memo } from 'react' +import type { TAccount, TArticle, TCommunity } from '@/spec' import { ICON, ICON_BASE } from '@/config' import ImgFallback from '@/components/ImgFallback' @@ -15,7 +16,18 @@ import { CommunityIcon, } from '../styles/actions/action_item' -const ActionItem = ({ item: { author, article, community, insertedAt } }) => { +type TProps = { + item: { + author: TAccount + article: TArticle + community: TCommunity + insertedAt: string + } +} + +const ActionItem: FC = ({ + item: { author, article, community, insertedAt }, +}) => { return ( @@ -37,4 +49,4 @@ const ActionItem = ({ item: { author, article, community, insertedAt } }) => { ) } -export default React.memo(ActionItem) +export default memo(ActionItem) diff --git a/src/containers/unit/ArticleFooter/Actions/OperationPanel.js b/src/containers/unit/ArticleFooter/Actions/OperationPanel.tsx similarity index 87% rename from src/containers/unit/ArticleFooter/Actions/OperationPanel.js rename to src/containers/unit/ArticleFooter/Actions/OperationPanel.tsx index 98e99053e..be6cd51c4 100644 --- a/src/containers/unit/ArticleFooter/Actions/OperationPanel.js +++ b/src/containers/unit/ArticleFooter/Actions/OperationPanel.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import { FC, memo } from 'react' import { ICON } from '@/config' @@ -28,7 +28,7 @@ const tmpItems = [ }, ] -const OperationPanel = () => { +const OperationPanel: FC = () => { return ( @@ -41,4 +41,4 @@ const OperationPanel = () => { ) } -export default React.memo(OperationPanel) +export default memo(OperationPanel) diff --git a/src/containers/unit/ArticleFooter/Actions/RefersPanel.js b/src/containers/unit/ArticleFooter/Actions/RefersPanel.tsx similarity index 91% rename from src/containers/unit/ArticleFooter/Actions/RefersPanel.js rename to src/containers/unit/ArticleFooter/Actions/RefersPanel.tsx index f590a947a..cd5bc15db 100644 --- a/src/containers/unit/ArticleFooter/Actions/RefersPanel.js +++ b/src/containers/unit/ArticleFooter/Actions/RefersPanel.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import { FC, memo } from 'react' import { ICON } from '@/config' @@ -43,7 +43,7 @@ const tmpItems = [ }, ] -const RefersPanel = () => { +const RefersPanel: FC = () => { return ( @@ -56,4 +56,4 @@ const RefersPanel = () => { ) } -export default React.memo(RefersPanel) +export default memo(RefersPanel) diff --git a/src/containers/unit/ArticleFooter/Actions/index.js b/src/containers/unit/ArticleFooter/Actions/index.js deleted file mode 100644 index 8427d45ff..000000000 --- a/src/containers/unit/ArticleFooter/Actions/index.js +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react' - -import { ICON } from '@/config' -import { useDevice } from '@/hooks' - -import { Space } from '@/components/Common' - -import { - Wrapper, - Item, - ReferIcon, - RecordIcon, - ReferNum, - Text, -} from '../styles/actions' -import { toggleActionPanel } from '../logic' - -const Actions = ({ showReferenceList, showOperationList }) => { - const { isMobile } = useDevice() - - return ( - - toggleActionPanel('reference-list')}> - - - 6 - {!isMobile && 次} - 引用 - - - - toggleActionPanel('operation-list')}> - - - 操作 - {!isMobile && 记录} - - - - ) -} - -export default React.memo(Actions) diff --git a/src/containers/unit/ArticleFooter/Actions/index.tsx b/src/containers/unit/ArticleFooter/Actions/index.tsx new file mode 100644 index 000000000..eb4eea473 --- /dev/null +++ b/src/containers/unit/ArticleFooter/Actions/index.tsx @@ -0,0 +1,39 @@ +import { FC, memo } from 'react' + +import { useDevice } from '@/hooks' + +import DotDivider from '@/components/DotDivider' + +import { Wrapper, Item, ReferNum, Text } from '../styles/actions' +import { toggleActionPanel } from '../logic' + +type TProps = { + showReferenceList: boolean + showOperationList: boolean +} + +const Actions: FC = ({ showReferenceList, showOperationList }) => { + const { isMobile } = useDevice() + + return ( + + toggleActionPanel('reference-list')}> + + 6 + {!isMobile && 次} + 引用 + + + + toggleActionPanel('operation-list')}> + 日志 + + + + 举报 + + + ) +} + +export default memo(Actions) diff --git a/src/containers/unit/ArticleFooter/AuthorInfo/SocialList.js b/src/containers/unit/ArticleFooter/AuthorInfo/SocialList.js deleted file mode 100644 index e542b9787..000000000 --- a/src/containers/unit/ArticleFooter/AuthorInfo/SocialList.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react' - -import { ICON } from '@/config' -import { Wrapper, CursorDivider, Icon } from '../styles/author_info/social_list' - -const SocialList = ({ items }) => { - return ( - - - {items.map((item) => ( - - ))} - - ) -} - -export default React.memo(SocialList) diff --git a/src/containers/unit/ArticleFooter/AuthorInfo/SocialList.tsx b/src/containers/unit/ArticleFooter/AuthorInfo/SocialList.tsx new file mode 100644 index 000000000..8b8f18888 --- /dev/null +++ b/src/containers/unit/ArticleFooter/AuthorInfo/SocialList.tsx @@ -0,0 +1,22 @@ +import { FC, memo } from 'react' +import { keys } from 'ramda' + +import { ICON } from '@/config' +import { Wrapper, CursorDivider, Icon } from '../styles/author_info/social_list' + +type TProps = { + items: Record +} + +const SocialList: FC = ({ items }) => { + return ( + + + {keys(items).map((platform) => ( + + ))} + + ) +} + +export default memo(SocialList) diff --git a/src/containers/unit/ArticleFooter/AuthorInfo/index.js b/src/containers/unit/ArticleFooter/AuthorInfo/index.tsx similarity index 54% rename from src/containers/unit/ArticleFooter/AuthorInfo/index.js rename to src/containers/unit/ArticleFooter/AuthorInfo/index.tsx index c6b67e843..d39c78ed7 100644 --- a/src/containers/unit/ArticleFooter/AuthorInfo/index.js +++ b/src/containers/unit/ArticleFooter/AuthorInfo/index.tsx @@ -4,10 +4,10 @@ * */ -import React from 'react' -import T from 'prop-types' +import { FC, memo } from 'react' import { isEmpty, pickBy } from 'ramda' +import type { TAccount } from '@/spec' import { buildLog } from '@/utils' import { Button } from '@/components/Buttons' @@ -29,8 +29,16 @@ import { /* eslint-disable-next-line */ const log = buildLog('c:AuthorInfo:index') -const AuthorInfo = ({ testid, author }) => { - const socialItems = pickBy((v) => !!v, author.social) +type TProps = { + testid?: string + author: TAccount +} + +const AuthorInfo: FC = ({ testid = 'author-info', author }) => { + const socialItems = pickBy((v) => !!v, author.social) as Record< + string, + string + > return ( @@ -45,7 +53,7 @@ const AuthorInfo = ({ testid, author }) => { } + fallback={} />