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

Commit 45618b6

Browse files
wangdicoderwangdicoder
committed
finish more page for night mode
1 parent 987b216 commit 45618b6

File tree

13 files changed

+178
-95
lines changed

13 files changed

+178
-95
lines changed

‎js/actions/actionTypes.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,6 @@ export const UPDATE_STAR_STATE = 'UPDATE_STAR_STATE';
2929
export const CHANGE_COLOR = 'CHANGE_COLOR';
3030
export const CHANGE_DISPLAY_ORDER = 'CHANGE_DISPLAY_ORDER';
3131
export const OPEN_SHOW_THUMBNAIL = 'OPEN_SHOW_THUMBNAIL';
32-
export const CLOSE_SHOW_THUMBNAIL = 'CLOSE_SHOW_THUMBNAIL';
32+
export const CLOSE_SHOW_THUMBNAIL = 'CLOSE_SHOW_THUMBNAIL';
33+
export const OPEN_NIGHT_MODE = 'OPEN_NIGHT_MODE';
34+
export const CLOSE_NIGHT_MODE = 'CLOSE_NIGHT_MODE';

‎js/actions/modifySettings.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,22 @@ export function changeShowThumbnail(value, flag=true) {
3535
}
3636
}
3737

38+
export function changeNightMode(value, flag=true) {
39+
if(flag){
40+
41+
}
42+
43+
if(value){
44+
return {
45+
type: TYPES.OPEN_NIGHT_MODE
46+
};
47+
}else{
48+
return {
49+
type: TYPES.CLOSE_NIGHT_MODE
50+
};
51+
}
52+
}
53+
3854
export function changeDisplayOrder(order, flag=true) {
3955
if(flag) {
4056
let dao = new SettingsDataDAO();

‎js/components/NavigationBar.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ const styles = StyleSheet.create({
131131

132132
const mapStateToProps = (state) => {
133133
return {
134-
mainThemeColor: state.settingState.dayMode.mainThemeColor
134+
mainThemeColor: state.settingState.colorScheme.mainThemeColor
135135
};
136136
};
137137

‎js/components/RowItemWithSwitcher.js‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@ import {StyleSheet, Platform, View, Text, Switch} from 'react-native';
88
import Icon from 'react-native-vector-icons/Ionicons';
99
import theme from '../constants/theme';
1010
import px2dp from '../utils/px2dp';
11+
import {connect} from 'react-redux';
1112

12-
export default class RowItemWithSwitcher extends Component{
13+
class RowItemWithSwitcher extends Component{
1314
static propTypes = {
1415
title: PropTypes.string.isRequired,
1516
icon: PropTypes.string,
1617
iconColor: PropTypes.string,
1718
renderSegment: PropTypes.bool,
1819
switcherValue: PropTypes.bool,
19-
onValueChange: PropTypes.func,
20-
onTintColor: PropTypes.string
20+
onValueChange: PropTypes.func
2121
};
2222

2323
static defaultProps = {
@@ -27,21 +27,21 @@ export default class RowItemWithSwitcher extends Component{
2727
}
2828

2929
render(){
30-
const {title, icon, renderSegment, iconColor, switcherValue, onValueChange, onTintColor} = this.props;
30+
const {title, icon, renderSegment, iconColor, switcherValue, onValueChange, mainThemeColor, rowItemBackgroundColor, segmentColor, titleColor} = this.props;
3131
return(
32-
<View style={styles.container}>
32+
<View style={[styles.container, {backgroundColor: rowItemBackgroundColor}]}>
3333
<View style={styles.leftCell}>
3434
<View style={[styles.iconBorder, {backgroundColor: iconColor}]}>
35-
<Icon name={icon} color="#fff" size={px2dp(16)}/>
35+
<Icon name={icon} color={rowItemBackgroundColor} size={px2dp(16)}/>
3636
</View>
3737
</View>
3838
<View style={styles.rightCell}>
3939
<View style={styles.cell}>
40-
<Text style={styles.title}>{title}</Text>
41-
<Switch value={switcherValue} onValueChange={onValueChange} onTintColor={onTintColor}/>
40+
<Text style={[styles.title, {color: titleColor}]}>{title}</Text>
41+
<Switch value={switcherValue} onValueChange={onValueChange} onTintColor={mainThemeColor}/>
4242
</View>
4343
{ renderSegment ?
44-
<View style={styles.segmentLine}/>
44+
<View style={[styles.segmentLine, {backgroundColor: segmentColor}]}/>
4545
:
4646
null
4747
}
@@ -56,12 +56,10 @@ const styles = StyleSheet.create({
5656
flexDirection: 'row',
5757
width: theme.screenWidth,
5858
height: px2dp(40),
59-
backgroundColor: '#fff',
6059
alignItems: 'center'
6160
},
6261
title: {
63-
color: '#000',
64-
marginLeft: 5
62+
marginLeft: px2dp(5)
6563
},
6664
iconBorder: {
6765
borderRadius: 5,
@@ -91,7 +89,17 @@ const styles = StyleSheet.create({
9189
alignItems: 'center',
9290
},
9391
segmentLine: {
94-
backgroundColor: theme.segment.color,
9592
height: theme.segment.width
9693
}
97-
});
94+
});
95+
96+
const mapStateToProps = (state) => {
97+
return {
98+
mainThemeColor: state.settingState.colorScheme.mainThemeColor,
99+
segmentColor: state.settingState.colorScheme.segmentColor,
100+
titleColor: state.settingState.colorScheme.titleColor,
101+
rowItemBackgroundColor: state.settingState.colorScheme.rowItemBackgroundColor
102+
};
103+
};
104+
105+
export default connect(mapStateToProps)(RowItemWithSwitcher);

‎js/components/SimpleRowItem.js‎

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@ import {StyleSheet, Platform, View, Text, TouchableNativeFeedback, TouchableHigh
88
import Icon from 'react-native-vector-icons/Ionicons';
99
import theme from '../constants/theme';
1010
import px2dp from '../utils/px2dp';
11+
import {connect} from 'react-redux';
1112

12-
export default class SimpleRowItem extends Component{
13+
class SimpleRowItem extends Component{
1314
static propTypes = {
1415
title: PropTypes.string.isRequired,
1516
icon: PropTypes.string,
@@ -44,25 +45,25 @@ export default class SimpleRowItem extends Component{
4445
}
4546

4647
_renderContent(){
47-
const {title, icon, renderSegment, iconColor, isShowRightArrow} = this.props;
48+
const {title, icon, renderSegment, iconColor, isShowRightArrow, rowItemBackgroundColor, segmentColor, titleColor, arrowColor} = this.props;
4849
return(
49-
<View style={styles.container}>
50+
<View style={[styles.container, {backgroundColor: rowItemBackgroundColor}]}>
5051
<View style={styles.leftCell}>
5152
<View style={[styles.iconBorder, {backgroundColor: iconColor}]}>
52-
<Icon name={icon} color="#fff" size={px2dp(16)}/>
53+
<Icon name={icon} color={rowItemBackgroundColor} size={px2dp(16)}/>
5354
</View>
5455
</View>
5556
<View style={styles.rightCell}>
5657
<View style={styles.cell}>
57-
<Text style={styles.title}>{title}</Text>
58+
<Text style={[styles.title, {color: titleColor}]}>{title}</Text>
5859
{isShowRightArrow ?
59-
<Icon name="ios-arrow-forward" color={theme.segment.color} size={px2dp(18)}/>
60+
<Icon name="ios-arrow-forward" color={arrowColor} size={px2dp(18)}/>
6061
:
6162
null
6263
}
6364
</View>
6465
{ renderSegment ?
65-
<View style={styles.segmentLine}/>
66+
<View style={[styles.segmentLine, {backgroundColor: segmentColor}]}/>
6667
:
6768
null
6869
}
@@ -77,12 +78,10 @@ const styles = StyleSheet.create({
7778
flexDirection: 'row',
7879
width: theme.screenWidth,
7980
height: px2dp(40),
80-
backgroundColor: '#fff',
8181
alignItems: 'center'
8282
},
8383
title: {
84-
color: '#000',
85-
marginLeft: 5
84+
marginLeft: px2dp(5)
8685
},
8786
iconBorder: {
8887
borderRadius: 5,
@@ -112,7 +111,17 @@ const styles = StyleSheet.create({
112111
alignItems: 'center',
113112
},
114113
segmentLine: {
115-
backgroundColor: theme.segment.color,
116114
height: theme.segment.width
117115
}
118-
});
116+
});
117+
118+
const mapStateToProps = (state) => {
119+
return {
120+
segmentColor: state.settingState.colorScheme.segmentColor,
121+
titleColor: state.settingState.colorScheme.titleColor,
122+
rowItemBackgroundColor: state.settingState.colorScheme.rowItemBackgroundColor,
123+
arrowColor: state.settingState.colorScheme.arrowColor
124+
};
125+
};
126+
127+
export default connect(mapStateToProps)(SimpleRowItem);

‎js/containers/DiscoveryTab/TextTabPage.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ const mapStateToProps = (state) => {
110110
pageNumber: state.targetData.pageNumber,
111111
isFullData: state.targetData.isFullData,
112112
error: state.targetData.error,
113-
mainThemeColor: state.settingState.dayMode.mainThemeColor,
113+
mainThemeColor: state.settingState.colorScheme.mainThemeColor,
114114
isOpenThumbnail: state.settingState.isOpenThumbnail
115115
};
116116
};

‎js/containers/DiscoveryTab/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -310,7 +310,7 @@ const mapStateToProps = (state) => {
310310
loading: state.randomData.loading,
311311
error: state.randomData.error,
312312
isRenderFooter: state.randomData.isRenderFooter,
313-
mainThemeColor: state.settingState.dayMode.mainThemeColor,
313+
mainThemeColor: state.settingState.colorScheme.mainThemeColor,
314314
isOpenThumbnail: state.settingState.isOpenThumbnail
315315
};
316316
};

‎js/containers/HomeTab/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ const mapStateToProps = (state) => {
187187
hasData: state.homeData.hasData,
188188
dataSource: state.homeData.dataSource,
189189
dataTime: state.homeData.dataTime,
190-
mainThemeColor: state.settingState.dayMode.mainThemeColor,
190+
mainThemeColor: state.settingState.colorScheme.mainThemeColor,
191191
displayOrder: state.settingState.displayOrder
192192
};
193193
};

‎js/containers/MainPage.js‎

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,12 @@ class MainPage extends Component{
2222

2323
render(){
2424
return(
25-
<BottomTabBar navigator={this.props.navigator} mainThemeColor={this.props.mainThemeColor}/>
25+
<BottomTabBar
26+
navigator={this.props.navigator}
27+
mainThemeColor={this.props.mainThemeColor}
28+
rowItemBackgroundColor={this.props.rowItemBackgroundColor}
29+
tabIconColor={this.props.tabIconColor}
30+
/>
2631
);
2732
}
2833
}
@@ -36,14 +41,14 @@ class BottomTabBar extends Component{
3641
}
3742

3843
_renderItem(Component, tab, tabName, normalIcon, selectedIcon){
39-
const {navigator, mainThemeColor} = this.props;
44+
const {navigator, mainThemeColor, tabIconColor} = this.props;
4045
return(
4146
<TabNavigator.Item
4247
selected={this.state.selectedTab === tab}
4348
title={tabName}
44-
selectedTitleStyle={{color: mainThemeColor}}
49+
selectedTitleStyle={{color: tabIconColor}}
4550
renderIcon={() => <Image style={styles.tabBarItemIcon} source={normalIcon} />}
46-
renderSelectedIcon={() => <Image style={[styles.tabBarItemIcon, {tintColor: mainThemeColor}]} source={selectedIcon} />}
51+
renderSelectedIcon={() => <Image style={[styles.tabBarItemIcon, {tintColor: tabIconColor}]} source={selectedIcon} />}
4752
onPress={() => this.setState({ selectedTab: tab })}>
4853
{<Component navigator={navigator}/>}
4954
</TabNavigator.Item>
@@ -54,7 +59,7 @@ class BottomTabBar extends Component{
5459
return(
5560
<TabNavigator
5661
hidesTabTouch={true}
57-
tabBarStyle={styles.tabBarStyle}
62+
tabBarStyle={[styles.tabBarStyle, {backgroundColor: this.props.rowItemBackgroundColor}]}
5863
sceneStyle={{
5964
paddingTop: theme.toolbar.paddingTop, //immersive experience
6065
paddingBottom: styles.tabBarStyle.height}}>
@@ -67,25 +72,25 @@ class BottomTabBar extends Component{
6772
}
6873

6974
componentWillMount(){
70-
const mainThemeColor = this.props.mainThemeColor;
75+
const tabIconColor = this.props.tabIconColor;
7176
if(Platform.OS === 'ios') {
7277
Icon.getImageSource('ios-home-outline', 100, theme.tabButton.normalColor).then((source) => this.setState({homeNormal: source}));
73-
Icon.getImageSource('ios-home-outline', 100, mainThemeColor).then((source) => this.setState({homeSelected: source}));
78+
Icon.getImageSource('ios-home-outline', 100, tabIconColor).then((source) => this.setState({homeSelected: source}));
7479
Icon.getImageSource('ios-compass-outline', 100, theme.tabButton.normalColor).then((source) => this.setState({compassNormal: source}));
75-
Icon.getImageSource('ios-compass-outline', 100, mainThemeColor).then((source) => this.setState({compassSelected: source}));
80+
Icon.getImageSource('ios-compass-outline', 100, tabIconColor).then((source) => this.setState({compassSelected: source}));
7681
Icon.getImageSource('ios-list-box-outline', 100, theme.tabButton.normalColor).then((source) => this.setState({moreNormal: source}));
77-
Icon.getImageSource('ios-list-box-outline', 100, mainThemeColor).then((source) => this.setState({moreSelected: source}));
82+
Icon.getImageSource('ios-list-box-outline', 100, tabIconColor).then((source) => this.setState({moreSelected: source}));
7883
Icon.getImageSource('ios-cube-outline', 100, theme.tabButton.normalColor).then((source) => this.setState({collectionNormal: source}));
79-
Icon.getImageSource('ios-cube-outline', 100, mainThemeColor).then((source) => this.setState({collectionSelected: source}));
84+
Icon.getImageSource('ios-cube-outline', 100, tabIconColor).then((source) => this.setState({collectionSelected: source}));
8085
}else if(Platform.OS === 'android'){
8186
Icon.getImageSource('md-home', 100, theme.tabButton.normalColor).then((source) => this.setState({homeNormal: source}));
82-
Icon.getImageSource('md-home', 100, mainThemeColor).then((source) => this.setState({homeSelected: source}));
87+
Icon.getImageSource('md-home', 100, tabIconColor).then((source) => this.setState({homeSelected: source}));
8388
Icon.getImageSource('md-compass', 100, theme.tabButton.normalColor).then((source) => this.setState({compassNormal: source}));
84-
Icon.getImageSource('md-compass', 100, mainThemeColor).then((source) => this.setState({compassSelected: source}));
89+
Icon.getImageSource('md-compass', 100, tabIconColor).then((source) => this.setState({compassSelected: source}));
8590
Icon.getImageSource('md-list-box', 100, theme.tabButton.normalColor).then((source) => this.setState({moreNormal: source}));
86-
Icon.getImageSource('md-list-box', 100, mainThemeColor).then((source) => this.setState({moreSelected: source}));
91+
Icon.getImageSource('md-list-box', 100, tabIconColor).then((source) => this.setState({moreSelected: source}));
8792
Icon.getImageSource('md-cube', 100, theme.tabButton.normalColor).then((source) => this.setState({collectionNormal: source}));
88-
Icon.getImageSource('md-cube', 100, mainThemeColor).then((source) => this.setState({collectionSelected: source}));
93+
Icon.getImageSource('md-cube', 100, tabIconColor).then((source) => this.setState({collectionSelected: source}));
8994
}
9095
}
9196

@@ -95,23 +100,24 @@ class BottomTabBar extends Component{
95100
}
96101
}
97102

103+
const mapStateToProps = (state) => {
104+
return {
105+
mainThemeColor: state.settingState.colorScheme.mainThemeColor,
106+
rowItemBackgroundColor: state.settingState.colorScheme.rowItemBackgroundColor,
107+
tabIconColor: state.settingState.colorScheme.tabIconColor
108+
};
109+
};
110+
98111
const styles = {
99112
tabBarItemIcon: {
100113
width: px2dp(20),
101114
height: px2dp(20)
102115
},
103116
tabBarStyle: {
104117
height: px2dp(45),
105-
backgroundColor: '#fff',
106118
alignItems: 'center',
107119
paddingTop: Platform.OS === 'android' ? px2dp(6) : px2dp(3)
108120
}
109121
}
110122

111-
const mapStateToProps = (state) => {
112-
return {
113-
mainThemeColor: state.settingState.dayMode.mainThemeColor
114-
};
115-
};
116-
117123
export default connect(mapStateToProps)(MainPage);

‎js/containers/MoreTab/ThemeColorPage.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ const styles = StyleSheet.create({
118118

119119
const mapStateToProps = (state) => {
120120
return {
121-
mainThemeColor: state.settingState.dayMode.mainThemeColor
121+
mainThemeColor: state.settingState.colorScheme.mainThemeColor
122122
};
123123
};
124124

0 commit comments

Comments
 (0)