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.

Commit3ddea84

Browse files
authored
refactor(article-page): use common article & style adjust (#1116)
* refactor(post-content): extract common comp wip* refactor(article-digest): re-org layout* refactor(article-digest): wip* refactor(avatars-row): new hover effect, awesome* refactor(upvote): enhance TS support* refactor(article-digest): redesign works digest* refactor(article): adjust metric system on works* refactor(spec): add TMetrice* refactor(article): use common article content* refactor(article): basic fixed header UI/UX* refactor(article): wip* refactor(article): header style adjust* chore: clean up
1 parentb9a7c66 commit3ddea84

File tree

205 files changed

+2094
-2337
lines changed

Some content is hidden

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

205 files changed

+2094
-2337
lines changed
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/*
2+
*
3+
* ArticleBaseStats
4+
*
5+
*/
6+
7+
import{FC,memo}from'react'
8+
9+
importtype{TArticle,TContainer}from'@/spec'
10+
import{ICON}from'@/config'
11+
import{buildLog,scrollToComments}from'@/utils'
12+
13+
import{Space}from'@/components/Common'
14+
import{
15+
Wrapper,
16+
ViewsIcon,
17+
CommentWrapper,
18+
CommentIcon,
19+
Count,
20+
CommentCount,
21+
}from'./styles'
22+
23+
/* eslint-disable-next-line */
24+
constlog=buildLog('c:ArticleBaseStats:index')
25+
26+
typeTProps={
27+
testid?:string
28+
article:TArticle
29+
container?:TContainer
30+
}
31+
32+
constArticleBaseStats:FC<TProps>=({
33+
testid='article-base-stats',
34+
container='body',
35+
article,
36+
})=>{
37+
return(
38+
<Wrappertestid={testid}>
39+
<ViewsIconsrc={`${ICON}/article/viewed.svg`}/>
40+
<Count>{article.views}</Count>
41+
<Spaceleft={14}/>
42+
<CommentWrapperonClick={()=>scrollToComments(container)}>
43+
<CommentIconsrc={`${ICON}/article/comment.svg`}/>
44+
<CommentCount>{article.commentsCount}</CommentCount>
45+
</CommentWrapper>
46+
</Wrapper>
47+
)
48+
}
49+
50+
exportdefaultmemo(ArticleBaseStats)
Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
importstyledfrom'styled-components'
2+
3+
importtype{TTestable}from'@/spec'
4+
5+
importImgfrom'@/Img'
6+
import{css,theme}from'@/utils'
7+
8+
exportconstWrapper=styled.div.attrs(({ testid}:TTestable)=>({
9+
'data-test-id':testid,
10+
}))<TTestable>`
11+
${css.flex('align-center')};
12+
`
13+
constIcon=styled(Img)`
14+
fill:${theme('thread.articleDigest')};
15+
${css.size(14)};
16+
transition: fill 0.25s;
17+
`
18+
exportconstViewsIcon=styled(Icon)``
19+
20+
exportconstCommentWrapper=styled.div`
21+
${css.flex('align-center')};
22+
`
23+
exportconstCommentIcon=styled(Icon)`
24+
${CommentWrapper}:hover & {
25+
cursor: pointer;
26+
fill:${theme('thread.articleTitle')};
27+
}
28+
29+
transition: fill 0.2s;
30+
`
31+
exportconstCount=styled.div`
32+
color:${theme('thread.articleDigest')};
33+
font-size: 15px;
34+
margin-left: 5px;
35+
`
36+
exportconstCommentCount=styled(Count)`
37+
${CommentWrapper}:hover & {
38+
cursor: pointer;
39+
color:${theme('thread.articleTitle')};
40+
}
41+
transition: color 0.2s;
42+
`

‎src/containers/content/PostContent/tests/index.test.ts‎renamed to ‎src/components/ArticleBaseStats/tests/index.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
// import React from 'react'
22
// import { shallow } from 'enzyme'
33

4-
// importPostContent from '../index'
4+
// importArticleBaseStats from '../index'
55

6-
describe('TODO <PostContent />',()=>{
6+
describe('TODO <ArticleBaseStats />',()=>{
77
it('Expect to have unit tests specified',()=>{
88
expect(true).toEqual(true)
99
})

‎src/components/AvatarsRow/RealAvatar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const RealAvatar: FC<TProps> = ({ user, size, onUserSelect }) => {
2424
return(
2525
<Tooltip
2626
content={<UserPopContent>{user.nickname}</UserPopContent>}
27-
delay={200}
27+
delay={0}
2828
contentHeight={getAvatarSize(size,'number')asstring}
2929
showArrow={false}
3030
noPadding

‎src/components/AvatarsRow/styles/real_avatar.ts‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@ import ImgFallback from '@/components/ImgFallback'
77
import{getLiSize,getAvatarSize}from'./metric'
88
importtype{TAvatarSize}from'../spec'
99

10-
import{AvatarsWrapper}from'./index'
11-
1210
// height: 49px;
1311
typeTWrapper={size:TAvatarSize}
1412
exportconstWrapper=styled.li<TWrapper>`
@@ -19,16 +17,13 @@ export const Wrapper = styled.li<TWrapper>`
1917
z-index: 2;
2018
filter: grayscale(0.3);
2119
22-
${AvatarsWrapper}:hover & {
23-
margin: 0 5px;
24-
transition-delay: 0.3s;
25-
}
26-
2720
&:hover {
2821
filter: grayscale(0);
22+
z-index: 3;
23+
transform: scale(1.2);
2924
}
3025
31-
transition: all 0.25s;
26+
transition: all 0.2s;
3227
`
3328
typeTAvatarsImg={size:string;onClick:()=>void;scrollPosition:any}
3429
exportconstAvatarsImg=styled(Img)<TAvatarsImg>`

‎src/components/Buttons/styles/icon_button.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import type { TProps as TIconButtonProps } from '../IconButton'
99

1010
typeTWrapper=Omit<TIconButtonProps,'path'>
1111
exportconstWrapper=styled.div<TWrapper>`
12-
position: relative;
1312
${css.flex('align-both')};
1413
width:${({ size})=>`${size}px`};
1514
height:${({ size})=>`${size}px`};
@@ -19,7 +18,6 @@ export const Wrapper = styled.div<TWrapper>`
1918
margin-top:${({ mTop})=>`${mTop}px`};
2019
margin-bottom:${({ mBottom})=>`${mBottom}px`};
2120
`
22-
2321
typeTIcon={size:number;dimWhenIdle:boolean}&TSpace&TActive
2422
exportconstIcon=styled(Img)<TIcon>`
2523
fill:${({ $active})=>

‎src/components/Copyright/styles/readonly_panel.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import { css, theme } from '@/utils'
77
exportconstWrapper=styled.div`
88
${css.flexColumn()};
99
width: 240px;
10-
padding-left: 5px;
10+
padding: 10px;
11+
padding-left: 15px;
1112
`
1213
exportconstHeader=styled.div`
1314
${css.flex('align-center')};

‎src/components/ErrorPage/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { FC, memo } from 'react'
88
import{useRouter}from'next/router'
99
importLinkfrom'next/link'
1010

11+
importtype{TMetric}from'@/spec'
1112
import{METRIC}from'@/constant'
1213
import{ICON_BASE}from'@/config'
1314
import{buildLog}from'@/utils'
@@ -37,7 +38,7 @@ export type TProps = {
3738
errorCode?:number// 400 | 500 | 404
3839
target?:string
3940
testid?:string
40-
metric?:string
41+
metric?:TMetric
4142
}
4243

4344
constErrorPage:FC<TProps>=({
Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
/*
2-
*
32
* Maybe
4-
*
53
*/
64

7-
importReactfrom'react'
8-
importTfrom'prop-types'
5+
import{FC,memo,ReactNode}from'react'
96
import{isEmpty}from'ramda'
107

118
import{buildLog}from'@/utils'
@@ -18,7 +15,13 @@ const MaybeLoading = ({ loading }) => {
1815
return<div>{loading}</div>
1916
}
2017

21-
constMaybe=({ children, test, loading})=>{
18+
typeTProps={
19+
children:ReactNode
20+
test:boolean
21+
loading?:boolean
22+
}
23+
24+
constMaybe:FC<TProps>=({ children, test, loading=false})=>{
2225
if(Array.isArray(test)&&isEmpty(test)){
2326
return<MaybeLoadingloading={loading}/>
2427
}
@@ -29,16 +32,4 @@ const Maybe = ({ children, test, loading }) => {
2932
return<>{children}</>
3033
}
3134

32-
Maybe.propTypes={
33-
// https://www.npmjs.com/package/prop-types
34-
children:T.node.isRequired,
35-
test:T.any,
36-
loading:T.node,
37-
}
38-
39-
Maybe.defaultProps={
40-
test:'',
41-
loading:null,
42-
}
43-
44-
exportdefaultMaybe
35+
exportdefaultmemo(Maybe)

‎src/components/Navigator/DigestView.tsx‎

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

3+
importtype{TMetric}from'@/spec'
34
import{METRIC}from'@/constant'
4-
55
importBlinkCursorfrom'@/components/BlinkCursor'
66

77
import{
@@ -30,7 +30,7 @@ const renderMainEntries = (metric) => {
3030
}
3131

3232
typeTProps={
33-
metric:string
33+
metric:TMetric
3434
layout:TC11NLayout
3535
showLogoText:boolean
3636
isOnline:boolean
@@ -44,11 +44,7 @@ const DigestView: FC<TProps> = ({ metric, showLogoText, isOnline, layout }) => {
4444
{showLogoText&&<LogoText>oderPlanets</LogoText>}
4545
</LogoLink>
4646

47-
{showLogoText ?(
48-
<LogoMarginlayout={layout}/>
49-
) :(
50-
<BlinkCursorduration={1.2}height={14}left={5}right={2}/>
51-
)}
47+
<BlinkCursorduration={1.6}height={14}left={5}right={2}/>
5248

5349
{isOnline ?(
5450
renderMainEntries(metric)

0 commit comments

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