diff --git a/public/icons/static/article/author_upvoted.svg b/public/icons/static/article/author_upvoted.svg new file mode 100644 index 000000000..0188a8a97 --- /dev/null +++ b/public/icons/static/article/author_upvoted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/static/article/comment-reply-mode.svg b/public/icons/static/article/comment-reply-mode.svg new file mode 100644 index 000000000..eed945013 --- /dev/null +++ b/public/icons/static/article/comment-reply-mode.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/static/article/comment-timeline-mode.svg b/public/icons/static/article/comment-timeline-mode.svg new file mode 100644 index 000000000..591d081c4 --- /dev/null +++ b/public/icons/static/article/comment-timeline-mode.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/static/shape/expand-all.svg b/public/icons/static/shape/expand-all.svg new file mode 100644 index 000000000..8e2b04a74 --- /dev/null +++ b/public/icons/static/shape/expand-all.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/static/shape/fold-all.svg b/public/icons/static/shape/fold-all.svg new file mode 100644 index 000000000..d32a08671 --- /dev/null +++ b/public/icons/static/shape/fold-all.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/static/shape/lock.svg b/public/icons/static/shape/lock.svg new file mode 100644 index 000000000..87eb4dde2 --- /dev/null +++ b/public/icons/static/shape/lock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/static/shape/quote.svg b/public/icons/static/shape/quote.svg new file mode 100644 index 000000000..bdf645912 --- /dev/null +++ b/public/icons/static/shape/quote.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Common/index.ts b/src/components/Common/index.ts index 149f9c080..045838fcf 100755 --- a/src/components/Common/index.ts +++ b/src/components/Common/index.ts @@ -3,8 +3,8 @@ import styled from 'styled-components' import type { TSpace } from '@/spec' export const Br = styled.div` - margin-top: ${({ top }) => `${top}px` || 0}; - margin-bottom: ${({ bottom }) => `${bottom}px` || 0}; + margin-top: ${({ top }) => `${top || 0}px`}; + margin-bottom: ${({ bottom }) => `${bottom || 0}px`}; ` export const Space = styled.span` margin-left: ${({ left }) => `${left}px` || 0}; diff --git a/src/components/Switcher/IconSwitcher.js b/src/components/Switcher/IconSwitcher.js deleted file mode 100644 index b3ca131e8..000000000 --- a/src/components/Switcher/IconSwitcher.js +++ /dev/null @@ -1,81 +0,0 @@ -/* - * - * IconSwitcher - * - */ - -import React from 'react' -import T from 'prop-types' -import { findIndex, propEq } from 'ramda' - -import { buildLog, nilOrEmpty } from '@/utils' - -import { - Wrapper, - AccessZone, - Tabs, - IconHoverWrapper, - HoverText, - Icon, - Label, - Slider, -} from './styles/icon_selector' - -/* eslint-disable-next-line */ -const log = buildLog('c:IconSwitcher:index') - -const IconComp = ({ item, activeKey }) => { - if (!item.desc) { - return - } - - return ( - - - {item.desc} - - ) -} - -const IconSwitcher = ({ items, activeKey, onChange }) => { - const slideIndex = findIndex(propEq('key', activeKey), items) - - return ( - - - - {items.map((item) => ( - - ))} - - - - ) -} - -IconSwitcher.propTypes = { - items: T.arrayOf( - T.shape({ - iconSrc: T.string, - localIcon: T.oneOfType([T.string, T.node]), - key: T.string, - }), - ).isRequired, - activeKey: T.string.isRequired, - onChange: T.func.isRequired, -} - -IconSwitcher.defaultProps = {} - -export default React.memo(IconSwitcher) diff --git a/src/components/Switcher/IconSwitcher.tsx b/src/components/Switcher/IconSwitcher.tsx new file mode 100644 index 000000000..99f52853e --- /dev/null +++ b/src/components/Switcher/IconSwitcher.tsx @@ -0,0 +1,100 @@ +/* + * + * IconSwitcher + * + */ + +import React from 'react' +import { findIndex, propEq } from 'ramda' + +import { buildLog, nilOrEmpty } from '@/utils' +import Tooltip from '@/components/Tooltip' + +import { + Wrapper, + AccessZone, + Tabs, + DescText, + Icon, + Label, + Slider, +} from './styles/icon_selector' + +/* eslint-disable-next-line */ +const log = buildLog('c:IconSwitcher:index') + +type TItem = { + iconSrc?: string + localIcon?: React.ReactNode + key: string + desc?: string +} + +type TIconComp = { + item: TItem + activeKey: string +} + +type TTabLabel = { + item: TItem + activeKey: string + onChange: (item: TItem) => void +} + +const TabLabel: React.FC = ({ item, activeKey, onChange }) => { + if (!item.desc) { + return ( + + ) + } + + return ( + {item.desc}} + placement="bottom" + delay={500} + noPadding + > + + + ) +} + +type TProps = { + items: TItem[] + activeKey: string + onChange: (item: TItem) => void +} + +const IconSwitcher: React.FC = ({ items, activeKey, onChange }) => { + const slideIndex = findIndex(propEq('key', activeKey), items) + + return ( + + + + {items.map((item) => ( + + ))} + + + + ) +} + +export default React.memo(IconSwitcher) diff --git a/src/components/Switcher/index.js b/src/components/Switcher/index.tsx similarity index 100% rename from src/components/Switcher/index.js rename to src/components/Switcher/index.tsx diff --git a/src/components/Switcher/styles/icon_selector.ts b/src/components/Switcher/styles/icon_selector.ts index 3be85ddee..f01d56402 100644 --- a/src/components/Switcher/styles/icon_selector.ts +++ b/src/components/Switcher/styles/icon_selector.ts @@ -50,22 +50,10 @@ export const Label = styled.label` cursor: pointer; } ` -export const IconHoverWrapper = styled.div` - position: relative; -` -export const HoverText = styled.span` - position: absolute; - width: 80px; - left: -20px; - top: 30px; - font-size: 12px; - opacity: 0; - overflow: hidden; - ${IconHoverWrapper}:hover & { - opacity: 1; - } - transition: opacity 0.25s; - transition-delay: 0.3s; +export const DescText = styled.div` + ${css.flex('align-both')}; + min-width: 90px; + padding: 5px 10px; ` export const Icon = styled(Img)<{ checked: boolean }>` fill: ${({ checked }) => @@ -81,7 +69,7 @@ export const Slider = styled.span<{ index: number }>` width: ${width}; height: ${height}; background-color: #0b3546; - z-index: 1; + z-index: 0; border-radius: 6px; ${Wrapper}:hover & { diff --git a/src/components/Switcher/styles/tabs/local_icon.ts b/src/components/Switcher/styles/tabs/local_icon.ts index cd5245c79..5c959eca6 100644 --- a/src/components/Switcher/styles/tabs/local_icon.ts +++ b/src/components/Switcher/styles/tabs/local_icon.ts @@ -21,7 +21,7 @@ import TabPublishSVG from '@/SvgIcons/TabPublishSVG' import TabBillingSVG from '@/SvgIcons/TabBillingSVG' import TabCommentsSVG from '@/SvgIcons/TabCommentsSVG' import TabSettingsSVG from '@/SvgIcons/TabSettingsSVG' -import TabFavoritesSVG from '@/SvgIcons/TabFavoritesSVG' +import TabFavoritesSVG from '@/components/SvgIcons/TabFavoritesSVG' export const LableWrapper = styled.div` ${css.flex('align-center')}; diff --git a/src/components/Tooltip/styles/index.ts b/src/components/Tooltip/styles/index.ts index a128c37f9..dd1e2ed9e 100755 --- a/src/components/Tooltip/styles/index.ts +++ b/src/components/Tooltip/styles/index.ts @@ -29,6 +29,7 @@ export const NoPaddingStyledTippy = styled(StyledTippy)` export const ContentWrapper = styled.div<{ contentHeight: string }>` position: relative; height: ${({ contentHeight }) => contentHeight}; + z-index: 1; ` const Arrow = styled.div` position: absolute; diff --git a/src/containers/unit/Comments/Comment/Actions.tsx b/src/containers/unit/Comments/Comment/Actions.tsx index d8a301747..91eae31b0 100755 --- a/src/containers/unit/Comments/Comment/Actions.tsx +++ b/src/containers/unit/Comments/Comment/Actions.tsx @@ -1,11 +1,16 @@ import React from 'react' import type { TAccount, TComment } from '@/spec' +import { ICON } from '@/config' -import DotDivider from '@/components/DotDivider' import { SpaceGrow } from '@/components/Common' -import { Wrapper, ReplyAction } from '../styles/comment/actions' +import { + Wrapper, + ActionWrapper, + ReplyAction, + ActionIcon, +} from '../styles/comment/actions' import { openUpdateEditor, openReplyEditor, onDelete } from '../logic' type TProps = { @@ -27,13 +32,15 @@ const Actions: React.FC = ({ data, accountInfo }) => { openReplyEditor(data)}>回复 - 分享 - - 引用 - - 折叠 - - 举报 + + + + + + + + + ) } diff --git a/src/containers/unit/Comments/Comment/DesktopView.tsx b/src/containers/unit/Comments/Comment/DesktopView.tsx index 2b7717b24..b840e8bd4 100644 --- a/src/containers/unit/Comments/Comment/DesktopView.tsx +++ b/src/containers/unit/Comments/Comment/DesktopView.tsx @@ -3,8 +3,10 @@ import { isEmpty } from 'ramda' import type { TAccount, TComment } from '@/spec' import { Global } from '@/utils' +import { ICON } from '@/config' import MarkDownRender from '@/components/MarkDownRender' +import Tooltip from '@/components/Tooltip' import Upvote from './Upvote' import Header from './Header' @@ -15,11 +17,16 @@ import Footer from './Footer' import { Wrapper, CommentWrapper, + SidebarWrapper, CommentContent, CommentBodyInfo, PinState, PinIcon, PinText, + AuthorUpvotedIcon, + SolutionIcon, + BadgePopContent, + RangeLine, } from '../styles/comment/desktop_view' const getSelection = () => { @@ -33,10 +40,21 @@ type TProps = { data: TComment accountInfo: TAccount tobeDeleteId: string + hasReplies?: boolean + withoutBottomDivider?: boolean } -const Comment: React.FC = ({ data, tobeDeleteId, accountInfo }) => { +const Comment: React.FC = ({ + data, + tobeDeleteId, + accountInfo, + hasReplies = false, + withoutBottomDivider = false, +}) => { const pined = data.id === '360' || data.id === '377' + const isAuthorUpvoted = + data.id === '377' || data.id === '355' || data.id === '359' + const isSolution = data.id === '358' || data.id === '355' return ( @@ -48,7 +66,31 @@ const Comment: React.FC = ({ data, tobeDeleteId, accountInfo }) => { )} - + + + {isAuthorUpvoted && ( + 作者顶过} + placement="bottom" + noPadding + > + + + )} + {isSolution && ( + 最佳答案} + placement="bottom" + noPadding + > + + + )} + +
@@ -56,7 +98,12 @@ const Comment: React.FC = ({ data, tobeDeleteId, accountInfo }) => { {data.replyTo && } -