From 652204d783e53ae0c531ef9c5bed20bebcde8711 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Thu, 29 Jul 2021 12:30:03 +0800 Subject: [PATCH 01/15] chore: add local svg icons --- .eslintrc.js | 1 + jsconfig.json | 1 + src/components/Buttons/IconButton.tsx | 43 +++++++++++++------- src/components/Buttons/styles/icon_button.ts | 38 +++++++++++++++-- src/components/Icons/Acount.tsx | 21 ++++++++++ src/components/Icons/Arrow.tsx | 22 ++++++++++ src/components/Icons/Checked.tsx | 21 ++++++++++ src/components/Icons/CollectionFolder.tsx | 21 ++++++++++ src/components/Icons/Comment.tsx | 21 ++++++++++ src/components/Icons/CopyrightCC.tsx | 18 ++++++++ src/components/Icons/Emotion.tsx | 18 ++++++++ src/components/Icons/Expand.tsx | 21 ++++++++++ src/components/Icons/Fold.tsx | 21 ++++++++++ src/components/Icons/GotoTop.tsx | 21 ++++++++++ src/components/Icons/Lock.tsx | 21 ++++++++++ src/components/Icons/MagicStick.tsx | 21 ++++++++++ src/components/Icons/More.tsx | 21 ++++++++++ src/components/Icons/MoreL.tsx | 18 ++++++++ src/components/Icons/Pulse.tsx | 21 ++++++++++ src/components/Icons/Question.tsx | 21 ++++++++++ src/components/Icons/ReplyMode.tsx | 24 +++++++++++ src/components/Icons/Report.tsx | 21 ++++++++++ src/components/Icons/Share.tsx | 18 ++++++++ src/components/Icons/Star.tsx | 22 ++++++++++ src/components/Icons/TimelineMode.tsx | 22 ++++++++++ src/components/Icons/Upvote.tsx | 18 ++++++++ src/components/Icons/View.tsx | 23 +++++++++++ src/components/Icons/Warning.tsx | 21 ++++++++++ tsconfig.json | 1 + utils/constant/index.ts | 1 + utils/constant/svg.ts | 18 ++++++++ 31 files changed, 582 insertions(+), 18 deletions(-) create mode 100644 src/components/Icons/Acount.tsx create mode 100644 src/components/Icons/Arrow.tsx create mode 100644 src/components/Icons/Checked.tsx create mode 100644 src/components/Icons/CollectionFolder.tsx create mode 100644 src/components/Icons/Comment.tsx create mode 100644 src/components/Icons/CopyrightCC.tsx create mode 100644 src/components/Icons/Emotion.tsx create mode 100644 src/components/Icons/Expand.tsx create mode 100644 src/components/Icons/Fold.tsx create mode 100644 src/components/Icons/GotoTop.tsx create mode 100644 src/components/Icons/Lock.tsx create mode 100644 src/components/Icons/MagicStick.tsx create mode 100644 src/components/Icons/More.tsx create mode 100644 src/components/Icons/MoreL.tsx create mode 100644 src/components/Icons/Pulse.tsx create mode 100644 src/components/Icons/Question.tsx create mode 100644 src/components/Icons/ReplyMode.tsx create mode 100644 src/components/Icons/Report.tsx create mode 100644 src/components/Icons/Share.tsx create mode 100644 src/components/Icons/Star.tsx create mode 100644 src/components/Icons/TimelineMode.tsx create mode 100644 src/components/Icons/Upvote.tsx create mode 100644 src/components/Icons/View.tsx create mode 100644 src/components/Icons/Warning.tsx create mode 100755 utils/constant/svg.ts diff --git a/.eslintrc.js b/.eslintrc.js index 32bfdef03..8fee11078 100755 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -32,6 +32,7 @@ module.exports = { '@/schemas': 'src/schemas', '@/Img': 'src/components/Img', '@/SvgIcons': 'src/components/SvgIcons', + '@/Icons': 'src/components/Icons', '@/i18n': 'i18n', '@/spec': 'src/spec', }, diff --git a/jsconfig.json b/jsconfig.json index 040091793..c996ea9ce 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -16,6 +16,7 @@ "@/schemas": ["src/schemas"], "@/Img": ["src/components/Img"], "@/SvgIcons/*": ["src/components/SvgIcons/*"], + "@/Icons/*": ["src/components/icons/*"], "@/i18n": ["i18n"] } }, diff --git a/src/components/Buttons/IconButton.tsx b/src/components/Buttons/IconButton.tsx index c34b1c8f0..85e341886 100644 --- a/src/components/Buttons/IconButton.tsx +++ b/src/components/Buttons/IconButton.tsx @@ -1,12 +1,14 @@ import { FC, memo, ReactNode } from 'react' import { ICON } from '@/config' +import { SVG } from '@/constant' import Tooltip from '@/components/Tooltip' -import { Wrapper, Icon, Hint } from './styles/icon_button' +import { Wrapper, Icon, Hint, getIcon } from './styles/icon_button' export type TProps = { - path: string + path?: string | null + icon?: string | null size?: number mRight?: number mLeft?: number @@ -21,7 +23,8 @@ export type TProps = { } const IconButton: FC = ({ - path, + path = null, + icon = null, size = 16, mLeft = 0, mRight = 10, @@ -34,6 +37,26 @@ const IconButton: FC = ({ hintPlacement = 'top', onClick = console.log, }) => { + let realIcon = null + + if (path) { + // icon from OSS + realIcon = ( + + ) + } else { + const LocalIcon = getIcon(icon || SVG.UPVOTE) + + realIcon = ( + + ) + } + return ( = ({ noPadding delay={hintDelay} > - + {realIcon} ) : ( - + <>{realIcon} )} ) diff --git a/src/components/Buttons/styles/icon_button.ts b/src/components/Buttons/styles/icon_button.ts index 4c664e2a5..00ccc476d 100644 --- a/src/components/Buttons/styles/icon_button.ts +++ b/src/components/Buttons/styles/icon_button.ts @@ -1,10 +1,14 @@ +import { FC } from 'react' import styled from 'styled-components' import type { TActive, TSpace } from '@/spec' +import { SVG } from '@/constant' import Img from '@/Img' import { css, theme } from '@/utils' +import UpvoteIcon from '@/Icons/Upvote' + import type { TProps as TIconButtonProps } from '../IconButton' type TWrapper = Omit @@ -22,9 +26,7 @@ type TIcon = { size: number; dimWhenIdle: boolean } & TSpace & TActive export const Icon = styled(Img)` fill: ${({ $active }) => $active ? '#00a59b' : theme('thread.articleDigest')}; - display: block; - width: ${({ size }) => `${size}px`}; - height: ${({ size }) => `${size}px`}; + ${({ size }) => css.size(size)}; opacity: ${({ dimWhenIdle }) => (dimWhenIdle ? 0.7 : 1)}; @@ -37,6 +39,36 @@ export const Icon = styled(Img)` transition: fill 0.2s; ` +export const getIcon = (type: string): FC => { + switch (type) { + case SVG.UPVOTE: { + return getStyledIcon(UpvoteIcon) + } + + default: { + return getStyledIcon(UpvoteIcon) + } + } +} + +export const getStyledIcon = (comp: FC): FC => { + return styled(comp)` + fill: ${({ $active }) => + $active ? '#00a59b' : theme('thread.articleDigest')}; + ${({ size }) => css.size(size)}; + + opacity: ${({ dimWhenIdle }) => (dimWhenIdle ? 0.7 : 1)}; + + &:hover { + fill: #00a59b; + opacity: 1; + cursor: pointer; + } + + transition: fill 0.2s; + ` +} + export const Hint = styled.div` color: ${theme('thread.articleDigest')}; text-align: center; diff --git a/src/components/Icons/Acount.tsx b/src/components/Icons/Acount.tsx new file mode 100644 index 000000000..c23f01111 --- /dev/null +++ b/src/components/Icons/Acount.tsx @@ -0,0 +1,21 @@ +import { memo, SVGProps } from 'react' + +const Account = (props: SVGProps) => { + return ( + + + + + + + ) +} + +export default memo(Account) diff --git a/src/components/Icons/Arrow.tsx b/src/components/Icons/Arrow.tsx new file mode 100644 index 000000000..ccba103b6 --- /dev/null +++ b/src/components/Icons/Arrow.tsx @@ -0,0 +1,22 @@ +import { memo, SVGProps } from 'react' + +const Arrow = (props: SVGProps) => { + return ( + + + + + + + + ) +} + +export default memo(Arrow) diff --git a/src/components/Icons/Checked.tsx b/src/components/Icons/Checked.tsx new file mode 100644 index 000000000..4f8884a7b --- /dev/null +++ b/src/components/Icons/Checked.tsx @@ -0,0 +1,21 @@ +import { memo, SVGProps } from 'react' + +const Checked = (props: SVGProps) => { + return ( + + + + + + + ) +} + +export default memo(Checked) diff --git a/src/components/Icons/CollectionFolder.tsx b/src/components/Icons/CollectionFolder.tsx new file mode 100644 index 000000000..29e366d44 --- /dev/null +++ b/src/components/Icons/CollectionFolder.tsx @@ -0,0 +1,21 @@ +import { memo, SVGProps } from 'react' + +const CollectionFolder = (props: SVGProps) => { + return ( + + + + + + + ) +} + +export default memo(CollectionFolder) diff --git a/src/components/Icons/Comment.tsx b/src/components/Icons/Comment.tsx new file mode 100644 index 000000000..0c661e5d7 --- /dev/null +++ b/src/components/Icons/Comment.tsx @@ -0,0 +1,21 @@ +import { memo, SVGProps } from 'react' + +const Comment = (props: SVGProps) => { + return ( + + + + + + + ) +} + +export default memo(Comment) diff --git a/src/components/Icons/CopyrightCC.tsx b/src/components/Icons/CopyrightCC.tsx new file mode 100644 index 000000000..cab9f3452 --- /dev/null +++ b/src/components/Icons/CopyrightCC.tsx @@ -0,0 +1,18 @@ +import { memo, SVGProps } from 'react' + +const CopyrightCC = (props: SVGProps) => { + return ( + + + + + ) +} + +export default memo(CopyrightCC) diff --git a/src/components/Icons/Emotion.tsx b/src/components/Icons/Emotion.tsx new file mode 100644 index 000000000..a1e888724 --- /dev/null +++ b/src/components/Icons/Emotion.tsx @@ -0,0 +1,18 @@ +import { memo, SVGProps } from 'react' + +const Emotion = (props: SVGProps) => { + return ( + + + + + ) +} + +export default memo(Emotion) diff --git a/src/components/Icons/Expand.tsx b/src/components/Icons/Expand.tsx new file mode 100644 index 000000000..160b295d8 --- /dev/null +++ b/src/components/Icons/Expand.tsx @@ -0,0 +1,21 @@ +import { memo, SVGProps } from 'react' + +const Expand = (props: SVGProps) => { + return ( + + + + + + + ) +} + +export default memo(Expand) diff --git a/src/components/Icons/Fold.tsx b/src/components/Icons/Fold.tsx new file mode 100644 index 000000000..3ed07c0d3 --- /dev/null +++ b/src/components/Icons/Fold.tsx @@ -0,0 +1,21 @@ +import { memo, SVGProps } from 'react' + +const Expand = (props: SVGProps) => { + return ( + + + + + + + ) +} + +export default memo(Expand) diff --git a/src/components/Icons/GotoTop.tsx b/src/components/Icons/GotoTop.tsx new file mode 100644 index 000000000..83efd5236 --- /dev/null +++ b/src/components/Icons/GotoTop.tsx @@ -0,0 +1,21 @@ +import { memo, SVGProps } from 'react' + +const GotoTop = (props: SVGProps) => { + return ( + + + + + + + ) +} + +export default memo(GotoTop) diff --git a/src/components/Icons/Lock.tsx b/src/components/Icons/Lock.tsx new file mode 100644 index 000000000..797a00bc3 --- /dev/null +++ b/src/components/Icons/Lock.tsx @@ -0,0 +1,21 @@ +import { memo, SVGProps } from 'react' + +const Lock = (props: SVGProps) => { + return ( + + + + + + + ) +} + +export default memo(Lock) diff --git a/src/components/Icons/MagicStick.tsx b/src/components/Icons/MagicStick.tsx new file mode 100644 index 000000000..57034b033 --- /dev/null +++ b/src/components/Icons/MagicStick.tsx @@ -0,0 +1,21 @@ +import { memo, SVGProps } from 'react' + +const MagicStick = (props: SVGProps) => { + return ( + + + + + + + ) +} + +export default memo(MagicStick) diff --git a/src/components/Icons/More.tsx b/src/components/Icons/More.tsx new file mode 100644 index 000000000..2b7c05496 --- /dev/null +++ b/src/components/Icons/More.tsx @@ -0,0 +1,21 @@ +import { memo, SVGProps } from 'react' + +const More = (props: SVGProps) => { + return ( + + + + + + + ) +} + +export default memo(More) diff --git a/src/components/Icons/MoreL.tsx b/src/components/Icons/MoreL.tsx new file mode 100644 index 000000000..3c9eaab51 --- /dev/null +++ b/src/components/Icons/MoreL.tsx @@ -0,0 +1,18 @@ +import { memo, SVGProps } from 'react' + +const MoreL = (props: SVGProps) => { + return ( + + + + + ) +} + +export default memo(MoreL) diff --git a/src/components/Icons/Pulse.tsx b/src/components/Icons/Pulse.tsx new file mode 100644 index 000000000..b9209223f --- /dev/null +++ b/src/components/Icons/Pulse.tsx @@ -0,0 +1,21 @@ +import { memo, SVGProps } from 'react' + +const Pulse = (props: SVGProps) => { + return ( + + + + + + + ) +} + +export default memo(Pulse) diff --git a/src/components/Icons/Question.tsx b/src/components/Icons/Question.tsx new file mode 100644 index 000000000..6c33edc35 --- /dev/null +++ b/src/components/Icons/Question.tsx @@ -0,0 +1,21 @@ +import { memo, SVGProps } from 'react' + +const Question = (props: SVGProps) => { + return ( + + + + + + + ) +} + +export default memo(Question) diff --git a/src/components/Icons/ReplyMode.tsx b/src/components/Icons/ReplyMode.tsx new file mode 100644 index 000000000..31b411985 --- /dev/null +++ b/src/components/Icons/ReplyMode.tsx @@ -0,0 +1,24 @@ +import { memo, SVGProps } from 'react' + +const ReplyMode = (props: SVGProps) => { + return ( + + + + + + + + + + ) +} + +export default memo(ReplyMode) diff --git a/src/components/Icons/Report.tsx b/src/components/Icons/Report.tsx new file mode 100644 index 000000000..cf3f35936 --- /dev/null +++ b/src/components/Icons/Report.tsx @@ -0,0 +1,21 @@ +import { memo, SVGProps } from 'react' + +const Report = (props: SVGProps) => { + return ( + + + + + + + ) +} + +export default memo(Report) diff --git a/src/components/Icons/Share.tsx b/src/components/Icons/Share.tsx new file mode 100644 index 000000000..0938e0644 --- /dev/null +++ b/src/components/Icons/Share.tsx @@ -0,0 +1,18 @@ +import { memo, SVGProps } from 'react' + +const Share = (props: SVGProps) => { + return ( + + + + + ) +} + +export default memo(Share) diff --git a/src/components/Icons/Star.tsx b/src/components/Icons/Star.tsx new file mode 100644 index 000000000..7bbcae0ca --- /dev/null +++ b/src/components/Icons/Star.tsx @@ -0,0 +1,22 @@ +import { memo, SVGProps } from 'react' + +const Star = (props: SVGProps) => { + return ( + + + + + + + + ) +} + +export default memo(Star) diff --git a/src/components/Icons/TimelineMode.tsx b/src/components/Icons/TimelineMode.tsx new file mode 100644 index 000000000..94034c46f --- /dev/null +++ b/src/components/Icons/TimelineMode.tsx @@ -0,0 +1,22 @@ +import { memo, SVGProps } from 'react' + +const TimelineMode = (props: SVGProps) => { + return ( + + + + + + + + ) +} + +export default memo(TimelineMode) diff --git a/src/components/Icons/Upvote.tsx b/src/components/Icons/Upvote.tsx new file mode 100644 index 000000000..ec5224c04 --- /dev/null +++ b/src/components/Icons/Upvote.tsx @@ -0,0 +1,18 @@ +import { memo, SVGProps } from 'react' + +const Upvote = (props: SVGProps) => { + return ( + + + + + ) +} + +export default memo(Upvote) diff --git a/src/components/Icons/View.tsx b/src/components/Icons/View.tsx new file mode 100644 index 000000000..ede877785 --- /dev/null +++ b/src/components/Icons/View.tsx @@ -0,0 +1,23 @@ +import { memo, SVGProps } from 'react' + +const View = (props: SVGProps) => { + return ( + + + + + + + + + ) +} + +export default memo(View) diff --git a/src/components/Icons/Warning.tsx b/src/components/Icons/Warning.tsx new file mode 100644 index 000000000..b61711a10 --- /dev/null +++ b/src/components/Icons/Warning.tsx @@ -0,0 +1,21 @@ +import { memo, SVGProps } from 'react' + +const Warning = (props: SVGProps) => { + return ( + + + + + + + ) +} + +export default memo(Warning) diff --git a/tsconfig.json b/tsconfig.json index 4a2a5ce54..ad9520ef3 100755 --- a/tsconfig.json +++ b/tsconfig.json @@ -31,6 +31,7 @@ "@/spec": ["src/spec"], "@/Img": ["src/components/Img"], "@/SvgIcons/*": ["src/components/SvgIcons/*"], + "@/Icons/*": ["src/components/Icons/*"], "@/i18n": ["i18n"] }, "plugins": [ diff --git a/utils/constant/index.ts b/utils/constant/index.ts index 44d0ace1c..5eefa588e 100755 --- a/utils/constant/index.ts +++ b/utils/constant/index.ts @@ -24,6 +24,7 @@ export { default as URL_QUERY } from './url_query' export { PAYMENT_USAGE, PAYMENT_METHOD } from './payment' export { REPORT, REPORT_TYPE } from './report' +export { default as SVG } from './svg' /* some svg icon are sensitive to fill color */ /* some community svg need fill color, like city etc.. */ diff --git a/utils/constant/svg.ts b/utils/constant/svg.ts new file mode 100755 index 000000000..f0bae6c14 --- /dev/null +++ b/utils/constant/svg.ts @@ -0,0 +1,18 @@ +const SVG = { + // article + UPVOTE: 'upvote', + COLLECTION: 'collection', + SHARE: 'share', + VIEW: 'view', + COMMENT: 'comment', + PIN: 'pin', + + // comment + EMOTION: 'emotion', + LOCK: 'lock', + // utils + MORE: 'more', + MOREL: 'more-l', +} + +export default SVG From 5a716e2796b0c6a9ce3a74a6bc99aeeb91c6239a Mon Sep 17 00:00:00 2001 From: mydearxym Date: Thu, 29 Jul 2021 14:16:20 +0800 Subject: [PATCH 02/15] chore: use local svgs --- .eslintrc.js | 2 +- jsconfig.json | 2 +- src/components/ArticleBaseStats/index.tsx | 5 ++--- src/components/ArticleBaseStats/styles/index.ts | 14 +++++++++----- src/components/Buttons/styles/icon_button.ts | 17 ++++++++++++++++- src/components/Upvote/UpvoteBtn.tsx | 7 +------ src/components/Upvote/styles/upvote_btn.ts | 4 ++-- src/containers/unit/Comments/List/Header.tsx | 7 ++++--- tsconfig.json | 2 +- utils/constant/svg.ts | 5 +++++ 10 files changed, 42 insertions(+), 23 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 8fee11078..18e2118e5 100755 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -32,7 +32,7 @@ module.exports = { '@/schemas': 'src/schemas', '@/Img': 'src/components/Img', '@/SvgIcons': 'src/components/SvgIcons', - '@/Icons': 'src/components/Icons', + '@/icons': 'src/components/Icons', '@/i18n': 'i18n', '@/spec': 'src/spec', }, diff --git a/jsconfig.json b/jsconfig.json index c996ea9ce..21fcd2c3e 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -16,7 +16,7 @@ "@/schemas": ["src/schemas"], "@/Img": ["src/components/Img"], "@/SvgIcons/*": ["src/components/SvgIcons/*"], - "@/Icons/*": ["src/components/icons/*"], + "@/icons/*": ["src/components/icons/*"], "@/i18n": ["i18n"] } }, diff --git a/src/components/ArticleBaseStats/index.tsx b/src/components/ArticleBaseStats/index.tsx index d883d37f8..28b84e13b 100755 --- a/src/components/ArticleBaseStats/index.tsx +++ b/src/components/ArticleBaseStats/index.tsx @@ -7,7 +7,6 @@ import { FC, memo } from 'react' import type { TArticle, TContainer } from '@/spec' -import { ICON } from '@/config' import { buildLog, scrollToComments } from '@/utils' import { Space } from '@/components/Common' @@ -36,11 +35,11 @@ const ArticleBaseStats: FC = ({ }) => { return ( - + {article.views} scrollToComments(container)}> - + {article.commentsCount} diff --git a/src/components/ArticleBaseStats/styles/index.ts b/src/components/ArticleBaseStats/styles/index.ts index 24aa5cc7c..df1330579 100755 --- a/src/components/ArticleBaseStats/styles/index.ts +++ b/src/components/ArticleBaseStats/styles/index.ts @@ -2,7 +2,9 @@ import styled from 'styled-components' import type { TTestable } from '@/spec' -import Img from '@/Img' +import ViewSVGIcon from '@/icons/View' +import CommentSVGIcon from '@/icons/Comment' + import { css, theme } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ @@ -10,17 +12,19 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ }))` ${css.flex('align-center')}; ` -const Icon = styled(Img)` +export const ViewsIcon = styled(ViewSVGIcon)` fill: ${theme('thread.articleDigest')}; ${css.size(14)}; transition: fill 0.25s; ` -export const ViewsIcon = styled(Icon)`` - export const CommentWrapper = styled.div` ${css.flex('align-center')}; ` -export const CommentIcon = styled(Icon)` +export const CommentIcon = styled(CommentSVGIcon)` + fill: ${theme('thread.articleDigest')}; + ${css.size(14)}; + transition: fill 0.25s; + ${CommentWrapper}:hover & { cursor: pointer; fill: ${theme('thread.articleTitle')}; diff --git a/src/components/Buttons/styles/icon_button.ts b/src/components/Buttons/styles/icon_button.ts index 00ccc476d..28b8378d5 100644 --- a/src/components/Buttons/styles/icon_button.ts +++ b/src/components/Buttons/styles/icon_button.ts @@ -7,7 +7,10 @@ import { SVG } from '@/constant' import Img from '@/Img' import { css, theme } from '@/utils' -import UpvoteIcon from '@/Icons/Upvote' +import UpvoteIcon from '@/icons/Upvote' +import LockIcon from '@/icons/Lock' +import ExpandIcon from '@/icons/Expand' +import FoldIcon from '@/icons/Fold' import type { TProps as TIconButtonProps } from '../IconButton' @@ -45,6 +48,18 @@ export const getIcon = (type: string): FC => { return getStyledIcon(UpvoteIcon) } + case SVG.LOCK: { + return getStyledIcon(LockIcon) + } + + case SVG.EXPAND: { + return getStyledIcon(ExpandIcon) + } + + case SVG.FOLD: { + return getStyledIcon(FoldIcon) + } + default: { return getStyledIcon(UpvoteIcon) } diff --git a/src/components/Upvote/UpvoteBtn.tsx b/src/components/Upvote/UpvoteBtn.tsx index 50bf35a74..d473507b3 100644 --- a/src/components/Upvote/UpvoteBtn.tsx +++ b/src/components/Upvote/UpvoteBtn.tsx @@ -7,7 +7,6 @@ import { FC, memo, useState, useCallback } from 'react' import type { TUser, TUpvoteLayout } from '@/spec' -import { ICON } from '@/config' import { buildLog } from '@/utils' import { @@ -60,11 +59,7 @@ const UpvoteBtn: FC = ({ ) : ( )} - + diff --git a/src/components/Upvote/styles/upvote_btn.ts b/src/components/Upvote/styles/upvote_btn.ts index d2301c6f5..dd04fa0cd 100644 --- a/src/components/Upvote/styles/upvote_btn.ts +++ b/src/components/Upvote/styles/upvote_btn.ts @@ -3,7 +3,7 @@ import styled, { keyframes } from 'styled-components' import type { TUpvoteLayout, TActive } from '@/spec' import { UPVOTE_LAYOUT } from '@/constant' -import Img from '@/Img' +import UpvoteIcon from '@/icons/Upvote' import { css, theme } from '@/utils' import { @@ -196,7 +196,7 @@ export const ArticleShipWindow = styled(ShipWindow)` ` type TUpIcon = { type: TUpvoteLayout } & TActive -export const UpIcon = styled(Img)` +export const UpIcon = styled(UpvoteIcon)` fill: ${({ $active }) => $active ? '#139B9D;' : theme('thread.articleDigest')}; diff --git a/src/containers/unit/Comments/List/Header.tsx b/src/containers/unit/Comments/List/Header.tsx index 41025fc0d..99fbd3169 100644 --- a/src/containers/unit/Comments/List/Header.tsx +++ b/src/containers/unit/Comments/List/Header.tsx @@ -1,6 +1,7 @@ import { FC, memo } from 'react' import { ICON } from '@/config' +import { SVG } from '@/constant' import { IconButton } from '@/components/Buttons' import { IconSwitcher } from '@/components/Switcher' @@ -50,7 +51,7 @@ const Header: FC = ({ totalCount, filterType }) => { = ({ totalCount, filterType }) => { {isAllFolded ? ( ) : ( diff --git a/tsconfig.json b/tsconfig.json index ad9520ef3..945b87b2c 100755 --- a/tsconfig.json +++ b/tsconfig.json @@ -31,7 +31,7 @@ "@/spec": ["src/spec"], "@/Img": ["src/components/Img"], "@/SvgIcons/*": ["src/components/SvgIcons/*"], - "@/Icons/*": ["src/components/Icons/*"], + "@/icons/*": ["src/components/Icons/*"], "@/i18n": ["i18n"] }, "plugins": [ diff --git a/utils/constant/svg.ts b/utils/constant/svg.ts index f0bae6c14..84804bb2b 100755 --- a/utils/constant/svg.ts +++ b/utils/constant/svg.ts @@ -10,6 +10,11 @@ const SVG = { // comment EMOTION: 'emotion', LOCK: 'lock', + TIMELINE_MODE: 'timeline_mode', + REPLY_MODE: 'reply_mode', + EXPAND: 'expand', + FOLD: 'fold', + // utils MORE: 'more', MOREL: 'more-l', From c1eef7cdb214ec6522c06a65f9dcd2846c056ff4 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Thu, 29 Jul 2021 15:28:58 +0800 Subject: [PATCH 03/15] build(size): reduce size by rm i18n && dynamic load --- server/index.js | 9 +++++---- src/containers/content/RecipesContent/FilterBar.js | 9 +++------ src/containers/layout/GlobalLayout/dynamic.tsx | 6 ++++++ src/containers/layout/GlobalLayout/index.tsx | 3 ++- src/pages/_app.tsx | 5 +++-- 5 files changed, 19 insertions(+), 13 deletions(-) diff --git a/server/index.js b/server/index.js index 3e8c4c12d..ecf65a677 100755 --- a/server/index.js +++ b/server/index.js @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ /** * * this server is only used for next.js SSR @@ -13,8 +14,8 @@ const mobxReact = require('mobx-react') // inspect graphql model const { express: voyagerMiddleware } = require('graphql-voyager/middleware') // i18n setup -const nextI18NextMiddleware = require('next-i18next/middleware').default -const nextI18next = require('../i18n') +// const nextI18NextMiddleware = require('next-i18next/middleware').default +// const nextI18next = require('../i18n') const app = require('./app') const { redirectToNakedUrl } = require('./helper') @@ -44,8 +45,8 @@ mobxReact.enableStaticRendering(true) voyagerMiddleware({ endpointUrl: CONFIG.GRAPHQL_ENDPOINT }), ) - await nextI18next.initPromise - server.use(nextI18NextMiddleware(nextI18next)) + // await nextI18next.initPromise + // server.use(nextI18NextMiddleware(nextI18next)) // eslint-disable-next-line global-require server.use('/', require('./routes')) diff --git a/src/containers/content/RecipesContent/FilterBar.js b/src/containers/content/RecipesContent/FilterBar.js index 89b12d12a..bd6eb63ab 100644 --- a/src/containers/content/RecipesContent/FilterBar.js +++ b/src/containers/content/RecipesContent/FilterBar.js @@ -2,7 +2,6 @@ import React from 'react' import { ICON_CMD } from '@/config' import { RECIPE } from '@/constant' -import { useTrans } from '@/hooks' import Sticky from '@/components/Sticky' import { OrButton } from '@/components/Buttons' @@ -26,8 +25,6 @@ import { import { topFilterOnChange, mainViewOnChange } from './logic' const FilterBar = ({ mainView, topFilter, initActiveMenuId }) => { - const { t } = useTrans() - return ( @@ -38,13 +35,13 @@ const FilterBar = ({ mainView, topFilter, initActiveMenuId }) => { testid="filter-navi-intro" /> {topFilter !== 'all' && ( - + )}