Add black and violet theme

rilyu · Apr 21, 2017 · 592574e · 592574e
1 parent ff5b33f
commit 592574e
Show file tree

Hide file tree

Showing 29 changed files with 971 additions and 61 deletions.
diff --git a/README.md b/README.md
@@ -31,6 +31,10 @@ The document is being written, please refer to the example source code.
 ## Components
 ![](https://github.com/rilyu/teaset/blob/master/screenshots/00-Teaset1.png?raw=true) ![](https://github.com/rilyu/teaset/blob/master/screenshots/00-Teaset2.png?raw=true)
 
+## Theme
+![](https://github.com/rilyu/teaset/blob/master/screenshots/00a-Theme1.png?raw=true) ![](https://github.com/rilyu/teaset/blob/master/screenshots/00a-Theme2.png?raw=true)
+![](https://github.com/rilyu/teaset/blob/master/screenshots/00a-Theme3.png?raw=true)
+
 ## Label
 ![](https://github.com/rilyu/teaset/blob/master/screenshots/01-Label.png?raw=true)
 

diff --git a/components/Menu/MenuView.js b/components/Menu/MenuView.js
@@ -44,7 +44,7 @@ export default class MenuView extends Overlay.PopoverView {
     };
     if (shadow) {
       Object.assign(menuStyle, {
-        shadowColor: '#777',
+        shadowColor: Theme.menuShadowColor,
         shadowOffset: {width: 1, height: 1},
         shadowOpacity: 0.5,
         shadowRadius: 2,

diff --git a/components/NavigationBar/NavigationBar.js b/components/NavigationBar/NavigationBar.js
@@ -3,7 +3,7 @@
 'use strict';
 
 import React, {Component, PropTypes} from 'react';
-import {StyleSheet, Platform, StatusBar, View} from 'react-native';
+import {StyleSheet, Platform, StatusBar, View, Text} from 'react-native';
 
 import Theme from 'teaset/themes/Theme';
 import NavigationTitle from './NavigationTitle';
@@ -17,10 +17,11 @@ export default class NavigationBar extends Component {
   static propTypes = {
     ...View.propTypes,
     type: PropTypes.oneOf(['auto', 'ios', 'android']),
-    tintColor: PropTypes.string, //bar tint color, default tint color of title, leftView and rightView
     title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    titleStyle: Text.propTypes.style,
     leftView: PropTypes.element,
     rightView: PropTypes.element,
+    tintColor: PropTypes.string, //bar tint color, default tint color leftView and rightView
     statusBarStyle: PropTypes.oneOf(['default', 'light-content']), //status bar style (iOS only)
     statusBarColor: PropTypes.string, //status bar color, default: style.backgroundColor
     statusBarHidden: PropTypes.bool, //status bar hidden
@@ -56,7 +57,7 @@ export default class NavigationBar extends Component {
   }
 
   buildProps() {
-    let {style, type, tintColor, title, statusBarColor, statusBarStyle, statusBarInsets, ...others} = this.props;
+    let {style, type, title, titleStyle, tintColor, statusBarColor, statusBarStyle, statusBarInsets, ...others} = this.props;
 
     //build style
     let justifyContent, titleTextAlign;
@@ -80,6 +81,8 @@ export default class NavigationBar extends Component {
       paddingTop: statusBarInsets && Platform.OS === 'ios' ? 20 : 0,
       paddingLeft: 4,
       paddingRight: 4,
+      borderBottomWidth: Theme.navSeparatorLineWidth,
+      borderBottomColor: Theme.navSeparatorColor,
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: justifyContent,
@@ -125,10 +128,10 @@ export default class NavigationBar extends Component {
 
     //convert string title to NavigationBar.Title
     if (typeof title === 'string') {
-      title = <this.constructor.Title style={{textAlign: titleTextAlign}} text={title} />;
+      title = <this.constructor.Title style={{textAlign: titleTextAlign, color: Theme.navTitleColor}} text={title} />;
     }
 
-    this.props = {style, type, tintColor, title, titleViewStyle, statusBarColor, statusBarStyle, statusBarInsets, ...others};
+    this.props = {style, type, title, titleStyle, tintColor, titleViewStyle, statusBarColor, statusBarStyle, statusBarInsets, ...others};
   }
 
   onLeftViewLayout(e) {

diff --git a/components/Overlay/OverlayPullView.js b/components/Overlay/OverlayPullView.js
@@ -5,6 +5,7 @@
 import React, {Component, PropTypes} from "react";
 import {Animated, View} from 'react-native';
 
+import Theme from '../../themes/Theme';
 import OverlayView from './OverlayView';
 
 export default class OverlayPullView extends OverlayView {
@@ -104,7 +105,7 @@ export default class OverlayPullView extends OverlayView {
     style = [].concat(style).concat(sideStyle);
     contentStyle.opacity = this.state.showed ? 1 : 0;
     containerStyle = [{
-      backgroundColor: '#fff',//rgba(0, 0, 0, 0)',
+      backgroundColor: Theme.defaultColor,//rgba(0, 0, 0, 0)',
     }].concat(containerStyle).concat(contentStyle);
 
     this.props = {side, style, containerStyle, ...others};

diff --git a/components/PopoverPicker/PopoverPickerView.js b/components/PopoverPicker/PopoverPickerView.js
@@ -48,7 +48,7 @@ export default class PopoverPickerView extends Overlay.PopoverView {
     };
     if (shadow) {
       Object.assign(pickerStyle, {
-        shadowColor: '#777',
+        shadowColor: Theme.poppShadowColor,
         shadowOffset: {width: 1, height: 1},
         shadowOpacity: 0.5,
         shadowRadius: 2,

diff --git a/components/PullPicker/PullPickerItem.js b/components/PullPicker/PullPickerItem.js
@@ -4,6 +4,7 @@
 
 import React, {Component, PropTypes} from "react";
 
+import Theme from 'teaset/themes/Theme';
 import ListRow from '../ListRow/ListRow';
 
 export default class PullPickerItem extends ListRow {
@@ -14,9 +15,10 @@ export default class PullPickerItem extends ListRow {
   };
 
   buildProps() {
-    let {selected, accessory, ...others} = this.props;
+    let {style, selected, accessory, ...others} = this.props;
+    style = [{backgroundColor: Theme.pupItemColor}].concat(style);
     accessory = selected ? 'check' : 'empty';
-    this.props = {selected, accessory, ...others} ;
+    this.props = {style, selected, accessory, ...others} ;
 
     super.buildProps();
   }

diff --git a/components/Stepper/Stepper.js b/components/Stepper/Stepper.js
@@ -71,17 +71,21 @@ export default class Stepper extends Component {
       alignItems: 'center',
       justifyContent: 'center',
     };
+    let btnTextStyle = {
+      color: Theme.stepperBtnTextColor,
+      fontSize: Theme.stepperBtnFontSize,
+    };
     if (!React.isValidElement(subButton)) {
       subButton = (
         <View style={btnStyle}>
-          <Text>{subButton}</Text>
+          <Text style={btnTextStyle}>{subButton}</Text>
         </View>
       );
     }
     if (!React.isValidElement(addButton)) {
       addButton = (
         <View style={btnStyle}>
-          <Text>{addButton}</Text>
+          <Text style={btnTextStyle}>{addButton}</Text>
         </View>
       );
     }

diff --git a/docs/cn/NavigationBar.md b/docs/cn/NavigationBar.md
@@ -6,10 +6,11 @@ NavigationBar 组件定义一个页面导航条, 用于页面顶部显示页面
 |---|---|---|---|
 | [View props...](https://facebook.github.io/react-native/docs/view.html) |  |  | NavigationBar 组件继承 View 组件的全部属性。
 | type | string | 'ios' | 风格类型。<br/>- auto: 自动, 根据操作系统自动选择<br/>- ios: iOS风格<br/>- android: Android风格<br/>显示效果参见[Screenshots](#screenshots)。
-| tintColor | string |  | 导航条文字与图像颜色, 默认值在 Theme 中设置。
 | title | string<br/>element |  | 导航条标题, 可传入字符串或 React Native 组件, 传入字符串时使用`<NavigationBar.Title />`组件渲染。
+| titleStyle | 同Text.style |  | 导航条标题样式, 当 title 类型为 element 时无效。
 | leftView | element |  | 导航条左视图。
 | rightView | element |  | 导航条右视图。
+| tintColor | string |  | 导航条左、右视图文字与图像颜色, 默认值在 Theme 中设置。
 | statusBarStyle | string | 'default' | 系统状态栏样式(iOS only)。<br/>- default: 默认, 黑色文字或图标。<br/>- light-content: 亮色调, 白色文字或图标。
 | statusBarColor | string |  | 导航条背景颜色, 默认值在 Theme 中设置。
 | statusBarHidden | bool | false | 是否隐藏系统状态栏, 为 true 时系统状态栏与导航条均不显示。

diff --git a/docs/cn/Theme.md b/docs/cn/Theme.md
@@ -1,13 +1,23 @@
 # `{Theme}` 主题
 
-Theme 是 Teaset 的组件样式定义对象, 用于定义 Teaset 组件的默认样式, 默认值见[ThemeDefault.js](/themes/ThemeDefault.js)。
+Theme 是 Teaset 的组件样式定义对象, 用于定义 Teaset 组件的默认样式。
 
-Teaset 提供的大部分组件均支持通过 style 属性定义样式, 你可以通过代码修改 Teaset 组件的样式。基于 App 统一风格考虑, 建议通过重定义 Theme 对象的属性来修改 Teaset 组件的样式。
+Teaset 提供的大部分组件均支持通过 style 属性定义样式, 可以通过代码修改 Teaset 组件的样式。基于 App 统一风格考虑, 建议通过重定义 Theme 对象的属性来修改 Teaset 组件的样式。
 
-你可以在代码入口处或者任何位置设置 Theme 定义, 如果在 App 运行过程中修改 Theme 定义, 则需要重新加载已渲染的页面。
+Teaset 提供 default 、 black 、 violet 三种配色方案, 默认值见[ThemeDefault.js](/themes/ThemeDefault.js)、[ThemeBlack.js](/themes/ThemeBlack.js)、[ThemeViolet.js](/themes/ThemeViolet.js), 可以自定义完整的配色方案, 也可使用上述一种方案并修改部分默认值。
+
+建议在代码入口处设置 Theme 定义, 如果在 App 运行过程中修改 Theme 定义, 则需要重新加载已渲染的页面。
 
 ## Example
+修改配色方案
+```
+import {Theme} from 'teaset';
+
+Theme.set(Theme.themes.black);
+
+```
 
+修改部分默认值
 ```
 import {Theme} from 'teaset';
 
@@ -17,3 +27,4 @@ Theme.set({
 });
 
 ```
+![](https://github.com/rilyu/teaset/blob/master/screenshots/00a-Theme2.png?raw=true) ![](https://github.com/rilyu/teaset/blob/master/screenshots/00a-Theme3.png?raw=true)
diff --git a/example/views/ButtonExample.js b/example/views/ButtonExample.js
@@ -38,7 +38,7 @@ export default class ButtonExample extends NavigationPage {
         <ListRow title='Type link disabled' detail={<Button title='Button' type='link' disabled={true} />} bottomSeparator='full' />
         <View style={{height: 20}} />
         <ListRow title='Custom' detail={
-          <Button style={{backgroundColor: '#fcf8e3', borderColor: '#8a6d3b'}}>
+          <Button style={{backgroundColor: '#rgba(238, 169, 91, 0.1)', borderColor: '#8a6d3b'}}>
             <Image style={{width: 16, height: 16, tintColor: '#8a6d3b'}} source={require('../icons/search.png')} />
             <Label style={{color: '#8a6d3b', fontSize: 16, paddingLeft: 8}} text='Search' />
           </Button>

diff --git a/example/views/Home.js b/example/views/Home.js
@@ -6,6 +6,7 @@ import React, {Component, PropTypes} from 'react';
 import {View, ScrollView} from 'react-native';
 
 import {Theme, NavigationPage, NavigationBar, ListRow} from 'teaset';
+import ThemeExample from './ThemeExample';
 import LabelExample from './LabelExample';
 import ButtonExample from './ButtonExample';
 import CheckboxExample from './CheckboxExample';
@@ -42,7 +43,8 @@ export default class Home extends NavigationPage {
     return (
       <ScrollView style={{flex: 1}}>
         <View style={{height: 20}} />
-        <ListRow title='Label' detail='标签' onPress={() => this.navigator.push({view: <LabelExample />})} topSeparator='full' />
+        <ListRow title='Theme' detail='主题' onPress={() => this.navigator.push({view: <ThemeExample />})} topSeparator='full' />
+        <ListRow title='Label' detail='标签' onPress={() => this.navigator.push({view: <LabelExample />})} />
         <ListRow title='Button' detail='按钮' onPress={() => this.navigator.push({view: <ButtonExample />})} />
         <ListRow title='Checkbox' detail='复选框' onPress={() => this.navigator.push({view: <CheckboxExample />})} />
         <ListRow title='Input' detail='输入框' onPress={() => this.navigator.push({view: <InputExample />})} />

diff --git a/example/views/InputExample.js b/example/views/InputExample.js
@@ -40,7 +40,7 @@ export default class InputExample extends NavigationPage {
         <View style={{height: 20}} />
         <ListRow title='Custom' detail={
           <Input
-            style={{width: 200, backgroundColor: '#fcf8e3', borderColor: '#8a6d3b', color: '#8a6d3b', textAlign: 'right'}}
+            style={{width: 200, backgroundColor: '#rgba(238, 169, 91, 0.1)', borderColor: '#8a6d3b', color: '#8a6d3b', textAlign: 'right'}}
             value={this.state.valueCustom}
             onChangeText={text => this.setState({valueCustom: text})}
             />

diff --git a/example/views/OverlayExample.js b/example/views/OverlayExample.js
@@ -5,7 +5,7 @@
 import React, {Component, PropTypes} from 'react';
 import {View, Image, ScrollView, TouchableWithoutFeedback, Dimensions} from 'react-native';
 
-import {NavigationPage, ListRow, Overlay, Label, Button, Checkbox} from 'teaset';
+import {Theme, NavigationPage, ListRow, Overlay, Label, Button, Checkbox} from 'teaset';
 
 export default class OverlayExample extends NavigationPage {
 
@@ -32,8 +32,8 @@ export default class OverlayExample extends NavigationPage {
         overlayOpacity={transparent ? 0 : null}
         ref={v => this.overlayView = v}
         >
-        <View style={{backgroundColor: transparent ? '#333' :'#fff', padding: 40, borderRadius: 15, alignItems: 'center'}}>
-          <Label style={{color: transparent ? '#eee' : '#000'}} size='xl' text={text} />
+        <View style={{backgroundColor: transparent ? '#333' : Theme.defaultColor, padding: 40, borderRadius: 15, alignItems: 'center'}}>
+          <Label type='danger' size='xl' text={text} />
           {modal ? <View style={{height: 20}} /> : null}
           {modal ? <Button title='Close' onPress={() => this.overlayView && this.overlayView.close()} /> : null}
         </View>
@@ -50,7 +50,7 @@ export default class OverlayExample extends NavigationPage {
         modal={modal}
         ref={v => this.overlayPopView = v}
         >
-        <View style={{backgroundColor: '#fff', minWidth: 260, minHeight: 180, borderRadius: 15, justifyContent: 'center', alignItems: 'center'}}>
+        <View style={{backgroundColor: Theme.defaultColor, minWidth: 260, minHeight: 180, borderRadius: 15, justifyContent: 'center', alignItems: 'center'}}>
           <Label type='title' size='xl' text={text} />
           {modal ? <View style={{height: 60}} /> : null}
           {modal ? <Button title='Close' onPress={() => this.overlayPopView && this.overlayPopView.close()} /> : null}
@@ -82,7 +82,7 @@ export default class OverlayExample extends NavigationPage {
   showPull(side, modal, text) {
     let overlayView = (
       <Overlay.PullView side={side} modal={modal} ref={v => this.overlayPullView = v}>
-        <View style={{backgroundColor: '#fff', minWidth: 300, minHeight: 260, justifyContent: 'center', alignItems: 'center'}}>
+        <View style={{backgroundColor: Theme.defaultColor, minWidth: 300, minHeight: 260, justifyContent: 'center', alignItems: 'center'}}>
           <Label type='title' size='xl' text={text} />
           {modal ? <View style={{height: 60}} /> : null}
           {modal ? <Button title='Close' onPress={() => this.overlayPullView && this.overlayPullView.close()} /> : null}
@@ -127,7 +127,7 @@ export default class OverlayExample extends NavigationPage {
   showMulti() {
     let overlayView = (
       <Overlay.PullView modal={false}>
-        <View style={{backgroundColor: '#fff', minWidth: 200, minHeight: 260, justifyContent: 'center', alignItems: 'center'}}>
+        <View style={{backgroundColor: Theme.defaultColor, minWidth: 200, minHeight: 260, justifyContent: 'center', alignItems: 'center'}}>
           <Label type='title' size='xl' text='Overlay' />
           <View style={{height: 60}} />
           <Button title='New overlay' onPress={() => this.showDefault(false, true, 'New overlay')} />

diff --git a/example/views/PopoverExample.js b/example/views/PopoverExample.js
@@ -23,77 +23,77 @@ export default class PopoverExample extends NavigationPage {
 
         <View style={{padding: 4, flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}}>
           <View style={{flex: 1, paddingRight: 8, alignItems: 'flex-end'}}>
-            <Popover style={styles.whiteStyle} arrow='bottomRight'>
+            <Popover style={styles.popoverStyle} arrow='bottomRight'>
               <Label style={{color: '#000'}} text='bottomRight' />
             </Popover>
           </View>
           <View>
-            <Popover style={styles.whiteStyle} arrow='bottom'>
+            <Popover style={styles.popoverStyle} arrow='bottom'>
               <Label style={{color: '#000'}} text='bottom' />
             </Popover>
           </View>
           <View style={{flex: 1, paddingLeft: 8, alignItems: 'flex-start'}}>
-            <Popover style={styles.whiteStyle} arrow='bottomLeft'>
+            <Popover style={styles.popoverStyle} arrow='bottomLeft'>
               <Label style={{color: '#000'}} text='bottomLeft' />
             </Popover>
           </View>
         </View>
 
         <View style={{padding: 4, flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}}>
           <View style={{flex: 1, paddingRight: 40, alignItems: 'flex-end'}}>
-            <Popover style={styles.whiteStyle} arrow='rightBottom'>
+            <Popover style={styles.popoverStyle} arrow='rightBottom'>
               <Label style={{color: '#000'}} text='rightBottom' />
             </Popover>
           </View>
           <View style={{height: 32, width: 32}} />
           <View style={{flex: 1, paddingLeft: 40, alignItems: 'flex-start'}}>
-            <Popover style={styles.whiteStyle} arrow='leftBottom'>
+            <Popover style={styles.popoverStyle} arrow='leftBottom'>
               <Label style={{color: '#000'}} text='leftBottom' />
             </Popover>
           </View>
         </View>
 
         <View style={{padding: 4, flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}}>
           <View style={{flex: 1, paddingRight: 40, alignItems: 'flex-end'}}>
-            <Popover style={styles.whiteStyle} arrow='right'>
+            <Popover style={styles.popoverStyle} arrow='right'>
               <Label style={{color: '#000'}} text='right' />
             </Popover>
           </View>
           <Image style={{height: 32, width: 32, borderRadius: 16, tintColor: '#337ab7'}} source={require('teaset/icons/smile.png')}/>
           <View style={{flex: 1, paddingLeft: 40, alignItems: 'flex-start'}}>
-            <Popover style={styles.whiteStyle} arrow='left'>
+            <Popover style={styles.popoverStyle} arrow='left'>
               <Label style={{color: '#000'}} text='left' />
             </Popover>
           </View>
         </View>
 
         <View style={{padding: 4, flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}}>
           <View style={{flex: 1, paddingRight: 40, alignItems: 'flex-end'}}>
-            <Popover style={styles.whiteStyle} arrow='rightTop'>
+            <Popover style={styles.popoverStyle} arrow='rightTop'>
               <Label style={{color: '#000'}} text='rightTop' />
             </Popover>
           </View>
           <View style={{height: 32, width: 32}} />
           <View style={{flex: 1, paddingLeft: 40, alignItems: 'flex-start'}}>
-            <Popover style={styles.whiteStyle} arrow='leftTop'>
+            <Popover style={styles.popoverStyle} arrow='leftTop'>
               <Label style={{color: '#000'}} text='leftTop' />
             </Popover>
           </View>
         </View>
 
         <View style={{padding: 4, flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}}>
           <View style={{flex: 1, paddingRight: 8, alignItems: 'flex-end'}}>
-            <Popover style={styles.whiteStyle} arrow='topRight'>
+            <Popover style={styles.popoverStyle} arrow='topRight'>
               <Label style={{color: '#000'}} text='topRight' />
             </Popover>
           </View>
           <View>
-            <Popover style={styles.whiteStyle} arrow='top'>
+            <Popover style={styles.popoverStyle} arrow='top'>
               <Label style={{color: '#000'}} text='top' />
             </Popover>
           </View>
           <View style={{flex: 1, paddingLeft: 8, alignItems: 'flex-start'}}>
-            <Popover style={styles.whiteStyle} arrow='topLeft'>
+            <Popover style={styles.popoverStyle} arrow='topLeft'>
               <Label style={{color: '#000'}} text='topLeft' />
             </Popover>
           </View>
@@ -106,16 +106,7 @@ export default class PopoverExample extends NavigationPage {
 }
 
 var styles = StyleSheet.create({
-  blackStyle: {
-    backgroundColor: 'rgba(0, 0, 0, 0.8)',
-    paddingTop: 8,
-    paddingBottom: 8,
-    paddingLeft: 12,
-    paddingRight: 12,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  whiteStyle: {
+  popoverStyle: {
     backgroundColor: '#fff',
     paddingTop: 8,
     paddingBottom: 8,