diff --git a/package.json b/package.json index fc752e68c9..e64493f506 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "matters-web", - "version": "3.27.0", + "version": "3.28.0", "description": "codebase of Matters' website", "sideEffects": false, "author": "Matters ", diff --git a/public/static/icons/12px/price.svg b/public/static/icons/12px/price.svg new file mode 100644 index 0000000000..e8216e5813 --- /dev/null +++ b/public/static/icons/12px/price.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/static/icons/16px/disallow.svg b/public/static/icons/16px/disallow.svg new file mode 100644 index 0000000000..39b3eec434 --- /dev/null +++ b/public/static/icons/16px/disallow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/icons/16px/help.svg b/public/static/icons/16px/help.svg new file mode 100644 index 0000000000..e195a0e8bd --- /dev/null +++ b/public/static/icons/16px/help.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/static/icons/16px/read-time-total.svg b/public/static/icons/16px/read-time-total.svg new file mode 100644 index 0000000000..d920b63b87 --- /dev/null +++ b/public/static/icons/16px/read-time-total.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/static/icons/24px/unfollow.svg b/public/static/icons/24px/unfollow.svg new file mode 100644 index 0000000000..a44a251b47 --- /dev/null +++ b/public/static/icons/24px/unfollow.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/common/enums/text.ts b/src/common/enums/text.ts index f0c75fe83b..4dc5eed90b 100644 --- a/src/common/enums/text.ts +++ b/src/common/enums/text.ts @@ -133,6 +133,7 @@ export const TEXT = { forgetPassword: '忘記密碼', frequentSearch: '熱門搜尋', guide: '玩轉 Matters 實用指南', + help: '說明', helpCenter: '幫助中心', hide: '站內隱藏', hintAddTag: @@ -222,7 +223,9 @@ export const TEXT = { putComment: '發布評論', QUERY_FIELD_NOT_FOUND: '要查詢的數據不存在', RATE_LIMIT_EXCEEDED: '操作過於頻繁，請稍候重試', + readCount: '閱讀次數', readHistory: '瀏覽記錄', + readTime: '累計閱讀時數', refund: '退款', refuse: '拒絕', register: '註冊', @@ -458,6 +461,7 @@ export const TEXT = { forgetPassword: '忘记密码', frequentSearch: '热门搜索', guide: '玩转 Matters 实用指南', + help: '说明', helpCenter: '帮助中心', hide: '站内隐藏', hintAddTag: @@ -547,7 +551,9 @@ export const TEXT = { putComment: '发布评论', QUERY_FIELD_NOT_FOUND: '要查询的数据不存在', RATE_LIMIT_EXCEEDED: '操作过于频繁，请稍候重试', + readCount: '阅读次数', readHistory: '浏览记录', + readTime: '累计阅读时数', refund: '退款', refuse: '拒绝', register: '注册', @@ -790,6 +796,7 @@ export const TEXT = { forgetPassword: 'Forget password', frequentSearch: 'Search trends', guide: 'Using Matters', + help: 'Help', helpCenter: 'Help Center', hide: 'Archived', hintAddTag: @@ -894,7 +901,9 @@ export const TEXT = { putComment: 'Comment', QUERY_FIELD_NOT_FOUND: 'Query not found', RATE_LIMIT_EXCEEDED: 'Operation too frequent, please try again later.', + readCount: 'Read Counts', readHistory: 'Read History', + readTime: 'Accumulated Read Time', refund: 'Refund', refuse: 'Refuse', register: 'Register', diff --git a/src/common/utils/analytics.ts b/src/common/utils/analytics.ts index 63b0a61887..04e67f4802 100644 --- a/src/common/utils/analytics.ts +++ b/src/common/utils/analytics.ts @@ -139,6 +139,9 @@ type ActivityType = | 'UserBookmarkArticleActivity' | 'UserAddArticleTagActivity' | 'RecommendArticleActivity' + | 'ArticleRecommendationActivity' + | 'CircleRecommendationActivity' + | 'UserRecommendationActivity' // feed type type FeedType = diff --git a/src/components/ArticleDigest/DropdownActions/index.tsx b/src/components/ArticleDigest/DropdownActions/index.tsx index a02b601df4..feb5341c25 100644 --- a/src/components/ArticleDigest/DropdownActions/index.tsx +++ b/src/components/ArticleDigest/DropdownActions/index.tsx @@ -37,6 +37,7 @@ import StickyButton from './StickyButton' import { DropdownActionsArticle } from './__generated__/DropdownActionsArticle' export interface DropdownActionsControls { + icon?: React.ReactNode size?: IconSize /** @@ -87,6 +88,7 @@ type BaseDropdownActionsProps = DropdownActionsProps & Controls & DialogProps const BaseDropdownActions = ({ article, + icon, size, inCard, @@ -170,7 +172,7 @@ const BaseDropdownActions = ({ onClick={openDialog} ref={ref} > - + {icon ? icon : } )} diff --git a/src/components/ArticleDigest/Feed/FooterActions/DonationCount/gql.ts b/src/components/ArticleDigest/Feed/FooterActions/DonationCount/gql.ts new file mode 100644 index 0000000000..1f7545c7e1 --- /dev/null +++ b/src/components/ArticleDigest/Feed/FooterActions/DonationCount/gql.ts @@ -0,0 +1,12 @@ +import gql from 'graphql-tag' + +export const fragments = { + article: gql` + fragment ActionsDonationCountArticle on Article { + id + transactionsReceivedBy(input: { first: 0, purpose: donation }) { + totalCount + } + } + `, +} diff --git a/src/components/ArticleDigest/Feed/FooterActions/DonationCount/index.tsx b/src/components/ArticleDigest/Feed/FooterActions/DonationCount/index.tsx new file mode 100644 index 0000000000..b1c9207bdb --- /dev/null +++ b/src/components/ArticleDigest/Feed/FooterActions/DonationCount/index.tsx @@ -0,0 +1,34 @@ +import { IconDonate24, IconDotDivider, TextIcon } from '~/components' + +import { numAbbr } from '~/common/utils' + +import { fragments } from './gql' + +import { ActionsDonationCountArticle } from './__generated__/ActionsDonationCountArticle' + +interface DonationCountProps { + article: ActionsDonationCountArticle + hasDivider: boolean +} + +const DonationCount = ({ article, hasDivider }: DonationCountProps) => { + if (!article.transactionsReceivedBy.totalCount) { + return null + } + + return ( + <> + } size="xs" color="grey-dark"> + {article.transactionsReceivedBy.totalCount > 0 + ? numAbbr(article.transactionsReceivedBy.totalCount) + : undefined} + + + {hasDivider && } + + ) +} + +DonationCount.fragments = fragments + +export default DonationCount diff --git a/src/components/ArticleDigest/Feed/FooterActions/ReadTime/index.tsx b/src/components/ArticleDigest/Feed/FooterActions/ReadTime/index.tsx index 56248283e1..fd5f876d9c 100644 --- a/src/components/ArticleDigest/Feed/FooterActions/ReadTime/index.tsx +++ b/src/components/ArticleDigest/Feed/FooterActions/ReadTime/index.tsx @@ -1,5 +1,9 @@ -import { IconDotDivider, IconReadTime12, TextIcon } from '~/components' -import { Translate } from '~/components/Context' +import { + IconDotDivider, + IconReadTimeTotal16, + TextIcon, + Translate, +} from '~/components' import { numAbbr, numRound } from '~/common/utils' @@ -9,10 +13,10 @@ import { ActionsReadTimeArticle } from './__generated__/ActionsReadTimeArticle' interface ResponseCountProps { article: ActionsReadTimeArticle - hasDate: boolean + hasDivider: boolean } -const ResponseCount = ({ article, hasDate }: ResponseCountProps) => { +const ReadTime = ({ article, hasDivider }: ResponseCountProps) => { if (!article.readTime) { return null } @@ -25,16 +29,18 @@ const ResponseCount = ({ article, hasDate }: ResponseCountProps) => { return ( <> - } size="xs" color="grey-dark"> - {numAbbr(readHour, 1)}{' '} - - - - {hasDate && } + + + {hasDivider && } ) } -ResponseCount.fragments = fragments +ReadTime.fragments = fragments -export default ResponseCount +export default ReadTime diff --git a/src/components/ArticleDigest/Feed/FooterActions/gql.ts b/src/components/ArticleDigest/Feed/FooterActions/gql.ts index 1329b30a25..06a3abe269 100644 --- a/src/components/ArticleDigest/Feed/FooterActions/gql.ts +++ b/src/components/ArticleDigest/Feed/FooterActions/gql.ts @@ -3,6 +3,7 @@ import gql from 'graphql-tag' import { BookmarkButton } from '~/components' import DropdownActions from '../../DropdownActions' +import DonationCount from './DonationCount' import ReadTime from './ReadTime' export const fragments = { @@ -20,9 +21,11 @@ export const fragments = { } ...DropdownActionsArticle ...ActionsReadTimeArticle + ...ActionsDonationCountArticle } ${DropdownActions.fragments.article} ${ReadTime.fragments.article} + ${DonationCount.fragments.article} `, private: gql` fragment FooterActionsArticlePrivate on Article { diff --git a/src/components/ArticleDigest/Feed/FooterActions/index.tsx b/src/components/ArticleDigest/Feed/FooterActions/index.tsx index 7052cecc0f..bebab2387a 100644 --- a/src/components/ArticleDigest/Feed/FooterActions/index.tsx +++ b/src/components/ArticleDigest/Feed/FooterActions/index.tsx @@ -8,6 +8,7 @@ import { } from '~/components' import DropdownActions, { DropdownActionsControls } from '../../DropdownActions' +import DonationCount from './DonationCount' import { fragments } from './gql' import ReadTime from './ReadTime' import styles from './styles.css' @@ -23,11 +24,14 @@ export type FooterActionsProps = { const FooterActions = ({ article, date, ...controls }: FooterActionsProps) => { const hasDate = date !== false + const hasDonation = article.transactionsReceivedBy.totalCount > 0 return (