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

Commit f7bc7eb

Browse files
mydearxymmydearxym
authored
refactor(changelog): layout adjust (#1355)
* refactor(changelog): adjust preview mode & type * refactor(dashboard): adjust changelog layout * refactor(changelog): adjust preview mode & type * refactor(changelog): adjust preview mode & type * fix(changelog): damn ts error * fix(changelog): damn ts error * fix(changelog): damn ts error * fix(changelog): damn ts error * refactor(changelog): move demo data to constant * fix(global-layout): add missing header anchor
1 parent 7da329b commit f7bc7eb

File tree

24 files changed

+533
-200
lines changed

24 files changed

+533
-200
lines changed

‎package-lock.json

+16-10
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/containers/thread/ChangelogThread/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,9 @@ const ChangelogThreadContainer: FC<TProps> = ({
3333
return (
3434
<Wrapper testid={testid}>
3535
<MainWrapper>
36-
<ChangelogItem layout={globalLayout.changelog} />
36+
<ChangelogItem layout={globalLayout.changelog} showFullArticle />
3737

38-
{globalLayout.changelog === CHANGELOG_LAYOUT.FOLD && (
38+
{globalLayout.changelog === CHANGELOG_LAYOUT.OUTLINE && (
3939
<PreviousTitle>历史版本</PreviousTitle>
4040
)}
4141

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

+10-8
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,10 @@ const ChangelogLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
6161
}
6262
/>
6363
<SelectWrapper>
64-
<Layout onClick={() => edit(CHANGELOG_LAYOUT.FOLD, 'changelogLayout')}>
65-
<Block $active={layout === CHANGELOG_LAYOUT.FOLD}>
64+
<Layout
65+
onClick={() => edit(CHANGELOG_LAYOUT.OUTLINE, 'changelogLayout')}
66+
>
67+
<Block $active={layout === CHANGELOG_LAYOUT.OUTLINE}>
6668
<Column>
6769
<Picture />
6870
<Br top={14} />
@@ -160,20 +162,20 @@ const ChangelogLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
160162
</MiniIntro>
161163
</MiniItem>
162164
</Block>
163-
<LayoutTitle $active={layout === CHANGELOG_LAYOUT.FOLD}>
165+
<LayoutTitle $active={layout === CHANGELOG_LAYOUT.OUTLINE}>
164166
<CheckLabel
165167
title="折叠历史发布"
166-
$active={layout === CHANGELOG_LAYOUT.FOLD}
168+
$active={layout === CHANGELOG_LAYOUT.OUTLINE}
167169
top={15}
168170
left={-15}
169171
/>
170172
</LayoutTitle>
171173
</Layout>
172174
<Space right={40} />
173175
<Layout
174-
onClick={() => edit(CHANGELOG_LAYOUT.NORMAL, 'changelogLayout')}
176+
onClick={() => edit(CHANGELOG_LAYOUT.PREVIEW, 'changelogLayout')}
175177
>
176-
<Block $active={layout === CHANGELOG_LAYOUT.NORMAL}>
178+
<Block $active={layout === CHANGELOG_LAYOUT.PREVIEW}>
177179
<Column>
178180
<Picture small />
179181
<Br top={14} />
@@ -230,10 +232,10 @@ const ChangelogLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
230232
<Bar long={12} thin />
231233
</Row>
232234
</Block>
233-
<LayoutTitle $active={layout === CHANGELOG_LAYOUT.NORMAL}>
235+
<LayoutTitle $active={layout === CHANGELOG_LAYOUT.PREVIEW}>
234236
<CheckLabel
235237
title="全部展开"
236-
$active={layout === CHANGELOG_LAYOUT.NORMAL}
238+
$active={layout === CHANGELOG_LAYOUT.PREVIEW}
237239
top={15}
238240
left={-15}
239241
/>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ const settingsModalFields = {
7373
bannerNotifyBg: T.optional(T.enumeration(keys(COLORS)), 'BLACK'),
7474
changelogLayout: T.optional(
7575
T.enumeration(values(CHANGELOG_LAYOUT)),
76-
CHANGELOG_LAYOUT.FOLD,
76+
CHANGELOG_LAYOUT.OUTLINE,
7777
),
7878
tags: T.optional(T.array(Tag), mockTags(12)),
7979
alias: T.optional(T.array(Alias), BUILDIN_ALIAS),

‎src/spec/article.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,7 @@ export type TBrandLayout = 'both' | 'logo' | 'text'
221221
export type TBannerLayout = 'header' | 'tabber'
222222
export type TBannerNotifyLayout = 'default' | 'center'
223223
export type TPostLayout = 'upvote_first' | 'comment_first'
224-
export type TChangelogLayout = 'fold' | 'normal'
224+
export type TChangelogLayout = 'preview' | 'outline'
225225

226226
export type TGlobalLayout = {
227227
primaryColor: TColorName

‎src/widgets/BannerNotify/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
import { FC, memo, Fragment } from 'react'
88

99
import type { TMetric, TBannerNotifyLayout, TColorName } from '@/spec'
10-
import { BANNER_NOTIFY_LAYOUT } from '@/constant'
10+
import { BANNER_NOTIFY_LAYOUT, ANCHOR } from '@/constant'
1111
import { buildLog } from '@/utils/logger'
1212

1313
import {
@@ -39,7 +39,7 @@ const BannerNotify: FC<TProps> = ({
3939
bg,
4040
}) => {
4141
return (
42-
<Wrapper testid={testid} bg={bg}>
42+
<Wrapper testid={testid} bg={bg} id={ANCHOR.GLOBAL_HEADER_ID}>
4343
<InnerWrapper
4444
metric={metric}
4545
center={layout === BANNER_NOTIFY_LAYOUT.CENTER}

‎src/widgets/Buttons/DropdownButton/index.tsx

+15-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { FC, ReactNode, memo } from 'react'
22

3-
import type { TSpace } from '@/spec'
3+
import type { TSizeTS, TSpace } from '@/spec'
4+
import { SIZE } from '@/constant'
5+
46
import { buildLog } from '@/utils/logger'
57

68
import {
@@ -14,19 +16,29 @@ const log = buildLog('C:DropdownButton')
1416

1517
type TProps = {
1618
children: ReactNode
19+
size?: TSizeTS
20+
withBorder?: boolean
1721
onClick?: () => void
1822
} & TSpace
1923

2024
const DropdownButton: FC<TProps> = ({
2125
children,
26+
size = SIZE.SMALL,
27+
withBorder = false,
2228
onClick = log,
2329
...restProps
2430
}) => {
2531
return (
26-
<Wrapper {...restProps}>
32+
// @ts-ignore
33+
<Wrapper
34+
withBorder={withBorder}
35+
size={size}
36+
onClick={onClick}
37+
{...restProps}
38+
>
2739
<ButtonWrapper size="small" type="primary" ghost>
2840
<InnerBtnWrapper>
29-
{children}
41+
<>{children}</>
3042
<FilterIcon />
3143
</InnerBtnWrapper>
3244
</ButtonWrapper>

‎src/widgets/Buttons/styles/dropdown_button/index.ts

+15-5
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,25 @@
11
import styled from 'styled-components'
22

3-
import type { TSpace } from '@/spec'
4-
import Button from '@/widgets/Buttons/Button'
3+
import type { TSizeTS, TSpace } from '@/spec'
4+
import { SIZE } from '@/constant'
55
import css, { theme } from '@/utils/css'
66

7+
import Button from '@/widgets/Buttons/Button'
78
import ArrowSVG from '@/icons/ArrowSimple'
89

9-
export const Wrapper = styled.div<TSpace>`
10+
type TWrapper = { withBorder: boolean; size: TSizeTS } & TSpace
11+
12+
export const Wrapper = styled.div<TWrapper>`
1013
${css.flex('align-center')};
1114
color: ${theme('thread.articleDigest')};
12-
margin-right: -12px;
13-
font-size: 13px;
15+
16+
border: ${({ withBorder }) => (withBorder ? '1px solid' : 'none')};
17+
border-color: ${({ withBorder }) =>
18+
withBorder ? theme('lightText') : theme('transparent')};
19+
20+
border-radius: 10px;
21+
22+
transform: ${({ size }) => (size === SIZE.TINY ? 'scale(0.85)' : 'none')};
1423
1524
margin-top: ${({ top }) => `${top}px`};
1625
margin-bottom: ${({ bottom }) => `${bottom}px`};
@@ -42,6 +51,7 @@ export const FilterIcon = styled(ArrowSVG)`
4251
${css.size(14)};
4352
transform: rotate(-90deg);
4453
margin-left: 5px;
54+
4555
${InnerBtnWrapper}:hover & {
4656
fill: ${theme('thread.articleDigest')};
4757
}

‎src/widgets/ChangelogItem/DefaultLayout/index.tsx

-137
This file was deleted.

0 commit comments

Comments
 (0)