From cf9f958e86df7370491765e72e79cc7adcf03ae0 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sun, 15 Aug 2021 18:11:37 +0800 Subject: [PATCH 1/4] chore(support): improve text, styles --- src/components/SupportUs/index.tsx | 86 ++++++++++++++++++- src/components/SupportUs/styles/index.ts | 42 +++++---- .../thread/ArticlesThread/styles/index.ts | 4 +- src/containers/tool/Share/logic.ts | 24 +----- utils/helper.ts | 26 ++++++ 5 files changed, 137 insertions(+), 45 deletions(-) diff --git a/src/components/SupportUs/index.tsx b/src/components/SupportUs/index.tsx index c8cf54722..d0e19bd1e 100755 --- a/src/components/SupportUs/index.tsx +++ b/src/components/SupportUs/index.tsx @@ -5,10 +5,15 @@ */ import { FC, memo } from 'react' +import QRCode from 'qrcode-react' import type { TMetric } from '@/spec' +import { ICON } from '@/config' import { METRIC } from '@/constant' +import { openShareWindow } from '@/utils/helper' + import { Br } from '@/components/Common' +import Tooltip from '@/components/Tooltip' import ArrowLink from '@/components/Buttons/ArrowLink' import Blocks from './Blocks' @@ -16,12 +21,56 @@ import Blocks from './Blocks' import { Wrapper, InnerWrapper, + SupportLogo, Title, Divider, Desc, FocusDesc, + SocialWrapper, + SocialIcon, } from './styles' +const url = 'https://coderplanets.com' + +const toPlatform = (type: string): void => { + const title = 'CoderPlanets' + const digest = '可能是最性感的开发者社区' + + switch (type) { + case 'twitter': { + const param = { url, text: title } + + return openShareWindow('https://twitter.com/intent/tweet', param) + } + + case 'telegram': { + const param = { url, text: title } + + return openShareWindow('https://telegram.me/share/url', param) + } + + case 'facebook': { + const param = { u: url } + return openShareWindow('https://facebook.com/share.php', param) + } + + case 'douban': { + const param = { href: url, name: title } + return openShareWindow('https://shuo.douban.com/!service/share', param) + } + + case 'weibo': { + const param = { url, title } + return openShareWindow('https://service.weibo.com/share/share.php', param) + } + + default: { + /* eslint-disable-next-line */ + return + } + } +} + type TProps = { metric?: TMetric } @@ -30,11 +79,14 @@ const SupportUS: FC = ({ metric = METRIC.SUPPORT_US }) => { return ( - 支持我们 + + <SupportLogo src={`${ICON}/menu/lifebuoy.png`} noLazy /> + 支持我们 + {/* eslint-disable-next-line */} - 编写一个功能完善的现代社区需要开发者保持长期的专注和付出，论坛的持续打磨和维护，更需要团队投入海量的精力，矛盾的是，现阶段因为缺乏流量等各种资源，难以通过自身造血实现正向循环。你的支持将有助于我们保持独立，在论坛的开发和维护上投入更多时间。 + 编写一个功能完善的现代社区需要开发者保持长期的专注和付出，论坛的持续打磨和维护，更需要团队投入海量的精力，矛盾的是，现阶段因为缺乏流量等各种资源，难以通过自身造血实现正向循环。你的支持将有助于我们保持独立，在论坛的开发和运营上倾注更多时间。
@@ -45,9 +97,35 @@ const SupportUS: FC = ({ metric = METRIC.SUPPORT_US }) => {
- 最后，如果你喜欢这里，还请高抬贵指将本社区转发给你身边的开发者朋友、氛围良好的交流群中， - Don’t tell me , tell the world ~ + 最后，如果你喜欢这里，还请高抬贵指将本社区转发给你身边的开发者朋友，以及各种社交媒体平台： + + } placement="top"> + + + + toPlatform('twitter')} + /> + toPlatform('telegram')} + /> + toPlatform('weibo')} + /> + toPlatform('douban')} + /> + toPlatform('facebook')} + /> + + Don’t tell me , tell the world ~ ) diff --git a/src/components/SupportUs/styles/index.ts b/src/components/SupportUs/styles/index.ts index e4c3898d6..dc7f8993c 100755 --- a/src/components/SupportUs/styles/index.ts +++ b/src/components/SupportUs/styles/index.ts @@ -1,8 +1,10 @@ import styled from 'styled-components' import type { TTestable, TMetric } from '@/spec' + import { theme } from '@/utils/themes' import css from '@/utils/css' +import Img from '@/Img' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ 'data-test-id': testid, @@ -23,13 +25,19 @@ export const ContentWrapper = styled.div` ${css.flexColumnGrow()}; max-width: 100%; ` +export const SupportLogo = styled(Img)` + ${css.size(28)}; + transform: rotate(-12deg); + margin-right: 15px; +` export const Title = styled.h1` + ${css.flex('align-center')}; color: ${theme('thread.articleTitle')}; font-size: 24px; margin-top: 8%; ` export const Divider = styled.div` - width: 80px; + width: 120px; height: 1px; background-color: ${theme('thread.articleDigest')}; margin-top: 18px; @@ -43,24 +51,26 @@ export const Desc = styled.div<{ align?: boolean }>` width: 67%; line-height: 1.875; ` -export const FocusDesc = styled.span` +export const FocusDesc = styled.div` color: ${theme('thread.articleTitle')}; + text-align: center; + padding-right: 20px; font-size: 16px; line-height: 1.88; ` -export const BlocksWrapper = styled.div` - ${css.flex('align-both')}; - flex-wrap: wrap; - margin-left: 10px; +export const SocialWrapper = styled.div` + ${css.flex('align-center')}; + margin-top: 30px; + margin-bottom: 30px; + margin-left: -15px; ` -export const Block = styled.div` - width: 300px; - height: 150px; - border: 1px solid; - border-color: #004b5e; - margin-right: 20px; - background: #0d3b49; - border-radius: 5px; - margin-bottom: 20px; - padding: 15px; +export const SocialIcon = styled(Img)` + ${css.size(24)}; + margin-right: 15px; + filter: saturate(0.4); + + &:hover { + filter: saturate(0.9); + cursor: pointer; + } ` diff --git a/src/containers/thread/ArticlesThread/styles/index.ts b/src/containers/thread/ArticlesThread/styles/index.ts index accfd9ded..65eae59ee 100755 --- a/src/containers/thread/ArticlesThread/styles/index.ts +++ b/src/containers/thread/ArticlesThread/styles/index.ts @@ -20,7 +20,7 @@ export const MainWrapper = styled.div` ` export const FilterWrapper = styled.div` ${css.flex('align-center')}; - margin-bottom: 10px; + margin-bottom: 3px; ${css.media.mobile`margin-bottom: 4px;`}; - margin-left: -5px; + margin-left: -3px; ` diff --git a/src/containers/tool/Share/logic.ts b/src/containers/tool/Share/logic.ts index 3b57617fe..a3fa1b48a 100755 --- a/src/containers/tool/Share/logic.ts +++ b/src/containers/tool/Share/logic.ts @@ -2,6 +2,7 @@ import { useEffect } from 'react' // import { } from 'ramda' import asyncSuit from '@/utils/async' +import { openShareWindow } from '@/utils/helper' import { buildLog } from '@/utils/logger' import { EVENT } from '@/constant' import { SHARE_TYPE } from './constant' @@ -21,29 +22,6 @@ let sub$ = null /* eslint-disable-next-line */ const log = buildLog('L:Share') -type TShareParam = { - url?: string - title?: string - text?: string - subject?: string - body?: string - u?: string - href?: string - name?: string -} -const openShareWindow = (platformUrl: string, param: TShareParam): void => { - const safeParam = [] - - /* eslint-disable */ - for (const i in param) { - safeParam.push(`${i}=${encodeURIComponent(param[i] || '')}`) - } - /* eslint-enable */ - const targetUrl = `${platformUrl}?${safeParam.join('&')}` - - window.open(targetUrl, '_blank', 'height=500, width=600') -} - export const toPlatform = (type: string): void => { const { shareData } = store const { url, title, digest } = shareData diff --git a/utils/helper.ts b/utils/helper.ts index e88f8ebba..85224efbd 100755 --- a/utils/helper.ts +++ b/utils/helper.ts @@ -358,3 +358,29 @@ export const titleCase = (str: string): string => { return t.charAt(0).toUpperCase() + t.substr(1).toLowerCase() }) } + +type TShareParam = { + url?: string + title?: string + text?: string + subject?: string + body?: string + u?: string + href?: string + name?: string +} +export const openShareWindow = ( + platformUrl: string, + param: TShareParam, +): void => { + const safeParam = [] + + /* eslint-disable */ + for (const i in param) { + safeParam.push(`${i}=${encodeURIComponent(param[i] || '')}`) + } + /* eslint-enable */ + const targetUrl = `${platformUrl}?${safeParam.join('&')}` + + Global.open(targetUrl, '_blank', 'height=500, width=600') +} From 8720c513bbaa72c6b612dbc2706c4e96f432222e Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sun, 15 Aug 2021 19:36:01 +0800 Subject: [PATCH 2/4] fix(support): add icon & img click issue --- src/components/Img/index.tsx | 6 +++--- src/components/SupportUs/Blocks.tsx | 19 ++++++++++++++++++- src/components/SupportUs/styles/blocks.ts | 12 ++++++++---- 3 files changed, 29 insertions(+), 8 deletions(-) diff --git a/src/components/Img/index.tsx b/src/components/Img/index.tsx index a5301f7ba..4fc96aa2c 100755 --- a/src/components/Img/index.tsx +++ b/src/components/Img/index.tsx @@ -38,7 +38,7 @@ const Img: FC = ({ noLazy = false, scrollPosition = null, visibleByDefault = false, - onClick, + onClick = log, }) => { if (/\.(svg)$/i.test(src)) { // see solution in: @@ -56,7 +56,7 @@ const Img: FC = ({ ) } return ( - +
{noLazy ? ( = ({ visibleByDefault={visibleByDefault} /> )} - +
) } diff --git a/src/components/SupportUs/Blocks.tsx b/src/components/SupportUs/Blocks.tsx index 424ca2c1b..3345a8478 100644 --- a/src/components/SupportUs/Blocks.tsx +++ b/src/components/SupportUs/Blocks.tsx @@ -10,9 +10,13 @@ import { ICON } from '@/config' import { PAYMENT_USAGE } from '@/constant' import { checkout } from '@/utils/helper' + +import { SpaceGrow } from '@/components/Common' + import { Wrapper, Block, + Icon, Title, Divider, Desc, @@ -46,13 +50,20 @@ const Blocks = () => { /> setShowChuan(true)}> - 远程撸串 + + <Icon src={`${ICON}/menu/feed.svg`} /> + 远程撸串 + <SpaceGrow /> + + 你的远程投喂将有助于开发团队在饱腹状态下工作， Cheers! + <Icon src={`${ICON}/menu/vip.svg`} /> 成为会员 + <SpaceGrow /> <LinkIcon src={`${ICON}/shape/link.svg`} /> @@ -62,7 +73,9 @@ const Blocks = () => { + <Icon src={`${ICON}/menu/sponsor.svg`} /> 团队赞助 + <SpaceGrow /> <MailIcon src={`${ICON}/subscribe/email-solid.svg`} /> @@ -72,7 +85,9 @@ const Blocks = () => { + <Icon src={`${ICON}/menu/volunteer.svg`} /> 成为志愿者 + <SpaceGrow /> <LinkIcon src={`${ICON}/shape/link.svg`} /> @@ -82,7 +97,9 @@ const Blocks = () => { + <Icon src={`${ICON}/social/github.svg`} /> 参与开发 + <SpaceGrow /> <LinkIcon src={`${ICON}/shape/link.svg`} /> diff --git a/src/components/SupportUs/styles/blocks.ts b/src/components/SupportUs/styles/blocks.ts index c8e02fb99..8209de9f5 100644 --- a/src/components/SupportUs/styles/blocks.ts +++ b/src/components/SupportUs/styles/blocks.ts @@ -30,14 +30,18 @@ export const Block = styled.div` transition: all 0.1s; ` +export const Icon = styled(Img)` + ${css.size(16)}; + margin-right: 10px; + fill: ${theme('thread.articleDigest')}; +` export const Title = styled.div` - ${css.flex('justify-between')} + ${css.flex('justify-between', 'align-center')} color: ${theme('thread.articleTitle')}; font-size: 18px; ` export const LinkIcon = styled(Img)` ${css.size(18)}; - margin-top: 5px; fill: ${theme('button.primary')}; opacity: 0; @@ -49,9 +53,9 @@ export const MailIcon = styled(LinkIcon)` ${css.size(16)}; ` export const Divider = styled.div` - width: 50px; + width: 100%; height: 2px; - background-color: ${theme('thread.articleDigest')}; + background-color: #004b5d; margin-top: 10px; margin-bottom: 15px; opacity: 0.6; From c87bb5b388ce8218ce92a94b9750748afeb501f3 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sun, 15 Aug 2021 19:45:18 +0800 Subject: [PATCH 3/4] style(support): mini adjust --- src/components/SupportUs/index.tsx | 5 +++-- src/components/SupportUs/styles/index.ts | 5 +++++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/SupportUs/index.tsx b/src/components/SupportUs/index.tsx index d0e19bd1e..e3cca3bd5 100755 --- a/src/components/SupportUs/index.tsx +++ b/src/components/SupportUs/index.tsx @@ -25,6 +25,7 @@ import { Title, Divider, Desc, + MainDesc, FocusDesc, SocialWrapper, SocialIcon, @@ -84,10 +85,10 @@ const SupportUS: FC = ({ metric = METRIC.SUPPORT_US }) => { 支持我们 - + {/* eslint-disable-next-line */} 编写一个功能完善的现代社区需要开发者保持长期的专注和付出，论坛的持续打磨和维护，更需要团队投入海量的精力，矛盾的是，现阶段因为缺乏流量等各种资源，难以通过自身造血实现正向循环。你的支持将有助于我们保持独立，在论坛的开发和运营上倾注更多时间。 - +

diff --git a/src/components/SupportUs/styles/index.ts b/src/components/SupportUs/styles/index.ts index dc7f8993c..bb45ba5d4 100755 --- a/src/components/SupportUs/styles/index.ts +++ b/src/components/SupportUs/styles/index.ts @@ -29,6 +29,7 @@ export const SupportLogo = styled(Img)` ${css.size(28)}; transform: rotate(-12deg); margin-right: 15px; + filter: saturate(0.7); ` export const Title = styled.h1` ${css.flex('align-center')}; @@ -42,6 +43,7 @@ export const Divider = styled.div` background-color: ${theme('thread.articleDigest')}; margin-top: 18px; margin-bottom: 30px; + margin-left: 5px; opacity: 0.6; ` export const Desc = styled.div<{ align?: boolean }>` @@ -51,6 +53,9 @@ export const Desc = styled.div<{ align?: boolean }>` width: 67%; line-height: 1.875; ` +export const MainDesc = styled(Desc)` + text-indent: 32px; +` export const FocusDesc = styled.div` color: ${theme('thread.articleTitle')}; text-align: center; From 06a839625224a2b29bc7de97d8fa5e978f2ce319 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sun, 15 Aug 2021 20:10:32 +0800 Subject: [PATCH 4/4] style(support): style & fm mini adjust --- src/components/BuyMeChuanChuan/index.tsx | 2 +- src/components/SupportUs/Blocks.tsx | 9 +++++---- src/components/SupportUs/index.tsx | 4 ++-- src/components/SupportUs/styles/blocks.ts | 6 +++++- src/components/SupportUs/styles/index.ts | 4 ++-- 5 files changed, 15 insertions(+), 10 deletions(-) diff --git a/src/components/BuyMeChuanChuan/index.tsx b/src/components/BuyMeChuanChuan/index.tsx index 0fcdca5e8..f92c8a025 100755 --- a/src/components/BuyMeChuanChuan/index.tsx +++ b/src/components/BuyMeChuanChuan/index.tsx @@ -79,7 +79,7 @@ const BuyMeChuanChuan: FC = ({ - 你的远程投喂将有助于开发团队在饱腹状态下工作， Cheers! + 你的远程投喂将有助于开发团队在饱腹状态下工作， 冲! diff --git a/src/components/SupportUs/Blocks.tsx b/src/components/SupportUs/Blocks.tsx index 3345a8478..2217a5f85 100644 --- a/src/components/SupportUs/Blocks.tsx +++ b/src/components/SupportUs/Blocks.tsx @@ -17,6 +17,7 @@ import { Wrapper, Block, Icon, + FeedIcon, Title, Divider, Desc, @@ -51,13 +52,13 @@ const Blocks = () => { setShowChuan(true)}> - <Icon src={`${ICON}/menu/feed.svg`} /> + <FeedIcon src={`${ICON}/menu/feed.svg`} /> 远程撸串 <SpaceGrow /> - 你的远程投喂将有助于开发团队在饱腹状态下工作， Cheers! + 你的远程投喂将有助于开发团队在饱腹状态下工作， 冲！ @@ -68,7 +69,7 @@ const Blocks = () => { - 成为 CP 付费会员，持续支持社区发展，同时解锁最优质的体验和服务。 + 成为 CP 付费会员，解锁本站最高质量的体验和服务，同时支持社区持续发展。 @@ -80,7 +81,7 @@ const Blocks = () => { - 你的团队推广将出现在本项目的 Github 主页以及本站的特别感谢中。 + 你的团队链接将永久出现在本项目的 Github 主页以及本站的特别感谢中。 diff --git a/src/components/SupportUs/index.tsx b/src/components/SupportUs/index.tsx index e3cca3bd5..3120339e0 100755 --- a/src/components/SupportUs/index.tsx +++ b/src/components/SupportUs/index.tsx @@ -93,8 +93,8 @@ const SupportUS: FC = ({ metric = METRIC.SUPPORT_US }) => {
- - 开源项目的健康发展无法仅靠情怀支撑，所受钱款将全部用于支付本站所使用的基础设施、第三方服务、开发人员生计等产生的必要费用，确保社区健壮、稳定、可持续。 + + 开源项目的健康发展无法仅靠情怀支撑，所受钱款将全部用于支付本站所使用的基础设施、第三方服务、资源以及开发人员生计等产生的必要费用，确保社区稳定、可持续，谢谢理解。
diff --git a/src/components/SupportUs/styles/blocks.ts b/src/components/SupportUs/styles/blocks.ts index 8209de9f5..c09dc314e 100644 --- a/src/components/SupportUs/styles/blocks.ts +++ b/src/components/SupportUs/styles/blocks.ts @@ -35,6 +35,9 @@ export const Icon = styled(Img)` margin-right: 10px; fill: ${theme('thread.articleDigest')}; ` +export const FeedIcon = styled(Icon)` + transform: rotate(-30deg); +` export const Title = styled.div` ${css.flex('justify-between', 'align-center')} color: ${theme('thread.articleTitle')}; @@ -58,9 +61,10 @@ export const Divider = styled.div` background-color: #004b5d; margin-top: 10px; margin-bottom: 15px; - opacity: 0.6; + opacity: 0.5; ` export const Desc = styled.div` color: ${theme('thread.articleDigest')}; font-size: 14px; + line-height: 1.85; ` diff --git a/src/components/SupportUs/styles/index.ts b/src/components/SupportUs/styles/index.ts index bb45ba5d4..dd6bf9685 100755 --- a/src/components/SupportUs/styles/index.ts +++ b/src/components/SupportUs/styles/index.ts @@ -28,7 +28,7 @@ export const ContentWrapper = styled.div` export const SupportLogo = styled(Img)` ${css.size(28)}; transform: rotate(-12deg); - margin-right: 15px; + margin-right: 12px; filter: saturate(0.7); ` export const Title = styled.h1` @@ -67,7 +67,7 @@ export const SocialWrapper = styled.div` ${css.flex('align-center')}; margin-top: 30px; margin-bottom: 30px; - margin-left: -15px; + margin-left: -12px; ` export const SocialIcon = styled(Img)` ${css.size(24)};