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.

Commit01f0fe0

Browse files
committed
theme fix
1 parentff65089 commit01f0fe0

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-
importReactfrom'react'
8-
importPropTypesfrom'prop-types'
7+
import{ButtonasMButton}from'antd'
98

10-
importMButtonfrom'./styles'
9+
exportdefaultMButton
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
importstyledfrom'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
importReactfrom'react'
88
import{inject,observer}from'mobx-react'
9+
import{Tabs}from'antd'
910

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

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

2224
constdebug=makeDebugger('C:Banner')
2325

26+
const{ TabPane}=Tabs
27+
28+
constMTabs=styled(Tabs)`
29+
position: absolute;
30+
bottom: -17px;
31+
width: 80vw;
32+
`
33+
34+
functioncallback(key){
35+
console.log('callback: ',key)
36+
}
37+
2438
classBannerContainerextendsReact.Component{
2539
componentWillMount(){
2640
debug('mount')
@@ -37,6 +51,11 @@ class BannerContainer extends React.Component {
3751
return(
3852
<Banner>
3953
<BannerLogopath={getSVGIconPath(iconKey)}/>
54+
<MTabsonChange={callback}>
55+
<TabPanetab="帖子"key="1"/>
56+
<TabPanetab="教程"key="2"/>
57+
<TabPanetab="用户"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
importstyledfrom'styled-components'
22
importReactSVGfrom'react-svg'
33

4+
import{theme}from'../../../utils/themes'
5+
46
exportconstBanner=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
exportconstBannerLogo=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
<Headerid="whereCallShowDoraemon">
5151
<Router>Javascript / Elixir / go</Router>
5252
<Admin>
53-
<Button>管理页</Button>
53+
<Buttonsize="small"type="primary">
54+
管理页
55+
</Button>
5456
</Admin>
5557
<SearchonClick={logic.openDoraemon}>
5658
<HeaderIconpath={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
importstyledfrom'styled-components'
2-
32
importReactSVGfrom'react-svg'
43

5-
// import { theme } from '../../../utils/themes'
4+
import{theme}from'../../../utils/themes'
5+
66
exportconstHeader=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
exportconstRouter=styled.div`flex-grow: 1;`
1617

1718
exportconstAdmin=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-
exportconstSearch=styled.div`
23-
color: grey;
24-
margin-right: 10px;
25-
`
28+
exportconstSearch=styled.div`color:${theme('header.fg')};`
29+
30+
exportconstNotification=styled.div``
2631

27-
exportconstNotification=styled.div`
28-
color: grey;
29-
margin-right: 10px;
30-
`
3132
exportconstHeaderIcon=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
exportconstUser=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
importThemeSelectorfrom'../../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+
constAccountViewer=({ 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
classPreviewContainerextendsReact.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+
<AccountViewerthemeKeys={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
exportconstPreviewHeader=styled.div`
5151
border-bottom: 1px solid tomato;
5252
text-align: center;
5353
line-height: 30px;
5454
`
55-
exportconstPreviewBody=styled.div`
56-
text-align: center;
57-
margin-top: 20%;
58-
`
55+
exportconstPreviewBody=styled.div`margin-top: 20%;`
5956

6057
exportconstPreviewCloser=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+
exportconstColorBottom=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+
exportconstTheTitle=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
constContainer=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
constThemeObserver=({ children, theme})=>(
5189
<ThemeProvidertheme={theme.themeData}>

0 commit comments

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