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

Commit 68308b7

Browse files
mydearxymmydearxym
authored
feat(post-item): new post layout (#1326)
* refactor: basic layout setup * refactor: re-org files * refactor(post-item): item/entry -> article * refactor(user-card): props item -> user * refactor(layout): adjust comments-first layout * refactor(layout): adjust mini * refactor(cat-state): bake cat into ArticleCatState & style adjust * style(tags-bar): adjust color
1 parent 6500cae commit 68308b7

File tree

112 files changed

+1650
-821
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

112 files changed

+1650
-821
lines changed

‎src/containers/digest/ArticleDigest/DesktopView/FixedHeader.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { FC, memo } from 'react'
33
import type { TArticle, TMetric, TThread } from '@/spec'
44
import { METRIC } from '@/constant'
55

6-
import ArticleStateBadge from '@/widgets/ArticleStateBadge'
6+
import ArticleCatState from '@/widgets/ArticleCatState'
77
import ArticleBaseStats from '@/widgets/ArticleBaseStats'
88

99
import {
@@ -36,19 +36,19 @@ const FixedHeader: FC<TProps> = ({
3636
<ContentWrapper metric={metric}>
3737
<Title>{article.title}</Title>
3838
<ArticleStateBadgeWrapper>
39-
{article.id === '239' && <ArticleStateBadge type="FEATURE" />}
40-
{article.id === '231' && <ArticleStateBadge type="BUG" />}
39+
{article.id === '239' && <ArticleCatState type="FEATURE" />}
40+
{article.id === '231' && <ArticleCatState type="BUG" />}
4141
{article.id === '227' && (
42-
<ArticleStateBadge type="BUG" state="TODO" />
42+
<ArticleCatState type="BUG" state="TODO" />
4343
)}
4444
{article.id === '228' && (
45-
<ArticleStateBadge type="FEATURE" state="WIP" />
45+
<ArticleCatState type="FEATURE" state="WIP" />
4646
)}
4747
{article.id === '226' && (
48-
<ArticleStateBadge type="QUESTION" state="RESOLVE" />
48+
<ArticleCatState type="QUESTION" state="RESOLVE" />
4949
)}
5050
{article.id === '225' && (
51-
<ArticleStateBadge type="LOCK" state="LOCK" />
51+
<ArticleCatState type="LOCK" state="LOCK" />
5252
)}
5353
</ArticleStateBadgeWrapper>
5454
</ContentWrapper>

‎src/containers/digest/ArticleDigest/DesktopView/PostLayout.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import ArticleBaseStats from '@/widgets/ArticleBaseStats'
1717
import DotDivider from '@/widgets/DotDivider'
1818
// import ArticleMenu from '@/widgets/ArticleMenu'
1919
import ReadableDate from '@/widgets/ReadableDate'
20-
import ArticleStateBadge from '@/widgets/ArticleStateBadge'
20+
import ArticleCatState from '@/widgets/ArticleCatState'
2121

2222
import {
2323
Main,
@@ -69,19 +69,19 @@ const PostLayout: FC<TProps> = ({ metric = METRIC.ARTICLE, article }) => {
6969
)} */}
7070
<DotDivider space={12} />
7171
<div>
72-
{article.id === '239' && <ArticleStateBadge type="FEATURE" />}
73-
{article.id === '231' && <ArticleStateBadge type="BUG" />}
72+
{article.id === '239' && <ArticleCatState type="FEATURE" />}
73+
{article.id === '231' && <ArticleCatState type="BUG" />}
7474
{article.id === '227' && (
75-
<ArticleStateBadge type="BUG" state="TODO" />
75+
<ArticleCatState type="BUG" state="TODO" />
7676
)}
7777
{article.id === '228' && (
78-
<ArticleStateBadge type="FEATURE" state="WIP" />
78+
<ArticleCatState type="FEATURE" state="WIP" />
7979
)}
8080
{article.id === '226' && (
81-
<ArticleStateBadge type="QUESTION" state="RESOLVE" />
81+
<ArticleCatState type="QUESTION" state="RESOLVE" />
8282
)}
8383
{article.id === '225' && (
84-
<ArticleStateBadge type="LOCK" state="LOCK" />
84+
<ArticleCatState type="LOCK" state="LOCK" />
8585
)}
8686
</div>
8787
</Header>

‎src/containers/tool/ArticleSticker/CommentSticker.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const CommentSticker: FC<TProps> = ({ show, commentsState }) => {
4848
<Tooltip
4949
key={user.login}
5050
placement="bottom"
51-
content={<UserCard item={user} />}
51+
content={<UserCard user={user} />}
5252
>
5353
<Avatar
5454
src={user.avatar}

‎src/containers/unit/ArticleFooter/Panel/ActivityInfo/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
Highlight,
1414
Label,
1515
Content,
16+
HelpHint,
1617
} from '../../styles/panel/activity_info'
1718

1819
const tmpItems = [
@@ -65,6 +66,7 @@ const ActivityInfo: FC = () => {
6566
{tmpItems.map((item) => (
6667
<ActionItem key={item.id} item={item} />
6768
))}
69+
<HelpHint>关于日志</HelpHint>
6870
</Wrapper>
6971
)
7072
}

‎src/containers/unit/ArticleFooter/index.tsx‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,19 @@
66

77
import { FC, useState } from 'react'
88

9-
import type { TArticleCat, TMetric } from '@/spec'
9+
import type { TMetric } from '@/spec'
1010
import { METRIC } from '@/constant'
1111

1212
import { buildLog } from '@/utils/logger'
1313
import { bond } from '@/utils/mobx'
1414

15-
import ArticleCatLabel from '@/widgets/ArticleCatLabel'
16-
import { SpaceGrow } from '@/widgets/Common'
15+
// import { SpaceGrow } from '@/widgets/Common'
1716
import TagsList from '@/widgets/TagsList'
1817

1918
import Panel from './Panel'
2019

2120
import type { TStore } from './store'
22-
import { Wrapper, BaseInfo, CatLabelWrapper } from './styles'
21+
import { Wrapper, BaseInfo } from './styles'
2322
import { useInit } from './logic'
2423

2524
/* eslint-disable-next-line */
@@ -46,13 +45,6 @@ const ArticleFooterContainer: FC<TProps> = ({
4645
<Wrapper testid={testid}>
4746
<BaseInfo>
4847
<TagsList items={articleTags} size="small" />
49-
<CatLabelWrapper>
50-
<ArticleCatLabel
51-
type={cat as TArticleCat}
52-
mode="readonly"
53-
onChange={(key) => setCat(key)}
54-
/>
55-
</CatLabelWrapper>
5648
<div>Emoji</div>
5749
</BaseInfo>
5850

‎src/containers/unit/ArticleFooter/styles/index.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,3 @@ export const BaseInfo = styled.div`
1717
margin-top: 20px;
1818
`};
1919
`
20-
21-
export const CatLabelWrapper = styled.div`
22-
margin-left: -25px;
23-
`

‎src/containers/unit/ArticleFooter/styles/panel/activity_info/index.tsx‎

Lines changed: 13 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import styled from 'styled-components'
22

3-
import type { TActive } from '@/spec'
43
import css, { theme } from '@/utils/css'
54

65
import EditPenSVG from '@/icons/Calendar'
@@ -9,6 +8,8 @@ import UpdateTimeSVG from '@/icons/UpdateTime'
98

109
export const Wrapper = styled.div`
1110
${css.flexColumn()};
11+
position: relative;
12+
width: 100%;
1213
`
1314
export const Item = styled.div`
1415
${css.flex('align-center')};
@@ -38,41 +39,23 @@ export const CommentIcon = styled(CommentSVG)`
3839
margin-right: 10px;
3940
opacity: 0.8;
4041
`
41-
4242
export const Content = styled.div``
4343
export const Highlight = styled.span`
4444
color: ${theme('thread.articleTitle')};
4545
`
46+
export const HelpHint = styled.div`
47+
position: absolute;
48+
right: 8px;
49+
top: -1px;
50+
font-size: 11px;
51+
color: ${theme('lightText')};
52+
opacity: 0.8;
4653
47-
export const ReferNum = styled.span`
48-
font-size: 13px;
49-
font-weight: bold;
50-
color: #00a59b;
51-
margin-right: 5px;
52-
`
53-
export const Text = styled.div<TActive>`
54-
color: ${({ active }) =>
55-
active ? theme('thread.articleTitle') : theme('thread.extraInfo')};
56-
font-size: 13px;
57-
58-
${Item}:hover & {
54+
&:hover {
5955
color: ${theme('thread.articleTitle')};
56+
opacity: 1;
57+
cursor: pointer;
6058
}
6159
62-
transition: color 0.25s;
63-
`
64-
export const PanelWrapper = styled.div`
65-
${css.flexColumn()};
66-
position: relative;
67-
border-top: 1px solid;
68-
border-top-color: #00424f;
69-
`
70-
export const PanelInnerWrapper = styled.div`
71-
height: 100%;
72-
border-left: 1px solid;
73-
border-left-color: #00424f;
74-
padding: 25px 0;
75-
padding-right: 25px;
76-
margin-left: 18px;
77-
min-height: 120px;
60+
transition: color 0.2s;
7861
`

‎src/containers/unit/TagsBar/DesktopView/Folder.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { FC, useState, useRef, useEffect } from 'react'
22
import { findIndex, reverse } from 'ramda'
33

4-
import type { TTag, TTagMode } from '@/spec'
4+
import type { TTag } from '@/spec'
55
import { sortByColor } from '@/utils/helper'
66

77
import TagItem from './TagItem'
@@ -79,7 +79,7 @@ const Folder: FC<TProps> = ({
7979
>
8080
<ArrowIcon $isOpen={isFolderOpen} />
8181
<Title>
82-
<FolderTitle>{title}</FolderTitle>
82+
<FolderTitle $isOpen={isFolderOpen}>{title}</FolderTitle>
8383
{!isFolderOpen && <Count>{sortedTags.length}</Count>}
8484
</Title>
8585
{!isFolderOpen && isActiveTagInFolder && (

‎src/containers/unit/TagsBar/styles/desktop_view/folder.ts‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -36,17 +36,17 @@ export const Title = styled.div`
3636
${css.flex('align-center')};
3737
margin-left: 7px;
3838
`
39-
export const FolderTitle = styled.div`
40-
color: ${theme('thread.extraInfo')};
41-
opacity: 0.65;
39+
export const FolderTitle = styled.div<{ $isOpen: boolean }>`
40+
color: ${({ $isOpen }) =>
41+
!$isOpen ? theme('thread.articleDigest') : theme('lightText')};
42+
4243
margin-left: 4px;
43-
font-weight: 500;
4444
font-size: 13px;
4545
margin-right: 8px;
4646
${css.cutRest('85px')};
4747
4848
${Header}:hover & {
49-
opacity: 1;
49+
color: ${theme('thread.articleDigest')};
5050
}
5151
`
5252
export const Count = styled.div`
@@ -74,22 +74,26 @@ export const SubToggle = styled.div`
7474
${css.flex('align-center')};
7575
margin-top: 5px;
7676
margin-left: 3px;
77-
opacity: 0.8;
7877
7978
&:hover {
80-
opacity: 1;
8179
cursor: pointer;
8280
}
8381
`
8482
export const SubToggleTitle = styled.div`
85-
color: ${theme('thread.extraInfo')};
83+
color: ${theme('lightText')};
8684
font-size: 12px;
87-
margin-left: 10px;
85+
margin-left: 11px;
8886
padding: 2px;
8987
border-radius: 5px;
88+
89+
&:hover {
90+
color: ${theme('thread.articleDigest')};
91+
}
92+
93+
transition: color 0.2s;
9094
`
9195
export const SubTogglePrefixIcon = styled(MoreSVG)`
92-
fill: ${theme('thread.extraInfo')};
96+
fill: ${theme('lightText')};
9397
${css.size(12)};
9498
margin-right: 2px;
9599
`

‎src/containers/viewer/ArticleViewer/PostViewer/FixedHeader.tsx‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { FC, memo } from 'react'
22
import type { TArticle } from '@/spec'
33

44
import Upvote from '@/widgets/Upvote'
5-
import ArticleStateBadge from '@/widgets/ArticleStateBadge'
5+
import ArticleCatState from '@/widgets/ArticleCatState'
66
import ArticleBaseStats from '@/widgets/ArticleBaseStats'
77

88
import {
@@ -35,20 +35,16 @@ const FixedHeader: FC<TProps> = ({ article, visible, footerVisible }) => {
3535

3636
<ArticleTitle>{article.title}</ArticleTitle>
3737
<ArticleStateBadgeWrapper>
38-
{article.id === '239' && <ArticleStateBadge type="FEATURE" />}
39-
{article.id === '231' && <ArticleStateBadge type="BUG" />}
40-
{article.id === '227' && (
41-
<ArticleStateBadge type="BUG" state="TODO" />
42-
)}
38+
{article.id === '239' && <ArticleCatState type="FEATURE" />}
39+
{article.id === '231' && <ArticleCatState type="BUG" />}
40+
{article.id === '227' && <ArticleCatState type="BUG" state="TODO" />}
4341
{article.id === '228' && (
44-
<ArticleStateBadge type="FEATURE" state="WIP" />
42+
<ArticleCatState type="FEATURE" state="WIP" />
4543
)}
4644
{article.id === '226' && (
47-
<ArticleStateBadge type="QUESTION" state="RESOLVE" />
48-
)}
49-
{article.id === '225' && (
50-
<ArticleStateBadge type="LOCK" state="LOCK" />
45+
<ArticleCatState type="QUESTION" state="RESOLVE" />
5146
)}
47+
{article.id === '225' && <ArticleCatState type="LOCK" state="LOCK" />}
5248
</ArticleStateBadgeWrapper>
5349
</LeftPart>
5450
<ArticleBaseStats article={article} container="drawer" />

0 commit comments

Comments
 (0)