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

Commit 6b82bed

Browse files
mydearxymmydearxym
authored
refactor(dashboard): wallpaper setting & global scrollbar (#1341)
* refactor(wallpaper-editor): add rallback & adjust dashboar sidebar * refactor(wallpaper-editor): fix blank issue & adjust texts * refactor(wallpaper-editor): adjust texts * style(global): move global scrollbar into wallpaper * fix(ci): build error * fix(ci): build error
1 parent 35cfafd commit 6b82bed

File tree

19 files changed

+141
-76
lines changed

19 files changed

+141
-76
lines changed

‎src/containers/editor/WallpaperEditor/Footer.tsx‎

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,42 @@ import { FC, memo } from 'react'
33
import type { TWallpaperType } from '@/spec'
44
import { WALLPAPER_TYPE } from '@/constant'
55

6+
import { SpaceGrow } from '@/widgets/Common'
7+
8+
import YesOrNoButtons from '@/widgets/Buttons/YesOrNoButtons'
69
import Button from '@/widgets/Buttons/Button'
7-
import { Wrapper, ForbidImgIcon, ConfirmBtn } from './styles/footer'
8-
import { changeWallpaper } from './logic'
10+
11+
import { Wrapper, ForbidImgIcon } from './styles/footer'
12+
import { changeWallpaper, rollbackEdit } from './logic'
913

1014
type TProps = {
1115
wallpaperType: TWallpaperType
16+
isTouched: boolean
1217
}
13-
const Footer: FC<TProps> = ({ wallpaperType }) => {
18+
const Footer: FC<TProps> = ({ wallpaperType, isTouched }) => {
1419
return (
1520
<Wrapper>
1621
{wallpaperType !== WALLPAPER_TYPE.NONE ? (
17-
<Button size="small" ghost noBorder onClick={() => changeWallpaper('')}>
22+
<Button size="small" ghost onClick={() => changeWallpaper('')}>
1823
<ForbidImgIcon /> 空白壁纸
1924
</Button>
2025
) : (
2126
<div />
2227
)}
28+
<SpaceGrow />
2329

24-
<ConfirmBtn size="small" space={13}>
25-
确定
26-
</ConfirmBtn>
30+
{isTouched ? (
31+
<YesOrNoButtons
32+
cancelText="放弃变更"
33+
confirmText="确定"
34+
space={4}
35+
onCancel={() => rollbackEdit()}
36+
/>
37+
) : (
38+
<Button size="small" space={10}>
39+
确定
40+
</Button>
41+
)}
2742
</Wrapper>
2843
)
2944
}

‎src/containers/editor/WallpaperEditor/index.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const WallpaperEditorContainer: FC<TProps> = ({
3131
testid = 'wallpaper-editor',
3232
}) => {
3333
useInit(store)
34-
const { tab, wallpaperData } = store
34+
const { tab, wallpaperData, isTouched } = store
3535

3636
return (
3737
<Wrapper testid={testid}>
@@ -58,7 +58,10 @@ const WallpaperEditorContainer: FC<TProps> = ({
5858
{tab === TAB.CUSTOM && <Custom />}
5959
</Content>
6060
</CustomScroller>
61-
<Footer wallpaperType={wallpaperData.wallpaperType} />
61+
<Footer
62+
wallpaperType={wallpaperData.wallpaperType}
63+
isTouched={isTouched}
64+
/>
6265
</Wrapper>
6366
)
6467
}

‎src/containers/editor/WallpaperEditor/logic.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ export const changeWallpaper = (wallpaper: string): void => {
3232
store.mark({ wallpaper })
3333
}
3434

35+
export const rollbackEdit = (): void => store.rollbackEdit()
36+
3537
/**
3638
* toggle pattern mark only for gradient backgrounds
3739
*/

‎src/containers/editor/WallpaperEditor/store.ts‎

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,22 +24,38 @@ import { TAB } from './constant'
2424
/* eslint-disable-next-line */
2525
const log = buildLog('S:WallpaperEditor')
2626

27-
const WallpaperEditor = T.model('WallpaperEditor', {
28-
tab: T.optional(T.enumeration(values(TAB)), TAB.BUILDIN),
27+
const initWallpaperModalFields = {
2928
wallpaper: T.optional(T.string, 'green'),
30-
3129
// for gradient colors
3230
hasPattern: T.optional(T.boolean, true),
3331
hasBlur: T.optional(T.boolean, false),
3432
direction: T.optional(T.string, 'bottom'),
33+
}
34+
35+
const InitWallpaper = T.model('WallpaperInit', initWallpaperModalFields)
36+
37+
const WallpaperEditor = T.model('WallpaperEditor', {
38+
tab: T.optional(T.enumeration(values(TAB)), TAB.BUILDIN),
39+
...initWallpaperModalFields,
40+
initWallpaper: T.optional(InitWallpaper, {}),
3541
})
3642
.views((self) => ({
3743
get curCommunity(): TCommunity {
3844
const root = getParent(self) as TRootStore
3945

4046
return toJS(root.viewing.community)
4147
},
48+
get isTouched(): boolean {
49+
const slf = self as TStore
50+
const init = slf.initWallpaper
4251

52+
return (
53+
self.wallpaper !== init.wallpaper ||
54+
self.hasPattern !== init.hasPattern ||
55+
self.hasBlur !== init.hasBlur ||
56+
self.direction !== init.direction
57+
)
58+
},
4359
get patternWallpapers(): Record<string, TWallpaper> {
4460
const slf = self as TStore
4561
const wallpapers = clone(PATTERN_WALLPAPER)
@@ -101,6 +117,16 @@ const WallpaperEditor = T.model('WallpaperEditor', {
101117
},
102118
}))
103119
.actions((self) => ({
120+
rollbackEdit(): void {
121+
const slf = self as TStore
122+
const init = slf.initWallpaper
123+
124+
self.wallpaper = init.wallpaper
125+
self.hasPattern = init.hasPattern
126+
self.hasBlur = init.hasBlur
127+
self.direction = init.direction
128+
},
129+
104130
mark(sobj: Record<string, unknown>): void {
105131
markStates(sobj, self)
106132
},

‎src/containers/editor/WallpaperEditor/styles/footer.ts‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import styled from 'styled-components'
33
import css, { theme } from '@/utils/css'
44

55
import ForbidSVG from '@/icons/ForbidImg'
6-
import Button from '@/widgets/Buttons/Button'
76

87
export const Wrapper = styled.div`
98
${css.flex('align-center', 'justify-between')};
@@ -19,9 +18,6 @@ export const Wrapper = styled.div`
1918
`
2019
export const ForbidImgIcon = styled(ForbidSVG)`
2120
fill: ${theme('thread.articleDigest')};
22-
${css.size(15)};
21+
${css.size(14)};
2322
margin-right: 10px;
2423
`
25-
export const ConfirmBtn = styled(Button)`
26-
height: 28px;
27-
`

‎src/containers/layout/GlobalLayout/Wallpaper.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FC, memo } from 'react'
1+
import { FC, memo, ReactNode } from 'react'
22

33
import type { TWallpaper } from '@/spec'
44
import { parseWallpaper } from '@/utils/wallpaper'
@@ -8,15 +8,20 @@ import { Wrapper } from './styles/wallpaper'
88
type TProps = {
99
wallpaper: string
1010
wallpapers: Record<string, TWallpaper>
11+
children: ReactNode
1112
}
1213

13-
const Wallpaper: FC<TProps> = ({ wallpaper, wallpapers }) => {
14+
const Wallpaper: FC<TProps> = ({ wallpaper, wallpapers, children }) => {
1415
const { background, effect } = parseWallpaper(wallpapers, wallpaper)
1516

1617
// for custom image/svg
1718
// for use style object not passing props
1819
// @link see https://github.com/styled-components/styled-components/issues/3315#issuecomment-885977691
19-
return <Wrapper style={{ background }} effect={effect} />
20+
return (
21+
<Wrapper style={{ background }} effect={effect}>
22+
{children}
23+
</Wrapper>
24+
)
2025
}
2126

2227
export default memo(Wallpaper)

‎src/containers/layout/GlobalLayout/index.tsx‎

Lines changed: 36 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -60,39 +60,43 @@ const GlobalLayoutContainer: FC<TProps> = ({
6060

6161
return (
6262
<ThemePalette>
63-
<Wallpaper wallpaper={wallpaper} wallpapers={wallpapers} />
64-
<Wrapper>
65-
<SEO metric={metric} config={seoConfig} />
66-
<InnerWrapper metric={metric} sidebarPin={sidebarPin}>
67-
{/* @ts-ignore */}
68-
<Addon />
69-
<ContentWrapper offsetLeft={sidebarPin}>
70-
{/* @ts-ignore */}
71-
<CustomScroller
72-
instanceKey={BODY_SCROLLER}
73-
direction="vertical"
74-
height="100vh"
75-
barSize={SIZE.MEDIUM}
76-
showShadow={false}
77-
onScrollDirectionChange={onPageScrollDirhange}
78-
autoHide
79-
>
80-
<Header
81-
metric={metric}
82-
accountInfo={accountInfo}
83-
community={curCommunity}
84-
/>
85-
<BodyWrapper isMobile={isMobile}>
86-
{childrenWithProps(children, { metric })}
87-
</BodyWrapper>
88-
{/* @ts-ignore */}
89-
{!noFooter && <Footer metric={metric} />}
90-
</CustomScroller>
91-
</ContentWrapper>
92-
</InnerWrapper>
63+
{/* @ts-ignore */}
64+
<Addon />
65+
<Wallpaper wallpaper={wallpaper} wallpapers={wallpapers}>
9366
{/* @ts-ignore */}
94-
{isMobile && <ModeLine metric={metric} />}
95-
</Wrapper>
67+
<CustomScroller
68+
instanceKey={BODY_SCROLLER}
69+
direction="vertical"
70+
height="100vh"
71+
barSize={SIZE.MEDIUM}
72+
showShadow={false}
73+
onScrollDirectionChange={onPageScrollDirhange}
74+
autoHide
75+
>
76+
<Wrapper>
77+
<SEO metric={metric} config={seoConfig} />
78+
<InnerWrapper metric={metric} sidebarPin={sidebarPin}>
79+
{/* @ts-ignore */}
80+
<ContentWrapper offsetLeft={sidebarPin}>
81+
{/* @ts-ignore */}
82+
83+
<Header
84+
metric={metric}
85+
accountInfo={accountInfo}
86+
community={curCommunity}
87+
/>
88+
<BodyWrapper isMobile={isMobile}>
89+
{childrenWithProps(children, { metric })}
90+
</BodyWrapper>
91+
{/* @ts-ignore */}
92+
{!noFooter && <Footer metric={metric} />}
93+
</ContentWrapper>
94+
</InnerWrapper>
95+
{/* @ts-ignore */}
96+
{isMobile && <ModeLine metric={metric} />}
97+
</Wrapper>
98+
</CustomScroller>
99+
</Wallpaper>
96100
</ThemePalette>
97101
)
98102
}

‎src/containers/layout/GlobalLayout/styles/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import css, { theme } from '@/utils/css'
88
// background: #3b5456;
99
export const Wrapper = styled.div`
1010
${css.flex('justify-center')};
11-
background-color: ${theme('spaceBg')};
1211
`
1312

1413
type TInner = { metric: TMetric; sidebarPin: boolean }

‎src/containers/layout/GlobalLayout/styles/wallpaper.ts‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,25 @@
11
import styled from 'styled-components'
22

3+
/**
4+
* see layout details:
5+
" @link https://css-tricks.com/the-fixed-background-attachment-hack/
6+
*/
7+
38
export const Wrapper = styled.div<{ effect: string }>`
4-
position: fixed;
5-
width: 100%;
6-
height: 100%;
7-
left: 0;
8-
top: 0;
9-
opacity: 0.9;
9+
/* position: fixed; */
1010
/* see https://www.zhangxinxu.com/wordpress/2015/11/css3-will-change-improve-paint/ */
1111
will-change: transform;
1212
${({ effect }) => effect || ''};
13+
14+
height: 100vh;
15+
width: 100vw;
16+
1317
transition: all 0.25s;
1418
`
1519

16-
export const holder = 1
20+
export const InnerWrapper = styled.div`
21+
position: relative;
22+
left: 50%;
23+
transform: translateX(-50%);
24+
width: 80%;
25+
`

‎src/containers/layout/ThemePalette/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* otherwhise the render will not be triggled
55
*/
66

7-
import { FC, ReactNode } from 'react'
7+
import { FC, Fragment, ReactNode } from 'react'
88
// import Head from 'next/head'
99
import { ThemeProvider } from 'styled-components'
1010

@@ -55,7 +55,7 @@ const ThemeContainer: FC<TProps> = ({ children, theme: { themeData } }) => {
5555
}}
5656
showOnShallow
5757
/>
58-
<div>{children}</div>
58+
<Fragment>{children}</Fragment>
5959
{/* @ts-ignore */}
6060
<CodeSyxHighlight />
6161
<ThirdPartyOverWrite />

0 commit comments

Comments
 (0)