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

Commit 01f0fe0

Browse files
mydearxymmydearxym
committed
theme fix
1 parent ff65089 commit 01f0fe0

File tree

14 files changed

+224
-77
lines changed

14 files changed

+224
-77
lines changed

‎components/Button/index.js‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,20 @@
44
*
55
*/
66

7-
import React from 'react'
8-
import PropTypes from 'prop-types'
7+
import { Button as MButton } from 'antd'
98

10-
import MButton from './styles'
9+
export default MButton
1110

11+
// import React from 'react'
12+
// import PropTypes from 'prop-types'
13+
14+
// import MButton from './styles'
15+
16+
/*
1217
// import styled from 'styled-components'
1318
1419
import { makeDebugger } from '../../utils/functions'
15-
/* eslint-disable no-unused-vars */
1620
const debug = makeDebugger('c:Button:index')
17-
/* eslint-enable no-unused-vars */
1821
1922
const Button = ({ children, size }) => {
2023
return <MButton size={size}>{children}</MButton>
@@ -23,11 +26,15 @@ const Button = ({ children, size }) => {
2326
MButton.propTypes = {
2427
children: PropTypes.string,
2528
size: PropTypes.oneOf(['default', 'large', 'small']),
29+
type: PropTypes.oneOf(['solid', 'danger', 'hollow']),
2630
}
2731
2832
MButton.defaultProps = {
2933
children: '..?..',
3034
size: 'default',
35+
type: 'solid',
3136
}
3237
3338
export default Button
39+
40+
*/

‎components/Button/styles/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import styled from 'styled-components'
2+
23
import { Button } from 'antd'
34

45
import { theme } from '../../../utils/themes'
@@ -7,6 +8,10 @@ const MButton = styled(Button)`
78
color: ${theme('button.fg')};
89
background: ${theme('button.bg')};
910
border-color: ${theme('button.border')};
11+
color: ${props =>
12+
props.hollow ? theme('button.border') : theme('button.fg')};
13+
background: ${props => (props.hollow ? 'transparent' : theme('button.bg'))};
14+
1015
&:hover {
1116
color: ${theme('button.fg')};
1217
border-color: ${theme('button.border')};

‎containers/Banner/index.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@
66

77
import React from 'react'
88
import { inject, observer } from 'mobx-react'
9+
import { Tabs } from 'antd'
910

11+
import styled from 'styled-components'
1012
// import Link from 'next/link'
1113

1214
import {
@@ -21,6 +23,18 @@ import { Banner, BannerLogo } from './styles'
2123

2224
const debug = makeDebugger('C:Banner')
2325

26+
const { TabPane } = Tabs
27+
28+
const MTabs = styled(Tabs)`
29+
position: absolute;
30+
bottom: -17px;
31+
width: 80vw;
32+
`
33+
34+
function callback(key) {
35+
console.log('callback: ', key)
36+
}
37+
2438
class BannerContainer extends React.Component {
2539
componentWillMount() {
2640
debug('mount')
@@ -37,6 +51,11 @@ class BannerContainer extends React.Component {
3751
return (
3852
<Banner>
3953
<BannerLogo path={getSVGIconPath(iconKey)} />
54+
<MTabs onChange={callback}>
55+
<TabPane tab="帖子" key="1" />
56+
<TabPane tab="教程" key="2" />
57+
<TabPane tab="用户" key="3" />
58+
</MTabs>
4059
</Banner>
4160
)
4261
}

‎containers/Banner/styles/index.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
11
import styled from 'styled-components'
22
import ReactSVG from 'react-svg'
33

4+
import { theme } from '../../../utils/themes'
5+
46
export const Banner = styled.div`
5-
padding: 5px;
7+
position: relative;
68
padding-left: 80px;
7-
height: 15vh;
9+
height: 16vh;
810
border-bottom: 1px solid tomato;
11+
display: flex;
12+
flex-direction: column;
13+
background: ${theme('banner.bg')};
14+
border-bottom: ${theme('banner.spliter')};
915
`
1016

1117
export const BannerLogo = styled(ReactSVG)`
1218
margin-top: 2em;
13-
width: 100px;
14-
height: 100px;
19+
width: 80px;
20+
height: 80px;
1521
`

‎containers/Header/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,9 @@ class HeaderContainer extends React.Component {
5050
<Header id="whereCallShowDoraemon">
5151
<Router>Javascript / Elixir / go</Router>
5252
<Admin>
53-
<Button>管理页</Button>
53+
<Button size="small" type="primary">
54+
管理页
55+
</Button>
5456
</Admin>
5557
<Search onClick={logic.openDoraemon}>
5658
<HeaderIcon path={getSVGIconPath('header_search')} />

‎containers/Header/styles/index.js‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,41 @@
11
import styled from 'styled-components'
2-
32
import ReactSVG from 'react-svg'
43

5-
// import { theme } from '../../../utils/themes'
4+
import { theme } from '../../../utils/themes'
5+
66
export const Header = styled.div`
77
padding: 5px;
88
padding-top: 8px;
99
line-height: 2vh;
10-
border-bottom: 1px solid tomato;
1110
display: flex;
1211
flex-direction: row;
12+
background: ${theme('header.bg')};
13+
border-bottom: ${theme('header.spliter')};
1314
`
1415

1516
export const Router = styled.div`flex-grow: 1;`
1617

1718
export const Admin = styled.div`
1819
margin-right: 10px;
1920
font-size: xx-small;
21+
&:after {
22+
content: '⁝';
23+
color: ${theme('header.fg')};
24+
margin-left: 5px;
25+
}
2026
`
2127

22-
export const Search = styled.div`
23-
color: grey;
24-
margin-right: 10px;
25-
`
28+
export const Search = styled.div`color: ${theme('header.fg')};`
29+
30+
export const Notification = styled.div``
2631

27-
export const Notification = styled.div`
28-
color: grey;
29-
margin-right: 10px;
30-
`
3132
export const HeaderIcon = styled(ReactSVG)`
32-
fill: grey;
33-
width: 22px;
34-
height: 22px;
33+
fill: ${theme('header.fg')};
34+
width: 20px;
35+
height: 20px;
3536
cursor: pointer;
37+
margin-top: 2px;
38+
margin-right: 12px;
3639
`
3740
export const User = styled.div`
3841
color: grey;

‎containers/Preview/index.js‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import * as logic from './logic'
1515
import ThemeSelector from '../../components/ThemeSelector'
1616

1717
import {
18+
TheTitle,
19+
ColorBottom,
1820
PreviewOverlay,
1921
PreviewWrapper,
2022
PreviewCloser,
@@ -35,6 +37,22 @@ const CloseBtn = ({ type }) => (
3537
</PreviewCloser>
3638
)
3739

40+
const AccountViewer = ({ themeKeys, curTheme }) => {
41+
return (
42+
<div>
43+
<TheTitle>
44+
<ColorBottom />
45+
<span>--主题---</span>
46+
</TheTitle>
47+
<ThemeSelector
48+
themeKeys={themeKeys}
49+
curTheme={curTheme}
50+
changeTheme={logic.changeTheme}
51+
/>
52+
</div>
53+
)
54+
}
55+
3856
class PreviewContainer extends React.Component {
3957
componentWillMount() {
4058
debug('mount')
@@ -54,11 +72,7 @@ class PreviewContainer extends React.Component {
5472
<PreviewBody>
5573
<h2>Preview body</h2>
5674
{type === 'account' ? (
57-
<ThemeSelector
58-
themeKeys={themeKeys}
59-
curTheme={curTheme}
60-
changeTheme={logic.changeTheme}
61-
/>
75+
<AccountViewer themeKeys={themeKeys} curTheme={curTheme} />
6276
) : (
6377
<div>post previewer</div>
6478
)}

‎containers/Preview/styles/index.js‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -44,18 +44,15 @@ export const PreviewContent = styled.div`
4444
width: 90%;
4545
background-color: ${theme('preview.bg')};
4646
height: 100%;
47-
box-shadow: -5px 0px 14px 0px rgba(189, 189, 189, 0.37);
47+
box-shadow: ${theme('preview.shadow')};
4848
padding: 20px;
4949
`
5050
export const PreviewHeader = styled.div`
5151
border-bottom: 1px solid tomato;
5252
text-align: center;
5353
line-height: 30px;
5454
`
55-
export const PreviewBody = styled.div`
56-
text-align: center;
57-
margin-top: 20%;
58-
`
55+
export const PreviewBody = styled.div`margin-top: 20%;`
5956

6057
export const PreviewCloser = styled.div`width: 10%;`
6158

@@ -90,4 +87,21 @@ export const Closer = styled.div`
9087
}
9188
`
9289

93-
// right: ${props => (props.visible ? '0' : '40%')};
90+
// TODO: move to
91+
export const ColorBottom = styled.span`
92+
position: absolute;
93+
width: 100%;
94+
height: 50%;
95+
left: 0;
96+
bottom: 0;
97+
background: tomato;
98+
z-index: 1;
99+
`
100+
101+
export const TheTitle = styled.span`
102+
font-size: 1.5rem;
103+
padding: 0.2em;
104+
color: black;
105+
position: relative;
106+
display: inline-block;
107+
`

‎containers/Sidebar/styles/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export const Sidebar = styled.div`
1212
height: 100vh;
1313
top: 0;
1414
width: ${props => (props.open ? '250px' : '56px')};
15+
box-shadow: ${props => (props.open ? '3px 0 20px rgba(0, 0, 0, 0.2); ' : '')};
1516
background: ${theme('sidebar.bg')};
1617
border-color: ${theme('sidebar.border_color')};
1718
z-index: 1000;

‎containers/ThemeWrapper/index.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import globalStyles from '../../utils/global_styles'
3838
*/
3939

4040
// ${selection({ backgroundColor: 'tomato' }, '*')};
41+
4142
const Container = styled.div`
4243
*::-moz-selection {
4344
background-color: ${theme('selection_bg')};
@@ -46,6 +47,43 @@ const Container = styled.div`
4647
*::selection {
4748
background-color: ${theme('selection_bg')};
4849
}
50+
51+
.ant-btn-background-ghost.ant-btn-primary {
52+
color: ${theme('button.primary')};
53+
border-color: ${theme('button.primary')};
54+
}
55+
56+
.ant-btn:focus,
57+
.ant-btn:hover {
58+
background-color: ${theme('button.hoverBg')};
59+
}
60+
.ant-btn:active {
61+
background-color: ${theme('button.activeBg')};
62+
}
63+
64+
.ant-btn-primary {
65+
color: ${theme('button.fg')};
66+
background-color: ${theme('button.primary')};
67+
border-color: ${theme('button.primary')};
68+
}
69+
70+
.ant-btn-clicked:after {
71+
border: ${theme('button.clicked')};
72+
}
73+
74+
.ant-tabs-bar {
75+
border-bottom: ${theme('taber.baseline')};
76+
}
77+
.ant-tabs-ink-bar {
78+
background-color: ${theme('taber.bottom_bar')};
79+
}
80+
.ant-tabs-nav .ant-tabs-tab {
81+
color: ${theme('taber.normalText')};
82+
}
83+
.ant-tabs-nav .ant-tabs-tab-active {
84+
color: ${theme('taber.activeText')};
85+
font-weight: bold;
86+
}
4987
`
5088
const ThemeObserver = ({ children, theme }) => (
5189
<ThemeProvider theme={theme.themeData}>

0 commit comments

Comments
 (0)