refactor(publish-btn): redesign with dropdown button (#1007)

Author: mydearxym

public/icons/static/edit/publish-write.svg

@@ -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 <LinkBlock link={link}>{children}</LinkBlock>
+  }
+  return <ActionBlock onClick={onClick}>{children}</ActionBlock>
+}
+
+const ActionBlock = ({ children, onClick }) => {
+  return <Block onClick={onClick}>{children}</Block>
+}
+
+const LinkBlock = ({ children, link }) => {
+  return (
+    <BlockA as="a" href={link}>
+      {children}
+    </BlockA>
+  )
+}
+
+const OptionPanel = ({ options, onClick, panelMinWidth }) => {
   return (
-    <Wrapper>
+    <Wrapper panelMinWidth={panelMinWidth}>
       {options.map((item, index) => (
-        <Block key={item.key} onClick={() => onClick(item.key)}>
+        <OptionBlock
+          key={item.key}
+          link={item.link}
+          onClick={() => onClick(item.key)}
+        >
           {/* common_check icon is special, smaller than normal icons,
           and check icon is always the first icon */}
           <IconWrapper>
             <Icon src={item.icon} index={index} bigger={index === 0} />
           </IconWrapper>
           <Intro>
-            <Title>{item.title}</Title>
-            <Desc>{item.desc}</Desc>
+            <Header>
+              <Title>{item.title}</Title>
+              {item.link && <LinkIcon src={`${ICON}/shape/link-hint.svg`} />}
+            </Header>
+            <Desc>{cutFrom(item.desc, 26)}</Desc>
           </Intro>
-        </Block>
+        </OptionBlock>
       ))}
     </Wrapper>
   )
@@ -38,8 +71,10 @@ OptionPanel.propTypes = {
       title: T.stirng,
       desc: T.string,
       icon: T.string,
+      link: T.string,
     }),
   ),
+  panelMinWidth: T.string.isRequired,
 }
 
 OptionPanel.defaultProps = {

public/icons/static/shape/link-hint.svg

@@ -15,16 +15,28 @@ import {
 } from '../styles/dropdown_button'
 
 // <UpIcon src={`${ICON_CMD}/works/vote_up.svg`} />
-const DropdownButton = ({ children, options, onClick }) => {
+const DropdownButton = ({
+  children,
+  options,
+  onClick,
+  placement,
+  panelMinWidth,
+}) => {
   return (
     <Wrapper>
       <ButtonWrapper onClick={onClick}>{children}</ButtonWrapper>
       <Tooltip
-        placement="bottom"
+        placement={placement}
         trigger="click"
         hideOnClick={false}
-        content={<OptionPanel options={options} onClick={onClick} />}
-        noDefaultPadding
+        content={
+          <OptionPanel
+            options={options}
+            onClick={onClick}
+            panelMinWidth={panelMinWidth}
+          />
+        }
+        noPadding
       >
         <DropdownButtonWrapper>
           <MoreIcon src={`${ICON_CMD}/works/vote_up.svg`} onClick={onClick} />
@@ -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',

src/components/Buttons/DropdownButton/OptionPanel.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;
 `

src/components/Buttons/DropdownButton/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 && (
             <RightPart>
               <PublisherWrapper>
-                <PublishButton
+                <DropdownButton
+                  type="primary"
+                  placement="bottom-end"
+                  options={[
+                    {
+                      key: 'publish',
+                      icon: `${ICON}/edit/publish-write.svg`,
+                      title: '发布帖子',
+                      desc: '发布后会第一次出现在相应版块首页。',
+                    },
+                    {
+                      key: 'link',
+                      link: 'https://newpage',
+                      icon: `${ICON}/article/report.svg`,
+                      title: '发布须知',
+                      desc:
+                        '请确保你发布的内容符合社区的基本价值观和规范，否则会被限流或直接删除。',
+                    },
+                  ]}
+                  panelMinWidth="210px"
+                  onClick={(key) => {
+                    if (key === 'publish') onContentCreate()
+                  }}
+                >
+                  {LabelText[subPath] || '发布帖子'}
+                </DropdownButton>
+
+                {/* <PublishButton
                   label={LabelText[subPath] || '发布帖子'}
                   onPublish={onContentCreate}
-                />
+                /> */}
               </PublisherWrapper>
 
               <Sticky offsetTop={100}>