Skip to content
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit 6a1a0af

Browse files
authored
refactor(publish-btn): redesign with dropdown button (#1007)
1 parent 6ecee08 commit 6a1a0af

File tree

6 files changed

+135
-21
lines changed

6 files changed

+135
-21
lines changed
Lines changed: 1 addition & 0 deletions
Loading
Lines changed: 1 addition & 0 deletions
Loading

src/components/Buttons/DropdownButton/OptionPanel.js

Lines changed: 41 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,64 @@
11
import React from 'react'
22
import T from 'prop-types'
33

4+
import { ICON } from '@/config'
5+
import { cutFrom } from '@/utils'
6+
47
import {
58
Wrapper,
69
IconWrapper,
710
Block,
11+
BlockA,
812
Icon,
913
Intro,
14+
Header,
1015
Title,
16+
LinkIcon,
1117
Desc,
1218
} from '../styles/dropdown_button/option_panel'
1319

14-
const OptionPanel = ({ options, onClick }) => {
20+
// there is two types of block, normal block and link
21+
const OptionBlock = ({ children, onClick, link }) => {
22+
if (link) {
23+
return <LinkBlock link={link}>{children}</LinkBlock>
24+
}
25+
return <ActionBlock onClick={onClick}>{children}</ActionBlock>
26+
}
27+
28+
const ActionBlock = ({ children, onClick }) => {
29+
return <Block onClick={onClick}>{children}</Block>
30+
}
31+
32+
const LinkBlock = ({ children, link }) => {
33+
return (
34+
<BlockA as="a" href={link}>
35+
{children}
36+
</BlockA>
37+
)
38+
}
39+
40+
const OptionPanel = ({ options, onClick, panelMinWidth }) => {
1541
return (
16-
<Wrapper>
42+
<Wrapper panelMinWidth={panelMinWidth}>
1743
{options.map((item, index) => (
18-
<Block key={item.key} onClick={() => onClick(item.key)}>
44+
<OptionBlock
45+
key={item.key}
46+
link={item.link}
47+
onClick={() => onClick(item.key)}
48+
>
1949
{/* common_check icon is special, smaller than normal icons,
2050
and check icon is always the first icon */}
2151
<IconWrapper>
2252
<Icon src={item.icon} index={index} bigger={index === 0} />
2353
</IconWrapper>
2454
<Intro>
25-
<Title>{item.title}</Title>
26-
<Desc>{item.desc}</Desc>
55+
<Header>
56+
<Title>{item.title}</Title>
57+
{item.link && <LinkIcon src={`${ICON}/shape/link-hint.svg`} />}
58+
</Header>
59+
<Desc>{cutFrom(item.desc, 26)}</Desc>
2760
</Intro>
28-
</Block>
61+
</OptionBlock>
2962
))}
3063
</Wrapper>
3164
)
@@ -38,8 +71,10 @@ OptionPanel.propTypes = {
3871
title: T.stirng,
3972
desc: T.string,
4073
icon: T.string,
74+
link: T.string,
4175
}),
4276
),
77+
panelMinWidth: T.string.isRequired,
4378
}
4479

4580
OptionPanel.defaultProps = {

src/components/Buttons/DropdownButton/index.js

Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,28 @@ import {
1515
} from '../styles/dropdown_button'
1616

1717
// <UpIcon src={`${ICON_CMD}/works/vote_up.svg`} />
18-
const DropdownButton = ({ children, options, onClick }) => {
18+
const DropdownButton = ({
19+
children,
20+
options,
21+
onClick,
22+
placement,
23+
panelMinWidth,
24+
}) => {
1925
return (
2026
<Wrapper>
2127
<ButtonWrapper onClick={onClick}>{children}</ButtonWrapper>
2228
<Tooltip
23-
placement="bottom"
29+
placement={placement}
2430
trigger="click"
2531
hideOnClick={false}
26-
content={<OptionPanel options={options} onClick={onClick} />}
27-
noDefaultPadding
32+
content={
33+
<OptionPanel
34+
options={options}
35+
onClick={onClick}
36+
panelMinWidth={panelMinWidth}
37+
/>
38+
}
39+
noPadding
2840
>
2941
<DropdownButtonWrapper>
3042
<MoreIcon src={`${ICON_CMD}/works/vote_up.svg`} onClick={onClick} />
@@ -43,8 +55,24 @@ DropdownButton.propTypes = {
4355
title: T.stirng,
4456
desc: T.string,
4557
icon: T.string,
58+
link: T.string,
4659
}),
4760
),
61+
placement: T.oneOf([
62+
'top',
63+
'top-start',
64+
'top-end',
65+
'bottom',
66+
'bottom-start',
67+
'bottom-end',
68+
'left',
69+
'left-start',
70+
'left-end',
71+
'right',
72+
'right-start',
73+
'right-end',
74+
]),
75+
panelMinWidth: T.string,
4876
// ghost: T.bool,
4977
// type: T.oneOf(['primary', 'red', 'ghost']),
5078
// onClick: T.func,
@@ -55,6 +83,8 @@ DropdownButton.defaultProps = {
5583
children: 'Button',
5684
onClick: console.log,
5785
options: [],
86+
placement: 'bottom',
87+
panelMinWidth: '100%',
5888
// ghost: false,
5989
// type: 'primary',
6090
// size: 'default',

src/components/Buttons/styles/dropdown_button/option_panel.js

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,13 @@ import { css, theme } from '@/utils'
66
export const Wrapper = styled.div`
77
${css.flexColumn()};
88
width: 100%;
9+
min-width: ${({ panelMinWidth }) => panelMinWidth};
910
max-height: 200px;
1011
overflow: hidden;
1112
`
1213
export const Block = styled.div`
1314
${css.flex('align-start')};
14-
padding: 8px 15px;
15-
padding-left: 10px;
16-
padding-bottom: 8px;
15+
padding: 8px 10px;
1716
border-bottom: 1px solid;
1817
border-bottom-color: #0d3e4e;
1918
@@ -28,14 +27,19 @@ export const Block = styled.div`
2827
}
2928
transition: all 0.25s;
3029
`
30+
export const BlockA = styled(Block)`
31+
text-decoration: none;
32+
`
3133
export const IconWrapper = styled.div`
3234
${css.flex('justify-center')};
33-
width: 24px;
35+
width: 28px;
3436
`
3537
export const Icon = styled(Img)`
3638
fill: ${theme('button.primary')};
37-
width: ${({ bigger }) => (bigger ? '24px' : '18px')};
38-
height: ${({ bigger }) => (bigger ? '24px' : '18px')};
39+
${css.size(16)};
40+
margin-top: 4px;
41+
/* width: ${({ bigger }) => (bigger ? '24px' : '18px')};
42+
height: ${({ bigger }) => (bigger ? '24px' : '18px')}; */
3943
display: block;
4044
4145
opacity: ${({ index }) => (index === 0 ? 1 : 0)};
@@ -47,13 +51,28 @@ export const Icon = styled(Img)`
4751
export const Intro = styled.div`
4852
${css.flexColumn()};
4953
margin-left: 7px;
54+
width: 100%;
5055
`
51-
export const Title = styled.div`
56+
export const Header = styled.div`
57+
${css.flex('align-center')};
5258
color: ${theme('thread.articleTitle')};
59+
`
60+
export const Title = styled.div`
61+
${css.cutFrom('90%')};
5362
font-size: 14px;
5463
`
64+
export const LinkIcon = styled(Img)`
65+
${css.size(10)};
66+
fill: ${theme('thread.articleTitle')};
67+
margin-left: 5px;
68+
display: none;
69+
70+
${Block}:hover & {
71+
display: block;
72+
}
73+
`
5574
export const Desc = styled.div`
5675
color: ${theme('thread.articleDigest')};
5776
font-size: 11px;
58-
margin-top: 2px;
77+
margin-top: 4px;
5978
`

src/containers/thread/PostsThread/index.js

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,14 @@ import React from 'react'
88
import { Waypoint } from 'react-waypoint'
99
import { contains } from 'ramda'
1010

11+
import { ICON } from '@/config'
1112
import { C11N, THREAD, ROUTE } from '@/constant'
1213
import { pluggedIn, buildLog } from '@/utils'
1314

1415
import TagsBar from '@/containers/unit/TagsBar'
1516

1617
import Sticky from '@/components/Sticky'
17-
import { PublishButton } from '@/components/Buttons'
18+
import { DropdownButton } from '@/components/Buttons'
1819
import Maybe from '@/components/Maybe'
1920
import FaqPeekList from '@/components/FaqPeekList'
2021
import PagedContents from '@/components/PagedContents'
@@ -147,10 +148,37 @@ const PostsThreadContainer = ({ postsThread: store }) => {
147148
{bannerLayout === C11N.DIGEST && (
148149
<RightPart>
149150
<PublisherWrapper>
150-
<PublishButton
151+
<DropdownButton
152+
type="primary"
153+
placement="bottom-end"
154+
options={[
155+
{
156+
key: 'publish',
157+
icon: `${ICON}/edit/publish-write.svg`,
158+
title: '发布帖子',
159+
desc: '发布后会第一次出现在相应版块首页。',
160+
},
161+
{
162+
key: 'link',
163+
link: 'https://newpage',
164+
icon: `${ICON}/article/report.svg`,
165+
title: '发布须知',
166+
desc:
167+
'请确保你发布的内容符合社区的基本价值观和规范,否则会被限流或直接删除。',
168+
},
169+
]}
170+
panelMinWidth="210px"
171+
onClick={(key) => {
172+
if (key === 'publish') onContentCreate()
173+
}}
174+
>
175+
{LabelText[subPath] || '发布帖子'}
176+
</DropdownButton>
177+
178+
{/* <PublishButton
151179
label={LabelText[subPath] || '发布帖子'}
152180
onPublish={onContentCreate}
153-
/>
181+
/> */}
154182
</PublisherWrapper>
155183

156184
<Sticky offsetTop={100}>

0 commit comments

Comments
 (0)