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.

Commit61d9cf8

Browse files
authored
refactor: works editor reorg (#1137)
* refactor: naming stripMobx -> toJS* refactor: ts wip* refactor: ts wip* refactor: ts wip* refactor: wip* refactor: wip* refactor: adjust works-card style* refactor(works): adjust list UI* refactor(works): menu for sidebar* refactor(works): adjust brand style* refactor(works): wip* refactor(works): wip* chore: fix build* chore: drop offline* Rename CommunityVIew.tsx to CommunityView.tsx* chore: tmp change* chore: tmp change* chore: tmp change bak* refactor(works): laouch part adjust* refactor(works): wip* refactor(works): basic editor integrate
1 parent2fc8e1d commit61d9cf8

File tree

148 files changed

+1128
-544
lines changed

Some content is hidden

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

148 files changed

+1128
-544
lines changed

‎next.config.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ const webpack = require('webpack')
33
// next-plugins
44
constwithPlugins=require('next-compose-plugins')
55
constwithSourceMaps=require('@zeit/next-source-maps')()
6-
constwithOffline=require('next-offline')
6+
//const withOffline = require('next-offline')
77
constwithBundleAnalyzer=require('@next/bundle-analyzer')({
88
enabled:process.env.ANALYZE==='true',
99
})
10-
constofflineConfig=require('./config/next_offline')
10+
//const offlineConfig = require('./config/next_offline')
1111

1212
// next-plugins end
1313

@@ -26,6 +26,7 @@ const nextConfig = {
2626
}
2727

2828
module.exports=withPlugins(
29-
[withBundleAnalyzer,withSourceMaps,[withOffline,offlineConfig]],
29+
// [withBundleAnalyzer, withSourceMaps, [withOffline, offlineConfig]],
30+
[withBundleAnalyzer,withSourceMaps],
3031
nextConfig,
3132
)

‎src/components/Cards/WorksCard.tsx‎

Lines changed: 32 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,14 @@ import { ICON, ICON_CMD } from '@/config'
1010
import{cutRest}from'@/utils/helper'
1111
import{buildLog}from'@/utils/logger'
1212

13+
importtype{TWorks}from'@/spec'
14+
1315
importDigestSentencefrom'@/components/DigestSentence'
1416
import{SpaceGrow}from'@/components/Common'
1517
importDotDividerfrom'@/components/DotDivider'
1618
importIconTextfrom'@/components/IconText'
1719
importImgFallbackfrom'@/components/ImgFallback'
20+
importUpvotefrom'@/components/Upvote'
1821

1922
import{
2023
Wrapper,
@@ -23,6 +26,8 @@ import {
2326
IntroWrapper,
2427
Header,
2528
Title,
29+
Name,
30+
OSSSign,
2631
FooterWrapper,
2732
BuildWithWrapper,
2833
TechIcon,
@@ -35,43 +40,22 @@ const log = buildLog('c:WorksCard:index')
3540

3641
typeTProps={
3742
testid?:string
38-
withBg?:boolean
39-
mode?:'default'|'preview'
40-
item:{
41-
cover:string
42-
title:string
43-
desc:string
44-
tag:{
45-
title:string
46-
}
47-
platform:{
48-
title:string
49-
}
50-
techStack:{
51-
icon:string
52-
raw:string
53-
}[]
54-
insertedAt:string
55-
upvote:number
56-
commentsCount:number
57-
isOSS:boolean
58-
ossAddr?:boolean
59-
}
43+
preview?:boolean
44+
item:TWorks
6045
}
6146

6247
constWorksCard:FC<TProps>=({
6348
testid='works-card',
6449
item,
65-
withBg=false,
66-
mode='default',
50+
preview=false,
6751
// item,
6852
})=>{
69-
constdescLimit=mode==='default' ?30 :20
53+
constdescLimit=preview ?20 :30
7054

71-
const{ title, desc,upvote, commentsCount}=item
55+
const{ title, desc,upvoteCount, commentsCount}=item
7256

7357
return(
74-
<Wrappertestid={testid}withBg={withBg}>
58+
<Wrappertestid={testid}preview={preview}>
7559
{item.cover ?(
7660
<IntroImgsrc={item.cover}fallback={<ImgFallbacktype="work"/>}/>
7761
) :(
@@ -81,15 +65,28 @@ const WorksCard: FC<TProps> = ({
8165
<IntroWrapper>
8266
<Header>
8367
<div>
84-
<Title>{title}</Title>
68+
<Title>
69+
<Name>{title||'--'}</Name>
70+
71+
{item.isOSS&&(
72+
<OSSSign>
73+
<DotDividerspace={8}/>
74+
<ahref={item.ossAddr}target="_blank"rel="noreferrer">
75+
<GithubIconsrc={`${ICON_CMD}/works/github.svg`}/>
76+
</a>
77+
</OSSSign>
78+
)}
79+
</Title>
8580
<DigestSentencetop={5}bottom={15}onPreview={()=>log}>
8681
{cutRest(desc,descLimit)}
8782
</DigestSentence>
8883
</div>
8984

90-
<IconTexticonSrc={`${ICON}/article/heart-solid.svg`}size="large">
91-
{upvote}
92-
</IconText>
85+
<Upvote
86+
type="works-card"
87+
count={preview ?66 :upvoteCount}
88+
viewerHasUpvoted={preview}
89+
/>
9390
</Header>
9491
<FooterWrapper>
9592
{item.tag&&(
@@ -113,9 +110,9 @@ const WorksCard: FC<TProps> = ({
113110
</Fragment>
114111
)}
115112

116-
{mode==='preview'&&<span>&nbsp;</span>}
113+
{preview&&<span>&nbsp;</span>}
117114

118-
{mode==='default'&&(
115+
{!preview&&(
119116
<Fragment>
120117
<Divider/>
121118
<IconText
@@ -128,10 +125,10 @@ const WorksCard: FC<TProps> = ({
128125
</Fragment>
129126
)}
130127
<IconTexticonSrc={`${ICON}/article/comment.svg`}margin="5px">
131-
{commentsCount}
128+
{preview ?99 :commentsCount}
132129
</IconText>
133130
<SpaceGrow/>
134-
{item.isOSS&&<GithubIconsrc={`${ICON_CMD}/works/github.svg`}/>}
131+
{/* {item.isOSS && <GithubIcon src={`${ICON_CMD}/works/github.svg`} />} */}
135132
</FooterWrapper>
136133
</IntroWrapper>
137134
</Wrapper>

‎src/components/Cards/styles/works_card.ts‎

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import css from '@/utils/css'
77

88
exportconstWrapper=styled.div.attrs(({ testid}:TTestable)=>({
99
'data-test-id':testid,
10-
}))<TTestable&{withBg:boolean}>`
11-
background:${({withBg})=>(withBg ?'#0d3440' :'transparent')};
10+
}))<TTestable&{preview:boolean}>`
11+
background:${({preview})=>(preview ?'#0d3440' :'transparent')};
1212
1313
position: relative;
1414
${css.flex('align-center')};
@@ -18,20 +18,15 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
1818
padding-right: 15px;
1919
border-radius: 3px;
2020
21-
border-bottom: 1px solid;
22-
border-bottom-color: #0b3b4a;
21+
border-top: 1px solid;
22+
border-top-color: #0b3b4a;
2323
border-left: 1px solid transparent;
2424
border-right: 1px solid transparent;
2525
2626
:last-child {
2727
border-bottom: none;
2828
}
2929
30-
&:hover {
31-
background: #0d3440;
32-
border-left-color: #0b3b4a;
33-
border-right-color: #0b3b4a;
34-
}
3530
transition: all 0.1s;
3631
`
3732
exportconstIntroImg=styled(Img)`
@@ -55,13 +50,16 @@ export const Header = styled.div`
5550
width: 100%;
5651
`
5752
exportconstTitle=styled.a`
53+
${css.flex('align-center')};
54+
`
55+
exportconstName=styled.div`
5856
color:${theme('thread.articleTitle')};
5957
font-size: 16px;
60-
font-weight:bold;
61-
62-
&:hover {
63-
${css.threadTitleHover()};
64-
}
58+
font-weight:500;
59+
`
60+
exportconstOSSSign=styled.div`
61+
${css.flex('align-center')};
62+
margin-top: 1px;
6563
`
6664
exportconstTypeTags=styled.div`
6765
${css.flex('align-center')};
@@ -97,7 +95,6 @@ export const TechIcon = styled(BaseBuildIcon)`
9795
}
9896
`
9997
exportconstGithubIcon=styled(Img)`
100-
fill:${theme('thread.articleTitle')};
101-
${css.size(13)};
102-
margin-right: 3px;
98+
fill:${theme('thread.articleDigest')};
99+
${css.size(10)};
103100
`

‎src/components/Header/DesktopView/CommunityVIew.tsx‎renamed to ‎src/components/Header/DesktopView/CommunityView.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const hasNoBorder = (metric: TMetric): boolean =>
4141
METRIC.HELP_CENTER,
4242
])
4343

44-
constCommunityHeader:FC<TProps>=({ metric, c11n, community})=>{
44+
constCommunityView:FC<TProps>=({ metric, c11n, community})=>{
4545
constInnerWrapper=
4646
c11n.bannerLayout===C11N.CLASSIC
4747
?ClassicInnerWrapper
@@ -67,4 +67,4 @@ const CommunityHeader: FC<TProps> = ({ metric, c11n, community }) => {
6767
)
6868
}
6969

70-
exportdefaultCommunityHeader
70+
exportdefaultCommunityView
Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
/*
2+
*
3+
* Header
4+
*
5+
*/
6+
7+
import{FC}from'react'
8+
import{contains}from'ramda'
9+
importdynamicfrom'next/dynamic'
10+
11+
importtype{TMetric}from'@/spec'
12+
import{METRIC}from'@/constant'
13+
import{buildLog}from'@/utils/logger'
14+
15+
importNavigatorfrom'@/components/Navigator'
16+
17+
importtype{TProps}from'../index'
18+
import{
19+
Wrapper,
20+
InnerWrapper,
21+
RouterWrapper,
22+
}from'../styles/desktop_view/works_view'
23+
24+
/* eslint-disable-next-line */
25+
constlog=buildLog('C:Header')
26+
27+
// let MailBox
28+
constAddOns=dynamic(()=>import('../AddOns'),{ssr:false})
29+
30+
consthasNoBorder=(metric:TMetric):boolean=>
31+
contains(metric,[
32+
METRIC.DISCOVERY,
33+
METRIC.SPONSOR,
34+
METRIC.FRIENDS,
35+
METRIC.SUBSCRIBE,
36+
METRIC.ARTICLE,
37+
METRIC.MEMBERSHIP,
38+
METRIC.USER,
39+
METRIC.COMMUNITY_EDITOR,
40+
METRIC.HELP_CENTER,
41+
])
42+
43+
constWorksHeader:FC<TProps>=({ metric, c11n, community})=>{
44+
return(
45+
<Wrapper
46+
id="whereCallShowDoraemon"
47+
testid="header"
48+
noBorder={hasNoBorder(metric)}
49+
>
50+
<InnerWrappermetric={metric}>
51+
<RouterWrapper>
52+
<Navigator
53+
community={community}
54+
layout={c11n.bannerLayout}
55+
metric={metric}
56+
/>
57+
</RouterWrapper>
58+
<AddOns/>
59+
</InnerWrapper>
60+
</Wrapper>
61+
)
62+
}
63+
64+
exportdefaultWorksHeader

‎src/components/Header/DesktopView/index.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ import { FC, memo } from 'react'
33
import{METRIC}from'@/constant'
44

55
importtype{TProps}from'../index'
6-
importCommunityViewfrom'./CommunityVIew'
6+
importCommunityViewfrom'./CommunityView'
77
importArticleViewfrom'./ArticleView'
8+
importWorksViewfrom'./WorksView'
89
// import ArticleEditorView from './ArticleEditorView'
910

1011
constDesktopView:FC<TProps>=(props)=>{
@@ -16,6 +17,9 @@ const DesktopView: FC<TProps> = (props) => {
1617
caseMETRIC.WORKS_ARTICLE:{
1718
return<ArticleView{...props}/>
1819
}
20+
caseMETRIC.WORKS:{
21+
return<WorksView{...props}/>
22+
}
1923
// case METRIC.ARTICLE_EDITOR: {
2024
// return <ArticleEditorView metric={metric} />
2125
// }
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
importstyledfrom'styled-components'
2+
3+
importtype{TTestable,TMetric}from'@/spec'
4+
import{theme}from'@/utils/themes'
5+
importcssfrom'@/utils/css'
6+
7+
typeTPos={
8+
noBorder:boolean
9+
}
10+
11+
typeIWrapper=TPos&TTestable
12+
13+
exportconstWrapper=styled.header.attrs(({ testid}:TTestable)=>({
14+
'data-test-id':testid,
15+
}))<IWrapper>`
16+
width: 100%;
17+
height: 33px;
18+
${css.flex('justify-center')};
19+
background:${theme('header.bg')};
20+
opacity: 1;
21+
border-bottom:${({ noBorder})=>(noBorder ?'none' :'1px solid')};
22+
border-bottom-color:${theme('header.spliter')};
23+
box-shadow:${({ noBorder})=>(noBorder ?'none' :theme('drawer.shadow'))};
24+
`
25+
26+
typeTInnerWrapper={metric:TMetric}
27+
28+
exportconstInnerWrapper=styled.div<TInnerWrapper>`
29+
${css.flex('align-center')};
30+
width: 100%;
31+
height: 33px;
32+
${({ metric})=>css.fitContentWidth(metric)};
33+
padding-left: 0;
34+
padding-right: 0;
35+
`
36+
exportconstRouterWrapper=styled.div`
37+
${css.flexGrow('align-center')};
38+
height: 100%;
39+
`

‎src/components/IconText/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ type TProps = {
2626
margin?:string
2727
highlight?:boolean
2828
className?:string
29+
dimWhenIdle?:boolean
2930
}
3031

3132
constIconText:FC<TProps>=({
@@ -35,13 +36,14 @@ const IconText: FC<TProps> = ({
3536
round=false,
3637
children,
3738
size=SIZE.SMALL,
39+
dimWhenIdle=false,
3840
margin,
3941
highlight=false,
4042
})=>{
4143
constsrc=iconSrc||`${ICON}/${path}`
4244

4345
return(
44-
<Wrappertestid="iconText"className={className}>
46+
<Wrappertestid="iconText"className={className}dimWhenIdle={dimWhenIdle}>
4547
{!nilOrEmpty(src)&&(
4648
<Icon
4749
src={src}

0 commit comments

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