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

Commit df76717

Browse files
wangdicoderwangdicoder
committed
finish night mode
1 parent 45618b6 commit df76717

File tree

11 files changed

+151
-134
lines changed

11 files changed

+151
-134
lines changed

‎js/components/ListViewForCollection.js‎

Lines changed: 29 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
import React, {Component, PropTypes} from 'react';
77
import {StyleSheet, View, Text, ListView, PixelRatio, Platform, TouchableNativeFeedback, TouchableHighlight} from 'react-native';
8+
import {connect} from 'react-redux';
89
import px2dp from '../utils/px2dp';
910
import theme from '../constants/theme';
1011
import Icon from 'react-native-vector-icons/Ionicons';
@@ -13,7 +14,7 @@ import { SwipeListView } from 'react-native-swipe-list-view';
1314
import {store} from '../store/index';
1415
import {unStarData} from '../actions/handleCollectionData';
1516

16-
export default class ListViewForCollection extends Component{
17+
class ListViewForCollection extends Component{
1718
static propTypes = {
1819
dataSource: PropTypes.array
1920
};
@@ -42,7 +43,7 @@ export default class ListViewForCollection extends Component{
4243

4344
_renderHiddenRow(rowData, sectionID, rowID, rowMap){
4445
return(
45-
<View style={styles.rowBack}>
46+
<View style={[styles.rowBack, {backgroundColor: this.props.rowItemBackgroundColor}]}>
4647
<TouchableHighlight
4748
onPress={this._itemRemoveOnPress.bind(this, rowData)}
4849
underlayColor={theme.touchableHighlightUnderlayColor}>
@@ -78,26 +79,27 @@ export default class ListViewForCollection extends Component{
7879
}
7980

8081
_renderRowContent(rowData){
82+
const {titleColor, subTitleColor, rowItemBackgroundColor} = this.props;
8183
return(
82-
<View style={styles.rowItem}>
84+
<View style={[styles.rowItem, {backgroundColor: rowItemBackgroundColor}]}>
8385
<View style={styles.titlePart}>
84-
<Text style={styles.title} numberOfLines={2}>{rowData.desc}</Text>
86+
<Text style={[styles.title, {color: titleColor}]} numberOfLines={2}>{rowData.desc}</Text>
8587
</View>
8688
<View style={styles.infoPart}>
87-
<Icon name="ios-pricetag-outline" color="#aaa"/>
88-
<Text style={styles.detailsTxt}>{rowData.type}</Text>
89-
<Icon name="ios-create-outline" color="#aaa"/>
90-
<Text style={styles.detailsTxt}>{rowData.who ? rowData.who : 'null'}</Text>
91-
<Icon name="ios-time-outline" color="#aaa"/>
92-
<Text style={styles.detailsTxt}>{this._handleCreateTime(rowData.publishedAt)}</Text>
89+
<Icon name="ios-pricetag-outline" color={subTitleColor}/>
90+
<Text style={[styles.detailsLabel, {color: subTitleColor}]}>{rowData.type}</Text>
91+
<Icon name="ios-create-outline" color={subTitleColor}/>
92+
<Text style={[styles.detailsLabel, {color: subTitleColor}]}>{rowData.who ? rowData.who : 'null'}</Text>
93+
<Icon name="ios-time-outline" color={subTitleColor}/>
94+
<Text style={[styles.detailsLabel, {color: subTitleColor}]}>{this._handleCreateTime(rowData.publishedAt)}</Text>
9395
</View>
9496
</View>
9597
);
9698
}
9799

98100
_renderSeparator(sectionID, rowID, adjacentRowHighlighted){
99101
return(
100-
<View key={rowID} style={{backgroundColor: theme.segment.color, height: theme.segment.width}}/>
102+
<View key={rowID} style={{backgroundColor: this.props.segmentColor, height: theme.segment.width}}/>
101103
);
102104
}
103105

@@ -123,7 +125,6 @@ const styles = StyleSheet.create({
123125

124126
},
125127
rowItem: {
126-
backgroundColor: '#fff',
127128
height: px2dp(75),
128129
padding: px2dp(10),
129130
},
@@ -136,19 +137,17 @@ const styles = StyleSheet.create({
136137
alignItems: 'center'
137138
},
138139
title: {
139-
color: '#000'
140+
140141
},
141-
detailsTxt: {
142+
detailsLabel: {
142143
marginLeft: px2dp(3),
143144
marginRight: px2dp(13),
144-
fontSize: px2dp(10),
145-
color: '#aaa'
145+
fontSize: px2dp(10)
146146
},
147147
rowBack: {
148148
flex: 1,
149149
flexDirection: 'row-reverse',
150-
alignItems: 'center',
151-
backgroundColor: '#fff',
150+
alignItems: 'center'
152151
},
153152
removeBtn: {
154153
height: px2dp(75),
@@ -161,4 +160,15 @@ const styles = StyleSheet.create({
161160
color: '#fff',
162161
fontSize: px2dp(16)
163162
}
164-
});
163+
});
164+
165+
const mapStateToProps = (state) => {
166+
return {
167+
segmentColor: state.settingState.colorScheme.segmentColor,
168+
titleColor: state.settingState.colorScheme.titleColor,
169+
subTitleColor: state.settingState.colorScheme.subTitleColor,
170+
rowItemBackgroundColor: state.settingState.colorScheme.rowItemBackgroundColor
171+
};
172+
};
173+
174+
export default connect(mapStateToProps)(ListViewForCollection);

‎js/components/ListViewForHome.js‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,14 @@
55

66
import React, {Component, PropTypes} from 'react';
77
import {StyleSheet, View, Text, ListView, PixelRatio, Platform, TouchableNativeFeedback, TouchableHighlight} from 'react-native';
8+
import {connect} from 'react-redux';
89
import px2dp from '../utils/px2dp';
910
import theme from '../constants/theme';
1011
import Avatar from './Avatar';
1112
import Icon from 'react-native-vector-icons/Ionicons';
1213
import WebViewPage from '../containers/WebViewPage';
1314

14-
export default class ListViewForHome extends Component{
15+
class ListViewForHome extends Component{
1516
static propTypes = {
1617
dataSource: PropTypes.array,
1718
headerTitle: PropTypes.string
@@ -62,21 +63,22 @@ export default class ListViewForHome extends Component{
6263
}
6364

6465
_renderRowContent(rowData){
66+
const {titleColor, subTitleColor, rowItemBackgroundColor} = this.props;
6567
return(
66-
<View style={styles.rowItem}>
68+
<View style={[styles.rowItem, {backgroundColor: rowItemBackgroundColor}]}>
6769
<View style={{flexDirection:'row', alignItems:'center'}}>
68-
<Icon name="ios-create-outline" color="#aaa"/>
69-
<Text style={{fontSize: px2dp(10), color: "#aaa"}}> {rowData.who ? rowData.who : 'null'}</Text>
70+
<Icon name="ios-create-outline" color={subTitleColor}/>
71+
<Text style={{fontSize: px2dp(10), color: subTitleColor}}> {rowData.who ? rowData.who : 'null'}</Text>
7072
</View>
71-
<Text style={styles.rowContent} numberOfLines={2}>{rowData.desc}</Text>
73+
<Text style={[styles.rowContent, {color: titleColor}]} numberOfLines={2}>{rowData.desc}</Text>
7274
</View>
7375
);
7476
}
7577

7678
_renderHeader(){
77-
const headerTitle = this.props.headerTitle;
79+
const {headerTitle, rowItemBackgroundColor, segmentColor} = this.props;
7880
return(
79-
<View style={styles.header}>
81+
<View style={[styles.header, {backgroundColor: rowItemBackgroundColor, borderTopColor: segmentColor}]}>
8082
<Avatar icon={this.tabIcon[this._judgeIconAttribute(headerTitle)]} width={px2dp(20)} backgroundColor={this.tabColor[this._judgeIconAttribute(headerTitle)]}/>
8183
<Text style={styles.headerLabel}>{this.props.headerTitle}</Text>
8284
</View>
@@ -124,8 +126,6 @@ const styles = StyleSheet.create({
124126
paddingBottom: px2dp(6),
125127
paddingLeft: px2dp(15),
126128
alignItems: 'center',
127-
backgroundColor: '#fff',
128-
borderTopColor: theme.segment.color,
129129
borderTopWidth: theme.segment.width
130130
},
131131
headerLabel: {
@@ -134,15 +134,24 @@ const styles = StyleSheet.create({
134134
marginLeft: px2dp(7)
135135
},
136136
rowItem: {
137-
backgroundColor: '#fff',
138137
paddingTop: px2dp(10),
139138
paddingBottom: px2dp(10),
140139
paddingLeft: px2dp(15),
141140
paddingRight: px2dp(15),
142141
justifyContent: 'center'
143142
},
144143
rowContent: {
145-
fontSize: px2dp(14),
146-
color: '#000'
144+
fontSize: px2dp(14)
147145
}
148-
});
146+
});
147+
148+
const mapStateToProps = (state) => {
149+
return {
150+
segmentColor: state.settingState.colorScheme.segmentColor,
151+
titleColor: state.settingState.colorScheme.titleColor,
152+
subTitleColor: state.settingState.colorScheme.subTitleColor,
153+
rowItemBackgroundColor: state.settingState.colorScheme.rowItemBackgroundColor
154+
};
155+
};
156+
157+
export default connect(mapStateToProps)(ListViewForHome);

‎js/components/ListViewWithInfo.js‎

Lines changed: 31 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,13 @@
66
import React, {Component, PropTypes} from 'react';
77
import {StyleSheet, View, Text, Image, ListView, Platform, ActivityIndicator, TouchableNativeFeedback, TouchableHighlight, ToastAndroid} from 'react-native';
88
import Icon from 'react-native-vector-icons/Ionicons';
9+
import {connect} from 'react-redux';
910
import theme from '../constants/theme';
1011
import px2dp from '../utils/px2dp';
1112
import WebViewPage from '../containers/WebViewPage';
1213
import getCorrectImageSizeUrl from '../utils/imageFactory';
1314

14-
export default class ListViewWithInfo extends Component{
15+
class ListViewWithInfo extends Component{
1516
constructor(props){
1617
super(props);
1718
this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
@@ -87,32 +88,33 @@ export default class ListViewWithInfo extends Component{
8788
}
8889

8990
_renderRowContent(rowData){
91+
const {titleColor, subTitleColor, rowItemBackgroundColor, thumbnailColor} = this.props;
9092
return(
91-
<View style={styles.itemContainer}>
93+
<View style={[styles.itemContainer, {backgroundColor: rowItemBackgroundColor}]}>
9294
<View style={styles.imgPart}>
9395
{(rowData.images && this.props.isOpenThumbnail) ?
9496
<Image style={styles.image} source={{uri: getCorrectImageSizeUrl(rowData.images[0])}} />
9597
:
96-
<Image style={styles.image} source={require('../assets/user_article_no_data.png')}/>
98+
<Image style={[styles.image, {backgroundColor: thumbnailColor}]} source={require('../assets/user_article_no_data.png')}/>
9799
}
98100
</View>
99101
<View style={styles.txtPart}>
100102
<View style={styles.titlePart}>
101-
<Text style={styles.title} numberOfLines={2}>{rowData.desc}</Text>
103+
<Text style={[styles.title, {color: titleColor}]} numberOfLines={2}>{rowData.desc}</Text>
102104
</View>
103105
<View style={styles.infoPart}>
104106
{this.props.renderTag ?
105107
<View>
106-
<Icon name="ios-pricetag-outline" color="#aaa"/>
107-
<Text style={styles.detailsTxt}>{rowData.type}</Text>
108+
<Icon name="ios-pricetag-outline" color={subTitleColor}/>
109+
<Text style={[styles.detailsLabel, {color: subTitleColor}]}>{rowData.type}</Text>
108110
</View>
109111
:
110112
null
111113
}
112-
<Icon name="ios-create-outline" color="#aaa"/>
113-
<Text style={styles.detailsTxt}>{rowData.who ? rowData.who : 'null'}</Text>
114-
<Icon name="ios-time-outline" color="#aaa"/>
115-
<Text style={styles.detailsTxt}>{this._handleCreateTime(rowData.publishedAt)}</Text>
114+
<Icon name="ios-create-outline" color={subTitleColor}/>
115+
<Text style={[styles.detailsLabel, {color: subTitleColor}]}>{rowData.who ? rowData.who : 'null'}</Text>
116+
<Icon name="ios-time-outline" color={subTitleColor}/>
117+
<Text style={[styles.detailsLabel, {color: subTitleColor}]}>{this._handleCreateTime(rowData.publishedAt)}</Text>
116118
</View>
117119
</View>
118120
</View>
@@ -130,7 +132,7 @@ export default class ListViewWithInfo extends Component{
130132

131133
_renderSeparator(sectionID, rowID, adjacentRowHighlighted){
132134
return(
133-
<View key={rowID} style={{height: theme.segment.width, backgroundColor: theme.segment.color}}/>
135+
<View key={rowID} style={{height: theme.segment.width, backgroundColor: this.props.segmentColor}}/>
134136
);
135137
}
136138

@@ -148,7 +150,6 @@ export default class ListViewWithInfo extends Component{
148150

149151
const styles = StyleSheet.create({
150152
itemContainer: {
151-
backgroundColor: '#fff',
152153
flexDirection: 'row',
153154
width: theme.screenWidth,
154155
height: px2dp(75)
@@ -161,8 +162,7 @@ const styles = StyleSheet.create({
161162
image: {
162163
width: px2dp(52),
163164
height: px2dp(52),
164-
resizeMode: 'cover',
165-
backgroundColor: '#f1f1f1',
165+
resizeMode: 'cover'
166166
},
167167
txtPart: {
168168
flex: 80,
@@ -179,13 +179,12 @@ const styles = StyleSheet.create({
179179
alignItems: 'center'
180180
},
181181
title: {
182-
color: '#000'
182+
183183
},
184-
detailsTxt: {
184+
detailsLabel: {
185185
marginLeft: px2dp(3),
186186
marginRight: px2dp(13),
187-
fontSize: px2dp(10),
188-
color: '#aaa'
187+
fontSize: px2dp(10)
189188
},
190189
footer: {
191190
flexDirection: 'row',
@@ -194,4 +193,17 @@ const styles = StyleSheet.create({
194193
alignItems: 'center',
195194
justifyContent: 'center',
196195
}
197-
});
196+
});
197+
198+
const mapStateToProps = (state) => {
199+
return {
200+
mainThemeColor: state.settingState.colorScheme.mainThemeColor,
201+
segmentColor: state.settingState.colorScheme.segmentColor,
202+
titleColor: state.settingState.colorScheme.titleColor,
203+
subTitleColor: state.settingState.colorScheme.subTitleColor,
204+
rowItemBackgroundColor: state.settingState.colorScheme.rowItemBackgroundColor,
205+
thumbnailColor: state.settingState.colorScheme.thumbnailColor
206+
};
207+
};
208+
209+
export default connect(mapStateToProps)(ListViewWithInfo);

‎js/constants/theme.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@ import {Platform, Dimensions, PixelRatio} from 'react-native';
77
import colors from './colors';
88
import px2dp from '../utils/px2dp';
99

10-
var favoriteColor = colors.orangeRed;
11-
1210
export default {
1311
//mainThemeColor: favoriteColor,
1412
pageBackgroundColor: '#f4f4f4',

‎js/containers/CollectionTab/index.js‎

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,10 @@
55

66
import React, {Component} from 'react';
77
import {connect} from 'react-redux';
8-
import {bindActionCreators} from 'redux';
98
import {View, Text, ScrollView} from 'react-native';
109
import theme from '../../constants/theme';
1110
import NavigationBar from '../../components/NavigationBar';
1211
import ListViewForCollection from '../../components/ListViewForCollection';
13-
import * as Actions from '../../actions/handleCollectionData';
1412

1513
class CollectionFragment extends Component{
1614
constructor(props){
@@ -19,7 +17,7 @@ class CollectionFragment extends Component{
1917

2018
render(){
2119
return(
22-
<View style={{flex: 1, backgroundColor: theme.pageBackgroundColor}}>
20+
<View style={{flex: 1, backgroundColor: this.props.pageBackgroundColor}}>
2321
<NavigationBar title="收藏"/>
2422
{this.props.dataSource.length > 0 ?
2523
<ScrollView>
@@ -36,22 +34,13 @@ class CollectionFragment extends Component{
3634
</View>
3735
);
3836
}
39-
40-
// componentDidMount(){
41-
// this.props.actions.fetchStarList();
42-
// }
4337
}
4438

4539
const mapStateToProps = (state) => {
4640
return {
47-
dataSource: state.favorData.dataSource
41+
dataSource: state.favorData.dataSource,
42+
pageBackgroundColor: state.settingState.colorScheme.pageBackgroundColor,
4843
};
4944
};
5045

51-
const mapDispatchToProps = (dispatch) => {
52-
return {
53-
actions: bindActionCreators(Actions, dispatch)
54-
};
55-
}
56-
57-
export default connect(mapStateToProps, mapDispatchToProps)(CollectionFragment);
46+
export default connect(mapStateToProps)(CollectionFragment);

0 commit comments

Comments
 (0)