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.

Commit8b78c73

Browse files
authored
refactor(dashboard): add brand layout setting (#1352)
1 parent65bd3b5 commit8b78c73

File tree

15 files changed

+230
-13
lines changed

15 files changed

+230
-13
lines changed
Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import{FC,memo}from'react'
2+
3+
importtype{TBrandLayout}from'@/spec'
4+
5+
import{BRAND_LAYOUT,DASHBOARD_DESC_LAYOUT}from'@/constant'
6+
import{callDashboardDesc}from'@/utils/helper'
7+
8+
import{Space,Divider,Inline}from'@/widgets/Common'
9+
importArrowButtonfrom'@/widgets/Buttons/ArrowButton'
10+
importCheckLabelfrom'@/widgets/CheckLabel'
11+
12+
import{SETTING_FIELD}from'../constant'
13+
importSectionLabelfrom'../SectionLabel'
14+
importSavingBarfrom'../SavingBar'
15+
16+
import{
17+
Wrapper,
18+
SelectWrapper,
19+
Layout,
20+
LayoutTitle,
21+
Block,
22+
Brand,
23+
BrandIcon,
24+
BrandTitle,
25+
}from'../styles/ui/brand_layout'
26+
import{edit}from'../logic'
27+
28+
typeTProps={
29+
layout:TBrandLayout
30+
isTouched:boolean
31+
saving:boolean
32+
}
33+
34+
constLogoLayout:FC<TProps>=({ layout, isTouched, saving})=>{
35+
return(
36+
<Wrapper>
37+
<SectionLabel
38+
title="Logo 样式"
39+
desc={
40+
<>
41+
页首 Logo 的展示形式。
42+
<Inline>
43+
<ArrowButton
44+
onClick={()=>
45+
callDashboardDesc(DASHBOARD_DESC_LAYOUT.POST_LIST)
46+
}
47+
size="tiny"
48+
arrowStyle="simple"
49+
>
50+
查看示例
51+
</ArrowButton>
52+
</Inline>
53+
</>
54+
}
55+
/>
56+
<SelectWrapper>
57+
<LayoutonClick={()=>edit(BRAND_LAYOUT.BOTH,'brandLayout')}>
58+
<Block$active={layout===BRAND_LAYOUT.BOTH}>
59+
<Brand>
60+
<BrandIcon/>
61+
<Spaceright={7}/>
62+
<BrandTitle>Groupher</BrandTitle>
63+
</Brand>
64+
<Dividertop={15}/>
65+
</Block>
66+
<LayoutTitle$active={layout===BRAND_LAYOUT.BOTH}>
67+
<CheckLabel
68+
title="Logo & 文字"
69+
$active={layout===BRAND_LAYOUT.BOTH}
70+
top={15}
71+
left={-15}
72+
/>
73+
</LayoutTitle>
74+
</Layout>
75+
<LayoutonClick={()=>edit(BRAND_LAYOUT.LOGO,'brandLayout')}>
76+
<Block$active={layout===BRAND_LAYOUT.LOGO}>
77+
<Brand>
78+
<BrandIcon/>
79+
</Brand>
80+
<Dividertop={15}/>
81+
</Block>
82+
<LayoutTitle$active={layout===BRAND_LAYOUT.LOGO}>
83+
<CheckLabel
84+
title="仅 Logo"
85+
$active={layout===BRAND_LAYOUT.LOGO}
86+
top={15}
87+
left={-15}
88+
/>
89+
</LayoutTitle>
90+
</Layout>
91+
<LayoutonClick={()=>edit(BRAND_LAYOUT.TEXT,'brandLayout')}>
92+
<Block$active={layout===BRAND_LAYOUT.TEXT}>
93+
<Brand>
94+
<BrandTitle>Groupher</BrandTitle>
95+
</Brand>
96+
<Dividertop={15}/>
97+
</Block>
98+
<LayoutTitle$active={layout===BRAND_LAYOUT.TEXT}>
99+
<CheckLabel
100+
title="仅文字"
101+
$active={layout===BRAND_LAYOUT.TEXT}
102+
top={15}
103+
left={-15}
104+
/>
105+
</LayoutTitle>
106+
</Layout>
107+
</SelectWrapper>
108+
<SavingBar
109+
isTouched={isTouched}
110+
field={SETTING_FIELD.BRAND_LAYOUT}
111+
loading={saving}
112+
top={20}
113+
/>
114+
</Wrapper>
115+
)
116+
}
117+
118+
exportdefaultmemo(LogoLayout)

‎src/containers/thread/DashboardThread/UI/index.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import{FC,memo}from'react'
22

3+
import{Divider}from'@/widgets/Common'
4+
35
importPortalfrom'../Portal'
46
importPrimaryColorfrom'./PrimaryColor'
57
importWallpaperfrom'./Wallpaper'
8+
importBrandLayoutfrom'./BrandLayout'
69
importBannerLayoutfrom'./BannerLayout'
710
importPostListLayoutfrom'./PostListLayout'
811
importChangelogLayoutfrom'./ChangelogLayout'
@@ -18,6 +21,7 @@ type TProps = {
1821
constUI:FC<TProps>=({ settings, touched})=>{
1922
const{
2023
primaryColor,
24+
brandLayout,
2125
bannerLayout,
2226
postLayout,
2327
changelogLayout,
@@ -31,27 +35,36 @@ const UI: FC<TProps> = ({ settings, touched }) => {
3135
title="外观布局"
3236
desc="社区基本外观，主题色，以及常见布局自定义。"
3337
/>
34-
3538
<PrimaryColor
3639
primaryColor={primaryColor}
3740
isTouched={touched.primaryColor}
3841
saving={saving}
3942
/>
43+
<Dividertop={0}bottom={60}/>
44+
<BrandLayout
45+
layout={brandLayout}
46+
isTouched={touched.brandLayout}
47+
saving={saving}
48+
/>
49+
<Dividertop={20}bottom={60}/>
4050
<BannerLayout
4151
layout={bannerLayout}
4252
isTouched={touched.bannerLayout}
4353
saving={saving}
4454
/>
55+
<Dividertop={20}bottom={60}/>
4556
<PostListLayout
4657
layout={postLayout}
4758
isTouched={touched.postLayout}
4859
saving={saving}
4960
/>
61+
<Dividertop={20}bottom={60}/>
5062
<ChangelogLayout
5163
layout={changelogLayout}
5264
isTouched={touched.changelogLayout}
5365
saving={saving}
5466
/>
67+
<Dividertop={30}bottom={60}/>
5568
<Wallpaperwallpaper={wallpaper}/>
5669
</Wrapper>
5770
)

‎src/containers/thread/DashboardThread/constant.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export const TAB = {
3030
exportconstSETTING_FIELD={
3131
PRIMARY_COLOR:'primaryColor',
3232
POST_LAYOUT:'postLayout',
33+
BRAND_LAYOUT:'brandLayout',
3334
BANNER_LAYOUT:'bannerLayout',
3435
CHANGELOG_LAYOUT:'changelogLayout',
3536
TAG:'tag',

‎src/containers/thread/DashboardThread/spec.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import type {
55
TColorName,
66
TPostLayout,
77
TChangelogLayout,
8+
TBrandLayout,
89
TBannerLayout,
910
TTag,
1011
}from'@/spec'
@@ -66,13 +67,15 @@ export type TUiSettings = {
6667
saving:boolean
6768
wallpaper:TWallpaper
6869
primaryColor:TColorName
70+
brandLayout:TBrandLayout
6971
bannerLayout:TBannerLayout
7072
postLayout:TPostLayout
7173
changelogLayout:TChangelogLayout
7274
}
7375

7476
exporttypeTTouched={
7577
primaryColor:boolean
78+
brandLayout:boolean
7679
bannerLayout:boolean
7780
postLayout:boolean
7881
changelogLayout:boolean
@@ -85,6 +88,7 @@ export type TTouched = {
8588
exporttypeTSettingField=
8689
|'primaryColor'
8790
|'postLayout'
91+
|'brandLayout'
8892
|'bannerLayout'
8993
|'changelogLayout'
9094
|'tag'

‎src/containers/thread/DashboardThread/store.ts‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import type { TCommunity, TRootStore, TTag, TGlobalLayout } from '@/spec'
99
import{mockTags}from'@/utils/mock'
1010

1111
import{
12+
BRAND_LAYOUT,
1213
BANNER_LAYOUT,
1314
CHANGELOG_LAYOUT,
1415
POST_LAYOUT,
@@ -45,6 +46,10 @@ const settingsModalFields = {
4546
T.enumeration(values(POST_LAYOUT)),
4647
POST_LAYOUT.UPVOTE_FIRST,
4748
),
49+
brandLayout:T.optional(
50+
T.enumeration(values(BRAND_LAYOUT)),
51+
BRAND_LAYOUT.BOTH,
52+
),
4853
bannerLayout:T.optional(
4954
T.enumeration(values(BANNER_LAYOUT)),
5055
BANNER_LAYOUT.HEADER,
@@ -71,11 +76,17 @@ const DashboardThread = T.model('DashboardThread', {
7176
getglobalLayout():TGlobalLayout{
7277
constslf=selfasTStore
7378
const{ initSettings}=slf
74-
const{ primaryColor, changelogLayout, postLayout, bannerLayout}=
75-
initSettings
79+
const{
80+
primaryColor,
81+
changelogLayout,
82+
postLayout,
83+
bannerLayout,
84+
brandLayout,
85+
}=initSettings
7686

7787
return{
7888
primaryColor,
89+
brand:brandLayout,
7990
post:postLayout,
8091
changelog:changelogLayout,
8192
banner:bannerLayout,
@@ -93,6 +104,7 @@ const DashboardThread = T.model('DashboardThread', {
93104
const{ initSettings}=slf
94105

95106
constprimaryColorTouched=slf.primaryColor!==initSettings.primaryColor
107+
constbrandLayoutTouched=slf.brandLayout!==initSettings.brandLayout
96108
constbannerLayoutTouched=slf.bannerLayout!==initSettings.bannerLayout
97109
constpostLayoutTouched=slf.postLayout!==initSettings.postLayout
98110
constchangelogLayoutTouched=
@@ -102,6 +114,7 @@ const DashboardThread = T.model('DashboardThread', {
102114

103115
return{
104116
primaryColor:primaryColorTouched,
117+
brandLayout:brandLayoutTouched,
105118
bannerLayout:bannerLayoutTouched,
106119
postLayout:postLayoutTouched,
107120
changelogLayout:changelogLayoutTouched,
@@ -111,6 +124,7 @@ const DashboardThread = T.model('DashboardThread', {
111124
// sidebar-item
112125
ui:
113126
primaryColorTouched||
127+
brandLayoutTouched||
114128
bannerLayoutTouched||
115129
postLayoutTouched||
116130
changelogLayoutTouched,
@@ -151,6 +165,7 @@ const DashboardThread = T.model('DashboardThread', {
151165
[
152166
'saving',
153167
'primaryColor',
168+
'brandLayout',
154169
'bannerLayout',
155170
'postLayout',
156171
'changelogLayout',

‎src/containers/thread/DashboardThread/styles/ui/banner_layout.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,7 @@ import css, { theme } from '@/utils/css'
77
import{Divider}from'@/widgets/Common'
88
import{BaseSection,BlockBase}from'.'
99

10-
exportconstWrapper=styled(BaseSection)`
11-
margin-bottom: 35px;
12-
`
10+
exportconstWrapper=styled(BaseSection)``
1311
exportconstSelectWrapper=styled.div`
1412
${css.flex('align-center')};
1513
width: 100%;
Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
importstyledfrom'styled-components'
2+
3+
importtype{TActive}from'@/spec'
4+
5+
importcss,{theme}from'@/utils/css'
6+
importBrandSVGfrom'@/icons/Brand'
7+
8+
import{BaseSection,BlockBase}from'.'
9+
10+
exportconstWrapper=styled(BaseSection)``
11+
exportconstSelectWrapper=styled.div`
12+
${css.flex('align-center')};
13+
gap: 0 42px;
14+
width: 100%;
15+
`
16+
exportconstBrand=styled.div`
17+
${css.flex('align-center')};
18+
`
19+
exportconstBrandIcon=styled(BrandSVG)`
20+
fill:${theme('thread.articleDigest')};
21+
${css.size(22)};
22+
`
23+
exportconstBrandTitle=styled.div`
24+
color:${theme('thread.articleDigest')};
25+
font-size: 16px;
26+
font-weight: 600;
27+
`
28+
exportconstLayout=styled.div`
29+
${css.flexColumn('align-both')};
30+
`
31+
exportconstBlock=styled(BlockBase)`
32+
width: 184px;
33+
height: 80px;
34+
`
35+
exportconstLayoutTitle=styled.div<TActive>`
36+
opacity:${({ $active})=>($active ?1 :0.65)};
37+
38+
${Layout}:hover & {
39+
opacity: 1;
40+
cursor: pointer;
41+
}
42+
transition: all 0.2s;
43+
`

‎src/containers/thread/DashboardThread/styles/ui/changelog_layout.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,8 @@ import UpvoteSVG from '@/icons/Heart'
88
importCommentSVGfrom'@/icons/Comment'
99
import{BaseSection,BlockBase}from'.'
1010

11-
exportconstWrapper=styled(BaseSection)`
12-
margin-bottom: 35px;
13-
`
11+
exportconstWrapper=styled(BaseSection)``
12+
1413
exportconstSelectWrapper=styled.div`
1514
${css.flex('align-center')};
1615
width: 100%;

‎src/containers/thread/DashboardThread/styles/ui/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ export const Wrapper = styled.div`
1111
exportconstBaseSection=styled.section`
1212
/* margin: 0 50px; */
1313
padding-bottom: 30px;
14-
margin-bottom: 20px;
1514
/* border-bottom: 1px solid;
1615
border-bottom-color:${theme('border')}; */
1716
`

‎src/containers/thread/DashboardThread/styles/ui/post_list_layout.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,7 @@ import UpvoteSVG from '@/icons/Upvote'
88
importCommentSVGfrom'@/icons/Comment'
99
import{BaseSection,BlockBase}from'.'
1010

11-
exportconstWrapper=styled(BaseSection)`
12-
margin-bottom: 35px;
13-
`
11+
exportconstWrapper=styled(BaseSection)``
1412
exportconstSelectWrapper=styled.div`
1513
${css.flex('align-center')};
1614
width: 100%;

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp