Skip to content

Commit 84d207f

Browse files
breitningbreitning
committed
update component styles
1 parent f7b86b1 commit 84d207f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+1140
-1260
lines changed

‎android/app/src/main/res/mipmap-hdpi/ic_launcher.png

-5.57 KB
Loading

‎android/app/src/main/res/mipmap-mdpi/ic_launcher.png

-2.22 KB
Loading

‎android/app/src/main/res/mipmap-xhdpi/ic_launcher.png

-10.5 KB
Loading

‎android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png

-23.9 KB
Loading

‎android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png

-29.3 KB
Loading

‎source/component/authorPostRow.js

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import moment from 'moment';
1010
import _ from 'lodash';
1111
import PureRenderMixin from 'react-addons-pure-render-mixin';
1212
import { decodeHTML } from '../common';
13-
import { CommonStyles, PostStyles, StyleConfig } from '../style';
13+
import { CommonStyles, ComponentStyles, StyleConfig } from '../style';
1414

1515
class AuthorPostRow extends Component {
1616

@@ -19,10 +19,6 @@ class AuthorPostRow extends Component {
1919
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
2020
}
2121

22-
static defaultProps = {
23-
onPress: () => null
24-
};
25-
2622
getPostInfo(){
2723
const { post } = this.props;
2824
let postInfo = {};
@@ -46,13 +42,13 @@ class AuthorPostRow extends Component {
4642
let metasContent = [];
4743

4844
metasContent.push(
49-
<Text key='meta-date' style={ [PostStyles.metaText, {color: StyleConfig.mainColor} ] }>
45+
<Text key='meta-date' style={ [ComponentStyles.metaText, {color: StyleConfig.mainColor} ] }>
5046
{ postInfo.published }
5147
</Text>
5248
);
5349
metasContent.push(
54-
<View key='meta-count' style={ PostStyles.metaRight } >
55-
<Text style={ [PostStyles.metaText, {color: StyleConfig.secondaryColor}] }>
50+
<View key='meta-count' style={ ComponentStyles.metaRight } >
51+
<Text style={ [ComponentStyles.metaText, {color: StyleConfig.secondaryColor}] }>
5652
{postInfo.comments + ' / ' + postInfo.views}
5753
</Text>
5854
</View>
@@ -71,22 +67,22 @@ class AuthorPostRow extends Component {
7167
key={ postInfo.id }>
7268
<View style={ CommonStyles.rowContainer }>
7369
<View>
74-
<Text style={ [PostStyles.title ] }>
70+
<Text style={ [ComponentStyles.title ] }>
7571
{ postInfo.title }
7672
</Text>
7773
</View>
7874

7975
{
8076
postInfo.summary?
8177
<View>
82-
<Text style={ PostStyles.summary }>
78+
<Text style={ ComponentStyles.summary }>
8379
{ postInfo.summary }
8480
</Text>
8581
</View>
8682
: null
8783
}
8884

89-
<View style={ PostStyles.metaInfo }>
85+
<View style={ ComponentStyles.metaInfo }>
9086
{ this.renderPostRowMetas(postInfo) }
9187
</View>
9288

‎source/component/authorRender.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import moment from 'moment';
1313
import ParallaxScrollView from 'react-native-parallax-scroll-view';
1414
import * as Animatable from 'react-native-animatable';
1515
import PureRenderMixin from 'react-addons-pure-render-mixin';
16-
import { CommonStyles, AuthorStyles, StyleConfig } from '../style';
16+
import { CommonStyles, ComponentStyles, StyleConfig } from '../style';
1717
import { getImageSource, getBloggerAvatar, decodeHTML } from '../common';
1818
import Navbar from './navbar';
1919

@@ -99,30 +99,30 @@ class AuthorRender extends Component {
9999
return (
100100
<Animatable.View
101101
ref={(view)=>{ this.parallaxForeground = view}}
102-
style={ AuthorStyles.headerContainer } >
102+
style={ ComponentStyles.headerContainer } >
103103
{
104104
authorInfo.logo?
105105
<Image
106-
style={ AuthorStyles.headerAvatar }
106+
style={ ComponentStyles.headerAvatar }
107107
source={ {uri:authorInfo.authorAvatar} }/>
108108
: null
109109
}
110110

111-
<Text style={ AuthorStyles.headerTitleText }>
111+
<Text style={ ComponentStyles.headerTitleText }>
112112
{ authorInfo.authorName }
113113
</Text>
114114

115-
<View style={ AuthorStyles.headerMetas}>
115+
<View style={ ComponentStyles.headerMetas}>
116116
{
117117
authorInfo.updated?
118-
<Text style={ AuthorStyles.headerMetaText }>
118+
<Text style={ ComponentStyles.headerMetaText }>
119119
最近：{ authorInfo.updated }
120120
</Text>
121121
:null
122122
}
123123
{
124124
authorInfo.postcount?
125-
<Text style={ AuthorStyles.headerMetaText }>
125+
<Text style={ ComponentStyles.headerMetaText }>
126126
博文数：{ authorInfo.postcount }
127127
</Text>
128128
:null

‎source/component/authorization.js

Lines changed: 0 additions & 50 deletions
This file was deleted.

‎source/component/commentRow.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import HtmlConvertor from './htmlConvertor';
1212
import CodeAvatar from '../component/codeAvatar';
1313
import Config from '../config';
1414
import { filterCommentData, decodeHTML } from '../common'
15-
import { CommentStyles, CommonStyles, StyleConfig } from '../style';
15+
import { ComponentStyles, CommonStyles, StyleConfig } from '../style';
1616

1717
class CommentRow extends Component {
1818

@@ -46,17 +46,17 @@ class CommentRow extends Component {
4646
underlayColor={ StyleConfig.touchablePressColor }
4747
key={ commentInfo.id }>
4848
<View style={ CommonStyles.rowContainer }>
49-
<View style={ CommentStyles.metaInfo }>
49+
<View style={ ComponentStyles.metaInfo }>
5050

5151
<Image
52-
style={ CommentStyles.metaAvatar }
52+
style={ ComponentStyles.metaAvatar }
5353
source={ {uri: commentInfo.authorAvatar} }/>
5454

55-
<View style={ CommentStyles.metaAuthor }>
56-
<Text style={ CommentStyles.authorName }>
55+
<View style={ ComponentStyles.metaAuthor }>
56+
<Text style={ ComponentStyles.authorName }>
5757
{ commentInfo.authorName }
5858
</Text>
59-
<Text style={ CommentStyles.published }>
59+
<Text style={ ComponentStyles.published }>
6060
{ commentInfo.publishDate }
6161
</Text>
6262
</View>

‎source/component/drawerPanel.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
1212
import Config, { postCategory } from '../config';
1313
import drawerItems from '../config/drawer';
1414
import { getImageSource } from '../common';
15-
import { CommonStyles, DrawerPanelStyles, StyleConfig } from '../style';
15+
import { CommonStyles, ComponentStyles, StyleConfig } from '../style';
1616

1717
const backgroundImageSource = getImageSource(2);
1818

@@ -48,21 +48,21 @@ class DrawerPanel extends Component {
4848
renderHeader(){
4949
let { router } = this.props;
5050
return (
51-
<View style={ DrawerPanelStyles.header }>
51+
<View style={ ComponentStyles.header }>
5252
<Image
53-
style={ DrawerPanelStyles.headerBg }
53+
style={ ComponentStyles.headerBg }
5454
resizeMode="stretch"
5555
source={ {uri:backgroundImageSource} }>
5656
<View style={ CommonStyles.headerBackgroundMask }/>
57-
<View style={ DrawerPanelStyles.headerContent }>
57+
<View style={ ComponentStyles.headerContent }>
5858
<Image
59-
style={ DrawerPanelStyles.headerAvatar }
59+
style={ ComponentStyles.headerAvatar }
6060
source={{uri:"http://123.56.135.166/cnblog/public/img/common/author.jpg"}}/>
61-
<View style={ DrawerPanelStyles.headerText}>
62-
<Text style={ DrawerPanelStyles.headerName}>
61+
<View style={ ComponentStyles.headerText}>
62+
<Text style={ ComponentStyles.headerName}>
6363
愤怒的晃晃
6464
</Text>
65-
<Text style={ DrawerPanelStyles.headerDate}>
65+
<Text style={ ComponentStyles.headerDate}>
6666
个人中心
6767
</Text>
6868
</View>
@@ -124,7 +124,7 @@ class DrawerPanel extends Component {
124124
renderContent(){
125125
return (
126126
drawerItems && drawerItems.length ?
127-
<View style={ DrawerPanelStyles.list }>
127+
<View style={ ComponentStyles.list }>
128128
{
129129
drawerItems.map((nav, index)=>{
130130
return this.renderItem(nav, index);

‎source/component/floatButton.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
} from 'react-native';
99
import Icon from 'react-native-vector-icons/Entypo';
1010
import PureRenderMixin from 'react-addons-pure-render-mixin';
11-
import { FloatButtonStyles } from '../style';
11+
import { ComponentStyles } from '../style';
1212

1313
const activeOpacity = 0.6;
1414

@@ -24,7 +24,7 @@ class FloatButton extends Component {
2424
return (
2525
<TouchableOpacity
2626
activeOpacity = { activeOpacity }
27-
onPress={ this.props.onPress } style={[ FloatButtonStyles.container, FloatButtonStyles.positionRight, this.props.style ]}>
27+
onPress={ this.props.onPress } style={[ ComponentStyles.container, ComponentStyles.positionRight, this.props.style ]}>
2828
{ this.props.children }
2929
</TouchableOpacity>
3030
)

‎source/component/homeRender.js

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
View,
44
Image,
55
Text,
6+
StyleSheet,
67
Dimensions,
78
ScrollView,
89
TouchableOpacity
@@ -12,11 +13,11 @@ import _ from 'lodash';
1213
import * as Animatable from 'react-native-animatable';
1314
import PureRenderMixin from 'react-addons-pure-render-mixin';
1415
import ParallaxScrollView from 'react-native-parallax-scroll-view';
15-
import { CommonStyles, HomeStyles, StyleConfig } from '../style';
1616
import Navbar from './navbar';
17-
import CodeLogo from './codeLogo';
1817
import Config from '../config';
18+
import Logo from '../component/logo';
1919
import { getImageSource } from '../common';
20+
import { CommonStyles, ComponentStyles, StyleConfig } from '../style';
2021

2122
const backgroundImageSource = getImageSource(1);
2223

@@ -41,7 +42,7 @@ class HomeRender extends Component {
4142
let randomNumber = _.random(1.01, 1.99);
4243
this.parallaxBackground.transitionTo({
4344
width: width * randomNumber,
44-
height: StyleConfig.parallaxHeaderHeight * randomNumber
45+
height: StyleConfig.header_height * randomNumber
4546
}, 1000);
4647
}
4748

@@ -70,40 +71,37 @@ class HomeRender extends Component {
7071

7172
renderParallaxBackground(){
7273
return (
73-
<View style={ CommonStyles.headerBackground } key="parallax-background">
74+
<View
75+
key="parallax-background">
7476
<Animatable.Image
7577
resizeMode="cover"
76-
style={ CommonStyles.headerBackgroundImage }
78+
style={ [ComponentStyles.header_img ] }
7779
source={ {uri: backgroundImageSource } }
7880
ref={(view)=>{this.parallaxBackground = view}} >
7981
</Animatable.Image>
80-
<View style={ CommonStyles.headerBackgroundMask }/>
82+
<View style={ [ ComponentStyles.header_backdrop ] }/>
8183
</View>
8284
)
8385
}
8486

8587
renderParallaxForeground(){
8688
return (
8789
<Animatable.View
88-
style={ HomeStyles.headerContainer } key="parallax-foreground"
90+
key="parallax-foreground"
91+
style = { [ CommonStyles.flexColumn, CommonStyles.flexItemsMiddle, CommonStyles.flexItemsCenter, styles.foreground ] }
8992
ref={(view)=>{ this.parallaxForeground = view}}>
90-
91-
<CodeLogo/>
92-
93-
<Text style={ HomeStyles.headerTitleText }>
93+
<Logo/>
94+
<Text style={[CommonStyles.text_white, CommonStyles.fontSize_lg, CommonStyles.m_y_2 ]}>
9495
{Config.appInfo.name}
9596
</Text>
96-
<Text style={ HomeStyles.headerSubText }>
97+
<Text style={[CommonStyles.text_light, CommonStyles.fontSize_sm]}>
9798
{Config.appInfo.descr}
9899
</Text>
99100
</Animatable.View>
100101
)
101102
}
102103

103104
renderParallaxStickyHeader(){
104-
105-
console.info(backgroundImageSource);
106-
107105
return (
108106
<Navbar
109107
backgroundImage = { {uri: backgroundImageSource} }
@@ -116,24 +114,28 @@ class HomeRender extends Component {
116114
}
117115

118116
render() {
119-
120117
return (
121118
<ParallaxScrollView
122-
headerBackgroundColor="#111"
119+
headerBackgroundColor={ StyleConfig.color_dark }
123120
ref={(view)=>{this.parallaxView = view}}
124-
stickyHeaderHeight={ StyleConfig.navbarHeight }
125-
parallaxHeaderHeight={ StyleConfig.parallaxHeaderHeight }
121+
parallaxHeaderHeight={ StyleConfig.header_height }
122+
stickyHeaderHeight={ StyleConfig.navbar_height }
126123
onScroll={(e) => this.onParallaxViewScroll(e) }
127124
renderScrollComponent={()=> this.renderParallaxScrollComponent()}
128125
renderBackground={() => this.renderParallaxBackground()}
129126
renderForeground={() => this.renderParallaxForeground()}
130127
renderStickyHeader={() => this.renderParallaxStickyHeader()}>
131-
132128
{ this.props.children }
133-
134129
</ParallaxScrollView>
135130
);
136131
}
137132
}
138133

134+
export const styles = StyleSheet.create({
135+
foreground:{
136+
height: StyleConfig.header_height,
137+
paddingTop: StyleConfig.space_4
138+
}
139+
});
140+
139141
export default HomeRender;

‎source/component/htmlConvertor.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { filterCodeSnippet, decodeHTML, formatNewsImgUri } from '../common';
1717
import ImageBox from './imageBox';
1818

1919
const {width, height} = Dimensions.get('window');
20-
const defaultImageMaxWidth = width - StyleConfig.contentPadding * 2;
20+
const defaultImageMaxWidth = width - StyleConfig.space_3 * 2;
2121

2222
class HtmlRender extends Component {
2323

0 commit comments

Comments
 (0)