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

Commit f690d8b

Browse files
mydearxymmydearxym
authored
refactor(layout): HolyGrailLayout && re-org (#1104)
* chore: wip * chore: re-org & convert to ts * chore: wip * chore: add template for PublishButton * feat: add subed communities demo list * chore: improve subscribe list in holygrail view * chore: clean up * refactor(navigator): convert to TS * chore: holy grail wip * chore: layout switch wip * chore: layout switch wip * chore: adjust footer padding for classic layout * chore(poststhread): move classicsidebar to own file * refactor(layout): extract thread sidebar * refactor(layout): add missing LAPTOP_M_PADDING
1 parent 8601664 commit f690d8b

File tree

130 files changed

+2047
-1889
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

130 files changed

+2047
-1889
lines changed

‎public/icons/static/article/unpin.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/Buttons/FancyPublishButton.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
/*
2+
*
3+
* PublishButton
4+
*
5+
*/
6+
7+
import { memo, FC } from 'react'
8+
9+
import { ICON_CMD } from '@/config'
10+
import { buildLog } from '@/utils'
11+
12+
import Tooltip from '@/components/Tooltip'
13+
import {
14+
Wrapper,
15+
Label,
16+
LabelIcon,
17+
ActionLink,
18+
Icon,
19+
} from './styles/fancy_publish_button'
20+
21+
/* eslint-disable-next-line */
22+
const log = buildLog('c:PublishButton:index')
23+
24+
type TProps = {
25+
label?: string
26+
labelIconSrc?: string
27+
onPublish?: () => void
28+
onVote?: () => void
29+
onImport?: () => void
30+
onFAQ?: () => void
31+
}
32+
33+
const PublishButton: FC<TProps> = ({
34+
label = '发布帖子 ',
35+
labelIconSrc = `${ICON_CMD}/publish_pen.svg`,
36+
onPublish = log,
37+
onVote = log,
38+
onImport = log,
39+
onFAQ = log,
40+
}) => {
41+
return (
42+
<Wrapper>
43+
<Label>
44+
<div>{label}</div>
45+
<LabelIcon src={labelIconSrc} />
46+
</Label>
47+
<Tooltip content="发布帖子" placement="bottom" duration={0}>
48+
<ActionLink onClick={onPublish}>
49+
<Icon src={`${ICON_CMD}/publish_write.svg`} />
50+
</ActionLink>
51+
</Tooltip>
52+
<Tooltip content="发布投票" placement="bottom" duration={0}>
53+
<ActionLink onClick={onVote}>
54+
<Icon src={`${ICON_CMD}/publish_vote.svg`} />
55+
</ActionLink>
56+
</Tooltip>
57+
<Tooltip content="导入内容" placement="bottom" duration={0}>
58+
<ActionLink onClick={onImport}>
59+
<Icon src={`${ICON_CMD}/publish_import.svg`} />
60+
</ActionLink>
61+
</Tooltip>
62+
<Tooltip content="发帖礼仪" placement="bottom" duration={0}>
63+
<ActionLink onClick={onFAQ}>
64+
<Icon src={`${ICON_CMD}/publish_faq.svg`} />
65+
</ActionLink>
66+
</Tooltip>
67+
</Wrapper>
68+
)
69+
}
70+
71+
export default memo(PublishButton)

‎src/components/Buttons/PublishButton.tsx‎

Lines changed: 60 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -6,64 +6,77 @@
66

77
import { memo, FC } from 'react'
88

9-
import { ICON_CMD } from '@/config'
9+
import type { TThread } from '@/spec'
10+
11+
import { THREAD } from '@/constant'
12+
import { ICON } from '@/config'
1013
import { buildLog } from '@/utils'
1114

12-
import Tooltip from '@/components/Tooltip'
13-
import {
14-
Wrapper,
15-
Label,
16-
LabelIcon,
17-
ActionLink,
18-
Icon,
19-
} from './styles/publish_button'
15+
import DropdownButton from './DropdownButton'
16+
import { Wrapper } from './styles/publish_button'
2017

2118
/* eslint-disable-next-line */
2219
const log = buildLog('c:PublishButton:index')
2320

21+
const getOptions = (thread) => {
22+
switch (thread) {
23+
case THREAD.JOB: {
24+
return [
25+
{
26+
key: 'publish',
27+
icon: `${ICON}/edit/publish-write.svg`,
28+
title: '我要招人',
29+
desc: '发布后会第一次出现在相应版块首页。',
30+
},
31+
{
32+
key: 'link',
33+
link: 'https://newpage',
34+
icon: `${ICON}/article/report.svg`,
35+
title: '发布须知',
36+
desc:
37+
'请确保你发布的内容符合社区的基本价值观和规范，否则会被限流或直接删除。',
38+
},
39+
]
40+
}
41+
default: {
42+
return [
43+
{
44+
key: 'publish',
45+
icon: `${ICON}/edit/publish-write.svg`,
46+
title: '发布帖子',
47+
desc: '发布后会第一次出现在相应版块首页。',
48+
},
49+
{
50+
key: 'link',
51+
link: 'https://newpage',
52+
icon: `${ICON}/article/report.svg`,
53+
title: '发布须知',
54+
desc:
55+
'请确保你发布的内容符合社区的基本价值观和规范，否则会被限流或直接删除。',
56+
},
57+
]
58+
}
59+
}
60+
}
61+
2462
type TProps = {
25-
label?: string
26-
labelIconSrc?: string
27-
onPublish?: () => void
28-
onVote?: () => void
29-
onImport?: () => void
30-
onFAQ?: () => void
63+
thread?: TThread
64+
onCreate?: () => void
3165
}
3266

33-
const PublishButton: FC<TProps> = ({
34-
label = '发布帖子 ',
35-
labelIconSrc = `${ICON_CMD}/publish_pen.svg`,
36-
onPublish = log,
37-
onVote = log,
38-
onImport = log,
39-
onFAQ = log,
40-
}) => {
67+
const PublishButton: FC<TProps> = ({ thread = THREAD.POST, onCreate }) => {
4168
return (
4269
<Wrapper>
43-
<Label>
44-
<div>{label}</div>
45-
<LabelIcon src={labelIconSrc} />
46-
</Label>
47-
<Tooltip content="发布帖子" placement="bottom" duration={0}>
48-
<ActionLink onClick={onPublish}>
49-
<Icon src={`${ICON_CMD}/publish_write.svg`} />
50-
</ActionLink>
51-
</Tooltip>
52-
<Tooltip content="发布投票" placement="bottom" duration={0}>
53-
<ActionLink onClick={onVote}>
54-
<Icon src={`${ICON_CMD}/publish_vote.svg`} />
55-
</ActionLink>
56-
</Tooltip>
57-
<Tooltip content="导入内容" placement="bottom" duration={0}>
58-
<ActionLink onClick={onImport}>
59-
<Icon src={`${ICON_CMD}/publish_import.svg`} />
60-
</ActionLink>
61-
</Tooltip>
62-
<Tooltip content="发帖礼仪" placement="bottom" duration={0}>
63-
<ActionLink onClick={onFAQ}>
64-
<Icon src={`${ICON_CMD}/publish_faq.svg`} />
65-
</ActionLink>
66-
</Tooltip>
70+
<DropdownButton
71+
placement="bottom-end"
72+
options={getOptions(thread)}
73+
panelMinWidth="210px"
74+
onClick={(key) => {
75+
if (key === 'publish') onCreate()
76+
}}
77+
>
78+
发布帖子
79+
</DropdownButton>
6780
</Wrapper>
6881
)
6982
}

‎src/components/Buttons/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
export { default as Button } from './Button'
22
export { default as ArrowButton } from './ArrowButton'
33
export { default as ArrowLink } from './ArrowLink'
4+
// export { default as FancyPublishButton } from './FancyPublishButton'
45
export { default as PublishButton } from './PublishButton'
56
export { default as OrButton } from './OrButton'
67
export { default as DropdownButton } from './DropdownButton'

‎src/components/Buttons/styles/fancy_publish_button.ts‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import styled from 'styled-components'
2+
3+
import Img from '@/Img'
4+
import { css, theme } from '@/utils'
5+
6+
// see example: https://codepen.io/mydearxym2/pen/qBEvvpo
7+
8+
const commonHoverAffix = `
9+
content: '';
10+
position: absolute;
11+
top: 0;
12+
${css.flex('align-center')};
13+
height: 100%;
14+
transition: 0.25s linear;
15+
z-index: 1;
16+
`
17+
18+
export const Wrapper = styled.div`
19+
position: relative;
20+
${css.flex('align-both')};
21+
width: 100%;
22+
max-width: 300px;
23+
height: 32px;
24+
background-color: #3680ad; /* 消失的时候背景色 */
25+
border-radius: 3px;
26+
/*
27+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
28+
*/
29+
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
30+
overflow: hidden;
31+
32+
&:hover {
33+
background-color: #22637e; /* #46627f; */
34+
/*
35+
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
36+
*/
37+
}
38+
39+
&:hover span {
40+
opacity: 0;
41+
z-index: -3;
42+
}
43+
&:hover:before {
44+
opacity: 0.5;
45+
transform: translateY(-100%);
46+
}
47+
&:hover:after {
48+
opacity: 0.5;
49+
transform: translateY(100%);
50+
}
51+
52+
&:before {
53+
${commonHoverAffix};
54+
width: 70%;
55+
left: 0;
56+
justify-content: flex-end;
57+
background-color: #3e8ebf;
58+
}
59+
60+
&:after {
61+
${commonHoverAffix};
62+
width: 30%;
63+
right: 0;
64+
justify-content: flex-start;
65+
background-color: #327faf;
66+
}
67+
`
68+
export const Label = styled.span`
69+
${css.flex('align-center', 'justify-between')};
70+
padding-left: 16px;
71+
padding-right: 16px;
72+
position: absolute;
73+
top: 0;
74+
left: 0;
75+
width: 100%;
76+
height: 100%;
77+
color: ${theme('button.fg')};
78+
font-family: 'Fira Mono', monospace;
79+
font-size: 14px;
80+
letter-spacing: 4px;
81+
opacity: 1;
82+
transition: opacity 0.25s;
83+
z-index: 2;
84+
`
85+
export const LabelIcon = styled(Img)`
86+
fill: ${theme('button.fg')};
87+
${css.size(14)};
88+
`
89+
export const ActionLink = styled.a`
90+
position: relative;
91+
${css.flex('align-both')};
92+
/* width: 25%; */
93+
width: 45px;
94+
/* height: 100%; */
95+
height: 32px;
96+
color: whitesmoke;
97+
font-size: 24px;
98+
text-decoration: none;
99+
transition: 0.25s;
100+
101+
&:hover {
102+
background: #18587a;
103+
}
104+
`
105+
export const Icon = styled(Img)`
106+
fill: ${theme('button.fg')};
107+
${css.size(16)};
108+
109+
${ActionLink}:hover & {
110+
fill: ${theme('button.hoverBg')};
111+
cursor: pointer;
112+
width: 18px;
113+
height: 18px;
114+
}
115+
transition: all 0.25s;
116+
`

0 commit comments

Comments
 (0)