diff --git a/public/bg/CircleSapres.jpeg b/public/bg/CircleSapres.jpeg deleted file mode 100644 index 49a89429e..000000000 Binary files a/public/bg/CircleSapres.jpeg and /dev/null differ diff --git a/public/bg/Squares.png b/public/bg/Squares.png new file mode 100644 index 000000000..ec3937de6 Binary files /dev/null and b/public/bg/Squares.png differ diff --git a/public/bg/waves.png b/public/bg/waves.png new file mode 100644 index 000000000..218fdd1b6 Binary files /dev/null and b/public/bg/waves.png differ diff --git a/src/containers/content/ExploreContent/spec.ts b/src/containers/content/ExploreContent/spec.d.ts similarity index 100% rename from src/containers/content/ExploreContent/spec.ts rename to src/containers/content/ExploreContent/spec.d.ts diff --git a/src/containers/content/HaveADrinkContent/spec.ts b/src/containers/content/HaveADrinkContent/spec.d.ts similarity index 100% rename from src/containers/content/HaveADrinkContent/spec.ts rename to src/containers/content/HaveADrinkContent/spec.d.ts diff --git a/src/containers/content/HaveADrinkContent/styles/body/catalog.ts b/src/containers/content/HaveADrinkContent/styles/body/catalog.ts index 002278ac5..65ce3f9bc 100755 --- a/src/containers/content/HaveADrinkContent/styles/body/catalog.ts +++ b/src/containers/content/HaveADrinkContent/styles/body/catalog.ts @@ -3,7 +3,7 @@ import styled from 'styled-components' import type { TActive } from '@/spec' import Img from '@/Img' import css, { theme } from '@/utils/css' -import MoreSVG from '@/icons/More' +import MoreSVG from '@/icons/menu/More' import { Divider } from '@/widgets/Common' diff --git a/src/containers/content/HelpCenterContent/spec.ts b/src/containers/content/HelpCenterContent/spec.d.ts similarity index 100% rename from src/containers/content/HelpCenterContent/spec.ts rename to src/containers/content/HelpCenterContent/spec.d.ts diff --git a/src/containers/content/MembershipContent/spec.ts b/src/containers/content/MembershipContent/spec.d.ts similarity index 100% rename from src/containers/content/MembershipContent/spec.ts rename to src/containers/content/MembershipContent/spec.d.ts diff --git a/src/containers/digest/ArticleDigest/DesktopView/WorksLayout.tsx b/src/containers/digest/ArticleDigest/DesktopView/WorksLayout.tsx index 96bf37b35..c476ed198 100644 --- a/src/containers/digest/ArticleDigest/DesktopView/WorksLayout.tsx +++ b/src/containers/digest/ArticleDigest/DesktopView/WorksLayout.tsx @@ -13,7 +13,7 @@ import { WORKS_TAB, SVG, } from '@/constant' -import { shareTo, addCollection } from '@/utils/helper' +import { addCollection } from '@/utils/helper' import { buildLog } from '@/utils/logger' import ArticleBaseStats from '@/widgets/ArticleBaseStats' @@ -75,7 +75,7 @@ const WorksLayout: FC = ({ metric = METRIC.ARTICLE, article, tab }) => { size={18} onClick={() => addCollection()} /> - + diff --git a/src/containers/editor/AccountEditor/spec.ts b/src/containers/editor/AccountEditor/spec.d.ts similarity index 100% rename from src/containers/editor/AccountEditor/spec.ts rename to src/containers/editor/AccountEditor/spec.d.ts diff --git a/src/containers/editor/ArticleEditor/Footer.tsx b/src/containers/editor/ArticleEditor/Footer.tsx index db073d0ca..28b21d00f 100644 --- a/src/containers/editor/ArticleEditor/Footer.tsx +++ b/src/containers/editor/ArticleEditor/Footer.tsx @@ -45,7 +45,6 @@ const Footer: FC = ({ = ({ toStep('STEP_2')} - mTop={3} + top={3} /> )} diff --git a/src/containers/editor/BlogEditor/Content/TheRSSItem.tsx b/src/containers/editor/BlogEditor/Content/TheRSSItem.tsx index 57ae8b561..4ed23104c 100644 --- a/src/containers/editor/BlogEditor/Content/TheRSSItem.tsx +++ b/src/containers/editor/BlogEditor/Content/TheRSSItem.tsx @@ -9,10 +9,10 @@ import IconButton from '@/widgets/Buttons/IconButton' import { Wrapper, Title, Subtitle } from '../styles/content/rss_item' import { toStep } from '../logic' -type TProps = TSpace & { +type TProps = { rssInfo: TBlogRSS readonly?: boolean -} +} & TSpace const RSSItem: FC = ({ rssInfo, readonly = false, ...restProps }) => { return ( diff --git a/src/containers/editor/BlogEditor/Footer.tsx b/src/containers/editor/BlogEditor/Footer.tsx index 4f5f76923..43f365f1d 100644 --- a/src/containers/editor/BlogEditor/Footer.tsx +++ b/src/containers/editor/BlogEditor/Footer.tsx @@ -25,7 +25,6 @@ const Footer: FC = ({ community, tags, submitState, mode }) => { {mode === 'publish' && ( { placement="bottom-end" onClick={console.log} > - + ) } diff --git a/src/containers/editor/WorksEditor/Footer.tsx b/src/containers/editor/WorksEditor/Footer.tsx index 6a4b92f09..683307307 100644 --- a/src/containers/editor/WorksEditor/Footer.tsx +++ b/src/containers/editor/WorksEditor/Footer.tsx @@ -53,7 +53,6 @@ const Footer: FC = ({ step, inputData, submitState, mode }) => { { useEffect(() => logBuddha(), []) @@ -17,7 +17,6 @@ const Addon: FC = () => { {/* @ts-ignore */} {/* @ts-ignore */} - {!isMobile && } {/* @ts-ignore */} {!isMobile && } {/* @ts-ignore */} diff --git a/src/containers/layout/GlobalLayout/CustomBg.tsx b/src/containers/layout/GlobalLayout/CustomBg.tsx index 8ff78069d..bbd7402bd 100644 --- a/src/containers/layout/GlobalLayout/CustomBg.tsx +++ b/src/containers/layout/GlobalLayout/CustomBg.tsx @@ -75,7 +75,7 @@ const ComstomBg: FC = () => { bgColor: '#050139', // backgroundBg or fallback }, k: { - bgImage: '/bg/CircleSapres.jpeg', + bgImage: '/bg/Squares.png', }, m: { bgImage: '/bg/Antiquitarian.jpeg', @@ -90,9 +90,14 @@ const ComstomBg: FC = () => { bgImage: '/bg/space.svg', bgColor: '#002630', // backgroundBg }, + y: { + bgImage: '/bg/waves.png', + }, } - const effect: TBackgroundEffect = effects.l + // e, h, + // y, g + const effect = effects.g // for linear/solid background colors if (isString(effect)) { @@ -100,6 +105,7 @@ const ComstomBg: FC = () => { return } + // @ts-ignore const { bgImage, bgColor = '', bgSize = 'contain' } = effect // for custom image/svg diff --git a/src/containers/layout/ThemePalette/GlobalStyle.ts b/src/containers/layout/ThemePalette/GlobalStyle.ts index 2257c09b1..7f59bb771 100755 --- a/src/containers/layout/ThemePalette/GlobalStyle.ts +++ b/src/containers/layout/ThemePalette/GlobalStyle.ts @@ -39,13 +39,25 @@ const GlobalStyle = createGlobalStyle` background-color: ${theme('toast.bg')} !important; min-height: 36px !important; padding: 2px 45px 0px 0 !important; + box-shadow: none; + + &:after { + box-shadow: ${theme('toast.boxShadow')}; + } + } + /* make sure the toast will not show in custom bg */ + .iziToast-wrapper { + align-items: center; + } + .iziToast-capsule { + /* general content page width, adjuust if need */ + max-width: 1380px; + padding-left: 30px; + padding-right: 30px; } .iziToast > .iziToast-body .iziToast-title { color: ${theme('toast.title')} !important; } - .iziToast-wrapper-topRight { - top: 25px !important; - } .iziToast > .iziToast-body .iziToast-message { color: ${theme('toast.message')} !important; } diff --git a/src/containers/thread/KanbanThread/index.tsx b/src/containers/thread/KanbanThread/index.tsx index c0e3395fe..56bee5672 100644 --- a/src/containers/thread/KanbanThread/index.tsx +++ b/src/containers/thread/KanbanThread/index.tsx @@ -54,7 +54,7 @@ const KanbanThreadContainer: FC = ({ {getRandomInt(5, 20)} - + @@ -71,7 +71,7 @@ const KanbanThreadContainer: FC = ({ {getRandomInt(5, 20)} - + @@ -88,7 +88,7 @@ const KanbanThreadContainer: FC = ({ {getRandomInt(5, 20)} - + diff --git a/src/containers/tool/AbuseReport/spec.ts b/src/containers/tool/AbuseReport/spec.d.ts similarity index 100% rename from src/containers/tool/AbuseReport/spec.ts rename to src/containers/tool/AbuseReport/spec.d.ts diff --git a/src/containers/tool/ArticleSticker/LeftSticker/index.tsx b/src/containers/tool/ArticleSticker/LeftSticker/index.tsx index dd0d11cda..22c7c10c1 100644 --- a/src/containers/tool/ArticleSticker/LeftSticker/index.tsx +++ b/src/containers/tool/ArticleSticker/LeftSticker/index.tsx @@ -2,17 +2,15 @@ import { FC } from 'react' import type { TArticle } from '@/spec' -import { SVG } from '@/constant' -import { shareTo } from '@/utils/helper' -import IconButton from '@/widgets/Buttons/IconButton' +import Share from '@/containers/tool/Share' import Upvote from '@/widgets/Upvote' import { Wrapper, InnerWrapper, - BackWrapper, - ArrowIcon, - BackText, + // BackWrapper, + // ArrowIcon, + // BackText, Divider, } from '../styles/left_sticker' import { handleUpvote } from '../logic' @@ -46,7 +44,7 @@ const LeftSticker: FC = ({ onAction={handleUpvote} /> - + ) diff --git a/src/containers/tool/ArticleSticker/styles/left_sticker/index.ts b/src/containers/tool/ArticleSticker/styles/left_sticker/index.ts index ee2d0d95c..b1ba2005e 100644 --- a/src/containers/tool/ArticleSticker/styles/left_sticker/index.ts +++ b/src/containers/tool/ArticleSticker/styles/left_sticker/index.ts @@ -18,7 +18,7 @@ export const Wrapper = styled(FadeToggle).attrs(({ testid }: TTestable) => ({ font-size: 13px; ${css.media.desktopL` - left: 18%; + left: 22%; `} ${css.media.laptopL` diff --git a/src/containers/tool/Cashier/spec.ts b/src/containers/tool/Cashier/spec.d.ts similarity index 100% rename from src/containers/tool/Cashier/spec.ts rename to src/containers/tool/Cashier/spec.d.ts diff --git a/src/containers/tool/CommunityTagSetter/CommunitySetter/Header.tsx b/src/containers/tool/CommunityTagSetter/CommunitySetter/Header.tsx index 6b4e434e8..453531329 100644 --- a/src/containers/tool/CommunityTagSetter/CommunitySetter/Header.tsx +++ b/src/containers/tool/CommunityTagSetter/CommunitySetter/Header.tsx @@ -21,7 +21,6 @@ const Header: FC = ({ view, texts }) => { = ({ view, texts }) => { = ({ view }) => { = ({ view }) => { = ({ view }) => { = ({ view }) => { = ({ tag, view, checked, onTagSelect }) => { {updateable && ( { changeTagView(TAG_VIEW.UPDATE_ITEM) }} diff --git a/src/containers/tool/CommunityTagSetter/spec.ts b/src/containers/tool/CommunityTagSetter/spec.d.ts similarity index 100% rename from src/containers/tool/CommunityTagSetter/spec.ts rename to src/containers/tool/CommunityTagSetter/spec.d.ts diff --git a/src/containers/tool/Drawer/AddOn/CloseButton.tsx b/src/containers/tool/Drawer/AddOn/CloseButton.tsx index 548f4371c..e40f89763 100644 --- a/src/containers/tool/Drawer/AddOn/CloseButton.tsx +++ b/src/containers/tool/Drawer/AddOn/CloseButton.tsx @@ -5,13 +5,7 @@ import { closeDrawer } from '../logic' const CloseButton: FC = () => { return ( - + ) } diff --git a/src/containers/tool/Drawer/AddOn/ShareButton.tsx b/src/containers/tool/Drawer/AddOn/ShareButton.tsx deleted file mode 100644 index d53e7b913..000000000 --- a/src/containers/tool/Drawer/AddOn/ShareButton.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { FC, memo } from 'react' - -import { shareTo } from '@/utils/helper' -import IconButton from '@/widgets/Buttons/IconButton' - -const ShareButton: FC = () => { - return ( - shareTo('50%')} - path="article/share.svg" - size={15} - mTop={9} - mRight={14} - mLeft={12} - hint="分享内容" - hintPlacement="bottom" - dimWhenIdle - /> - ) -} - -export default memo(ShareButton) diff --git a/src/containers/tool/Drawer/AddOn/index.tsx b/src/containers/tool/Drawer/AddOn/index.tsx index 1f327e8fa..e386ac29a 100755 --- a/src/containers/tool/Drawer/AddOn/index.tsx +++ b/src/containers/tool/Drawer/AddOn/index.tsx @@ -6,8 +6,8 @@ import ArticleNavi from './ArticleNavi' import type { TArticleNavi } from '../spec' import { ARTICLE_VIEWER_TYPES } from '../constant' +import Share from '@/containers/tool/Share' import CloseButton from './CloseButton' -import ShareButton from './ShareButton' import { Wrapper, TopArea } from '../styles/add_on' type TProps = { @@ -23,7 +23,7 @@ const AddOn: FC = ({ type, articleNavi }) => { - {showShare && } + {showShare && } {showArticleNavi && } diff --git a/src/containers/tool/Drawer/Content/DesktopView.tsx b/src/containers/tool/Drawer/Content/DesktopView.tsx index f872822e2..c5659b1c7 100644 --- a/src/containers/tool/Drawer/Content/DesktopView.tsx +++ b/src/containers/tool/Drawer/Content/DesktopView.tsx @@ -32,7 +32,7 @@ const Content: FC = ({ visible, type, attUser, userListerType }) => { instanceKey={DRAWER_SCROLLER} direction="vertical" height="100vh" - shadowSize="small" + barSize="medium" showShadow={false} > {renderContent(type, attUser, userListerType)} diff --git a/src/containers/tool/Drawer/spec.ts b/src/containers/tool/Drawer/spec.d.ts similarity index 100% rename from src/containers/tool/Drawer/spec.ts rename to src/containers/tool/Drawer/spec.d.ts diff --git a/src/containers/tool/Drawer/styles/add_on/index.ts b/src/containers/tool/Drawer/styles/add_on/index.ts index 66ad4c010..0ca70d507 100755 --- a/src/containers/tool/Drawer/styles/add_on/index.ts +++ b/src/containers/tool/Drawer/styles/add_on/index.ts @@ -25,7 +25,6 @@ export const TopArea = styled.div<{ showShare: boolean }>` ${css.flexColumn('align-both')} padding-left: 12px; z-index: 100000; - transform: rotate(2deg); &:before { content: ''; diff --git a/src/containers/tool/Share/IFrameBoard.tsx b/src/containers/tool/Share/Panel/IFrameBoard.tsx similarity index 94% rename from src/containers/tool/Share/IFrameBoard.tsx rename to src/containers/tool/Share/Panel/IFrameBoard.tsx index 08a78790d..0e7422579 100644 --- a/src/containers/tool/Share/IFrameBoard.tsx +++ b/src/containers/tool/Share/Panel/IFrameBoard.tsx @@ -8,7 +8,7 @@ import { Title, CodeWrapper, Inputer, -} from './styles/iframe_board' +} from '../styles/panel/iframe_board' const IFrameBoard: FC = () => { const code = diff --git a/src/containers/tool/Share/InfoPanel.tsx b/src/containers/tool/Share/Panel/InfoPanel.tsx similarity index 83% rename from src/containers/tool/Share/InfoPanel.tsx rename to src/containers/tool/Share/Panel/InfoPanel.tsx index 44eb91623..ef81442aa 100644 --- a/src/containers/tool/Share/InfoPanel.tsx +++ b/src/containers/tool/Share/Panel/InfoPanel.tsx @@ -1,13 +1,14 @@ import { FC, memo } from 'react' -import { SITE_SHARE_TYPE } from './constant' +import { SITE_SHARE_TYPE } from '../constant' + +import type { TLinksData } from '../spec' import LinkBoard from './LinkBoard' import IFrameBoard from './IFrameBoard' import WechatBoard from './WechatBoard' -import { Wrapper } from './styles/info_panel' -import type { TLinksData } from './store' +import { Wrapper } from '../styles/panel/info_panel' type TProps = { type: string diff --git a/src/containers/tool/Share/LinkBoard.tsx b/src/containers/tool/Share/Panel/LinkBoard.tsx similarity index 94% rename from src/containers/tool/Share/LinkBoard.tsx rename to src/containers/tool/Share/Panel/LinkBoard.tsx index d58472a5c..7525d70b1 100644 --- a/src/containers/tool/Share/LinkBoard.tsx +++ b/src/containers/tool/Share/Panel/LinkBoard.tsx @@ -1,7 +1,7 @@ import { FC, memo, Fragment, useState } from 'react' import CopyButton from '@/widgets/Buttons/CopyButton' -import type { TLinksData } from './store' +import type { TLinksData } from '../spec' import { Header, @@ -9,7 +9,7 @@ import { TabName, BoxWrapper, Inputer, -} from './styles/link_board' +} from '../styles/panel/link_board' type TProps = { linksData: TLinksData diff --git a/src/containers/tool/Share/Platforms.tsx b/src/containers/tool/Share/Panel/Platforms.tsx similarity index 94% rename from src/containers/tool/Share/Platforms.tsx rename to src/containers/tool/Share/Panel/Platforms.tsx index 63d6f801b..a1b66382f 100644 --- a/src/containers/tool/Share/Platforms.tsx +++ b/src/containers/tool/Share/Panel/Platforms.tsx @@ -3,7 +3,7 @@ import { FC, memo } from 'react' import { ICON } from '@/config' import type { TArticle } from '@/spec' -import { SHARE_TYPE } from './constant' +import { SHARE_TYPE } from '../constant' import { Wrapper, Header, @@ -14,8 +14,8 @@ import { Logo, LogoWrapper, Title, -} from './styles/platform' -import { toPlatform } from './logic' +} from '../styles/panel/platform' +import { toPlatform } from '../logic' const medias = [ { diff --git a/src/containers/tool/Share/WechatBoard.tsx b/src/containers/tool/Share/Panel/WechatBoard.tsx similarity index 93% rename from src/containers/tool/Share/WechatBoard.tsx rename to src/containers/tool/Share/Panel/WechatBoard.tsx index dfce8de5e..6a47061c1 100644 --- a/src/containers/tool/Share/WechatBoard.tsx +++ b/src/containers/tool/Share/Panel/WechatBoard.tsx @@ -1,12 +1,12 @@ import { FC, memo } from 'react' - import QRCode from 'qrcode.react' + import { Wrapper, QRCodeWrapper, DescTitle, DescWrapper, -} from './styles/wechat_board' +} from '../styles/panel/wechat_board' const WechatBoard: FC = () => { return ( diff --git a/src/containers/tool/Share/Panel/index.tsx b/src/containers/tool/Share/Panel/index.tsx new file mode 100644 index 000000000..616620139 --- /dev/null +++ b/src/containers/tool/Share/Panel/index.tsx @@ -0,0 +1,69 @@ +/* + * Share + */ + +import { FC, Fragment, memo } from 'react' +import { isMobile } from 'react-device-detect' + +import type { TArticle } from '@/spec' +import { buildLog } from '@/utils/logger' + +import Modal from '@/widgets/Modal' + +import type { TLinksData } from '../spec' +import Platforms from './Platforms' +import InfoPanel from './InfoPanel' + +import { Wrapper } from '../styles/panel' +import { close } from '../logic' + +/* eslint-disable-next-line */ +const log = buildLog('C:Share') + +type TProps = { + show: boolean + offsetLeft: string + siteShareType: string + linksData: TLinksData + article: TArticle + testid?: string +} + +const SharePanel: FC = ({ + show, + offsetLeft, + siteShareType, + linksData, + article, + testid = 'share-panel', +}) => { + if (isMobile) { + return ( + + + + + + + ) + } + + return ( + + + + + + + + + ) +} + +export default memo(SharePanel) diff --git a/src/containers/tool/Share/constant.ts b/src/containers/tool/Share/constant.ts index 757a23072..d8a4d48b0 100644 --- a/src/containers/tool/Share/constant.ts +++ b/src/containers/tool/Share/constant.ts @@ -18,3 +18,10 @@ export const SHARE_TYPE = { ...SITE_SHARE_TYPE, ...OUTSIDE_SHARE_TYPE, } + +export const MENU = { + COPY_LINK: 'copy-link', + EMAIL: OUTSIDE_SHARE_TYPE.EMAIL, + WECHAT: OUTSIDE_SHARE_TYPE.WECHAT, + MORE: 'more', +} diff --git a/src/containers/tool/Share/index.tsx b/src/containers/tool/Share/index.tsx index 3a7b795d3..2eb17202e 100755 --- a/src/containers/tool/Share/index.tsx +++ b/src/containers/tool/Share/index.tsx @@ -2,20 +2,20 @@ * Share */ -import { FC, Fragment } from 'react' -import { isMobile } from 'react-device-detect' +import { FC, Fragment, useState, useEffect } from 'react' +import dynamic from 'next/dynamic' import { buildLog } from '@/utils/logger' import { bond } from '@/utils/mobx' -import Modal from '@/widgets/Modal' +import { TSpace } from '@/spec' +import { SVG } from '@/constant' -import Platforms from './Platforms' -import InfoPanel from './InfoPanel' +import MenuButton from '@/widgets/Buttons/MenuButton' +import IconButton from '@/widgets/Buttons/IconButton' import type { TStore } from './store' -import { Wrapper } from './styles' -import { useInit, close } from './logic' +import { useInit, handleMenu } from './logic' /* eslint-disable-next-line */ const log = buildLog('C:Share') @@ -23,36 +23,45 @@ const log = buildLog('C:Share') type TProps = { share?: TStore testid?: string -} + size?: number + offsetLeft?: string +} & TSpace + +let Panel = null -const ShareContainer: FC = ({ share: store, testid }) => { +const ShareContainer: FC = ({ + share: store, + testid = 'share', + offsetLeft = 'none', + ...restProps +}) => { useInit(store) - const { show, offsetLeft, siteShareType, linksData, viewingArticle } = store - if (isMobile) { - return ( - - - - - - - ) - } + + const { show, menuOptions, siteShareType, linksData, viewingArticle } = store + const [panelLoad, setPanelLoad] = useState(false) + + useEffect(() => { + if (show) { + Panel = dynamic(() => import('./Panel'), { ssr: false }) + setPanelLoad(true) + } + }, [show, panelLoad]) return ( - - - - - - + + + + + {panelLoad && ( + + )} ) } diff --git a/src/containers/tool/Share/logic.ts b/src/containers/tool/Share/logic.ts index 57c8cca56..6e67b2e4e 100755 --- a/src/containers/tool/Share/logic.ts +++ b/src/containers/tool/Share/logic.ts @@ -1,20 +1,18 @@ import { useEffect } from 'react' -// import { } from 'ramda' +import copy from 'copy-to-clipboard' import asyncSuit from '@/utils/async' -import { openShareWindow } from '@/utils/helper' +import { openShareWindow, toast } from '@/utils/helper' import { buildLog } from '@/utils/logger' -import { EVENT } from '@/constant' -import { SHARE_TYPE } from './constant' +import { SHARE_TYPE, MENU } from './constant' +import type { TMenu } from './spec' // import S from './schma' import type { TStore } from './store' -const { SR71, $solver, asyncRes } = asyncSuit +const { SR71, $solver } = asyncSuit -const sr71$ = new SR71({ - receive: EVENT.SHARE, -}) +const sr71$ = new SR71() let store: TStore | undefined let sub$ = null @@ -66,6 +64,31 @@ export const toPlatform = (type: string): void => { } } +export const handleMenu = (key: TMenu): void => { + const { linksData } = store + switch (key) { + case MENU.COPY_LINK: { + copy(linksData.link) + toast('success', '已复制到剪切板', '' as string, 'topCenter', 2000) + return + } + + case MENU.MORE: { + store.mark({ show: true, offsetLeft: '50%' }) + return + } + + case MENU.EMAIL: { + return toPlatform(SHARE_TYPE.EMAIL) + } + + default: { + // eslint-disable-next-line no-useless-return + return + } + } +} + export const close = (): void => { store.mark({ show: false, siteShareType: SHARE_TYPE.LINKS }) } @@ -74,15 +97,7 @@ export const close = (): void => { // init & uninit handlers // ############################### -const DataResolver = [ - { - match: asyncRes(EVENT.SHARE), - action: (data) => { - const payload = data[EVENT.SHARE] - store.mark({ show: true, offsetLeft: payload.offsetLeft }) - }, - }, -] +const DataResolver = [] export const useInit = (_store: TStore): void => { useEffect(() => { diff --git a/src/containers/tool/Share/spec.d.ts b/src/containers/tool/Share/spec.d.ts new file mode 100644 index 000000000..ceade3ca1 --- /dev/null +++ b/src/containers/tool/Share/spec.d.ts @@ -0,0 +1,14 @@ +export type TLinksData = { + link: string + html: string + md: string + orgMode: string +} + +export type TShareData = { + url: string + title: string + digest: string +} + +export type TMenu = 'copy-link' | 'email' | 'wechat' | 'more' diff --git a/src/containers/tool/Share/store.ts b/src/containers/tool/Share/store.ts index 532c0917a..5c0dfeae2 100755 --- a/src/containers/tool/Share/store.ts +++ b/src/containers/tool/Share/store.ts @@ -6,32 +6,27 @@ import { types as T, getParent, Instance } from 'mobx-state-tree' import { values } from 'ramda' import { SITE_URL_SHORT } from '@/config' -import { THREAD } from '@/constant' -import type { TArticle, TCommunity, TRootStore, TThread } from '@/spec' +import { SVG, THREAD } from '@/constant' + +import type { + TArticle, + TCommunity, + TRootStore, + TThread, + TMenuOption, +} from '@/spec' + import { markStates, toJS } from '@/utils/mobx' import { buildLog } from '@/utils/logger' -import { SITE_SHARE_TYPE } from './constant' +import type { TLinksData, TShareData } from './spec' +import { SITE_SHARE_TYPE, MENU } from './constant' /* eslint-disable-next-line */ const log = buildLog('S:Share') -export type TShareData = { - url: string - title: string - digest: string -} - -export type TLinksData = { - link: string - html: string - md: string - orgMode: string -} - const Share = T.model('Share', { show: T.optional(T.boolean, false), - offsetLeft: T.optional(T.string, 'none'), siteShareType: T.optional( T.enumeration(values(SITE_SHARE_TYPE)), SITE_SHARE_TYPE.LINKS, @@ -76,6 +71,34 @@ const Share = T.model('Share', { orgMode: `[[${link}][${articleTitle}]]`, } }, + get menuOptions(): TMenuOption[] { + const slf = self as TStore + const { linksData } = slf + + return [ + { + key: MENU.COPY_LINK, + icon: SVG.COPY, + title: '复制地址', + }, + { + key: MENU.EMAIL, + icon: SVG.EMAIL, + title: 'Email', + }, + { + key: MENU.WECHAT, + icon: SVG.WECHAT, + title: '微信', + qrLink: linksData.link, + }, + { + key: MENU.MORE, + icon: SVG.MOREL_DOT, + title: '更多', + }, + ] + }, get curCommunity(): TCommunity { const root = getParent(self) as TRootStore diff --git a/src/containers/tool/Share/styles/iframe_board.ts b/src/containers/tool/Share/styles/panel/iframe_board.ts similarity index 100% rename from src/containers/tool/Share/styles/iframe_board.ts rename to src/containers/tool/Share/styles/panel/iframe_board.ts diff --git a/src/containers/tool/Share/styles/panel/index.ts b/src/containers/tool/Share/styles/panel/index.ts new file mode 100644 index 000000000..d044b6ff1 --- /dev/null +++ b/src/containers/tool/Share/styles/panel/index.ts @@ -0,0 +1,18 @@ +import styled from 'styled-components' + +import type { TTestable } from '@/spec' +import css from '@/utils/css' + +type TWrapper = { type: string } & TTestable + +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` + ${css.flexColumn('justify-between')}; + height: auto; + + ${css.media.mobile` + width: 100%; + `}; +` +export const Title = styled.div`` diff --git a/src/containers/tool/Share/styles/info_panel.ts b/src/containers/tool/Share/styles/panel/info_panel.ts similarity index 91% rename from src/containers/tool/Share/styles/info_panel.ts rename to src/containers/tool/Share/styles/panel/info_panel.ts index 5cd6f115d..b8c2e3196 100644 --- a/src/containers/tool/Share/styles/info_panel.ts +++ b/src/containers/tool/Share/styles/panel/info_panel.ts @@ -2,7 +2,7 @@ import styled from 'styled-components' import css, { theme } from '@/utils/css' -import { getInfoPanelHeight } from './metric' +import { getInfoPanelHeight } from '../metric' export const Wrapper = styled.div<{ type: string }>` padding: 20px 40px; diff --git a/src/containers/tool/Share/styles/link_board.ts b/src/containers/tool/Share/styles/panel/link_board.ts similarity index 100% rename from src/containers/tool/Share/styles/link_board.ts rename to src/containers/tool/Share/styles/panel/link_board.ts diff --git a/src/containers/tool/Share/styles/platform.ts b/src/containers/tool/Share/styles/panel/platform.ts similarity index 100% rename from src/containers/tool/Share/styles/platform.ts rename to src/containers/tool/Share/styles/panel/platform.ts diff --git a/src/containers/tool/Share/styles/wechat_board.ts b/src/containers/tool/Share/styles/panel/wechat_board.ts similarity index 100% rename from src/containers/tool/Share/styles/wechat_board.ts rename to src/containers/tool/Share/styles/panel/wechat_board.ts diff --git a/src/containers/unit/Comments/Comment/DesktopView/FoldLayout.tsx b/src/containers/unit/Comments/Comment/DesktopView/FoldLayout.tsx index 494fcfec1..98cee5001 100644 --- a/src/containers/unit/Comments/Comment/DesktopView/FoldLayout.tsx +++ b/src/containers/unit/Comments/Comment/DesktopView/FoldLayout.tsx @@ -34,8 +34,8 @@ const FoldLayout: FC = ({ data }) => { = ({ )} @@ -88,16 +88,16 @@ const Header: FC = ({ size={13} hint="展开全部" active - {...actionIconConfig} onClick={expandAllComments} + {...actionIconConfig} /> ) : ( )} {apiMode === API_MODE.ARTICLE && ( diff --git a/src/containers/unit/Comments/spec.ts b/src/containers/unit/Comments/spec.d.ts similarity index 100% rename from src/containers/unit/Comments/spec.ts rename to src/containers/unit/Comments/spec.d.ts diff --git a/src/containers/unit/Footer/ContactList.tsx b/src/containers/unit/Footer/ContactList.tsx index 609046fc0..3bda1fda2 100755 --- a/src/containers/unit/Footer/ContactList.tsx +++ b/src/containers/unit/Footer/ContactList.tsx @@ -14,7 +14,7 @@ const SocialList: FC = () => ( joinUS()}> - + diff --git a/src/containers/unit/Footer/styles/contact_list.ts b/src/containers/unit/Footer/styles/contact_list.ts index 8f01dc46f..e39d9a49b 100755 --- a/src/containers/unit/Footer/styles/contact_list.ts +++ b/src/containers/unit/Footer/styles/contact_list.ts @@ -4,7 +4,7 @@ import css, { theme } from '@/utils/css' import GithubSVG from '@/icons/GithubCat' import EmailSVG from '@/icons/social/Email' -import WeiChatSVG from '@/icons/social/WeiChat' +import WeChatSVG from '@/widgets/Icons/social/WeChat' export const Wrapper = styled.div` ${css.flex()}; @@ -25,7 +25,7 @@ const Email = styled(EmailSVG)` ${icon}; fill: ${theme('footer.text')}; ` -const WeiChat = styled(WeiChatSVG)` +const WeChat = styled(WeChatSVG)` ${icon}; fill: ${theme('footer.text')}; ` @@ -35,6 +35,6 @@ const Github = styled(GithubSVG)` ` export const Icon = { Email, - WeiChat, + WeChat, Github, } diff --git a/src/containers/unit/ModeLineMenu/spec.ts b/src/containers/unit/ModeLineMenu/spec.d.ts similarity index 100% rename from src/containers/unit/ModeLineMenu/spec.ts rename to src/containers/unit/ModeLineMenu/spec.d.ts diff --git a/src/containers/unit/TagsBar/styles/desktop_view/folder.ts b/src/containers/unit/TagsBar/styles/desktop_view/folder.ts index 33262a195..4ddc22ab8 100644 --- a/src/containers/unit/TagsBar/styles/desktop_view/folder.ts +++ b/src/containers/unit/TagsBar/styles/desktop_view/folder.ts @@ -3,7 +3,7 @@ import styled from 'styled-components' import { TActive } from '@/spec' import css, { theme } from '@/utils/css' import ArrowSVG from '@/icons/ArrowSimple' -import MoreSVG from '@/icons/MoreL' +import MoreSVG from '@/icons/menu/MoreL' export const Wrapper = styled.div`` export const Header = styled.div` diff --git a/src/containers/viewer/ArticleViewer/WorksViewer/Header.tsx b/src/containers/viewer/ArticleViewer/WorksViewer/Header.tsx index 373fad1e7..cdc33f479 100644 --- a/src/containers/viewer/ArticleViewer/WorksViewer/Header.tsx +++ b/src/containers/viewer/ArticleViewer/WorksViewer/Header.tsx @@ -52,7 +52,7 @@ const Header: FC = ({ article }) => { ))} diff --git a/src/spec/account.ts b/src/spec/account.d.ts similarity index 100% rename from src/spec/account.ts rename to src/spec/account.d.ts diff --git a/src/spec/article.ts b/src/spec/article.d.ts similarity index 100% rename from src/spec/article.ts rename to src/spec/article.d.ts diff --git a/src/spec/c11n.ts b/src/spec/c11n.d.ts similarity index 100% rename from src/spec/c11n.ts rename to src/spec/c11n.d.ts diff --git a/src/spec/community.ts b/src/spec/community.d.ts similarity index 100% rename from src/spec/community.ts rename to src/spec/community.d.ts diff --git a/src/spec/comp.ts b/src/spec/comp.d.ts similarity index 100% rename from src/spec/comp.ts rename to src/spec/comp.d.ts diff --git a/src/spec/emotion.ts b/src/spec/emotion.d.ts similarity index 100% rename from src/spec/emotion.ts rename to src/spec/emotion.d.ts diff --git a/src/spec/enhance.ts b/src/spec/enhance.d.ts similarity index 100% rename from src/spec/enhance.ts rename to src/spec/enhance.d.ts diff --git a/src/spec/gallery.ts b/src/spec/gallery.d.ts similarity index 100% rename from src/spec/gallery.ts rename to src/spec/gallery.d.ts diff --git a/src/spec/graphql.ts b/src/spec/graphql.d.ts similarity index 100% rename from src/spec/graphql.ts rename to src/spec/graphql.d.ts diff --git a/src/spec/index.ts b/src/spec/index.ts index c7aeeb498..ccadf74ae 100644 --- a/src/spec/index.ts +++ b/src/spec/index.ts @@ -81,6 +81,7 @@ export type { TASState, TTagMode, TMenuOption, + TToastOption, } from './utils' export type { TGQLError } from './graphql' diff --git a/src/spec/metric.ts b/src/spec/metric.d.ts similarity index 100% rename from src/spec/metric.ts rename to src/spec/metric.d.ts diff --git a/src/spec/size.ts b/src/spec/size.d.ts similarity index 100% rename from src/spec/size.ts rename to src/spec/size.d.ts diff --git a/src/spec/store.ts b/src/spec/store.d.ts similarity index 100% rename from src/spec/store.ts rename to src/spec/store.d.ts diff --git a/src/spec/theme.ts b/src/spec/theme.d.ts similarity index 100% rename from src/spec/theme.ts rename to src/spec/theme.d.ts diff --git a/src/spec/thread.ts b/src/spec/thread.d.ts similarity index 100% rename from src/spec/thread.ts rename to src/spec/thread.d.ts diff --git a/src/spec/utils.ts b/src/spec/utils.d.ts similarity index 92% rename from src/spec/utils.ts rename to src/spec/utils.d.ts index 8a58d7661..f9714b03d 100644 --- a/src/spec/utils.ts +++ b/src/spec/utils.d.ts @@ -156,9 +156,6 @@ export type TTechStackCategory = export type TCommunitySetterStyle = 'normal' | TTechStackCategory -export type TToastType = 'info' | 'error' -export type TToastPos = 'topCenter' - export type TUserActivity = { id?: TID insertedAt?: string @@ -198,4 +195,17 @@ export type TMenuOption = { key: string icon?: string link?: string + qrLink?: string +} + +export type TToastType = 'info' | 'error' | 'success' +export type TToastPos = 'topCenter' | 'topRight' + +export type TToastOption = { + title: string + msg?: string + message?: string + progressBarColor?: string + position?: TToastPos + duration?: number } diff --git a/src/stores/RootStore/index.ts b/src/stores/RootStore/index.ts index 4ea00e252..ad803a665 100755 --- a/src/stores/RootStore/index.ts +++ b/src/stores/RootStore/index.ts @@ -9,9 +9,9 @@ import { types as T, Instance } from 'mobx-state-tree' import { merge, pickBy } from 'ramda' -import type { TAccount, TRoute, TThread, TArticle } from '@/spec' +import type { TAccount, TRoute, TThread, TArticle, TToastOption } from '@/spec' -import { EVENT } from '@/constant' +import { EVENT, DEFAULT_TOAST_OPTIONS } from '@/constant' import { markStates } from '@/utils/mobx' import { toast, toastBarColor } from '@/utils/toast' import { themeSkins } from '@/utils/themes' @@ -260,11 +260,14 @@ const rootStore = T.model({ self.footer.closeSponsor() self.cashier.callCashier(opt) }, - toast(type, options = {}): void { + toast(type, options: TToastOption = DEFAULT_TOAST_OPTIONS): void { const themeData = themeSkins[self.theme.curTheme] const progressBarColor = toastBarColor(type, themeData) - const toastOpt = merge(options, { progressBarColor }) + const toastOpt = merge(options, { + progressBarColor, + duration: options.duration || 3000, + }) toast[type](toastOpt) }, authWarning(options = {}): void { diff --git a/src/stores/ThemeStore/index.ts b/src/stores/ThemeStore/index.ts index 9a11d152e..cbd8aa1ac 100755 --- a/src/stores/ThemeStore/index.ts +++ b/src/stores/ThemeStore/index.ts @@ -6,7 +6,7 @@ import { types as T, getParent, Instance } from 'mobx-state-tree' import { keys, merge } from 'ramda' -import type { TRootStore, TThemeName, TMembership } from '@/spec' +import type { TRootStore, TThemeName, TMembership, TToastOption } from '@/spec' import { DEFAULT_THEME } from '@/config' import { markStates } from '@/utils/mobx' @@ -47,7 +47,10 @@ export const ThemeStore = T.model('ThemeStore', { title: '保存主题设置失败', msg: '仅支持高级会员以打赏用户', } - root.toast('warn', merge({ position: 'topCenter' }, options)) + root.toast( + 'warn', + merge({ position: 'topCenter' }, options) as TToastOption, + ) }, changeTheme(name: TThemeName): void { self.curTheme = name diff --git a/src/widgets/ArticleCard/Header.tsx b/src/widgets/ArticleCard/Header.tsx index 603a23fb1..f2af2a50a 100644 --- a/src/widgets/ArticleCard/Header.tsx +++ b/src/widgets/ArticleCard/Header.tsx @@ -39,11 +39,7 @@ const Header: FC = ({ data, thread }) => {
{cutRest(title, 100)}
- + ) } @@ -53,11 +49,7 @@ const Header: FC = ({ data, thread }) => { return ( - +
{!isMobile && ( diff --git a/src/widgets/ArticlesFilter/styles/search_box.ts b/src/widgets/ArticlesFilter/styles/search_box.ts index 84996a789..51ef81756 100644 --- a/src/widgets/ArticlesFilter/styles/search_box.ts +++ b/src/widgets/ArticlesFilter/styles/search_box.ts @@ -4,7 +4,7 @@ import css, { theme } from '@/utils/css' import Input from '@/widgets/Input' import SearchSVG from '@/icons/HeaderSearch' -import CloseSVG from '@/icons/CloseCross' +import CloseSVG from '@/widgets/Icons/CloseCross' export const Wrapper = styled.div` ${css.flex('align-center')}; diff --git a/src/widgets/AvatarsRow/spec.ts b/src/widgets/AvatarsRow/spec.d.ts similarity index 100% rename from src/widgets/AvatarsRow/spec.ts rename to src/widgets/AvatarsRow/spec.d.ts diff --git a/src/widgets/Buttons/CopyButton/Animate.tsx b/src/widgets/Buttons/CopyButton/Animate.tsx index 581f634f1..7a6bf7eef 100644 --- a/src/widgets/Buttons/CopyButton/Animate.tsx +++ b/src/widgets/Buttons/CopyButton/Animate.tsx @@ -24,7 +24,7 @@ const CopyButton: FC = () => { {!done && ( { setDone(true) }} diff --git a/src/widgets/Buttons/CopyButton/index.tsx b/src/widgets/Buttons/CopyButton/index.tsx index dead2c4c1..cb21a6f5b 100644 --- a/src/widgets/Buttons/CopyButton/index.tsx +++ b/src/widgets/Buttons/CopyButton/index.tsx @@ -9,7 +9,7 @@ import { Wrapper } from '../styles/copy_button' const AnimatedCopyButton = dynamic(() => import('./Animate'), { /* eslint-disable react/display-name */ loading: () => { - return + return }, ssr: false, }) diff --git a/src/widgets/Buttons/IconButton.tsx b/src/widgets/Buttons/IconButton.tsx index adaa14a85..d4efdccb3 100644 --- a/src/widgets/Buttons/IconButton.tsx +++ b/src/widgets/Buttons/IconButton.tsx @@ -1,5 +1,6 @@ import { FC, memo, ReactNode } from 'react' +import type { TSpace } from '@/spec' import { ICON } from '@/config' import { SVG } from '@/constant' @@ -9,7 +10,7 @@ import { Content, Icon, Hint, - getIcon, + getLocalIcon, HoverBg, } from './styles/icon_button' @@ -17,32 +18,25 @@ export type TProps = { path?: string | null icon?: string | null size?: number - mRight?: number - mLeft?: number - mTop?: number - mBottom?: number dimWhenIdle?: boolean active?: boolean hint?: ReactNode | null hintDelay?: number hintPlacement?: 'top' | 'bottom' onClick?: () => void -} +} & TSpace const IconButton: FC = ({ path = null, icon = null, size = 16, - mLeft = 0, - mRight = 10, - mTop = 0, - mBottom = 0, active = false, dimWhenIdle = false, hint = null, hintDelay = 500, hintPlacement = 'top', onClick = console.log, + ...restProps }) => { let realIcon = null @@ -57,7 +51,7 @@ const IconButton: FC = ({ /> ) } else { - const LocalIcon = getIcon(icon || SVG.UPVOTE) + const LocalIcon = getLocalIcon(icon || SVG.UPVOTE) realIcon = ( @@ -65,14 +59,7 @@ const IconButton: FC = ({ } return ( - + {hint ? ( { + const Icon = getIcon(item.icon || SVG.UPVOTE) + if (item.link) { return ( - + {cutRest(item.title, 50)} @@ -33,7 +38,7 @@ const OptionBlock = ({ item, onClick }) => { return ( - + {cutRest(item.title, 50)} @@ -56,11 +61,14 @@ const Menu: FC = ({ return ( {options.map((item) => ( - onClick(item.key)} - /> + + onClick(item.key)} /> + {item.qrLink && ( + + + + )} + ))} {!isEmpty(extraOptions) && } {extraOptions.map((item) => ( diff --git a/src/widgets/Buttons/MenuButton/index.tsx b/src/widgets/Buttons/MenuButton/index.tsx index 1aa816e7e..4db8ba673 100644 --- a/src/widgets/Buttons/MenuButton/index.tsx +++ b/src/widgets/Buttons/MenuButton/index.tsx @@ -27,7 +27,7 @@ const MenuButton: FC = ({ extraOptions = [], onClick = log, placement = 'top-end', - panelMinWidth = '100px', + panelMinWidth = '110px', }) => { return ( import('@/icons/CloseLight'), { - ssr: false, -}) - -const AirBalloon = dynamic(() => import('@/icons/AirBalloon'), { - ssr: false, -}) - type TWrapper = Omit export const Wrapper = styled.div` position: relative; ${({ size }) => css.size(size)} ${css.flex('align-both')}; - margin-left: ${({ mLeft }) => `${mLeft}px`}; - margin-right: ${({ mRight }) => `${mRight}px`}; - margin-top: ${({ mTop }) => `${mTop}px`}; - margin-bottom: ${({ mBottom }) => `${mBottom}px`}; + margin-left: ${({ left }) => `${left || 0}px`}; + margin-right: ${({ right }) => `${right || 0}px`}; + margin-top: ${({ top }) => `${top || 0}px`}; + margin-bottom: ${({ bottom }) => `${bottom || 0}px`}; /* &:before { content: ''; @@ -72,6 +48,13 @@ export const HoverBg = styled.div<{ size: number }>` transition: 0.25s; ` +export const Hint = styled.div` + color: ${theme('thread.extraInfo')}; + text-align: center; + min-width: 80px; + padding: 5px; +` + type TIcon = { size: number; $dimWhenIdle: boolean } & TSpace & TActive export const Icon = styled(Img)` fill: ${({ $active }) => ($active ? '#00a59b' : theme('thread.extraInfo'))}; @@ -88,73 +71,7 @@ export const Icon = styled(Img)` transition: fill 0.2s; ` -export const getIcon = (type: string): FC => { - switch (type) { - case SVG.UPVOTE: { - return getStyledIcon(UpvoteIcon) - } - - case SVG.EDIT_PEN: { - return getStyledIcon(EditPenIcon) - } - - case SVG.LOCK: { - return getStyledIcon(LockIcon) - } - - case SVG.EXPAND: { - return getStyledIcon(ExpandIcon) - } - - case SVG.FOLD: { - return getStyledIcon(FoldIcon) - } - - case SVG.COLLECTION: { - return getStyledIcon(CollectionIcon) - } - - case SVG.SHARE: { - return getStyledIcon(ShareIcon) - } - - case SVG.ARCHIVED: { - return getStyledIcon(ArchivedIcon) - } - - case SVG.ACTIVITY: { - return getStyledIcon(ActivityIcon) - } - - case SVG.CLOSE: { - // @ts-ignore - return getStyledIcon(CloseCross) - } - - case SVG.TO_TOP: { - // @ts-ignore - return getStyledIcon(AirBalloon) - } - - case SVG.EMOTION: { - return getStyledIcon(Emotion) - } - case SVG.COMMENT: { - return getStyledIcon(CommentIcon) - } - case SVG.MOREL: { - return getStyledIcon(MoreLIcon) - } - case SVG.MORE: { - return getStyledIcon(MoreIcon) - } - default: { - return getStyledIcon(UpvoteIcon) - } - } -} - -export const getStyledIcon = (comp: FC): FC => { +const styledIcon = (comp: FC): FC => { return styled(comp)` fill: ${({ $active }) => ($active ? '#00a59b' : theme('thread.extraInfo'))}; ${({ size }) => css.size(size)}; @@ -171,9 +88,6 @@ export const getStyledIcon = (comp: FC): FC => { ` } -export const Hint = styled.div` - color: ${theme('thread.extraInfo')}; - text-align: center; - min-width: 80px; - padding: 5px; -` +export const getLocalIcon = (type: string): FC => { + return getLocalSVG(type, styledIcon) +} diff --git a/src/widgets/Buttons/styles/menu_button/menu.ts b/src/widgets/Buttons/styles/menu_button/menu.ts index 530fc0701..be1ad135a 100644 --- a/src/widgets/Buttons/styles/menu_button/menu.ts +++ b/src/widgets/Buttons/styles/menu_button/menu.ts @@ -1,26 +1,42 @@ +import { FC } from 'react' import styled from 'styled-components' import Img from '@/Img' import css, { theme } from '@/utils/css' +import { getLocalSVG } from '@/icons' + export const Wrapper = styled.div<{ panelMinWidth: string }>` ${css.flexColumn('align-center')}; width: 100%; min-width: ${({ panelMinWidth }) => panelMinWidth}; max-height: 300px; overflow: hidden; + padding: 4px 3px; ` export const Block = styled.div` ${css.flex('align-start')}; width: 100%; - padding: 6px 10px; + padding: 4px 10px; padding-left: 15px; + border-radius: 4px; &:hover { background: ${theme('hoverBg')}; cursor: pointer; } ` +export const QRWrapper = styled.div` + opacity: 0.55; + margin-top: 7px; + margin-left: 2px; + + &:hover { + opacity: 1; + } + + transition: opacity 0.25s; +` export const Divider = styled.div` width: 100%; height: 1px; @@ -34,27 +50,39 @@ export const BlockA = styled(Block)` export const Item = styled.div` ${css.flex('align-center')}; ` -export const Icon = styled(Img)` - fill: ${theme('thread.articleDigest')}; - ${css.size(12)}; - margin-right: 10px; - opacity: 0.8; - ${Item}:hover & { - opacity: 1; - } -` export const Title = styled.div` color: ${theme('thread.articleTitle')}; font-size: 13px; ` -export const LinkIcon = styled(Img)` - ${css.size(10)}; - fill: ${theme('thread.articleDigest')}; - margin-left: 7px; -` export const Desc = styled.div` color: ${theme('thread.articleDigest')}; font-size: 11px; margin-top: 4px; ` +export const LinkIcon = styled(Img)` + ${css.size(10)}; + fill: ${theme('thread.articleDigest')}; + margin-left: 7px; +` + +export const styledIcon = (comp: FC): FC => { + return styled(comp)` + fill: ${theme('thread.articleDigest')}; + ${css.size(12)}; + margin-right: 10px; + opacity: 0.8; + + &:hover { + fill: ${theme('thread.extraInfo')}; + opacity: 1; + cursor: pointer; + } + + transition: all 0.2s; + ` +} + +export const getIcon = (type: string): FC => { + return getLocalSVG(type, styledIcon) +} diff --git a/src/widgets/ChangelogItem/DefaultLayout/index.tsx b/src/widgets/ChangelogItem/DefaultLayout/index.tsx index 58833baf4..acb3ed5fd 100644 --- a/src/widgets/ChangelogItem/DefaultLayout/index.tsx +++ b/src/widgets/ChangelogItem/DefaultLayout/index.tsx @@ -103,7 +103,7 @@ const DefaultLayout: FC = ({ testid = 'changelog-item' }) => { = ({ noPadding > - + )} diff --git a/src/widgets/FaqList/Collapse/Banner.tsx b/src/widgets/FaqList/Collapse/Banner.tsx index 1223377b3..86c0aadac 100644 --- a/src/widgets/FaqList/Collapse/Banner.tsx +++ b/src/widgets/FaqList/Collapse/Banner.tsx @@ -50,7 +50,7 @@ const Banner: FC = ({ menuOptions, setOpenedIDs, articles }) => { options={menuOptions} onClick={(key) => handleMenu(key)} > - + diff --git a/src/widgets/FiltersMenu/spec.ts b/src/widgets/FiltersMenu/spec.d.ts similarity index 100% rename from src/widgets/FiltersMenu/spec.ts rename to src/widgets/FiltersMenu/spec.d.ts diff --git a/src/widgets/Folder/Footer.tsx b/src/widgets/Folder/Footer.tsx index 19b802b64..2f3eb54f6 100644 --- a/src/widgets/Folder/Footer.tsx +++ b/src/widgets/Folder/Footer.tsx @@ -60,7 +60,7 @@ const Footer: FC = ({ title, onClick, onMenuClick, inactive }) => { {!inactive && ( - + )} diff --git a/src/widgets/GotoTop/RealGotoTop.tsx b/src/widgets/GotoTop/RealGotoTop.tsx index a0f2a3dbf..8f65ef6be 100644 --- a/src/widgets/GotoTop/RealGotoTop.tsx +++ b/src/widgets/GotoTop/RealGotoTop.tsx @@ -19,7 +19,7 @@ const GotoTop: FC = ({ testid = 'goto-top', type = 'body' }) => { return ( - + ) } diff --git a/src/widgets/Icons/index.ts b/src/widgets/Icons/index.ts new file mode 100644 index 000000000..20e126007 --- /dev/null +++ b/src/widgets/Icons/index.ts @@ -0,0 +1,114 @@ +import { FC } from 'react' + +import { SVG } from '@/constant' + +import UpvoteIcon from './Upvote' +import EditPenIcon from './EditPen' +import LockIcon from './Lock' +import ExpandIcon from './Expand' +import FoldIcon from './Fold' +import Emotion from './Emotion' +import CommentIcon from './Comment' + +import ActivityIcon from './article/Activity' +import ArchivedIcon from './article/Archived' + +import CloseCrossIcon from './CloseCross' +import AirBalloonIcon from './AirBalloon' +import CollectionIcon from './CollectionBookmark' + +import ShareIcon from './Share' + +// social +import WechatIcon from './social/WeChat' +import EmailIcon from './social/Email' + +// Menu +import CopyIcon from './menu/Copy' +import MoreLIcon from './menu/MoreL' +import MoreIcon from './menu/More' +import MoreDotIcon from './menu/MoreDot' + +type TstyledFn = (comp: FC) => FC + +export const getLocalSVG = (type: string, styledFn: TstyledFn): FC => { + switch (type) { + case SVG.MOREL_DOT: { + return styledFn(MoreDotIcon) + } + + case SVG.COPY: { + return styledFn(CopyIcon) + } + + case SVG.EMAIL: { + return styledFn(EmailIcon) + } + + case SVG.WECHAT: { + return styledFn(WechatIcon) + } + + case SVG.UPVOTE: { + return styledFn(UpvoteIcon) + } + + case SVG.EDIT_PEN: { + return styledFn(EditPenIcon) + } + + case SVG.LOCK: { + return styledFn(LockIcon) + } + + case SVG.EXPAND: { + return styledFn(ExpandIcon) + } + + case SVG.FOLD: { + return styledFn(FoldIcon) + } + + case SVG.COLLECTION: { + return styledFn(CollectionIcon) + } + + case SVG.SHARE: { + return styledFn(ShareIcon) + } + + case SVG.ARCHIVED: { + return styledFn(ArchivedIcon) + } + + case SVG.ACTIVITY: { + return styledFn(ActivityIcon) + } + + case SVG.CLOSE: { + return styledFn(CloseCrossIcon) + } + + case SVG.TO_TOP: { + return styledFn(AirBalloonIcon) + } + + case SVG.EMOTION: { + return styledFn(Emotion) + } + case SVG.COMMENT: { + return styledFn(CommentIcon) + } + case SVG.MOREL: { + return styledFn(MoreLIcon) + } + case SVG.MORE: { + return styledFn(MoreIcon) + } + default: { + return styledFn(UpvoteIcon) + } + } +} + +export const holder = 1 diff --git a/src/widgets/Icons/menu/Copy.tsx b/src/widgets/Icons/menu/Copy.tsx new file mode 100644 index 000000000..c4a91fe6d --- /dev/null +++ b/src/widgets/Icons/menu/Copy.tsx @@ -0,0 +1,19 @@ +import { memo, SVGProps } from 'react' + +const SVG = (props: SVGProps) => { + return ( + + + + + ) +} + +export default memo(SVG) diff --git a/src/widgets/Icons/More.tsx b/src/widgets/Icons/menu/More.tsx similarity index 100% rename from src/widgets/Icons/More.tsx rename to src/widgets/Icons/menu/More.tsx diff --git a/src/widgets/Icons/menu/MoreDot.tsx b/src/widgets/Icons/menu/MoreDot.tsx new file mode 100644 index 000000000..bff8fb5d2 --- /dev/null +++ b/src/widgets/Icons/menu/MoreDot.tsx @@ -0,0 +1,18 @@ +import { memo, SVGProps } from 'react' + +const More = (props: SVGProps) => { + return ( + + + + ) +} + +export default memo(More) diff --git a/src/widgets/Icons/MoreL.tsx b/src/widgets/Icons/menu/MoreL.tsx similarity index 100% rename from src/widgets/Icons/MoreL.tsx rename to src/widgets/Icons/menu/MoreL.tsx diff --git a/src/widgets/Icons/social/Email.tsx b/src/widgets/Icons/social/Email.tsx index 189fd7b96..fe566b548 100644 --- a/src/widgets/Icons/social/Email.tsx +++ b/src/widgets/Icons/social/Email.tsx @@ -10,8 +10,8 @@ const SVG = (props: SVGProps) => { height={200} {...props} > - - + + ) } diff --git a/src/widgets/Icons/social/WeChat.tsx b/src/widgets/Icons/social/WeChat.tsx new file mode 100644 index 000000000..298f662f4 --- /dev/null +++ b/src/widgets/Icons/social/WeChat.tsx @@ -0,0 +1,18 @@ +import { memo, SVGProps } from 'react' + +const SVG = (props: SVGProps) => { + return ( + + + + ) +} + +export default memo(SVG) diff --git a/src/widgets/Icons/social/WeiChat.tsx b/src/widgets/Icons/social/WeiChat.tsx deleted file mode 100644 index 4f201aa4d..000000000 --- a/src/widgets/Icons/social/WeiChat.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { memo, SVGProps } from 'react' - -const SVG = (props: SVGProps) => { - return ( - - - - ) -} - -export default memo(SVG) diff --git a/src/widgets/KanbanItem/index.tsx b/src/widgets/KanbanItem/index.tsx index a6af02788..5214c3088 100644 --- a/src/widgets/KanbanItem/index.tsx +++ b/src/widgets/KanbanItem/index.tsx @@ -36,8 +36,8 @@ const KanbanItem: FC = ({ testid = 'gtd-item' }) => { return (
- - + +
增加看板，发布日志，与常见问题的功能和其他 diff --git a/src/widgets/NaviCatalog/spec.ts b/src/widgets/NaviCatalog/spec.d.ts similarity index 100% rename from src/widgets/NaviCatalog/spec.ts rename to src/widgets/NaviCatalog/spec.d.ts diff --git a/src/widgets/Navigator/styles/index.ts b/src/widgets/Navigator/styles/index.ts index 03e7079f0..de0de5378 100755 --- a/src/widgets/Navigator/styles/index.ts +++ b/src/widgets/Navigator/styles/index.ts @@ -23,7 +23,7 @@ export const Logo = styled(SiteLogo)` ` export const LogoLink = styled.div` position: absolute; - left: -240px; + left: -220px; top: 15px; ${css.flex('align-center')}; diff --git a/src/widgets/NoticeBar/spec.ts b/src/widgets/NoticeBar/spec.d.ts similarity index 100% rename from src/widgets/NoticeBar/spec.ts rename to src/widgets/NoticeBar/spec.d.ts diff --git a/src/widgets/PostItem/DesktopView/ActiveBadge.tsx b/src/widgets/PostItem/DesktopView/ActiveBadge.tsx index fe2e19944..704a3c033 100644 --- a/src/widgets/PostItem/DesktopView/ActiveBadge.tsx +++ b/src/widgets/PostItem/DesktopView/ActiveBadge.tsx @@ -29,7 +29,7 @@ const ActiveBadge: FC = ({ item }) => { } - mRight={6} + right={6} hintPlacement="bottom" hintDelay={0} /> diff --git a/src/widgets/PostItem/DesktopView/Header.tsx b/src/widgets/PostItem/DesktopView/Header.tsx index 39e86b72b..7eac414ea 100644 --- a/src/widgets/PostItem/DesktopView/Header.tsx +++ b/src/widgets/PostItem/DesktopView/Header.tsx @@ -36,7 +36,7 @@ const Header: FC = ({ item }) => { {item.title} {/* @ts-ignore */} - + ({ 'data-test-id': testid, diff --git a/src/widgets/TagsList/FullList.tsx b/src/widgets/TagsList/FullList.tsx index 1a885944a..c16c34612 100644 --- a/src/widgets/TagsList/FullList.tsx +++ b/src/widgets/TagsList/FullList.tsx @@ -14,11 +14,16 @@ import { SolidTitle, } from './styles' -type TProps = Pick +type TProps = Omit -const FullList: FC = ({ items, mLeft, size, mode = 'default' }) => { +const FullList: FC = ({ + items, + size, + mode = 'default', + ...restProps +}) => { return ( - + {sortByColor(items).map((tag) => ( {mode === 'default' && } diff --git a/src/widgets/TagsList/index.tsx b/src/widgets/TagsList/index.tsx index 48dbb44a3..f854e998a 100755 --- a/src/widgets/TagsList/index.tsx +++ b/src/widgets/TagsList/index.tsx @@ -4,7 +4,14 @@ import { FC, memo } from 'react' -import type { TTag, TSIZE_TSM, TCommunity, TThread, TTagMode } from '@/spec' +import type { + TTag, + TSIZE_TSM, + TCommunity, + TThread, + TTagMode, + TSpace, +} from '@/spec' import { SIZE, THREAD, TAG_MODE } from '@/constant' import { sortByColor } from '@/utils/helper' @@ -23,7 +30,6 @@ const log = buildLog('c:TagsList:index') export type TProps = { items: TTag[] max?: number - mLeft?: number size?: TSIZE_TSM withSetter?: boolean mode?: TTagMode @@ -31,21 +37,21 @@ export type TProps = { // if withSetter is set to true, MUST have community and thread community?: TCommunity thread?: TThread -} +} & TSpace const TagsList: FC = ({ items, max = 2, - mLeft = 8, size = SIZE.TINY, withSetter = false, mode = TAG_MODE.DEFAULT, community = { raw: 'home' }, thread = THREAD.POST, + ...restProps }) => { if (items.length > max) { return ( - + {sortByColor(items) .slice(0, max) .map((tag) => ( @@ -59,7 +65,7 @@ const TagsList: FC = ({ + } > .. @@ -74,7 +80,7 @@ const TagsList: FC = ({ return ( {items.length > 0 && ( - + )} {withSetter && ( ` +export const Wrapper = styled.div` ${css.flex('align-center')}; - margin-left: ${({ mLeft }) => (mLeft ? `${mLeft}px` : 0)}; + + margin-left: ${({ left }) => `${left || 0}px`}; + margin-right: ${({ right }) => `${right || 0}px`}; + margin-top: ${({ top }) => `${top || 0}px`}; + margin-bottom: ${({ bottom }) => `${bottom || 0}px`}; + position: relative; margin-top: 1px; ` diff --git a/src/widgets/TeamList/spec.ts b/src/widgets/TeamList/spec.d.ts similarity index 100% rename from src/widgets/TeamList/spec.ts rename to src/widgets/TeamList/spec.d.ts diff --git a/src/widgets/TheAvatar/spec.ts b/src/widgets/TheAvatar/spec.d.ts similarity index 100% rename from src/widgets/TheAvatar/spec.ts rename to src/widgets/TheAvatar/spec.d.ts diff --git a/tsconfig.json b/tsconfig.json index 5156b1292..e5a2fc9a5 100755 --- a/tsconfig.json +++ b/tsconfig.json @@ -34,6 +34,7 @@ "@/spec": ["src/spec"], "@/Img": ["src/widgets/Img"], "@/SvgIcons/*": ["src/widgets/SvgIcons/*"], + "@/icons": ["src/widgets/Icons"], "@/icons/*": ["src/widgets/Icons/*"], "@/i18n": ["i18n"] }, diff --git a/utils/constant/event.ts b/utils/constant/event.ts index 953b99735..74af635b2 100755 --- a/utils/constant/event.ts +++ b/utils/constant/event.ts @@ -18,8 +18,6 @@ const EVENT = { }, UPVOTE_ON_ARTICLE_LIST: 'UPVOTE_ON_ARTICLE_LIST', - // share - SHARE: 'SHARE', // report REPORT: 'REPORT', diff --git a/utils/constant/index.ts b/utils/constant/index.ts index e9803e4a2..2cf0149f4 100755 --- a/utils/constant/index.ts +++ b/utils/constant/index.ts @@ -34,6 +34,7 @@ export { COMMUNITY_MAP_ALIAS } from './alias' export { AS_STATE, AS_TYPE } from './article_state' +export { default as DEFAULT_TOAST_OPTIONS } from './toast' /* some svg icon are sensitive to fill color */ /* some community svg need fill color, like city etc.. */ export const NON_FILL_COMMUNITY = ['javascript'] diff --git a/utils/constant/svg.ts b/utils/constant/svg.ts index 84b002d34..035b72a98 100755 --- a/utils/constant/svg.ts +++ b/utils/constant/svg.ts @@ -24,7 +24,15 @@ const SVG = { // utils MORE: 'more', MOREL: 'more-l', + MOREL_DOT: 'more-dot', JOIN_EYE: 'JoinEye', + + // social + EMAIL: 'email', + WECHAT: 'wechat', + + // menu + COPY: 'copy', } export default SVG diff --git a/utils/constant/toast.ts b/utils/constant/toast.ts new file mode 100644 index 000000000..d583be0f5 --- /dev/null +++ b/utils/constant/toast.ts @@ -0,0 +1,15 @@ +import type { TToastPos } from '@/spec' + +const DEFAULT_TOAST_OPTIONS = { + title: 'toast', + message: '', + msg: '', + position: 'topCenter' as TToastPos, + timeout: 3000, + icon: '', + progressBarColor: 'yellogreen', + displayMode: 'replace', + transitionIn: 'fadeInDown', +} + +export default DEFAULT_TOAST_OPTIONS diff --git a/utils/css/metric.ts b/utils/css/metric.ts index 837691342..62b0a9005 100644 --- a/utils/css/metric.ts +++ b/utils/css/metric.ts @@ -34,8 +34,8 @@ export const WIDTH = { CONTENT_OFFSET: '290px', CONTENT_OFFSET_LAPTOPL: '260px', CONTENT_OFFSET_DESKTOPL: '400px', - STICKER: '260px', - STICKER_LAPTOPL: '240px', + STICKER: '240px', + STICKER_LAPTOPL: '220px', }, BLOG_ARTICLE: { PAGE: '1460px', diff --git a/utils/helper.ts b/utils/helper.ts index cc9783659..ff452db1d 100755 --- a/utils/helper.ts +++ b/utils/helper.ts @@ -209,12 +209,6 @@ export const closeDrawer = (type = ''): void => */ export const checkout = (amount: number, usage: TPaymentUsage): void => send(EVENT.CALL_CASHIER, { amount, usage }) -/** - * share articles - */ -export const shareTo = (offsetLeft = 'none'): void => { - send(EVENT.SHARE, { offsetLeft }) -} export const addCollection = (): void => { send(EVENT.SET_FAVORITE_CONTENT, { @@ -275,8 +269,9 @@ export const toast = ( title: string, msg: string, position: TToastPos = 'topCenter', + duration = 3000, ): void => { - send(EVENT.TOAST, { type, title, msg, position }) + send(EVENT.TOAST, { type, title, msg, position, duration }) } /** diff --git a/utils/index.ts b/utils/index.ts index 189efae86..9353fa617 100755 --- a/utils/index.ts +++ b/utils/index.ts @@ -26,7 +26,6 @@ export { countWords, joinUS, closeDrawer, - shareTo, report, errRescue, debounce, diff --git a/utils/themes/skins/github.ts b/utils/themes/skins/github.ts index 6afa9e2cf..981a34f79 100755 --- a/utils/themes/skins/github.ts +++ b/utils/themes/skins/github.ts @@ -353,13 +353,14 @@ const github = { }, toast: { bg: contentBoxBg, - border: descText, + border, message: descText, - title: primaryColor, - infoBar: primaryColor, + title: threadTitle, + infoBar: '#E8F0FE', errorBar: '#f59381', successBar: '#9dd035', warnBar: '#f5a30e', + boxShadow: '-3px 5px 20px 0px rgb(155 155 155 / 20%)', }, mailBox: { headHightBg: '#e8f9f8', diff --git a/utils/toast.ts b/utils/toast.ts index a1baeb2e8..8ce3fcc3b 100755 --- a/utils/toast.ts +++ b/utils/toast.ts @@ -4,52 +4,84 @@ import { merge, reject } from 'ramda' -import { TThemeMap } from '@/spec' +import { TThemeMap, TToastOption } from '@/spec' +import { DEFAULT_TOAST_OPTIONS } from '@/constant' + import { Global } from './helper' import { nilOrEmpty } from './validator' type TToastType = 'success' | 'error' | 'warn' -type TToastOption = { - title: string - msg: string - progressBarColor: string - position: 'bottom' | 'top' -} - const checkValid = () => (Global as any).iziToast || false -const defaultOptions = { - title: 'coderplanets', - message: 'is Awesome!', - position: 'topRight', - timeout: 5000, - icon: '', - progressBarColor: 'yellogreen', - displayMode: 'replace', - transitionIn: 'fadeInDown', -} - const doNotify = (options = {}): void => { if (!checkValid()) { return } const { iziToast } = Global as any - iziToast.show(merge(defaultOptions, reject(nilOrEmpty, options))) + iziToast.show(merge(DEFAULT_TOAST_OPTIONS, reject(nilOrEmpty, options))) } export const toast = { - info: ({ title, msg, progressBarColor, position }: TToastOption): void => { - doNotify({ title, message: msg, progressBarColor, position }) + info: ({ + title, + msg, + progressBarColor, + position, + duration, + }: TToastOption): void => { + doNotify({ + title, + message: msg, + progressBarColor, + position, + timeout: duration, + }) }, - error: ({ title, msg, progressBarColor, position }: TToastOption): void => { - doNotify({ title, message: msg, progressBarColor, position }) + error: ({ + title, + msg, + progressBarColor, + position, + duration, + }: TToastOption): void => { + doNotify({ + title, + message: msg, + progressBarColor, + position, + timeout: duration, + }) }, - success: ({ title, msg, progressBarColor, position }: TToastOption): void => { - doNotify({ title, message: msg, progressBarColor, position }) + success: ({ + title, + msg, + progressBarColor, + position, + duration, + }: TToastOption): void => { + doNotify({ + title, + message: msg, + progressBarColor, + position, + timeout: duration, + }) }, - warn: ({ title, msg, progressBarColor, position }: TToastOption): void => { - doNotify({ title, message: msg, progressBarColor, position }) + warn: ({ + title, + msg, + progressBarColor, + position, + duration, + }: TToastOption): void => { + doNotify({ + title, + message: msg, + progressBarColor, + position, + timeout: duration, + }) }, }