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

Commit 97bd129

Browse files
mydearxymmydearxym
committed
Merge branch 'pages' into dev
2 parents efcdda3 + eeaa83d commit 97bd129

File tree

15 files changed

+196
-170
lines changed

15 files changed

+196
-170
lines changed

‎components/ThemeSelector/CardSelector.js

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from 'react'
2+
import R from 'ramda'
3+
4+
import { ICON_CMD } from '../../config'
5+
6+
import {
7+
Wrapper,
8+
ThemeDot,
9+
IntroBox,
10+
IntroDesc,
11+
ThemeTitle,
12+
ThemeDesc,
13+
AuthorInfo,
14+
AuthorIcon,
15+
AuthorName,
16+
} from './style/card_selector'
17+
18+
import { themeMeta, uid } from '../../utils'
19+
20+
const CardSelector = ({ curTheme, changeTheme }) => (
21+
<Wrapper>
22+
{R.keys(themeMeta).map(name => (
23+
<IntroBox key={uid.gen()} active={curTheme === name}>
24+
<ThemeDot
25+
large
26+
active={curTheme === name}
27+
name={name}
28+
onClick={changeTheme.bind(this, name)}
29+
/>
30+
<IntroDesc>
31+
<ThemeTitle
32+
active={curTheme === name}
33+
onClick={changeTheme.bind(this, name)}
34+
>
35+
{name}
36+
</ThemeTitle>
37+
<ThemeDesc onClick={changeTheme.bind(this, name)}>
38+
{themeMeta[name].desc}
39+
</ThemeDesc>
40+
<AuthorInfo>
41+
<AuthorIcon src={`${ICON_CMD}/author.svg`} />
42+
<AuthorName
43+
href="https://www.github.com/mydearxym"
44+
rel="noopener noreferrer"
45+
target="_blank"
46+
>
47+
mydearxym
48+
</AuthorName>
49+
</AuthorInfo>
50+
</IntroDesc>
51+
</IntroBox>
52+
))}
53+
</Wrapper>
54+
)
55+
56+
export default CardSelector

‎components/ThemeSelector/DotSelector.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react'
2+
import R from 'ramda'
3+
4+
import { Wrapper, ThemeDot } from './style/dot_selector'
5+
6+
import { themeMeta, uid } from '../../utils'
7+
8+
const DotSelector = ({ curTheme, changeTheme }) => (
9+
<Wrapper>
10+
{R.keys(themeMeta).map(name => (
11+
<ThemeDot
12+
key={uid.gen()}
13+
active={curTheme === name}
14+
name={name}
15+
onClick={changeTheme.bind(this, name)}
16+
/>
17+
))}
18+
</Wrapper>
19+
)
20+
21+
export default DotSelector

‎components/ThemeSelector/index.js

Lines changed: 6 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -6,89 +6,27 @@
66

77
import React from 'react'
88
import PropTypes from 'prop-types'
9-
import R from 'ramda'
109

11-
import { ICON_CMD } from '../../config'
10+
import DotSelector from './DotSelector'
11+
import CardSelector from './CardSelector'
1212

13-
import {
14-
FlexWrapper,
15-
ThemeDot,
16-
DetailWrapper,
17-
IntroBox,
18-
IntroDesc,
19-
ThemeTitle,
20-
ThemeDesc,
21-
AuthorInfo,
22-
AuthorIcon,
23-
AuthorName,
24-
} from './style'
25-
26-
import { makeDebugger, themeMeta, uid } from '../../utils'
13+
import { makeDebugger } from '../../utils'
2714

2815
/* eslint-disable no-unused-vars */
2916
const debug = makeDebugger('c:ThemeSelector:index')
3017
/* eslint-enable no-unused-vars */
3118

32-
const DotStyle = ({ curTheme, changeTheme }) => (
33-
<FlexWrapper>
34-
{R.keys(themeMeta).map(name => (
35-
<ThemeDot
36-
key={uid.gen()}
37-
active={curTheme === name}
38-
name={name}
39-
onClick={changeTheme.bind(this, name)}
40-
/>
41-
))}
42-
</FlexWrapper>
43-
)
44-
45-
const DetailStyle = ({ curTheme, changeTheme }) => (
46-
<DetailWrapper>
47-
{R.keys(themeMeta).map(name => (
48-
<IntroBox key={uid.gen()} active={curTheme === name}>
49-
<ThemeDot
50-
large
51-
active={curTheme === name}
52-
name={name}
53-
onClick={changeTheme.bind(this, name)}
54-
/>
55-
<IntroDesc>
56-
<ThemeTitle
57-
active={curTheme === name}
58-
onClick={changeTheme.bind(this, name)}
59-
>
60-
{name}
61-
</ThemeTitle>
62-
<ThemeDesc onClick={changeTheme.bind(this, name)}>
63-
{themeMeta[name].desc}
64-
</ThemeDesc>
65-
<AuthorInfo>
66-
<AuthorIcon src={`${ICON_CMD}/author.svg`} />
67-
<AuthorName
68-
href="https://www.github.com/mydearxym"
69-
rel="noopener noreferrer"
70-
target="_blank"
71-
>
72-
mydearxym
73-
</AuthorName>
74-
</AuthorInfo>
75-
</IntroDesc>
76-
</IntroBox>
77-
))}
78-
</DetailWrapper>
79-
)
80-
8119
const ThemeSelector = ({ displayStyle, curTheme, changeTheme }) => {
8220
return displayStyle === 'default' ? (
83-
<DotStyle curTheme={curTheme} changeTheme={changeTheme} />
21+
<DotSelector curTheme={curTheme} changeTheme={changeTheme} />
8422
) : (
85-
<DetailStyle curTheme={curTheme} changeTheme={changeTheme} />
23+
<CardSelector curTheme={curTheme} changeTheme={changeTheme} />
8624
)
8725
}
8826

8927
ThemeSelector.propTypes = {
9028
curTheme: PropTypes.string,
91-
displayStyle: PropTypes.oneOf(['default', 'detail']),
29+
displayStyle: PropTypes.oneOf(['default', 'card']),
9230
changeTheme: PropTypes.func.isRequired,
9331
// https://www.npmjs.com/package/prop-types
9432
}

‎components/ThemeSelector/style/card_selector.js

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import styled from 'styled-components'
2+
3+
import { Dot } from './index'
4+
import Img from '../../Img'
5+
import { theme } from '../../../utils'
6+
7+
export const Wrapper = styled.div`
8+
display: flex;
9+
flex-wrap: wrap;
10+
`
11+
12+
export const ThemeDot = styled(Dot)``
13+
14+
/* background: ${({ active }) => (active ? theme('banner.bg') : '')}; */
15+
export const IntroBox = styled.div`
16+
display: flex;
17+
border: 1px solid;
18+
border: ${({ active }) => (active ? '2px solid' : '1px dashed')};
19+
border-color: ${theme('banner.desc')};
20+
margin-right: 15px;
21+
margin-bottom: 18px;
22+
height: 130px;
23+
width: 210px;
24+
padding: 10px;
25+
border-radius: 5px;
26+
&:hover {
27+
border-top: 2px solid;
28+
border-bottom: 2px solid;
29+
border-color: ${theme('banner.desc')};
30+
}
31+
transition: border 0.3s;
32+
`
33+
34+
export const IntroDesc = styled.div`
35+
display: flex;
36+
flex-direction: column;
37+
width: 80%;
38+
position: relative;
39+
`
40+
41+
export const ThemeTitle = styled.div`
42+
color: ${theme('banner.title')};
43+
font-size: 1.1rem;
44+
font-weight: ${({ active }) => (active ? 'bolder' : '')};
45+
cursor: pointer;
46+
margin-top: -2px;
47+
opacity: ${({ active }) => (active ? 1 : 0.8)};
48+
`
49+
50+
export const ThemeDesc = styled.div`
51+
font-size: 0.8rem;
52+
color: ${theme('banner.desc')};
53+
cursor: pointer;
54+
`
55+
56+
export const AuthorInfo = styled.div`
57+
font-size: 0.8rem;
58+
color: ${theme('banner.desc')};
59+
position: absolute;
60+
bottom: -5px;
61+
left: 0;
62+
display: flex;
63+
`
64+
65+
export const AuthorIcon = styled(Img)`
66+
fill: ${theme('banner.desc')};
67+
width: 13px;
68+
height: 13px;
69+
margin-right: 5px;
70+
margin-top: 3px;
71+
`
72+
73+
export const AuthorName = styled.a`
74+
color: ${theme('banner.desc')};
75+
transition: color 0.3s;
76+
&:hover {
77+
text-decoration: underline;
78+
color: ${theme('banner.title')};
79+
}
80+
`

‎components/ThemeSelector/style/dot_selector.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import styled from 'styled-components'
2+
3+
import { Dot } from './index'
4+
5+
export const Wrapper = styled.div`
6+
display: flex;
7+
justify-content: center;
8+
`
9+
export const ThemeDot = styled(Dot)``

‎components/ThemeSelector/style/index.js

Lines changed: 2 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,8 @@
11
import styled from 'styled-components'
22

3-
import Img from '../../Img'
43
import { theme, themeCoverMap, themeCoverIndexMap } from '../../../utils'
54

6-
export const FlexWrapper = styled.div`
7-
display: flex;
8-
justify-content: center;
9-
`
10-
11-
export const ThemeDot = styled.div`
5+
export const Dot = styled.div`
126
width: 25px;
137
height: 25px;
148
border-radius: 100%;
@@ -28,76 +22,4 @@ export const ThemeDot = styled.div`
2822
left: 34%;
2923
}
3024
`
31-
32-
export const DetailWrapper = styled.div`
33-
display: flex;
34-
flex-wrap: wrap;
35-
`
36-
37-
/* background: ${({ active }) => (active ? theme('banner.bg') : '')}; */
38-
export const IntroBox = styled.div`
39-
display: flex;
40-
border: 1px solid;
41-
border: ${({ active }) => (active ? '2px solid' : '1px dashed')};
42-
border-color: ${theme('banner.desc')};
43-
margin-right: 15px;
44-
margin-bottom: 18px;
45-
height: 130px;
46-
width: 210px;
47-
padding: 10px;
48-
border-radius: 5px;
49-
&:hover {
50-
border-top: 2px solid;
51-
border-bottom: 2px solid;
52-
border-color: ${theme('banner.desc')};
53-
}
54-
transition: border 0.3s;
55-
`
56-
57-
export const IntroDesc = styled.div`
58-
display: flex;
59-
flex-direction: column;
60-
width: 80%;
61-
position: relative;
62-
`
63-
64-
export const ThemeTitle = styled.div`
65-
color: ${theme('banner.title')};
66-
font-size: 1.1rem;
67-
font-weight: ${({ active }) => (active ? 'bolder' : '')};
68-
cursor: pointer;
69-
margin-top: -2px;
70-
opacity: ${({ active }) => (active ? 1 : 0.8)};
71-
`
72-
73-
export const ThemeDesc = styled.div`
74-
font-size: 0.8rem;
75-
color: ${theme('banner.desc')};
76-
cursor: pointer;
77-
`
78-
79-
export const AuthorInfo = styled.div`
80-
font-size: 0.8rem;
81-
color: ${theme('banner.desc')};
82-
position: absolute;
83-
bottom: -5px;
84-
left: 0;
85-
display: flex;
86-
`
87-
88-
export const AuthorIcon = styled(Img)`
89-
fill: ${theme('banner.desc')};
90-
width: 13px;
91-
height: 13px;
92-
margin-right: 5px;
93-
margin-top: 3px;
94-
`
95-
96-
export const AuthorName = styled.a`
97-
color: ${theme('banner.desc')};
98-
transition: color 0.3s;
99-
&:hover {
100-
text-decoration: underline;
101-
color: ${theme('banner.title')};
102-
}
103-
`
25+
export const holder = 1

‎containers/UserSettings/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ class UserSettingsContainer extends React.Component {
6060
<ThemeSelector
6161
curTheme={curTheme}
6262
changeTheme={logic.changeTheme}
63-
displayStyle="detail"
63+
displayStyle="card"
6464
/>
6565
<SectionLabel
6666
title="打赏设置"

‎utils/themes/skins/Blue.js renamed to ‎utils/themes/skins/blue.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* a theme inspired by Muzli && unbuntu
2+
* a theme inspired by dribble
33
*/
44
import { lighten, darken } from 'polished'
55

@@ -15,7 +15,7 @@ const markdownFont = '#7F8189'
1515
const descText = '#4a455a'
1616
const primaryMate = '#a7674d'
1717

18-
const Blue = {
18+
const blue = {
1919
logoText: primaryColor,
2020
cover: '#586ABD',
2121
coverIndex: '#9e96c3',
@@ -286,4 +286,4 @@ const Blue = {
286286
},
287287
}
288288

289-
export default Blue
289+
export default blue

0 commit comments

Comments
 (0)