From 6e44fafdd5b63e583a12373b2ee8dff2327f72e6 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Tue, 3 May 2022 14:15:46 +0800 Subject: [PATCH 1/2] style(faq): adjust margin/layout --- src/containers/thread/HelpThread/store.ts | 3 +- .../thread/HelpThread/styles/faq_layout.ts | 6 ++-- .../styles/desktop_view/simple_layout.ts | 2 -- .../styles/outline_layout/cover.ts | 5 ++-- .../styles/outline_layout/index.ts | 20 +++++++++---- src/widgets/FaqList/Collapse.tsx | 2 +- src/widgets/FaqList/styles/collapse.ts | 29 ++++++++++--------- src/widgets/FaqList/styles/index.ts | 7 +++-- 8 files changed, 45 insertions(+), 29 deletions(-) diff --git a/src/containers/thread/HelpThread/store.ts b/src/containers/thread/HelpThread/store.ts index e17f4f214..979ea424a 100644 --- a/src/containers/thread/HelpThread/store.ts +++ b/src/containers/thread/HelpThread/store.ts @@ -13,7 +13,8 @@ import { markStates, toJS } from '@/utils/mobx' const log = buildLog('S:HelpThread') const HelpThread = T.model('HelpThread', { - mode: T.optional(T.enumeration(['full', 'helpcenter', 'faq']), 'full'), + // mode: T.optional(T.enumeration(['full', 'helpcenter', 'faq']), 'full'), + mode: T.optional(T.enumeration(['full', 'helpcenter', 'faq']), 'faq'), }) .views((self) => ({ get curCommunity(): TCommunity { diff --git a/src/containers/thread/HelpThread/styles/faq_layout.ts b/src/containers/thread/HelpThread/styles/faq_layout.ts index 8684a59bd..242634b0b 100644 --- a/src/containers/thread/HelpThread/styles/faq_layout.ts +++ b/src/containers/thread/HelpThread/styles/faq_layout.ts @@ -4,11 +4,11 @@ import css from '@/utils/css' import { MainWrapper } from './index' export const Wrapper = styled(MainWrapper)` - ${css.flexColumn()}; + ${css.flexColumn('align-center')}; width: 100%; - max-width: 800px; - margin-top: 20px; + margin-top: 30px; padding-left: 22px; + padding-right: 0; border-right: none; ` export const Holder = styled.div`` diff --git a/src/containers/unit/Footer/styles/desktop_view/simple_layout.ts b/src/containers/unit/Footer/styles/desktop_view/simple_layout.ts index ef387aeba..0a4f431ad 100644 --- a/src/containers/unit/Footer/styles/desktop_view/simple_layout.ts +++ b/src/containers/unit/Footer/styles/desktop_view/simple_layout.ts @@ -5,8 +5,6 @@ import css, { theme } from '@/utils/css' export const Wrapper = styled.div` ${css.flex('align-both')}; width: 100%; - // the article page offset - padding-right: 40px; ` export const Note = styled.div` font-size: 13px; diff --git a/src/widgets/ChangelogItem/styles/outline_layout/cover.ts b/src/widgets/ChangelogItem/styles/outline_layout/cover.ts index 89698663b..593752f3a 100644 --- a/src/widgets/ChangelogItem/styles/outline_layout/cover.ts +++ b/src/widgets/ChangelogItem/styles/outline_layout/cover.ts @@ -6,7 +6,7 @@ import { theme } from '@/utils/css' export const Wrapper = styled.div` position: relative; border: 1px solid; - border-color: ${theme('border')}; + border-color: #c2c2c2; border-radius: 4px; width: 40px; height: 50px; @@ -22,7 +22,8 @@ export const CoverImg = styled(Img)` const BaseBar = styled.div` position: absolute; height: 2px; - background: ${theme('border')}; + background: ${theme('thread.extraInfo')}; + opacity: 0.4; border-radius: 2px; ` export const DescBar = styled(BaseBar)` diff --git a/src/widgets/ChangelogItem/styles/outline_layout/index.ts b/src/widgets/ChangelogItem/styles/outline_layout/index.ts index 517cdebb8..14b368744 100644 --- a/src/widgets/ChangelogItem/styles/outline_layout/index.ts +++ b/src/widgets/ChangelogItem/styles/outline_layout/index.ts @@ -10,16 +10,22 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ 'data-test-id': testid, }))` ${css.flex('align-start')}; - margin-bottom: 14px; + margin-bottom: 20px; + cursor: pointer; ` export const Main = styled.div` width: 574px; ` export const Title = styled.div` - color: ${theme('thread.articleTitle')}; + color: ${theme('thread.articleDigest')}; font-size: 15px; font-weight: 580; margin-bottom: 2px; + margin-top: 2px; + + ${Wrapper}:hover & { + color: ${theme('thread.articleTitle')}; + } ` export const Version = styled.span` color: ${theme('thread.articleDigest')}; @@ -34,7 +40,11 @@ export const Body = styled.div` color: ${theme('thread.articleDigest')}; ${css.lineClamp(1)}; font-size: 14px; - opacity: 0.9; + opacity: 0.65; + + ${Wrapper}:hover & { + opacity: 1; + } ` export const Footer = styled.div` ${css.flex('align-center')}; @@ -66,9 +76,9 @@ export const DateTime = styled.div` ` export const TagsWrapper = styled.div` ${css.flex('align-center')}; - margin-top: 10px; + margin-top: 13px; opacity: 0.8; - margin-right: 2px; + margin-right: 3px; ` export const TagDot = styled.div<{ color: string }>` ${css.circle(5)}; diff --git a/src/widgets/FaqList/Collapse.tsx b/src/widgets/FaqList/Collapse.tsx index 43161aaa2..821a95363 100644 --- a/src/widgets/FaqList/Collapse.tsx +++ b/src/widgets/FaqList/Collapse.tsx @@ -27,8 +27,8 @@ const Collapse: FC = ({ articles }) => { {articles.map((item) => (
- {item.title} +
))} diff --git a/src/widgets/FaqList/styles/collapse.ts b/src/widgets/FaqList/styles/collapse.ts index c35bb88da..910895a25 100644 --- a/src/widgets/FaqList/styles/collapse.ts +++ b/src/widgets/FaqList/styles/collapse.ts @@ -2,16 +2,18 @@ import styled from 'styled-components' import css, { theme } from '@/utils/css' import FAQSVG from '@/icons/FAQ' -import ArrowSVG from '@/icons/ArrowSolid' +import ArrowSVG from '@/icons/ArrowSimple' export const Wrapper = styled.div` ${css.flexColumn()}; + margin-left: 15px; ` export const Header = styled.div` - margin-bottom: 20px; + margin-bottom: 34px; + margin-left: -25px; ` export const FAQ = styled.div` - ${css.flex('align-center')}; + ${css.flex('align-both')}; ` export const FAQIcon = styled(FAQSVG)` ${css.size(16)}; @@ -25,11 +27,11 @@ export const FAQTitle = styled.div` font-weight: 500; ` export const FAQDesc = styled.div` - ${css.flex('align-center')}; + ${css.flex('align-both')}; color: ${theme('thread.articleDigest')}; - padding-top: 5px; font-size: 12px; - margin-top: 35px; + margin-top: 60px; + margin-left: -50px; ` export const MoreLink = styled.div` color: ${theme('link')}; @@ -42,19 +44,20 @@ export const MoreLink = styled.div` transition: all 0.2s; ` export const Section = styled.div` - ${css.flex('align-center')}; - padding-top: 20px; - padding-bottom: 20px; - border-bottom: 1px solid; - border-bottom-color: ${theme('border')}; + ${css.flex('align-center', 'justify-between')}; + padding: 20px 0; ` export const ArrowIcon = styled(ArrowSVG)` - ${css.size(12)}; + ${css.size(16)}; fill: ${theme('thread.extraInfo')}; + margin-left: 20px; margin-right: 10px; + + transform: rotate(270deg); ` export const Title = styled.div` - ${css.lineClamp(1)} + ${css.cutRest('440px')}; + /* ${css.lineClamp(1)} */ color: ${theme('thread.articleDigest')}; font-size: 16px; font-weight: 500; diff --git a/src/widgets/FaqList/styles/index.ts b/src/widgets/FaqList/styles/index.ts index 74680fc67..053c7781e 100644 --- a/src/widgets/FaqList/styles/index.ts +++ b/src/widgets/FaqList/styles/index.ts @@ -3,10 +3,13 @@ import styled from 'styled-components' import type { TTestable } from '@/spec' // import Img from '@/Img' -// import { theme } from '@/utils/themes' +import css from '@/utils/css' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ 'data-test-id': testid, -}))`` +}))` + ${css.flexColumn('align-center')}; + /* width: 100%; */ +` export const Title = styled.div`` From 5c1e314d5a14156b4f2e2c43e93a00821f34655d Mon Sep 17 00:00:00 2001 From: mydearxym Date: Tue, 3 May 2022 18:46:27 +0800 Subject: [PATCH 2/2] refactor(faq): ux for collapse FAQ --- .../thread/HelpThread/styles/faq_layout.ts | 1 - src/widgets/FaqList/Collapse.tsx | 61 +++++++++++++------ src/widgets/FaqList/index.tsx | 22 ++++--- src/widgets/FaqList/styles/collapse.ts | 61 ++++++++++++------- src/widgets/FaqList/styles/index.ts | 1 - 5 files changed, 93 insertions(+), 53 deletions(-) diff --git a/src/containers/thread/HelpThread/styles/faq_layout.ts b/src/containers/thread/HelpThread/styles/faq_layout.ts index 242634b0b..b6bbb7371 100644 --- a/src/containers/thread/HelpThread/styles/faq_layout.ts +++ b/src/containers/thread/HelpThread/styles/faq_layout.ts @@ -5,7 +5,6 @@ import { MainWrapper } from './index' export const Wrapper = styled(MainWrapper)` ${css.flexColumn('align-center')}; - width: 100%; margin-top: 30px; padding-left: 22px; padding-right: 0; diff --git a/src/widgets/FaqList/Collapse.tsx b/src/widgets/FaqList/Collapse.tsx index 821a95363..26fcd6a70 100644 --- a/src/widgets/FaqList/Collapse.tsx +++ b/src/widgets/FaqList/Collapse.tsx @@ -1,15 +1,19 @@ -import { FC, memo } from 'react' +import { FC, memo, useState, useCallback } from 'react' +import { includes, reject } from 'ramda' + +import type { TID } from '@/spec' import { Wrapper, - Header, FAQ, FAQTitle, - FAQDesc, + Header, + Title, + ArrowIcon, + Body, MoreLink, Section, - ArrowIcon, - Title, + Footer, } from './styles/collapse' import type { TProps as TIndex } from './index' @@ -17,25 +21,42 @@ import type { TProps as TIndex } from './index' type TProps = Pick const Collapse: FC = ({ articles }) => { + const [openedIDs, setOpenedIDs] = useState([]) + + const toggle = useCallback( + (id) => { + includes(id, openedIDs) + ? setOpenedIDs(reject((_id) => _id === id, openedIDs)) + : setOpenedIDs([id, ...openedIDs]) + }, + [openedIDs], + ) + return ( -
- - 常见问题 - -
- - {articles.map((item) => ( -
- {item.title} - -
- ))} - - + + 常见问题 + + + {articles.map((item) => { + const isOpend = includes(item.id, openedIDs) + + return ( +
+
toggle(item.id)}> + {item.title} + +
+ + {item.body} +
+ ) + })} + +
如有其他疑问，请
告诉我们。 - +
) } diff --git a/src/widgets/FaqList/index.tsx b/src/widgets/FaqList/index.tsx index 3220d562b..f156cad49 100644 --- a/src/widgets/FaqList/index.tsx +++ b/src/widgets/FaqList/index.tsx @@ -6,6 +6,7 @@ import { FC, memo } from 'react' +import type { TArticle } from '@/spec' import { buildLog } from '@/utils/logger' import Sidebar from './Sidebar' @@ -19,38 +20,41 @@ const log = buildLog('c:FaqList:index') const defaultArticles = [ { + id: '1', title: '购买标准版或者高级版是否可开具发票？', - body: '', + body: '首先很多西方国家员工能摆烂，很大部分原因是他们有资本积累，在行业上游。有主导权和议价权，竞争壁垒高，别人就是可以三五个人占据关键岗位，剩下的事交给别人来做。', }, { + id: '2', title: '高级版使用过程中如何增加团队人数？', - body: '', + body: '曾遇见一个沃达丰的小哥，跑跨国业务线，工作之余就去学语言学管理。每次问他去不去摸鱼，他也去，只是期间我会选择玩几局王者，他在旁边看新语言的单词', }, { + id: '3', title: '小画桌如何保障数据安全？', - body: '', + body: '有廉价又产出高的不用，选择养这帮喜欢吃大锅饭的人？矛盾冲突是生产力，这个世界运作动力来自于竞争，不管是欧美也好，欠发达地区也好。', }, { + id: '4', title: '标准版是否可以升级为高级版？', - body: '', + body: '欧洲当年也内卷，然后罗曼洛夫一家都被扬了，整个苏联的资本家和贵族要么在电线杆上，要么不在俄国境内。', }, { + id: '5', title: '小画桌语音是否支持额外购买？', body: '是否支持7天无理由退款？', }, { + id: '6', title: '为什么修改了环境变量（或全局变量）值，而引用的地方没有生效？', - body: '', + body: '再然后只能吃土豆皮的基尔水兵就哗变了，整个德国的贵族和资本家害怕像俄国的同行们一样上电线杆，直接投降。', }, ] export type TProps = { testid?: string mode?: 'sidebar' | 'search-hint' | 'collapse' - articles?: { - title: string - body?: string - }[] + articles?: TArticle[] } const FaqList: FC = ({ diff --git a/src/widgets/FaqList/styles/collapse.ts b/src/widgets/FaqList/styles/collapse.ts index 910895a25..2f3ba3e22 100644 --- a/src/widgets/FaqList/styles/collapse.ts +++ b/src/widgets/FaqList/styles/collapse.ts @@ -1,24 +1,26 @@ import styled from 'styled-components' +import type { TActive } from '@/spec' + import css, { theme } from '@/utils/css' import FAQSVG from '@/icons/FAQ' import ArrowSVG from '@/icons/ArrowSimple' export const Wrapper = styled.div` ${css.flexColumn()}; - margin-left: 15px; -` -export const Header = styled.div` - margin-bottom: 34px; - margin-left: -25px; + width: 55%; + max-width: 55%; + min-width: 550px; + max-width: 550px; ` export const FAQ = styled.div` ${css.flex('align-both')}; + margin-bottom: 34px; + margin-left: -40px; ` export const FAQIcon = styled(FAQSVG)` - ${css.size(16)}; + ${css.size(18)}; fill: ${theme('thread.articleDigest')}; - margin-right: 10px; margin-top: 2px; ` export const FAQTitle = styled.div` @@ -26,7 +28,7 @@ export const FAQTitle = styled.div` font-size: 20px; font-weight: 500; ` -export const FAQDesc = styled.div` +export const Footer = styled.div` ${css.flex('align-both')}; color: ${theme('thread.articleDigest')}; font-size: 12px; @@ -44,26 +46,41 @@ export const MoreLink = styled.div` transition: all 0.2s; ` export const Section = styled.div` - ${css.flex('align-center', 'justify-between')}; - padding: 20px 0; + padding: 18px 0; + width: 100%; ` -export const ArrowIcon = styled(ArrowSVG)` - ${css.size(16)}; - fill: ${theme('thread.extraInfo')}; - margin-left: 20px; - margin-right: 10px; - - transform: rotate(270deg); +export const Header = styled.div` + ${css.flex('align-center', 'justify-between')}; + cursor: pointer; ` -export const Title = styled.div` +export const Title = styled.div` ${css.cutRest('440px')}; - /* ${css.lineClamp(1)} */ - color: ${theme('thread.articleDigest')}; + color: ${({ $active }) => + $active ? theme('thread.articleTitle') : theme('thread.articleDigest')}; font-size: 16px; font-weight: 500; - &:hover { + ${Section}:hover & { color: ${theme('thread.articleTitle')}; - cursor: pointer; } ` +export const Body = styled.div` + color: ${theme('thread.articleDigest')}; + font-size: 15px; + margin-top: ${({ show }) => (show ? '12px' : 0)}; + max-height: ${({ show }) => (show ? 'auto' : 0)}; + line-height: 1.8; + overflow: hidden; + + opacity: ${({ show }) => (show ? 1 : 0)}; + transition: all 0.3s; +` +export const ArrowIcon = styled(ArrowSVG)` + ${css.size(16)}; + fill: ${theme('thread.extraInfo')}; + margin-left: 20px; + margin-right: 10px; + transform: ${({ $active }) => ($active ? 'rotate(270deg)' : 'rotate(90deg)')}; + + transition: all 0.5s; +` diff --git a/src/widgets/FaqList/styles/index.ts b/src/widgets/FaqList/styles/index.ts index 053c7781e..eec115856 100644 --- a/src/widgets/FaqList/styles/index.ts +++ b/src/widgets/FaqList/styles/index.ts @@ -9,7 +9,6 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ 'data-test-id': testid, }))` ${css.flexColumn('align-center')}; - /* width: 100%; */ ` export const Title = styled.div``