Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commitf690d8b

Browse files
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 parent8601664 commitf690d8b

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
Lines changed: 1 addition & 0 deletions
Loading
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+
importTooltipfrom'@/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+
constlog=buildLog('c:PublishButton:index')
23+
24+
typeTProps={
25+
label?:string
26+
labelIconSrc?:string
27+
onPublish?:()=>void
28+
onVote?:()=>void
29+
onImport?:()=>void
30+
onFAQ?:()=>void
31+
}
32+
33+
constPublishButton: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+
<LabelIconsrc={labelIconSrc}/>
46+
</Label>
47+
<Tooltipcontent="发布帖子"placement="bottom"duration={0}>
48+
<ActionLinkonClick={onPublish}>
49+
<Iconsrc={`${ICON_CMD}/publish_write.svg`}/>
50+
</ActionLink>
51+
</Tooltip>
52+
<Tooltipcontent="发布投票"placement="bottom"duration={0}>
53+
<ActionLinkonClick={onVote}>
54+
<Iconsrc={`${ICON_CMD}/publish_vote.svg`}/>
55+
</ActionLink>
56+
</Tooltip>
57+
<Tooltipcontent="导入内容"placement="bottom"duration={0}>
58+
<ActionLinkonClick={onImport}>
59+
<Iconsrc={`${ICON_CMD}/publish_import.svg`}/>
60+
</ActionLink>
61+
</Tooltip>
62+
<Tooltipcontent="发帖礼仪"placement="bottom"duration={0}>
63+
<ActionLinkonClick={onFAQ}>
64+
<Iconsrc={`${ICON_CMD}/publish_faq.svg`}/>
65+
</ActionLink>
66+
</Tooltip>
67+
</Wrapper>
68+
)
69+
}
70+
71+
exportdefaultmemo(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+
importtype{TThread}from'@/spec'
10+
11+
import{THREAD}from'@/constant'
12+
import{ICON}from'@/config'
1013
import{buildLog}from'@/utils'
1114

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

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

21+
constgetOptions=(thread)=>{
22+
switch(thread){
23+
caseTHREAD.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
typeTProps={
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-
constPublishButton: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+
constPublishButton:FC<TProps>=({ thread=THREAD.POST, onCreate})=>{
4168
return(
4269
<Wrapper>
43-
<Label>
44-
<div>{label}</div>
45-
<LabelIconsrc={labelIconSrc}/>
46-
</Label>
47-
<Tooltipcontent="发布帖子"placement="bottom"duration={0}>
48-
<ActionLinkonClick={onPublish}>
49-
<Iconsrc={`${ICON_CMD}/publish_write.svg`}/>
50-
</ActionLink>
51-
</Tooltip>
52-
<Tooltipcontent="发布投票"placement="bottom"duration={0}>
53-
<ActionLinkonClick={onVote}>
54-
<Iconsrc={`${ICON_CMD}/publish_vote.svg`}/>
55-
</ActionLink>
56-
</Tooltip>
57-
<Tooltipcontent="导入内容"placement="bottom"duration={0}>
58-
<ActionLinkonClick={onImport}>
59-
<Iconsrc={`${ICON_CMD}/publish_import.svg`}/>
60-
</ActionLink>
61-
</Tooltip>
62-
<Tooltipcontent="发帖礼仪"placement="bottom"duration={0}>
63-
<ActionLinkonClick={onFAQ}>
64-
<Iconsrc={`${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{defaultasButton}from'./Button'
22
export{defaultasArrowButton}from'./ArrowButton'
33
export{defaultasArrowLink}from'./ArrowLink'
4+
// export { default as FancyPublishButton } from './FancyPublishButton'
45
export{defaultasPublishButton}from'./PublishButton'
56
export{defaultasOrButton}from'./OrButton'
67
export{defaultasDropdownButton}from'./DropdownButton'
Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
importstyledfrom'styled-components'
2+
3+
importImgfrom'@/Img'
4+
import{css,theme}from'@/utils'
5+
6+
// see example: https://codepen.io/mydearxym2/pen/qBEvvpo
7+
8+
constcommonHoverAffix=`
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+
exportconstWrapper=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+
exportconstLabel=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+
exportconstLabelIcon=styled(Img)`
86+
fill:${theme('button.fg')};
87+
${css.size(14)};
88+
`
89+
exportconstActionLink=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+
exportconstIcon=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)
[8]ページ先頭
©2009-2025 Movatter.jp