add setting panel

soliury · soliury · commit eae326ccd606 · 2015-07-23T17:14:10.000+08:00
diff --git a/app/actions/UserActions.js b/app/actions/UserActions.js
@@ -117,3 +117,11 @@ exports.unLikeTopic = function (id) {
         id: id
     }
 }
+
+
+exports.logout = function () {
+    UserService.storage.clearUser()
+    return {
+        type: types.LOGOUT
+    }
+}
diff --git a/app/components/Setting.js b/app/components/Setting.js
@@ -0,0 +1,194 @@
+var React = require('react-native')
+var Modal = require('react-native-modal')
+var Button = require('react-native-button')
+var { Icon, } = require('react-native-icons')
+
+
+var window = require('../util/window')
+var { width, height } = window.get()
+
+var {
+    View,
+    StyleSheet,
+    ScrollView,
+    Component,
+    Text,
+    StatusBarIOS,
+    ActivityIndicatorIOS,
+    TouchableOpacity
+    } = React
+
+
+class Setting extends Component {
+    constructor(props) {
+        super(props)
+    }
+
+
+    onAboutPress() {
+
+    }
+
+
+    onLogoutPress() {
+        this.props.actions.logout()
+        this.props.router.replaceWithHome()
+    }
+
+
+    onClearPress(){
+        
+    }
+
+
+    render() {
+        return (
+            <Modal
+                style={modalStyles}
+                //onPressBackdrop={() => this.props.closeModal()}
+                hideCloseButton={true}
+                backdropType='blur'
+                backdropBlur='dark'
+                isVisible={this.props.isModalOpen}
+                onClose={() => this.props.closeModal()}>
+
+                <View style={styles.wrapper}>
+                    <View style={[styles.row,styles.header]}>
+                        <Icon
+                            name='ion|ios-gear'
+                            size={25}
+                            color='rgba(255,255,255,0.5)'
+                            style={styles.Icon}/>
+                        <Text style={styles.rowText}>
+                            设置
+                        </Text>
+                    </View>
+
+
+                    <TouchableOpacity onPress={this.onAboutPress.bind(this)}>
+                        <View style={[styles.row]}>
+                            <Icon
+                                name='ion|ios-eye'
+                                size={25}
+                                color='rgba(255,255,255,0.5)'
+                                style={styles.Icon}/>
+                            <Text style={styles.rowText}>
+                                关于
+                            </Text>
+                        </View>
+                    </TouchableOpacity>
+
+                    <TouchableOpacity onPress={this.onClearPress.bind(this)}>
+                        <View style={[styles.row]}>
+                            <Icon
+                                name='ion|ios-trash'
+                                size={22}
+                                color='rgba(255,255,255,0.5)'
+                                style={styles.Icon}/>
+                            <Text style={styles.rowText}>
+                                清除缓存
+                            </Text>
+                        </View>
+                    </TouchableOpacity>
+
+
+                    <TouchableOpacity onPress={this.onLogoutPress.bind(this)}>
+                        <View style={[styles.row]}>
+                            <Icon
+                                name='ion|power'
+                                size={20}
+                                color='#E74C3C'
+                                style={styles.Icon}/>
+                            <Text style={[styles.rowText,styles.logoutText]}>
+                                退出
+                            </Text>
+                        </View>
+                    </TouchableOpacity>
+
+                </View>
+
+
+                <TouchableOpacity onPress={() => this.props.closeModal()}>
+                    <Icon
+                        name='ion|ios-close-empty'
+                        size={34}
+                        color='rgba(255,255,255,0.9)'
+                        style={styles.closeIcon}/>
+                </TouchableOpacity>
+            </Modal>
+        )
+    }
+}
+
+
+var styles = StyleSheet.create({
+    wrapper: {
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(0,0,0,0.3)',
+        borderRadius: 3,
+        margin: 30,
+        width: width - 30 * 2
+    },
+    row: {
+        height: 40,
+        flexDirection: 'row',
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        borderRadius: 2,
+        paddingLeft: 20,
+        width: width - 30 * 2,
+        backgroundColor: 'rgba(0,0,0,0.1)'
+    },
+    rowText: {
+        paddingLeft: 20,
+        color: 'rgba(255,255,255,0.7)'
+    },
+    logoutText: {
+        color: '#E74C3C'
+    },
+    header: {
+        backgroundColor: 'rgba(0,0,0,0.5)'
+    },
+    Icon: {
+        height: 20,
+        width: 20
+    },
+    closeIcon: {
+        height: 30,
+        width: 30,
+        borderRadius: 30 / 2,
+        borderColor: 'rgba(255,255,255,0.2)',
+        borderWidth: 2
+    }
+})
+
+var modalStyles = StyleSheet.create({
+    container: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        backgroundColor: 'transparent',
+        justifyContent: 'center',
+    },
+    backdrop: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        backgroundColor: '#000000',
+        opacity: 0.5,
+    },
+    modal: {
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center'
+    }
+})
+
+
+module.exports = Setting
diff --git a/app/configs/Router.js b/app/configs/Router.js
@@ -76,6 +76,10 @@ class Router {
             sceneConfig: Navigator.SceneConfigs.FloatFromBottom
         })
     }
+
+    replaceWithHome(){
+        this.navigator.popToTop()
+    }
 }
 
 module.exports = Router
diff --git a/app/constants/ActionTypes.js b/app/constants/ActionTypes.js
@@ -13,6 +13,7 @@ exports.CHECK_TOKEN_REQUREST = 'CHECK_TOKEN_REQUREST'
 exports.CHECK_TOKEN_FAILED = 'CHECK_TOKEN_FAILED'
 exports.LIKE_TOPIC = 'LIKE_TOPIC'
 exports.UN_LIKE_TOPIC = 'UN_LIKE_TOPIC'
+exports.LOGOUT='LOGOUT'
 
 
 exports.GET_UNREAD_MESSAGE_COUNT_SUCCESS = 'GET_UNREAD_MESSAGE_COUNT_SUCCESS'
diff --git a/app/containers/User.js b/app/containers/User.js
@@ -9,6 +9,7 @@ var { Icon, } = require('react-native-icons')
 var UserTopicPage = require('../components/UserTopicPage')
 var Return = require('../components/overlay/Return')
 var TabBar = require('../components/TabBar')
+var Setting = require('../components/Setting')
 
 
 var genColor = require('../util/genColor')
@@ -40,7 +41,8 @@ class User extends Component {
         this.state = {
             userInfo: null,
             wallColor: genColor(),
-            didFocus: false
+            didFocus: false,
+            isSettingModalOpen: false
         }
     }
 
@@ -69,6 +71,20 @@ class User extends Component {
     }
 
 
+    onSettingModalClosePress() {
+        this.setState({
+            isSettingModalOpen: false
+        })
+    }
+
+
+    onSettingIconPress() {
+        this.setState({
+            isSettingModalOpen: true
+        })
+    }
+
+
     _getUserInfo() {
         let userName = this.props.userName
 
@@ -169,7 +185,9 @@ class User extends Component {
         )
 
         let settingIcon = (
-            <TouchableOpacity>
+            <TouchableOpacity
+                onPress={this.onSettingIconPress.bind(this)}
+                >
                 <Icon
                     name='ion|ios-gear'
                     size={34}
@@ -219,6 +237,14 @@ class User extends Component {
                 {this._renderUserTopics(userInfo)}
 
                 <Return router={this.props.router}></Return>
+
+
+                <Setting
+                    actions={this.props.actions}
+                    router={this.props.router}
+                    isModalOpen={this.state.isSettingModalOpen}
+                    closeModal={this.onSettingModalClosePress.bind(this)}
+                    ></Setting>
             </View>
         )
     }
diff --git a/app/reducers/user.js b/app/reducers/user.js
@@ -26,18 +26,25 @@ module.exports = function (state, action) {
         case types.GET_USER:
             return action.user
 
+
         case types.FETCH_USER:
             return action.user
 
+
         case types.LIKE_TOPIC:
             return {
                 ...state,
                 collect_topics: [action.topic].concat(state.collect_topics)
             }
 
+
         case types.UN_LIKE_TOPIC:
             return unLikeTopic(state, action.id)
 
+
+        case types.LOGOUT:
+            return null
+
         default:
             return state
     }
diff --git a/iOS/AppDelegate.m b/iOS/AppDelegate.m
@@ -31,7 +31,7 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
    * on the same Wi-Fi network.
    */
 
-  jsCodeLocation = [NSURL URLWithString:@"http://192.168.31.142:8081/index.ios.bundle"];
+  jsCodeLocation = [NSURL URLWithString:@"http://192.168.0.100:8081/index.ios.bundle"];
 
   /**
    * OPTION 2
diff --git a/noder.xcodeproj/project.pbxproj b/noder.xcodeproj/project.pbxproj
@@ -7,7 +7,6 @@
 	objects = {
 
 /* Begin PBXBuildFile section */
-		008F07F31AC5B25A0029DE68 /* main.jsbundle in Resources */ = {isa = PBXBuildFile; fileRef = 008F07F21AC5B25A0029DE68 /* main.jsbundle */; };
 		00E356F31AD99517003FC87E /* noderTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* noderTests.m */; };
 		13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
 		13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB11A68108700A75B9A /* LaunchScreen.xib */; };
@@ -174,7 +173,6 @@
 /* End PBXContainerItemProxy section */
 
 /* Begin PBXFileReference section */
-		008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; name = main.jsbundle; path = iOS/main.jsbundle; sourceTree = "<group>"; };
 		00E356EE1AD99517003FC87E /* noderTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = noderTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
 		00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		00E356F21AD99517003FC87E /* noderTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = noderTests.m; sourceTree = "<group>"; };
@@ -265,7 +263,6 @@
 		13B07FAE1A68108700A75B9A /* noder */ = {
 			isa = PBXGroup;
 			children = (
-				008F07F21AC5B25A0029DE68 /* main.jsbundle */,
 				13B07FAF1A68108700A75B9A /* AppDelegate.h */,
 				13B07FB01A68108700A75B9A /* AppDelegate.m */,
 				13B07FB51A68108700A75B9A /* Images.xcassets */,
@@ -764,7 +761,6 @@
 				9EC98E8D1B0DC2D6006A460D /* foundation-icons.ttf in Resources */,
 				9EC98E8E1B0DC2D6006A460D /* ionicons.ttf in Resources */,
 				9EC98E8F1B0DC2D6006A460D /* zocial-regular-webfont.ttf in Resources */,
-				008F07F31AC5B25A0029DE68 /* main.jsbundle in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
 			);

Original file line number	Diff line number	Diff line change
`@@ -117,3 +117,11 @@ exports.unLikeTopic = function (id) {`
`117`	`117`	`id: id`
`118`	`118`	`}`
`119`	`119`	`}`
	`120`	`+`
	`121`	`+`
	`122`	`+exports.logout = function () {`
	`123`	`+ UserService.storage.clearUser()`
	`124`	`+ return {`
	`125`	`+ type: types.LOGOUT`
	`126`	`+ }`
	`127`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -76,6 +76,10 @@ class Router {`
`76`	`76`	`sceneConfig: Navigator.SceneConfigs.FloatFromBottom`
`77`	`77`	`})`
`78`	`78`	`}`
	`79`	`+`
	`80`	`+ replaceWithHome(){`
	`81`	`+ this.navigator.popToTop()`
	`82`	`+ }`
`79`	`83`	`}`
`80`	`84`
`81`	`85`	`module.exports = Router`