diff --git a/public/icons/static/edit/publish-write.svg b/public/icons/static/edit/publish-write.svg
new file mode 100644
index 000000000..7cbb61389
--- /dev/null
+++ b/public/icons/static/edit/publish-write.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/icons/static/shape/link-hint.svg b/public/icons/static/shape/link-hint.svg
new file mode 100644
index 000000000..93d3ea837
--- /dev/null
+++ b/public/icons/static/shape/link-hint.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/Buttons/DropdownButton/OptionPanel.js b/src/components/Buttons/DropdownButton/OptionPanel.js
index a902c56c8..89d8c8ce3 100644
--- a/src/components/Buttons/DropdownButton/OptionPanel.js
+++ b/src/components/Buttons/DropdownButton/OptionPanel.js
@@ -1,31 +1,64 @@
import React from 'react'
import T from 'prop-types'
+import { ICON } from '@/config'
+import { cutFrom } from '@/utils'
+
import {
Wrapper,
IconWrapper,
Block,
+ BlockA,
Icon,
Intro,
+ Header,
Title,
+ LinkIcon,
Desc,
} from '../styles/dropdown_button/option_panel'
-const OptionPanel = ({ options, onClick }) => {
+// there is two types of block, normal block and link
+const OptionBlock = ({ children, onClick, link }) => {
+ if (link) {
+ return {children}
+ }
+ return {children}
+}
+
+const ActionBlock = ({ children, onClick }) => {
+ return {children}
+}
+
+const LinkBlock = ({ children, link }) => {
+ return (
+
+ {children}
+
+ )
+}
+
+const OptionPanel = ({ options, onClick, panelMinWidth }) => {
return (
-
+
{options.map((item, index) => (
- onClick(item.key)}>
+ onClick(item.key)}
+ >
{/* common_check icon is special, smaller than normal icons,
and check icon is always the first icon */}
- {item.title}
- {item.desc}
+
+ {item.title}
+ {item.link && }
+
+ {cutFrom(item.desc, 26)}
-
+
))}
)
@@ -38,8 +71,10 @@ OptionPanel.propTypes = {
title: T.stirng,
desc: T.string,
icon: T.string,
+ link: T.string,
}),
),
+ panelMinWidth: T.string.isRequired,
}
OptionPanel.defaultProps = {
diff --git a/src/components/Buttons/DropdownButton/index.js b/src/components/Buttons/DropdownButton/index.js
index b3fdbec75..ee940e848 100644
--- a/src/components/Buttons/DropdownButton/index.js
+++ b/src/components/Buttons/DropdownButton/index.js
@@ -15,16 +15,28 @@ import {
} from '../styles/dropdown_button'
//
-const DropdownButton = ({ children, options, onClick }) => {
+const DropdownButton = ({
+ children,
+ options,
+ onClick,
+ placement,
+ panelMinWidth,
+}) => {
return (
{children}
}
- noDefaultPadding
+ content={
+
+ }
+ noPadding
>
@@ -43,8 +55,24 @@ DropdownButton.propTypes = {
title: T.stirng,
desc: T.string,
icon: T.string,
+ link: T.string,
}),
),
+ placement: T.oneOf([
+ 'top',
+ 'top-start',
+ 'top-end',
+ 'bottom',
+ 'bottom-start',
+ 'bottom-end',
+ 'left',
+ 'left-start',
+ 'left-end',
+ 'right',
+ 'right-start',
+ 'right-end',
+ ]),
+ panelMinWidth: T.string,
// ghost: T.bool,
// type: T.oneOf(['primary', 'red', 'ghost']),
// onClick: T.func,
@@ -55,6 +83,8 @@ DropdownButton.defaultProps = {
children: 'Button',
onClick: console.log,
options: [],
+ placement: 'bottom',
+ panelMinWidth: '100%',
// ghost: false,
// type: 'primary',
// size: 'default',
diff --git a/src/components/Buttons/styles/dropdown_button/option_panel.js b/src/components/Buttons/styles/dropdown_button/option_panel.js
index b454783da..68ae917a1 100644
--- a/src/components/Buttons/styles/dropdown_button/option_panel.js
+++ b/src/components/Buttons/styles/dropdown_button/option_panel.js
@@ -6,14 +6,13 @@ import { css, theme } from '@/utils'
export const Wrapper = styled.div`
${css.flexColumn()};
width: 100%;
+ min-width: ${({ panelMinWidth }) => panelMinWidth};
max-height: 200px;
overflow: hidden;
`
export const Block = styled.div`
${css.flex('align-start')};
- padding: 8px 15px;
- padding-left: 10px;
- padding-bottom: 8px;
+ padding: 8px 10px;
border-bottom: 1px solid;
border-bottom-color: #0d3e4e;
@@ -28,14 +27,19 @@ export const Block = styled.div`
}
transition: all 0.25s;
`
+export const BlockA = styled(Block)`
+ text-decoration: none;
+`
export const IconWrapper = styled.div`
${css.flex('justify-center')};
- width: 24px;
+ width: 28px;
`
export const Icon = styled(Img)`
fill: ${theme('button.primary')};
- width: ${({ bigger }) => (bigger ? '24px' : '18px')};
- height: ${({ bigger }) => (bigger ? '24px' : '18px')};
+ ${css.size(16)};
+ margin-top: 4px;
+ /* width: ${({ bigger }) => (bigger ? '24px' : '18px')};
+ height: ${({ bigger }) => (bigger ? '24px' : '18px')}; */
display: block;
opacity: ${({ index }) => (index === 0 ? 1 : 0)};
@@ -47,13 +51,28 @@ export const Icon = styled(Img)`
export const Intro = styled.div`
${css.flexColumn()};
margin-left: 7px;
+ width: 100%;
`
-export const Title = styled.div`
+export const Header = styled.div`
+ ${css.flex('align-center')};
color: ${theme('thread.articleTitle')};
+`
+export const Title = styled.div`
+ ${css.cutFrom('90%')};
font-size: 14px;
`
+export const LinkIcon = styled(Img)`
+ ${css.size(10)};
+ fill: ${theme('thread.articleTitle')};
+ margin-left: 5px;
+ display: none;
+
+ ${Block}:hover & {
+ display: block;
+ }
+`
export const Desc = styled.div`
color: ${theme('thread.articleDigest')};
font-size: 11px;
- margin-top: 2px;
+ margin-top: 4px;
`
diff --git a/src/containers/thread/PostsThread/index.js b/src/containers/thread/PostsThread/index.js
index 1626d4851..d6a6ef593 100755
--- a/src/containers/thread/PostsThread/index.js
+++ b/src/containers/thread/PostsThread/index.js
@@ -8,13 +8,14 @@ import React from 'react'
import { Waypoint } from 'react-waypoint'
import { contains } from 'ramda'
+import { ICON } from '@/config'
import { C11N, THREAD, ROUTE } from '@/constant'
import { pluggedIn, buildLog } from '@/utils'
import TagsBar from '@/containers/unit/TagsBar'
import Sticky from '@/components/Sticky'
-import { PublishButton } from '@/components/Buttons'
+import { DropdownButton } from '@/components/Buttons'
import Maybe from '@/components/Maybe'
import FaqPeekList from '@/components/FaqPeekList'
import PagedContents from '@/components/PagedContents'
@@ -147,10 +148,37 @@ const PostsThreadContainer = ({ postsThread: store }) => {
{bannerLayout === C11N.DIGEST && (
- {
+ if (key === 'publish') onContentCreate()
+ }}
+ >
+ {LabelText[subPath] || '发布帖子'}
+
+
+ {/*
+ /> */}