diff --git a/public/icons/static/social/telegram-share.png b/public/icons/static/social/telegram-share.png new file mode 100644 index 000000000..cffce179f Binary files /dev/null and b/public/icons/static/social/telegram-share.png differ diff --git a/src/containers/tool/Share/Platforms.tsx b/src/containers/tool/Share/Platforms.tsx index 43167d4af..4a8d5abd9 100644 --- a/src/containers/tool/Share/Platforms.tsx +++ b/src/containers/tool/Share/Platforms.tsx @@ -1,10 +1,14 @@ import { FC, memo } from 'react' import { ICON } from '@/config' +import type { TArticle } from '@/spec' import { SHARE_TYPE } from './constant' import { Wrapper, + Header, + Hint, + Article, InnerWrapper, Media, Logo, @@ -51,6 +55,13 @@ const medias = [ small: true, type: SHARE_TYPE.EMAIL, }, + { + id: '5', + title: 'Telegram', + logo: `${ICON}/social/telegram-share.png`, + bg: 'white', + type: SHARE_TYPE.TELEGRAM, + }, { id: '6', title: '微博', @@ -66,9 +77,18 @@ const medias = [ }, ] -const Platforms: FC = () => { +type TProps = { + article: TArticle +} + +const Platforms: FC = ({ article }) => { return ( +
+ 分享 +
{article.title}
+ 到: +
{medias.map((item) => ( toPlatform(item.type)}> diff --git a/src/containers/tool/Share/constant.ts b/src/containers/tool/Share/constant.ts index 6fb4b2b97..9cf126548 100644 --- a/src/containers/tool/Share/constant.ts +++ b/src/containers/tool/Share/constant.ts @@ -8,6 +8,7 @@ export const OUTSIDE_SHARE_TYPE = { TWITTER: 'twitter', EMAIL: 'email', WECHAT: 'wechat', + TELEGRAM: 'telegram', // QQ: 'qq', WEIBO: 'weibo', FACEBOOK: 'facebook', diff --git a/src/containers/tool/Share/index.tsx b/src/containers/tool/Share/index.tsx index a4e4db04d..916102a1d 100755 --- a/src/containers/tool/Share/index.tsx +++ b/src/containers/tool/Share/index.tsx @@ -25,13 +25,13 @@ type TProps = { const ShareContainer: FC = ({ share: store, testid }) => { useInit(store) - const { show, siteShareType, linksData } = store + const { show, siteShareType, linksData, viewingArticle } = store return ( - + diff --git a/src/containers/tool/Share/logic.ts b/src/containers/tool/Share/logic.ts index 171772f0c..5c0c38ac7 100755 --- a/src/containers/tool/Share/logic.ts +++ b/src/containers/tool/Share/logic.ts @@ -52,6 +52,12 @@ export const toPlatform = (type: string): void => { // return openShareWindow('https://twitter.com/share', param) } + case SHARE_TYPE.TELEGRAM: { + const param = { url, text: title } + + return openShareWindow('https://telegram.me/share/url', param) + } + case SHARE_TYPE.EMAIL: { const param = { subject: title, body: `${url}\n\n${digest}` } return openShareWindow('mailto:', param) diff --git a/src/containers/tool/Share/styles/platform.ts b/src/containers/tool/Share/styles/platform.ts index a165c8aa3..0b2f40e20 100644 --- a/src/containers/tool/Share/styles/platform.ts +++ b/src/containers/tool/Share/styles/platform.ts @@ -4,13 +4,30 @@ import { css, theme } from '@/utils' import Img from '@/Img' export const Wrapper = styled.div` - padding: 20px 20px; + padding-left: 20px; + padding-right: 20px; width: 100%; min-height: 220px; background: ${theme('modal.bg')}; filter: drop-shadow(3px 3px 6px #002a34); transition: min-height 0.2s; ` +export const Header = styled.div` + ${css.flex('align-end')}; + margin-top: 15px; + padding-left: 25px; + margin-bottom: 20px; +` +export const Hint = styled.div` + color: ${theme('thread.articleDigest')}; + font-size: 13px; +` +export const Article = styled.div` + color: ${theme('thread.articleTitle')}; + ${css.cutRest('180px')}; + font-size: 14px; + margin-left: 5px; +` export const InnerWrapper = styled.div` ${css.flex()}; flex-wrap: wrap; diff --git a/utils/css/media.ts b/utils/css/media.ts index 4f4d34d07..b40c4fd2c 100644 --- a/utils/css/media.ts +++ b/utils/css/media.ts @@ -10,7 +10,7 @@ export const mediaBreakPoints = { tablet: 768, laptop: 992, laptopM: 1280, - laptopL: 1440, + laptopL: 1400, maxContent: 1520, // WIDTH.COMMUNITY.PAGE desktop: 1600, // currently used as forms of drawer content (slideout/modal)