From d4fa2e34d238700f372dddc9b571dccb7ff080bd Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sat, 24 Jul 2021 12:13:20 +0800 Subject: [PATCH 1/3] style(report): redesign sub panel --- .../Buttons/styles/yes_or_no_buttons.ts | 8 ++++ src/containers/tool/AbuseReport/Footer.tsx | 7 +++- src/containers/tool/AbuseReport/Header.tsx | 18 ++++++--- .../tool/AbuseReport/ReportContent/Detail.tsx | 11 ------ .../tool/AbuseReport/ReportContent/Main.tsx | 38 ++++++++++++------- src/containers/tool/AbuseReport/index.tsx | 2 +- .../tool/AbuseReport/styles/footer.ts | 3 +- .../tool/AbuseReport/styles/header.ts | 10 ++++- .../tool/AbuseReport/styles/index.ts | 5 ++- .../styles/report_content/detail.tsx | 7 +++- .../AbuseReport/styles/report_content/main.ts | 17 +++++++++ .../tool/Share/styles/info_panel.ts | 2 +- src/containers/tool/Share/styles/platform.ts | 2 +- .../ArticleFooter/styles/actions/index.ts | 19 +++++----- utils/themes/skins/cyan.ts | 2 + utils/themes/skins/github.ts | 2 + utils/themes/skins/green.ts | 2 + utils/themes/skins/iron_green.ts | 2 + utils/themes/skins/monokai.ts | 2 + utils/themes/skins/purple.ts | 2 + utils/themes/skins/solarized_dark.ts | 2 + utils/themes/skins/yellow.ts | 2 + 22 files changed, 115 insertions(+), 50 deletions(-) diff --git a/src/components/Buttons/styles/yes_or_no_buttons.ts b/src/components/Buttons/styles/yes_or_no_buttons.ts index 0a30e4e54..f8f89efde 100644 --- a/src/components/Buttons/styles/yes_or_no_buttons.ts +++ b/src/components/Buttons/styles/yes_or_no_buttons.ts @@ -10,6 +10,14 @@ export const Wrapper = styled.div` align === 'center' ? 'center' : 'flex-end'}; ` export const CancelBtn = styled.div` + opacity: 0.8; color: ${theme('button.primary')}; font-size: 14px; + + &:hover { + opacity: 1; + cursor: pointer; + } + + transition: opacity 0.2s; ` diff --git a/src/containers/tool/AbuseReport/Footer.tsx b/src/containers/tool/AbuseReport/Footer.tsx index 01f016256..722b4acef 100644 --- a/src/containers/tool/AbuseReport/Footer.tsx +++ b/src/containers/tool/AbuseReport/Footer.tsx @@ -3,6 +3,7 @@ import { FC } from 'react' import { YesOrNoButtons } from '@/components/Buttons' import { Wrapper } from './styles/footer' +import { goBack } from './logic' type TProps = { view: 'main' | 'detail' @@ -14,7 +15,11 @@ const Footer: FC = ({ view }) => { return ( {/* 举报后社区志愿者会在第一时间【处理】。 */} - + ) } diff --git a/src/containers/tool/AbuseReport/Header.tsx b/src/containers/tool/AbuseReport/Header.tsx index 41cb9c2d7..380540078 100644 --- a/src/containers/tool/AbuseReport/Header.tsx +++ b/src/containers/tool/AbuseReport/Header.tsx @@ -1,7 +1,9 @@ -import { FC } from 'react' +import { FC, memo } from 'react' import { REPORT_TYPE } from '@/constant' import { ICON } from '@/config' + +import type { TREPORT_ITEM } from './spec' import { Wrapper, ReportIcon, Text, ContentTitle } from './styles/header' const getCustomTitle = (type: string): string => { @@ -23,16 +25,22 @@ const getCustomTitle = (type: string): string => { type TProps = { type: string + view: 'main' | 'detail' + activeItem: TREPORT_ITEM } -const Header: FC = ({ type }) => { +const Header: FC = ({ type, view, activeItem }) => { return ( - + - 举报{getCustomTitle(type)} + {view === 'detail' ? ( + {activeItem.title} + ) : ( + 举报{getCustomTitle(type)} + )} 这是一首简单的小情歌 ) } -export default Header +export default memo(Header) diff --git a/src/containers/tool/AbuseReport/ReportContent/Detail.tsx b/src/containers/tool/AbuseReport/ReportContent/Detail.tsx index 221d40112..566f99c14 100644 --- a/src/containers/tool/AbuseReport/ReportContent/Detail.tsx +++ b/src/containers/tool/AbuseReport/ReportContent/Detail.tsx @@ -2,11 +2,9 @@ import { FC } from 'react' import Input from '@/components/Input' import { Br } from '@/components/Common' -import { ArrowButton } from '@/components/Buttons' import type { TREPORT_ITEM } from '../spec' import { Wrapper, DetailDesc } from '../styles/report_content/detail' -import { goBack } from '../logic' type TProps = { activeItem: TREPORT_ITEM @@ -15,15 +13,6 @@ type TProps = { const Detail: FC = ({ activeItem }) => { return ( - goBack()} - > - {activeItem.title} - -
{activeItem.detail}
= ({ items, activeItem }) => { return ( - - {items && - items.map((item) => ( - - ))} - + + + {items && + items.map((item) => ( + + ))} + + 感谢你用实际行动为社区净化作出贡献。 + ) } diff --git a/src/containers/tool/AbuseReport/index.tsx b/src/containers/tool/AbuseReport/index.tsx index 8f13c4d3f..8d71457bc 100755 --- a/src/containers/tool/AbuseReport/index.tsx +++ b/src/containers/tool/AbuseReport/index.tsx @@ -37,7 +37,7 @@ const AbuseReportContainer: FC = ({ return ( close()}> -
+