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

Commit 8b78c73

Browse files
mydearxymmydearxym
authored
refactor(dashboard): add brand layout setting (#1352)
1 parent 65bd3b5 commit 8b78c73

File tree

15 files changed

+230
-13
lines changed

15 files changed

+230
-13
lines changed

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

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+
import type { 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+
import ArrowButton from '@/widgets/Buttons/ArrowButton'
10+
import CheckLabel from '@/widgets/CheckLabel'
11+
12+
import { SETTING_FIELD } from '../constant'
13+
import SectionLabel from '../SectionLabel'
14+
import SavingBar from '../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+
type TProps = {
29+
layout: TBrandLayout
30+
isTouched: boolean
31+
saving: boolean
32+
}
33+
34+
const LogoLayout: 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+
<Layout onClick={() => edit(BRAND_LAYOUT.BOTH, 'brandLayout')}>
58+
<Block $active={layout === BRAND_LAYOUT.BOTH}>
59+
<Brand>
60+
<BrandIcon />
61+
<Space right={7} />
62+
<BrandTitle>Groupher</BrandTitle>
63+
</Brand>
64+
<Divider top={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+
<Layout onClick={() => edit(BRAND_LAYOUT.LOGO, 'brandLayout')}>
76+
<Block $active={layout === BRAND_LAYOUT.LOGO}>
77+
<Brand>
78+
<BrandIcon />
79+
</Brand>
80+
<Divider top={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+
<Layout onClick={() => edit(BRAND_LAYOUT.TEXT, 'brandLayout')}>
92+
<Block $active={layout === BRAND_LAYOUT.TEXT}>
93+
<Brand>
94+
<BrandTitle>Groupher</BrandTitle>
95+
</Brand>
96+
<Divider top={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+
export default memo(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
import Portal from '../Portal'
46
import PrimaryColor from './PrimaryColor'
57
import Wallpaper from './Wallpaper'
8+
import BrandLayout from './BrandLayout'
69
import BannerLayout from './BannerLayout'
710
import PostListLayout from './PostListLayout'
811
import ChangelogLayout from './ChangelogLayout'
@@ -18,6 +21,7 @@ type TProps = {
1821
const UI: 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+
<Divider top={0} bottom={60} />
44+
<BrandLayout
45+
layout={brandLayout}
46+
isTouched={touched.brandLayout}
47+
saving={saving}
48+
/>
49+
<Divider top={20} bottom={60} />
4050
<BannerLayout
4151
layout={bannerLayout}
4252
isTouched={touched.bannerLayout}
4353
saving={saving}
4454
/>
55+
<Divider top={20} bottom={60} />
4556
<PostListLayout
4657
layout={postLayout}
4758
isTouched={touched.postLayout}
4859
saving={saving}
4960
/>
61+
<Divider top={20} bottom={60} />
5062
<ChangelogLayout
5163
layout={changelogLayout}
5264
isTouched={touched.changelogLayout}
5365
saving={saving}
5466
/>
67+
<Divider top={30} bottom={60} />
5568
<Wallpaper wallpaper={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
export const SETTING_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
export type TTouched = {
7577
primaryColor: boolean
78+
brandLayout: boolean
7679
bannerLayout: boolean
7780
postLayout: boolean
7881
changelogLayout: boolean
@@ -85,6 +88,7 @@ export type TTouched = {
8588
export type TSettingField =
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
get globalLayout(): TGlobalLayout {
7277
const slf = self as TStore
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
const primaryColorTouched = slf.primaryColor !== initSettings.primaryColor
107+
const brandLayoutTouched = slf.brandLayout !== initSettings.brandLayout
96108
const bannerLayoutTouched = slf.bannerLayout !== initSettings.bannerLayout
97109
const postLayoutTouched = slf.postLayout !== initSettings.postLayout
98110
const changelogLayoutTouched =
@@ -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-
export const Wrapper = styled(BaseSection)`
11-
margin-bottom: 35px;
12-
`
10+
export const Wrapper = styled(BaseSection)``
1311
export const SelectWrapper = styled.div`
1412
${css.flex('align-center')};
1513
width: 100%;

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import styled from 'styled-components'
2+
3+
import type { TActive } from '@/spec'
4+
5+
import css, { theme } from '@/utils/css'
6+
import BrandSVG from '@/icons/Brand'
7+
8+
import { BaseSection, BlockBase } from '.'
9+
10+
export const Wrapper = styled(BaseSection)``
11+
export const SelectWrapper = styled.div`
12+
${css.flex('align-center')};
13+
gap: 0 42px;
14+
width: 100%;
15+
`
16+
export const Brand = styled.div`
17+
${css.flex('align-center')};
18+
`
19+
export const BrandIcon = styled(BrandSVG)`
20+
fill: ${theme('thread.articleDigest')};
21+
${css.size(22)};
22+
`
23+
export const BrandTitle = styled.div`
24+
color: ${theme('thread.articleDigest')};
25+
font-size: 16px;
26+
font-weight: 600;
27+
`
28+
export const Layout = styled.div`
29+
${css.flexColumn('align-both')};
30+
`
31+
export const Block = styled(BlockBase)`
32+
width: 184px;
33+
height: 80px;
34+
`
35+
export const LayoutTitle = 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
import CommentSVG from '@/icons/Comment'
99
import { BaseSection, BlockBase } from '.'
1010

11-
export const Wrapper = styled(BaseSection)`
12-
margin-bottom: 35px;
13-
`
11+
export const Wrapper = styled(BaseSection)``
12+
1413
export const SelectWrapper = 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
export const BaseSection = 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
import CommentSVG from '@/icons/Comment'
99
import { BaseSection, BlockBase } from '.'
1010

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

0 commit comments

Comments
 (0)