refactor(layout): HolyGrailLayout && re-org

src/components/Buttons/FancyPublishButton.tsx

@@ -0,0 +1,71 @@
+/*
+ *
+ * PublishButton
+ *
+ */
+
+import { memo, FC } from 'react'
+
+import { ICON_CMD } from '@/config'
+import { buildLog } from '@/utils'
+
+import Tooltip from '@/components/Tooltip'
+import {
+  Wrapper,
+  Label,
+  LabelIcon,
+  ActionLink,
+  Icon,
+} from './styles/fancy_publish_button'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:PublishButton:index')
+
+type TProps = {
+  label?: string
+  labelIconSrc?: string
+  onPublish?: () => void
+  onVote?: () => void
+  onImport?: () => void
+  onFAQ?: () => void
+}
+
+const PublishButton: FC<TProps> = ({
+  label = '发布帖子 ',
+  labelIconSrc = `${ICON_CMD}/publish_pen.svg`,
+  onPublish = log,
+  onVote = log,
+  onImport = log,
+  onFAQ = log,
+}) => {
+  return (
+    <Wrapper>
+      <Label>
+        <div>{label}</div>
+        <LabelIcon src={labelIconSrc} />
+      </Label>
+      <Tooltip content="发布帖子" placement="bottom" duration={0}>
+        <ActionLink onClick={onPublish}>
+          <Icon src={`${ICON_CMD}/publish_write.svg`} />
+        </ActionLink>
+      </Tooltip>
+      <Tooltip content="发布投票" placement="bottom" duration={0}>
+        <ActionLink onClick={onVote}>
+          <Icon src={`${ICON_CMD}/publish_vote.svg`} />
+        </ActionLink>
+      </Tooltip>
+      <Tooltip content="导入内容" placement="bottom" duration={0}>
+        <ActionLink onClick={onImport}>
+          <Icon src={`${ICON_CMD}/publish_import.svg`} />
+        </ActionLink>
+      </Tooltip>
+      <Tooltip content="发帖礼仪" placement="bottom" duration={0}>
+        <ActionLink onClick={onFAQ}>
+          <Icon src={`${ICON_CMD}/publish_faq.svg`} />
+        </ActionLink>
+      </Tooltip>
+    </Wrapper>
+  )
+}
+
+export default memo(PublishButton)

src/components/Buttons/PublishButton.tsx

@@ -6,64 +6,77 @@
 
 import { memo, FC } from 'react'
 
-import { ICON_CMD } from '@/config'
+import type { TThread } from '@/spec'
+
+import { THREAD } from '@/constant'
+import { ICON } from '@/config'
 import { buildLog } from '@/utils'
 
-import Tooltip from '@/components/Tooltip'
-import {
-  Wrapper,
-  Label,
-  LabelIcon,
-  ActionLink,
-  Icon,
-} from './styles/publish_button'
+import DropdownButton from './DropdownButton'
+import { Wrapper } from './styles/publish_button'
 
 /* eslint-disable-next-line */
 const log = buildLog('c:PublishButton:index')
 
+const getOptions = (thread) => {
+  switch (thread) {
+    case THREAD.JOB: {
+      return [
+        {
+          key: 'publish',
+          icon: `${ICON}/edit/publish-write.svg`,
+          title: '我要招人',
+          desc: '发布后会第一次出现在相应版块首页。',
+        },
+        {
+          key: 'link',
+          link: 'https://newpage',
+          icon: `${ICON}/article/report.svg`,
+          title: '发布须知',
+          desc:
+            '请确保你发布的内容符合社区的基本价值观和规范，否则会被限流或直接删除。',
+        },
+      ]
+    }
+    default: {
+      return [
+        {
+          key: 'publish',
+          icon: `${ICON}/edit/publish-write.svg`,
+          title: '发布帖子',
+          desc: '发布后会第一次出现在相应版块首页。',
+        },
+        {
+          key: 'link',
+          link: 'https://newpage',
+          icon: `${ICON}/article/report.svg`,
+          title: '发布须知',
+          desc:
+            '请确保你发布的内容符合社区的基本价值观和规范，否则会被限流或直接删除。',
+        },
+      ]
+    }
+  }
+}
+
 type TProps = {
-  label?: string
-  labelIconSrc?: string
-  onPublish?: () => void
-  onVote?: () => void
-  onImport?: () => void
-  onFAQ?: () => void
+  thread?: TThread
+  onCreate?: () => void
 }
 
-const PublishButton: FC<TProps> = ({
-  label = '发布帖子 ',
-  labelIconSrc = `${ICON_CMD}/publish_pen.svg`,
-  onPublish = log,
-  onVote = log,
-  onImport = log,
-  onFAQ = log,
-}) => {
+const PublishButton: FC<TProps> = ({ thread = THREAD.POST, onCreate }) => {
   return (
     <Wrapper>
-      <Label>
-        <div>{label}</div>
-        <LabelIcon src={labelIconSrc} />
-      </Label>
-      <Tooltip content="发布帖子" placement="bottom" duration={0}>
-        <ActionLink onClick={onPublish}>
-          <Icon src={`${ICON_CMD}/publish_write.svg`} />
-        </ActionLink>
-      </Tooltip>
-      <Tooltip content="发布投票" placement="bottom" duration={0}>
-        <ActionLink onClick={onVote}>
-          <Icon src={`${ICON_CMD}/publish_vote.svg`} />
-        </ActionLink>
-      </Tooltip>
-      <Tooltip content="导入内容" placement="bottom" duration={0}>
-        <ActionLink onClick={onImport}>
-          <Icon src={`${ICON_CMD}/publish_import.svg`} />
-        </ActionLink>
-      </Tooltip>
-      <Tooltip content="发帖礼仪" placement="bottom" duration={0}>
-        <ActionLink onClick={onFAQ}>
-          <Icon src={`${ICON_CMD}/publish_faq.svg`} />
-        </ActionLink>
-      </Tooltip>
+      <DropdownButton
+        placement="bottom-end"
+        options={getOptions(thread)}
+        panelMinWidth="210px"
+        onClick={(key) => {
+          if (key === 'publish') onCreate()
+        }}
+      >
+        发布帖子
+      </DropdownButton>
     </Wrapper>
   )
 }

src/components/Buttons/index.tsx

@@ -1,6 +1,7 @@
 export { default as Button } from './Button'
 export { default as ArrowButton } from './ArrowButton'
 export { default as ArrowLink } from './ArrowLink'
+// export { default as FancyPublishButton } from './FancyPublishButton'
 export { default as PublishButton } from './PublishButton'
 export { default as OrButton } from './OrButton'
 export { default as DropdownButton } from './DropdownButton'

src/components/Buttons/styles/fancy_publish_button.ts

@@ -0,0 +1,116 @@
+import styled from 'styled-components'
+
+import Img from '@/Img'
+import { css, theme } from '@/utils'
+
+// see example: https://codepen.io/mydearxym2/pen/qBEvvpo
+
+const commonHoverAffix = `
+  content: '';
+  position: absolute;
+  top: 0;
+  ${css.flex('align-center')};
+  height: 100%;
+  transition: 0.25s linear;
+  z-index: 1;
+`
+
+export const Wrapper = styled.div`
+  position: relative;
+  ${css.flex('align-both')};
+  width: 100%;
+  max-width: 300px;
+  height: 32px;
+  background-color: #3680ad; /* 消失的时候背景色 */
+  border-radius: 3px;
+  /* 
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  */
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  overflow: hidden;
+
+  &:hover {
+    background-color: #22637e; /* #46627f; */
+    /*
+        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+     */
+  }
+
+  &:hover span {
+    opacity: 0;
+    z-index: -3;
+  }
+  &:hover:before {
+    opacity: 0.5;
+    transform: translateY(-100%);
+  }
+  &:hover:after {
+    opacity: 0.5;
+    transform: translateY(100%);
+  }
+
+  &:before {
+    ${commonHoverAffix};
+    width: 70%;
+    left: 0;
+    justify-content: flex-end;
+    background-color: #3e8ebf;
+  }
+
+  &:after {
+    ${commonHoverAffix};
+    width: 30%;
+    right: 0;
+    justify-content: flex-start;
+    background-color: #327faf;
+  }
+`
+export const Label = styled.span`
+  ${css.flex('align-center', 'justify-between')};
+  padding-left: 16px;
+  padding-right: 16px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  color: ${theme('button.fg')};
+  font-family: 'Fira Mono', monospace;
+  font-size: 14px;
+  letter-spacing: 4px;
+  opacity: 1;
+  transition: opacity 0.25s;
+  z-index: 2;
+`
+export const LabelIcon = styled(Img)`
+  fill: ${theme('button.fg')};
+  ${css.size(14)};
+`
+export const ActionLink = styled.a`
+  position: relative;
+  ${css.flex('align-both')};
+  /* width: 25%; */
+  width: 45px;
+  /* height: 100%; */
+  height: 32px;
+  color: whitesmoke;
+  font-size: 24px;
+  text-decoration: none;
+  transition: 0.25s;
+
+  &:hover {
+    background: #18587a;
+  }
+`
+export const Icon = styled(Img)`
+  fill: ${theme('button.fg')};
+  ${css.size(16)};
+
+  ${ActionLink}:hover & {
+    fill: ${theme('button.hoverBg')};
+    cursor: pointer;
+    width: 18px;
+    height: 18px;
+  }
+  transition: all 0.25s;
+`