forked from vergnet/application-amicale
		
	Added self menu,added screen animations, improved themes
This commit is contained in:
		
							parent
							
								
									228a3dbabf
								
							
						
					
					
						commit
						7d7b17765d
					
				
					 12 changed files with 118 additions and 39 deletions
				
			
		
							
								
								
									
										4
									
								
								App.js
									
									
									
									
									
								
							
							
						
						
									
										4
									
								
								App.js
									
									
									
									
									
								
							|  | @ -51,8 +51,8 @@ export default class App extends React.Component<Props, State> { | |||
|         this.setState({ | ||||
|             isLoading: false, | ||||
|             currentTheme: ThemeManager.getCurrentTheme(), | ||||
|             // showIntro: AsyncStorageManager.getInstance().preferences.showIntro.current === '1'
 | ||||
|             showIntro: true | ||||
|             showIntro: AsyncStorageManager.getInstance().preferences.showIntro.current === '1' | ||||
|             // showIntro: true
 | ||||
|         }); | ||||
|     } | ||||
| 
 | ||||
|  |  | |||
|  | @ -12,6 +12,7 @@ const drawerCover = require("../assets/drawer-cover.png"); | |||
| 
 | ||||
| const WIKETUD_LINK = "https://www.etud.insa-toulouse.fr/wiketud"; | ||||
| const Amicale_LINK = "https://www.etud.insa-toulouse.fr/~amicale"; | ||||
| const RU_LINK = "http://m.insa-toulouse.fr/ru.html"; | ||||
| 
 | ||||
| type Props = { | ||||
|     navigation: Object, | ||||
|  | @ -54,16 +55,11 @@ export default class SideBar extends React.Component<Props, State> { | |||
|                 icon: "wikipedia", | ||||
|                 link: WIKETUD_LINK | ||||
|             }, | ||||
|             // {
 | ||||
|             //     name: i18n.t('screens.settings'),
 | ||||
|             //     route: "Settings",
 | ||||
|             //     icon: "settings",
 | ||||
|             // },
 | ||||
|             // {
 | ||||
|             //     name: i18n.t('screens.about'),
 | ||||
|             //     route: "About",
 | ||||
|             //     icon: "information",
 | ||||
|             // },
 | ||||
|             { | ||||
|                 name: i18n.t('screens.menuSelf'), | ||||
|                 route: "SelfMenuScreen", | ||||
|                 icon: "silverware-fork-knife", | ||||
|             }, | ||||
|         ]; | ||||
|     } | ||||
| 
 | ||||
|  | @ -73,7 +69,6 @@ export default class SideBar extends React.Component<Props, State> { | |||
|      */ | ||||
|     navigateToScreen(route: string) { | ||||
|         this.props.navigation.navigate(route); | ||||
|         this.props.navigation.closeDrawer(); | ||||
|     }; | ||||
| 
 | ||||
|     render() { | ||||
|  |  | |||
|  | @ -115,7 +115,7 @@ export default { | |||
|     brandLight: "#f4f4f4", | ||||
| 
 | ||||
|     //Container
 | ||||
|     containerBgColor: "#333333", | ||||
|     containerBgColor: "#222222", | ||||
| 
 | ||||
|     //Date Picker
 | ||||
|     datePickerTextColor: "#fff", | ||||
|  | @ -150,7 +150,7 @@ export default { | |||
| 
 | ||||
|     // Header
 | ||||
|     toolbarBtnColor: platform === "ios" ? "#be1522" : "#fff", | ||||
|     toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#be1522", | ||||
|     toolbarDefaultBg: platform === "ios" ? "#333333" : "#be1522", | ||||
|     toolbarHeight: platform === "ios" ? 64 : 56, | ||||
|     toolbarSearchIconSize: platform === "ios" ? 20 : 23, | ||||
|     toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff", | ||||
|  | @ -241,7 +241,7 @@ export default { | |||
|     tabFontSize: 15, | ||||
| 
 | ||||
|     // Text
 | ||||
|     textColor: "#d6d6d6", | ||||
|     textColor: "#ebebeb", | ||||
|     inverseTextColor: "#000", | ||||
|     noteFontSize: 14, | ||||
|     get defaultTextColor() { | ||||
|  | @ -253,7 +253,7 @@ export default { | |||
|     titleFontSize: platform === "ios" ? 17 : 19, | ||||
|     subTitleFontSize: platform === "ios" ? 11 : 14, | ||||
|     subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF", | ||||
|     titleFontColor: platform === "ios" ? "#000" : "#FFF", | ||||
|     titleFontColor: platform === "ios" ? "#FFF" : "#FFF", | ||||
| 
 | ||||
| 
 | ||||
|     // CUSTOM
 | ||||
|  |  | |||
|  | @ -6,6 +6,8 @@ import SettingsScreen from '../screens/SettingsScreen'; | |||
| import AboutScreen from '../screens/About/AboutScreen'; | ||||
| import ProximoListScreen from '../screens/Proximo/ProximoListScreen'; | ||||
| import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen'; | ||||
| import SelfMenuScreen from '../screens/SelfMenuScreen'; | ||||
| import {fromRight} from "react-navigation-transitions"; | ||||
| 
 | ||||
| /** | ||||
|  * Create a stack navigator using the drawer to handle navigation between screens | ||||
|  | @ -18,10 +20,12 @@ export default createAppContainer( | |||
|             SettingsScreen: {screen: SettingsScreen}, | ||||
|             AboutScreen: {screen: AboutScreen}, | ||||
|             AboutDependenciesScreen: {screen: AboutDependenciesScreen}, | ||||
|             SelfMenuScreen: {screen: SelfMenuScreen}, | ||||
|         }, | ||||
|         { | ||||
|             initialRouteName: "Main", | ||||
|             mode: 'card', | ||||
|             headerMode: "none" | ||||
|             headerMode: "none", | ||||
|             transitionConfig: () => fromRight(), | ||||
|         }) | ||||
| ); | ||||
|  |  | |||
							
								
								
									
										5
									
								
								package-lock.json
									
									
									
										generated
									
									
									
								
							
							
						
						
									
										5
									
								
								package-lock.json
									
									
									
										generated
									
									
									
								
							|  | @ -6372,6 +6372,11 @@ | |||
|         "react-native-tab-view": "^1.4.1" | ||||
|       } | ||||
|     }, | ||||
|     "react-navigation-transitions": { | ||||
|       "version": "1.0.12", | ||||
|       "resolved": "https://registry.npmjs.org/react-navigation-transitions/-/react-navigation-transitions-1.0.12.tgz", | ||||
|       "integrity": "sha512-Hp0wX9KoXwsFch6Fgiz9HpGjQZDhnyucLbCai0LcaOC3VpmgYmvkbeAg/mQ5Z5exuY6PPrh/+FXU00yMPDHkcw==" | ||||
|     }, | ||||
|     "react-proxy": { | ||||
|       "version": "1.1.8", | ||||
|       "resolved": "https://registry.npmjs.org/react-proxy/-/react-proxy-1.1.8.tgz", | ||||
|  |  | |||
|  | @ -29,7 +29,8 @@ | |||
|     "react-native-status-bar-height": "^2.3.1", | ||||
|     "react-native-webview": "^5.8.1", | ||||
|     "react-navigation": "^3.11.0", | ||||
|     "react-navigation-material-bottom-tabs": "^1.0.0" | ||||
|     "react-navigation-material-bottom-tabs": "^1.0.0", | ||||
|     "react-navigation-transitions": "^1.0.12" | ||||
|   }, | ||||
|   "devDependencies": { | ||||
|     "babel-preset-expo": "^5.1.1", | ||||
|  |  | |||
|  | @ -76,7 +76,7 @@ export default class HomeScreen extends FetchedDataSectionList { | |||
|             }}> | ||||
|                 <CardItem> | ||||
|                     <Left> | ||||
|                         <Thumbnail source={ICON_AMICALE}/> | ||||
|                         <Thumbnail source={ICON_AMICALE} square/> | ||||
|                         <Body> | ||||
|                             <Text>{NAME_AMICALE}</Text> | ||||
|                             <Text note>{HomeScreen.getFormattedDate(item.created_time)}</Text> | ||||
|  |  | |||
|  | @ -13,23 +13,14 @@ type Props = { | |||
|     navigation: Object, | ||||
| } | ||||
| 
 | ||||
| type State = { | ||||
|     isFinishedLoading: boolean | ||||
| } | ||||
| 
 | ||||
| // const PLANEX_URL = 'http://planex.insa-toulouse.fr/';
 | ||||
| // TODO use real url in prod
 | ||||
| const PLANEX_URL = 'https://srv-falcon.etud.insa-toulouse.fr/~vergnet/planex/planex.insa-toulouse.fr.html'; | ||||
| const PLANEX_URL = 'http://planex.insa-toulouse.fr/'; | ||||
| 
 | ||||
| /** | ||||
|  * Class defining the app's planex screen. | ||||
|  * This screen uses a webview to render the planex page | ||||
|  */ | ||||
| export default class PlanningScreen extends React.Component<Props, State> { | ||||
| 
 | ||||
|     state = { | ||||
|         isFinishedLoading: false, | ||||
|     }; | ||||
| export default class PlanningScreen extends React.Component<Props> { | ||||
| 
 | ||||
|     webview: WebView; | ||||
| 
 | ||||
|  | @ -46,7 +37,6 @@ export default class PlanningScreen extends React.Component<Props, State> { | |||
|     }; | ||||
| 
 | ||||
|     refreshWebview() { | ||||
|         this.setState({isFinishedLoading: false}); | ||||
|         this.webview.reload(); | ||||
|     } | ||||
| 
 | ||||
|  | @ -65,6 +55,9 @@ export default class PlanningScreen extends React.Component<Props, State> { | |||
|                     renderLoading={() => | ||||
|                         <View style={{ | ||||
|                             backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor, | ||||
|                             position: 'absolute', | ||||
|                             top: 0, | ||||
|                             right: 0, | ||||
|                             width: '100%', | ||||
|                             height: '100%', | ||||
|                             flex: 1, | ||||
|  |  | |||
|  | @ -267,13 +267,6 @@ export default class ProxiwashScreen extends FetchedDataSectionList { | |||
| 
 | ||||
|     createDataset(fetchedData: Object) { | ||||
|         return [ | ||||
|             { | ||||
|                 title: i18n.t('proxiwashScreen.dryers'), | ||||
|                 icon: 'tumble-dryer', | ||||
|                 data: fetchedData.dryers === undefined ? [] : fetchedData.dryers, | ||||
|                 extraData: super.state, | ||||
|                 keyExtractor: this.getDryersKeyExtractor | ||||
|             }, | ||||
|             { | ||||
|                 title: i18n.t('proxiwashScreen.washers'), | ||||
|                 icon: 'washing-machine', | ||||
|  | @ -281,6 +274,14 @@ export default class ProxiwashScreen extends FetchedDataSectionList { | |||
|                 extraData: super.state, | ||||
|                 keyExtractor: this.getWashersKeyExtractor | ||||
|             }, | ||||
|             { | ||||
|                 title: i18n.t('proxiwashScreen.dryers'), | ||||
|                 icon: 'tumble-dryer', | ||||
|                 data: fetchedData.dryers === undefined ? [] : fetchedData.dryers, | ||||
|                 extraData: super.state, | ||||
|                 keyExtractor: this.getDryersKeyExtractor | ||||
|             }, | ||||
| 
 | ||||
|         ]; | ||||
|     } | ||||
| 
 | ||||
|  |  | |||
							
								
								
									
										78
									
								
								screens/SelfMenuScreen.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										78
									
								
								screens/SelfMenuScreen.js
									
									
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,78 @@ | |||
| // @flow
 | ||||
| 
 | ||||
| import * as React from 'react'; | ||||
| import {Platform, View} from 'react-native'; | ||||
| import {Container, Spinner} from 'native-base'; | ||||
| import WebView from "react-native-webview"; | ||||
| import Touchable from "react-native-platform-touchable"; | ||||
| import CustomMaterialIcon from "../components/CustomMaterialIcon"; | ||||
| import ThemeManager from "../utils/ThemeManager"; | ||||
| import CustomHeader from "../components/CustomHeader"; | ||||
| import i18n from "i18n-js"; | ||||
| 
 | ||||
| type Props = { | ||||
|     navigation: Object, | ||||
| } | ||||
| 
 | ||||
| 
 | ||||
| const RU_URL = 'http://m.insa-toulouse.fr/ru.html'; | ||||
| 
 | ||||
| /** | ||||
|  * Class defining the app's planex screen. | ||||
|  * This screen uses a webview to render the planex page | ||||
|  */ | ||||
| export default class SelfMenuScreen extends React.Component<Props> { | ||||
| 
 | ||||
|     webview: WebView; | ||||
| 
 | ||||
|     getRefreshButton() { | ||||
|         return ( | ||||
|             <Touchable | ||||
|                 style={{padding: 6}} | ||||
|                 onPress={() => this.refreshWebview()}> | ||||
|                 <CustomMaterialIcon | ||||
|                     color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"} | ||||
|                     icon="refresh"/> | ||||
|             </Touchable> | ||||
|         ); | ||||
|     }; | ||||
| 
 | ||||
|     refreshWebview() { | ||||
|         this.webview.reload(); | ||||
|     } | ||||
| 
 | ||||
|     render() { | ||||
|         const nav = this.props.navigation; | ||||
|         return ( | ||||
|             <Container> | ||||
|                 <CustomHeader navigation={nav} title={i18n.t('screens.menuSelf')} hasBackButton={true} | ||||
|                               rightButton={this.getRefreshButton()}/> | ||||
|                 <WebView | ||||
|                     ref={ref => (this.webview = ref)} | ||||
|                     source={{uri: RU_URL}} | ||||
|                     style={{ | ||||
|                         width: '100%', | ||||
|                         height: '100%', | ||||
|                     }} | ||||
|                     startInLoadingState={true} | ||||
|                     renderLoading={() => | ||||
|                         <View style={{ | ||||
|                             backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor, | ||||
|                             position: 'absolute', | ||||
|                             top: 0, | ||||
|                             right: 0, | ||||
|                             width: '100%', | ||||
|                             height: '100%', | ||||
|                             flex: 1, | ||||
|                             alignItems: 'center', | ||||
|                             justifyContent: 'center' | ||||
|                         }}> | ||||
|                             <Spinner/> | ||||
|                         </View> | ||||
|                     } | ||||
|                 /> | ||||
|             </Container> | ||||
|         ); | ||||
|     } | ||||
| } | ||||
| 
 | ||||
|  | @ -4,6 +4,7 @@ | |||
|     "planning": "Planning", | ||||
|     "proxiwash": "Proxiwash", | ||||
|     "proximo": "Proximo", | ||||
|     "menuSelf": "UR Menu", | ||||
|     "settings": "Settings", | ||||
|     "about": "About" | ||||
|   }, | ||||
|  |  | |||
|  | @ -4,6 +4,7 @@ | |||
|     "planning": "Planning", | ||||
|     "proxiwash": "Proxiwash", | ||||
|     "proximo": "Proximo", | ||||
|     "menuSelf": "Menu Ru", | ||||
|     "settings": "Paramètres", | ||||
|     "about": "À Propos" | ||||
|   }, | ||||
|  |  | |||
		Loading…
	
		Reference in a new issue