Release: v3.28.0 (#2177)

* Fix accessibility bugs. (#2159) * Fix accessibility bugs. * roll back package-lock.json. * Move text back to Components. * Fix typo. * feat(card): revise article feed card * feat(card): update following feed activity card * feat(card): update card description in following feed * fix(follow): add help dialog and component * fix(follow): update broadcast card in follow feed * fix(circle): adjust avatar size for following feed recommendation * fix(follow): revise recommend activitiy card * fix(follow): update following feed footer icon * fix(follow): revise style of following feed cards * fix(icon): fix paywall icon on article detail (#2172) * feat(follow): update following feed card * feat(follow): update following feed card * feat(follow): update recommendation description in following feed * chore(release): v3.28.0 (#2178) * fix(follow): fix slides * fix(follow): update following recommended cards scroll snap Co-authored-by: FledgeShiu <[email protected]> Co-authored-by: Zeck Li <[email protected]> Co-authored-by: Zeck Li <> Co-authored-by: devformatters <[email protected]>
thematters · Aug 12, 2021 · 04d20e4 · 04d20e4
1 parent d3beb8a
commit 04d20e4
Show file tree

Hide file tree

Showing 82 changed files with 1,404 additions and 491 deletions.
diff --git 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 <[email protected]>",

diff --git a/public/static/icons/12px/price.svg b/public/static/icons/12px/price.svg
diff --git a/public/static/icons/16px/disallow.svg b/public/static/icons/16px/disallow.svg
diff --git a/public/static/icons/16px/help.svg b/public/static/icons/16px/help.svg
diff --git a/public/static/icons/16px/read-time-total.svg b/public/static/icons/16px/read-time-total.svg
diff --git a/public/static/icons/24px/unfollow.svg b/public/static/icons/24px/unfollow.svg
diff --git 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
@@ -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
@@ -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}
         >
-          <IconMore16 size={size} />
+          {icon ? icon : <IconMore16 size={size} />}
         </Button>
       )}
     </DropdownDialog>

diff --git a/src/components/ArticleDigest/Feed/FooterActions/DonationCount/gql.ts 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
@@ -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 (
+    <>
+      <TextIcon icon={<IconDonate24 />} size="xs" color="grey-dark">
+        {article.transactionsReceivedBy.totalCount > 0
+          ? numAbbr(article.transactionsReceivedBy.totalCount)
+          : undefined}
+      </TextIcon>
+
+      {hasDivider && <IconDotDivider />}
+    </>
+  )
+}
+
+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
@@ -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 (
     <>
-      <TextIcon icon={<IconReadTime12 size="xs" />} size="xs" color="grey-dark">
-        {numAbbr(readHour, 1)}{' '}
-        <Translate zh_hant="小時" zh_hans="小时" en="hours" />
-      </TextIcon>
-
-      {hasDate && <IconDotDivider />}
+      <button type="button">
+        <TextIcon icon={<IconReadTimeTotal16 />} size="xs" color="grey-dark">
+          {numAbbr(readHour, 1)}{' '}
+          <Translate zh_hant="小時" zh_hans="小时" en="hours" />
+        </TextIcon>
+      </button>
+
+      {hasDivider && <IconDotDivider />}
     </>
   )
 }
 
-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
@@ -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
@@ -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 (
     <footer>
       <section className="left">
-        <ReadTime article={article} hasDate={hasDate} />
+        <ReadTime article={article} hasDivider={hasDate || hasDonation} />
+
+        <DonationCount article={article} hasDivider={hasDate} />
 
         {hasDate && <DateTime date={date || article.createdAt} />}
 

diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx
@@ -11,7 +11,7 @@ import styles from './styles.css'
 
 import { AvatarUser } from './__generated__/AvatarUser'
 
-export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl'
 
 export interface AvatarProps {
   user?: AvatarUser

diff --git a/src/components/Avatar/styles.css b/src/components/Avatar/styles.css
@@ -89,8 +89,23 @@
   }
 }
 
-/* 72px */
+/* 56px */
 .xxl {
+  width: 3.5rem;
+  height: 3.5rem;
+
+  &.hasRing {
+    & .ring {
+      top: -6px;
+      right: -6px;
+      bottom: -6px;
+      left: -6px;
+    }
+  }
+}
+
+/* 72px */
+.xxxl {
   width: 4.5rem;
   height: 4.5rem;
 

diff --git a/src/components/CircleAvatar/index.tsx b/src/components/CircleAvatar/index.tsx
@@ -9,7 +9,7 @@ import styles from './styles.css'
 
 import { AvatarCircle } from './__generated__/AvatarCircle'
 
-export type CircleAvatarSize = 'xl' | 'xxl'
+export type CircleAvatarSize = 'xl' | 'xxl' | 'xxxl'
 
 export interface CircleAvatarProps {
   circle?: AvatarCircle

diff --git a/src/components/CircleAvatar/styles.css b/src/components/CircleAvatar/styles.css
@@ -23,8 +23,18 @@
   }
 }
 
-/* 72px */
+/* 56px */
 .xxl {
+  width: 3.5rem;
+  height: 3.5rem;
+
+  & :global(img) {
+    border-radius: 1rem;
+  }
+}
+
+/* 72px */
+.xxxl {
   width: 4.5rem;
   height: 4.5rem;