Merge pull request #337 from thematters/develop

Release: v1.9.0

common/enums/analytics.ts

@@ -36,7 +36,8 @@ export const SHARE_TYPE = {
   TWITTER: 'twitter',
   EMAIL: 'email',
   FACEBOOK: 'facebook',
-  WEIBO: 'weibo'
+  WEIBO: 'weibo',
+  DOUBAN: 'douban'
 }
 
 export const FEED_TYPE = {

components/ArticleDigest/Fingerprint/index.tsx

@@ -201,7 +201,7 @@ const Fingerprint = ({ article }: { article: FingerprintArticle }) => {
           color="green"
           weight="medium"
         >
-          <Translate zh_hans="打开分布式入口" zh_hant="打開分佈式入口" />
+          <Translate zh_hans="分布式入口" zh_hant="分佈式入口" />
         </TextIcon>
         <style jsx>{styles}</style>
       </button>

components/ArticleDigest/ResponseDigest/index.tsx

@@ -1,12 +1,11 @@
 import gql from 'graphql-tag'
-import Link from 'next/link'
 
+import { ArticleDigest } from '~/components'
 import IconLive from '~/components/Icon/Live'
 import { Translate } from '~/components/Language'
 import { UserDigest } from '~/components/UserDigest'
 
-import { TEXT, UrlFragments } from '~/common/enums'
-import { toPath } from '~/common/utils'
+import { TEXT } from '~/common/enums'
 
 import Actions, { ActionsControls } from '../Actions'
 import { Fingerprint } from '../Fingerprint'
@@ -44,19 +43,13 @@ const ResponseDigest = ({
 }: { article: ResponseDigestArticle } & {
   hasFingerprint?: boolean
 } & ActionsControls) => {
-  const { author, slug, mediaHash, title, live } = article
+  const { author, slug, mediaHash, live } = article
 
   if (!author || !author.userName || !slug || !mediaHash) {
     return null
   }
 
-  const path = toPath({
-    page: 'articleDetail',
-    userName: author.userName,
-    slug,
-    mediaHash,
-    fragment: live ? UrlFragments.COMMENTS : ''
-  })
+  const remadeArticle = { ...article, state: article.articleState }
 
   return (
     <section className="container">
@@ -77,17 +70,15 @@ const ResponseDigest = ({
         {!hasFingerprint && live && <IconLive />}
       </div>
 
-      <div className="content-wrap">
-        <div className="title">
-          <Link {...path}>
-            <a>
-              <p>{title}</p>
-            </a>
-          </Link>
-        </div>
-        <div className="description">
-          <Actions article={article} type="response" {...actionControls} />
-        </div>
+      <div className="digest-wrap">
+        <ArticleDigest.Sidebar
+          type="collection"
+          article={remadeArticle}
+          hasCover
+          hasAuthor
+          hasBookmark
+          extraContainerClass="no-padding"
+        />
       </div>
 
       <style jsx>{styles}</style>

components/ArticleDigest/ResponseDigest/styles.css

@@ -1,3 +1,7 @@
+:root {
+  --digest-response-cover-size: 10rem;
+}
+
 .container {
   margin: var(--spacing-default) 0;
 }
@@ -20,13 +24,7 @@
   }
 }
 
-.content-wrap {
-  padding-left: var(--spacing-x-loose);
-
-  font-size: var(--font-size-sm); /* fallback */
-  font-size: calc(var(--font-size-sm) + 1px);
-
-  & .title {
-    padding-bottom: 1rem;
-  }
+.digest-wrap {
+  margin-top: 0.75rem;
+  margin-left: 2.5rem;
 }

components/ArticleDigest/SidebarDigest/index.tsx

@@ -18,6 +18,7 @@ type SidebarDigestProps = {
   article: SidebarDigestArticle
   hasCover?: boolean
   disabled?: boolean
+  extraContainerClass?: string
 } & ActionsControls
 
 const fragments = {
@@ -44,6 +45,7 @@ const SidebarDigest = ({
   article,
   hasCover,
   disabled,
+  extraContainerClass,
   ...actionControls
 }: SidebarDigestProps) => {
   const { author, slug, mediaHash, title, live, state } = article
@@ -60,6 +62,12 @@ const SidebarDigest = ({
     mediaHash,
     fragment: live ? UrlFragments.COMMENTS : ''
   })
+  const containerClasses = classNames({
+    container: true,
+    ...(extraContainerClass
+      ? { [extraContainerClass]: extraContainerClass }
+      : {})
+  })
   const contentClasses = classNames({
     content: true,
     'no-cover': !cover,
@@ -69,7 +77,7 @@ const SidebarDigest = ({
   })
 
   return (
-    <section className="container">
+    <section className={containerClasses}>
       <div className={contentClasses}>
         <div className="left">
           <Link {...path}>

components/ArticleDigest/SidebarDigest/styles.css

@@ -72,3 +72,7 @@
     pointer-events: none;
   }
 }
+
+.no-padding {
+  padding: 0;
+}

components/CollectionEditor/CollectForm.tsx

@@ -1,6 +1,6 @@
 import _debounce from 'lodash/debounce'
 import _get from 'lodash/get'
-import { FC, useContext, useState } from 'react'
+import { FC, useContext, useRef, useState } from 'react'
 import { QueryResult } from 'react-apollo'
 
 import ArticleList from '~/components/Dropdown/ArticleList'
@@ -29,6 +29,7 @@ const CollectForm: FC<Props> = ({ onAdd }) => {
   const { lang } = useContext(LanguageContext)
   const [search, setSearch] = useState('')
   const [instance, setInstance] = useState<PopperInstance | null>(null)
+  const inputNode: React.RefObject<HTMLInputElement> | null = useRef(null)
 
   const hideDropdown = () => {
     if (instance) {
@@ -73,11 +74,15 @@ const CollectForm: FC<Props> = ({ onAdd }) => {
                     onAdd(article)
                     setSearch('')
                     hideDropdown()
+                    if (inputNode && inputNode.current) {
+                      inputNode.current.value = ''
+                    }
                   }}
                 />
               }
             >
               <input
+                ref={inputNode}
                 type="search"
                 placeholder={translate({
                   zh_hant: '搜尋作品標題…',

components/Editor/modules/mention.ts

@@ -53,14 +53,15 @@ class Mention {
       return
     }
 
+    const tempMentionCharPos = this.mentionCharPos
     this.quill.deleteText(
       this.mentionCharPos,
       this.cursorPos - this.mentionCharPos,
       'user'
     )
-    this.quill.insertEmbed(this.mentionCharPos, 'mention', data, 'user')
-    this.quill.insertText(this.mentionCharPos + 1, ' ', 'user')
-    this.quill.setSelection(this.mentionCharPos + 2, 'user')
+    this.quill.insertEmbed(tempMentionCharPos, 'mention', data, 'user')
+    this.quill.insertText(tempMentionCharPos + 1, ' ', 'user')
+    this.quill.setSelection(tempMentionCharPos + 2, 'user')
   }
 
   hasValidChars(s: string) {

components/Head/index.tsx

@@ -134,7 +134,8 @@ const BaseHead: React.FC<WithRouterProps & HeadProps> = props => {
 
       {/* PWA */}
       <link rel="apple-touch-icon" key="apple-touch-icon" href={ICON_192} />
-      <meta name="theme-color" key="theme-color" content="#ffffff" />
+      <meta name="application-name" key="application-name" content="Matters" />
+      <meta name="theme-color" key="theme-color" content="#0d6763" />
       <meta
         name="apple-mobile-web-app-status-bar-style"
         key="apple-mobile-web-app-status-bar-style"

views/ArticleDetail/Comments/index.tsx

@@ -5,7 +5,7 @@ import { withRouter, WithRouterProps } from 'next/router'
 import { useEffect } from 'react'
 import { QueryResult } from 'react-apollo'
 
-import { LoadMore, Translate } from '~/components'
+import { LoadMore, Spinner, Translate } from '~/components'
 import { CommentDigest } from '~/components/CommentDigest'
 import EmptyComment from '~/components/Empty/EmptyComment'
 import CommentForm from '~/components/Form/CommentForm'
@@ -77,7 +77,7 @@ const Main: React.FC<WithRouterProps> = ({ router }) => {
         refetch
       }: QueryResult & { data: ArticleCommentsType }) => {
         if (!data || !data.article) {
-          return null
+          return <Spinner />
         }
 
         const connectionPath = 'article.comments'

views/ArticleDetail/Responses/index.tsx

@@ -6,7 +6,7 @@ import { withRouter, WithRouterProps } from 'next/router'
 import { useContext, useEffect, useState } from 'react'
 import { QueryResult } from 'react-apollo'
 
-import { Icon, LoadMore, Translate } from '~/components'
+import { Icon, LoadMore, Spinner, Translate } from '~/components'
 import { ArticleDigest } from '~/components/ArticleDigest'
 import { CommentDigest } from '~/components/CommentDigest'
 import EmptyResponse from '~/components/Empty/EmptyResponse'
@@ -173,7 +173,7 @@ const Main: React.FC<WithRouterProps> = ({ router }) => {
         refetch
       }: QueryResult & { data: ArticleResponsesType }) => {
         if (!data || !data.article) {
-          return null
+          return <Spinner />
         }
 
         const connectionPath = 'article.responses'
@@ -284,7 +284,7 @@ const Main: React.FC<WithRouterProps> = ({ router }) => {
                     {_has(response, 'title') ? (
                       <ArticleDigest.Response
                         article={response}
-                        hasDateTime
+                        hasAuthor
                         hasBookmark
                       />
                     ) : (

views/ArticleDetail/Toolbar/ShareButton/Douban.tsx

@@ -0,0 +1,47 @@
+import _get from 'lodash/get'
+
+import { Icon } from '~/components/Icon'
+import { TextIcon } from '~/components/TextIcon'
+
+import { ANALYTICS_EVENTS, SHARE_TYPE } from '~/common/enums'
+import { analytics, dom, objectToGetParams } from '~/common/utils'
+import ICON_SHARE_DOUBAN from '~/static/icons/share-douban.svg?sprite'
+
+const Douban = () => (
+  <button
+    type="button"
+    onClick={() => {
+      const url = window.location.href
+      const text = window.document.title
+      const description = dom
+        .$('meta[name="description"]')
+        .getAttribute('content')
+      const shareUrl =
+        'http://www.douban.com/share/service' +
+        objectToGetParams({
+          href: url,
+          name: text,
+          text: description
+        })
+      analytics.trackEvent(ANALYTICS_EVENTS.SHARE, {
+        type: SHARE_TYPE.DOUBAN,
+        url
+      })
+      return window.open(shareUrl)
+    }}
+  >
+    <TextIcon
+      icon={
+        <Icon
+          id={ICON_SHARE_DOUBAN.id}
+          viewBox={ICON_SHARE_DOUBAN.viewBox}
+          size="small"
+        />
+      }
+      spacing="tight"
+      text="豆瓣"
+    />
+  </button>
+)
+
+export default Douban

views/ArticleDetail/Toolbar/ShareButton/ShareModal.tsx

@@ -10,13 +10,13 @@ import { ADD_TOAST } from '~/common/enums/events'
 import { dom } from '~/common/utils'
 import ICON_SHARE_LINK from '~/static/icons/share-link.svg?sprite'
 
+import Douban from './Douban'
 import Email from './Email'
 import Facebook from './Facebook'
 import LINE from './LINE'
 import styles from './styles.css'
 import Telegram from './Telegram'
 import Twitter from './Twitter'
-import WeChat from './WeChat'
 import Weibo from './Weibo'
 import WhatsApp from './WhatsApp'
 
@@ -47,7 +47,7 @@ const ShareModal = () => {
                 <LINE />
                 <WhatsApp />
                 <Telegram />
-                <WeChat />
+                <Douban />
               </div>
 
               <div className="right">
@@ -71,9 +71,9 @@ const ShareModal = () => {
                 spacing="xtight"
                 textPlacement="left"
               >
-                <span onClick={copy}>
+                <button onClick={copy} type="button">
                   <Translate zh_hant="點擊複製" zh_hans="点击复制" />
-                </span>
+                </button>
               </TextIcon>
               <input
                 id="shareLinkInput"

views/ArticleDetail/Toolbar/ShareButton/Weibo.tsx

@@ -13,7 +13,7 @@ const Weibo = () => (
     onClick={() => {
       const url = window.location.href
       const text = window.document.title
-      const cover = dom.$('meta[property="og:image').getAttribute('content')
+      const cover = dom.$('meta[property="og:image"]').getAttribute('content')
       const shareUrl =
         'http://service.weibo.com/share/share.php' +
         objectToGetParams({

views/Home/Feed/index.tsx

@@ -87,15 +87,7 @@ export default () => {
           loading,
           fetchMore
         }: QueryResult & { data: FeedArticleConnection }) => {
-          if (
-            loading &&
-            !(
-              data &&
-              data.viewer &&
-              data.viewer.recommendation &&
-              data.viewer.recommendation.feed
-            )
-          ) {
+          if (loading && !_get(data, 'viewer.recommendation.feed')) {
             return <Placeholder.ArticleDigestList />
           }
 
@@ -171,6 +163,7 @@ export default () => {
                         )}
                       </ul>
                     </InfiniteScroll>
+
                     {!match && pageInfo.hasNextPage && (
                       <LoadMore onClick={loadMore} loading={loading} />
                     )}

views/Misc/About/styles.css

@@ -1,3 +1,7 @@
+main {
+  margin-bottom: calc(-1 * var(--spacing-x-loose));
+}
+
 h2 {
   @mixin font-serif;
   font-size: 1.7rem;
@@ -58,7 +62,6 @@ h2 {
   & img {
     display: block;
     margin: 0 auto;
-    width: 20rem;
     height: 20rem;
   }