Browse Source

Use React navigation header

keplyx 1 year ago
parent
commit
79eaefab88

+ 0
- 83
components/BaseContainer.js View File

@@ -1,83 +0,0 @@
1
-// @flow
2
-
3
-import * as React from 'react';
4
-import {Container} from "native-base";
5
-import CustomHeader from "./CustomHeader";
6
-import {MaterialCommunityIcons} from "@expo/vector-icons";
7
-import {Platform, View} from "react-native";
8
-import ThemeManager from "../utils/ThemeManager";
9
-import Touchable from "react-native-platform-touchable";
10
-
11
-
12
-type Props = {
13
-    navigation: Object,
14
-    headerTitle: string,
15
-    headerSubtitle: string,
16
-    headerRightButton: React.Node,
17
-    children: React.Node,
18
-    hasTabs: boolean,
19
-    hasBackButton: boolean,
20
-    hasSideMenu: boolean,
21
-    enableRotation: boolean,
22
-    hideHeaderOnLandscape: boolean,
23
-}
24
-
25
-type State = {
26
-    isHeaderVisible: boolean
27
-}
28
-
29
-
30
-export default class BaseContainer extends React.Component<Props, State> {
31
-    static defaultProps = {
32
-        headerRightButton: <View/>,
33
-        hasTabs: false,
34
-        hasBackButton: false,
35
-        hasSideMenu: true,
36
-        enableRotation: false,
37
-        hideHeaderOnLandscape: false,
38
-        headerSubtitle: '',
39
-    };
40
-
41
-    state = {
42
-        isHeaderVisible: true,
43
-    };
44
-
45
-    onDrawerPress: Function;
46
-
47
-    constructor() {
48
-        super();
49
-        this.onDrawerPress = this.onDrawerPress.bind(this);
50
-    }
51
-
52
-    onDrawerPress() {
53
-        this.props.navigation.toggleDrawer();
54
-    }
55
-
56
-    render() {
57
-        // console.log("rendering BaseContainer");
58
-        return (
59
-            <Container>
60
-                {this.state.isHeaderVisible ?
61
-                    <CustomHeader
62
-                        navigation={this.props.navigation}
63
-                        title={this.props.headerTitle}
64
-                        subtitle={this.props.headerSubtitle}
65
-                        leftButton={
66
-                            <Touchable
67
-                                style={{padding: 6}}
68
-                                onPress={this.onDrawerPress}>
69
-                                <MaterialCommunityIcons
70
-                                    color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
71
-                                    size={26}
72
-                                    name="menu"/>
73
-                            </Touchable>
74
-                        }
75
-                        rightButton={this.props.headerRightButton}
76
-                        hasTabs={this.props.hasTabs}
77
-                        hasBackButton={this.props.hasBackButton}/>
78
-                    : <View/>}
79
-                {this.props.children}
80
-            </Container>
81
-        );
82
-    }
83
-}

+ 0
- 150
components/CustomHeader.js View File

@@ -1,150 +0,0 @@
1
-// @flow
2
-
3
-import * as React from "react";
4
-import {Body, Header, Input, Item, Left, Right, Subtitle, Title} from "native-base";
5
-import {Platform, StyleSheet, View} from "react-native";
6
-import {getStatusBarHeight} from "react-native-status-bar-height";
7
-import Touchable from 'react-native-platform-touchable';
8
-import ThemeManager from "../utils/ThemeManager";
9
-import {MaterialCommunityIcons} from "@expo/vector-icons";
10
-import i18n from "i18n-js";
11
-
12
-type Props = {
13
-    hasBackButton: boolean,
14
-    hasSearchField: boolean,
15
-    searchCallback: Function,
16
-    shouldFocusSearchBar: boolean,
17
-    leftButton: React.Node,
18
-    rightButton: React.Node,
19
-    title: string,
20
-    subtitle: string,
21
-    navigation: Object,
22
-    hasTabs: boolean,
23
-};
24
-
25
-/**
26
- * Custom component defining a header using native base
27
- *
28
- * @prop hasBackButton {boolean} Whether to show a back button or a burger menu. Use burger if unspecified
29
- * @prop rightMenu {React.Node} Element to place at the right of the header. Use nothing if unspecified
30
- * @prop title {string} This header title
31
- * @prop navigation {Object} The navigation object from react navigation
32
- */
33
-export default class CustomHeader extends React.Component<Props> {
34
-    static defaultProps = {
35
-        hasBackButton: false,
36
-        hasSearchField: false,
37
-        searchCallback: null,
38
-        shouldFocusSearchBar: false,
39
-        title: '',
40
-        subtitle: '',
41
-        leftButton: <View/>,
42
-        rightButton: <View/>,
43
-        hasTabs: false,
44
-    };
45
-
46
-    onPressBack: Function;
47
-
48
-    constructor() {
49
-        super();
50
-        this.onPressBack = this.onPressBack.bind(this);
51
-    }
52
-
53
-    shouldComponentUpdate(nextProps: Props): boolean {
54
-        return nextProps.title !== this.props.title ||
55
-            nextProps.subtitle !== this.props.subtitle ||
56
-            nextProps.hasBackButton !== this.props.hasBackButton ||
57
-            nextProps.hasSearchField !== this.props.hasSearchField ||
58
-            nextProps.shouldFocusSearchBar !== this.props.shouldFocusSearchBar ||
59
-            nextProps.hasTabs !== this.props.hasTabs ||
60
-            nextProps.rightButton !== this.props.rightButton ||
61
-            nextProps.leftButton !== this.props.leftButton;
62
-    }
63
-
64
-    componentDidMount() {
65
-        if (this.refs.searchInput !== undefined && this.refs.searchInput._root !== undefined && this.props.shouldFocusSearchBar) {
66
-            // does not work if called too early for some reason...
67
-            setTimeout(this.refs.searchInput._root.focus, 500);
68
-        }
69
-    }
70
-
71
-    getSearchBar() {
72
-        return (
73
-            <Body>
74
-                <Item
75
-                    style={{
76
-                        width: '100%',
77
-                        marginBottom: 7
78
-                    }}>
79
-                    <MaterialCommunityIcons
80
-                        name={'magnify'}
81
-                        size={26}
82
-                        color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
83
-                    <Input
84
-                        ref="searchInput"
85
-                        placeholder={i18n.t('proximoScreen.search')}
86
-                        placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
87
-                        onChangeText={this.props.searchCallback}/>
88
-                </Item>
89
-            </Body>
90
-        );
91
-    }
92
-
93
-    getHeaderTitle() {
94
-        return (
95
-            <Body>
96
-                <Title style={{
97
-                    color: ThemeManager.getCurrentThemeVariables().toolbarTextColor
98
-                }}>
99
-                    {this.props.title}
100
-                </Title>
101
-                {this.props.subtitle !== '' ? <Subtitle>{this.props.subtitle}</Subtitle> : null}
102
-            </Body>
103
-        );
104
-    }
105
-
106
-
107
-    onPressBack() {
108
-        this.props.navigation.goBack();
109
-    }
110
-
111
-    render() {
112
-        // console.log("rendering CustomHeader");
113
-        let button;
114
-        // Does the app have a back button or a burger menu ?
115
-        if (this.props.hasBackButton)
116
-            button =
117
-                <Touchable
118
-                    style={{padding: 6}}
119
-                    onPress={this.onPressBack}>
120
-                    <MaterialCommunityIcons
121
-                        color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
122
-                        name={Platform.OS === 'ios' ? 'chevron-left' : "arrow-left"}
123
-                        size={26}/>
124
-                </Touchable>;
125
-        else
126
-            button = this.props.leftButton;
127
-
128
-        return (
129
-            <Header style={styles.header}
130
-                    hasTabs={this.props.hasTabs}>
131
-                <Left style={{flex: 0}}>
132
-                    {button}
133
-                </Left>
134
-                {this.props.hasSearchField ?
135
-                    this.getSearchBar() :
136
-                    this.getHeaderTitle()}
137
-                <Right style={{flex: this.props.hasSearchField ? 0 : 1}}>
138
-                    {this.props.rightButton}
139
-                </Right>
140
-            </Header>);
141
-    }
142
-};
143
-
144
-// Fix header in status bar on Android
145
-const styles = StyleSheet.create({
146
-    header: {
147
-        paddingTop: getStatusBarHeight(),
148
-        height: 54 + getStatusBarHeight(),
149
-    },
150
-});

+ 36
- 26
components/Sidebar.js View File

@@ -41,6 +41,42 @@ export default class SideBar extends React.Component<Props, State> {
41 41
         // Dataset used to render the drawer
42 42
         this.dataSet = [
43 43
             {
44
+                name: "Home",
45
+                route: "Main",
46
+                icon: "home",
47
+            },
48
+            {
49
+                name: i18n.t('sidenav.divider2'),
50
+                route: "Divider2"
51
+            },
52
+            {
53
+                name: i18n.t('screens.menuSelf'),
54
+                route: "SelfMenuScreen",
55
+                icon: "silverware-fork-knife",
56
+            },
57
+            {
58
+                name: i18n.t('screens.availableRooms'),
59
+                route: "AvailableRoomScreen",
60
+                icon: "calendar-check",
61
+            },
62
+            {
63
+                name: 'Bib',
64
+                route: "BibScreen",
65
+                icon: "book",
66
+            },
67
+            {
68
+                name: i18n.t('screens.bluemind'),
69
+                route: "BlueMindScreen",
70
+                link: "https://etud-mel.insa-toulouse.fr/webmail/",
71
+                icon: "email",
72
+            },
73
+            {
74
+                name: i18n.t('screens.ent'),
75
+                route: "EntScreen",
76
+                link: "https://ent.insa-toulouse.fr/",
77
+                icon: "notebook",
78
+            },
79
+            {
44 80
                 name: i18n.t('sidenav.divider1'),
45 81
                 route: "Divider1"
46 82
             },
@@ -69,32 +105,6 @@ export default class SideBar extends React.Component<Props, State> {
69 105
                 icon: "school",
70 106
             },
71 107
             {
72
-                name: i18n.t('sidenav.divider2'),
73
-                route: "Divider2"
74
-            },
75
-            {
76
-                name: i18n.t('screens.bluemind'),
77
-                route: "BlueMindScreen",
78
-                link: "https://etud-mel.insa-toulouse.fr/webmail/",
79
-                icon: "email",
80
-            },
81
-            {
82
-                name: i18n.t('screens.ent'),
83
-                route: "EntScreen",
84
-                link: "https://ent.insa-toulouse.fr/",
85
-                icon: "notebook",
86
-            },
87
-            {
88
-                name: i18n.t('screens.availableRooms'),
89
-                route: "AvailableRoomScreen",
90
-                icon: "calendar-check",
91
-            },
92
-            {
93
-                name: i18n.t('screens.menuSelf'),
94
-                route: "SelfMenuScreen",
95
-                icon: "silverware-fork-knife",
96
-            },
97
-            {
98 108
                 name: i18n.t('sidenav.divider3'),
99 109
                 route: "Divider3"
100 110
             },

+ 13
- 39
components/WebViewScreen.js View File

@@ -1,13 +1,12 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Linking, Platform, View} from 'react-native';
5
-import {Body, Footer, Left, Right, Spinner, Tab, TabHeading, Tabs, Text} from 'native-base';
4
+import {Platform, View} from 'react-native';
5
+import {Container, Spinner, Tab, TabHeading, Tabs, Text} from 'native-base';
6 6
 import WebView from "react-native-webview";
7 7
 import Touchable from "react-native-platform-touchable";
8 8
 import {MaterialCommunityIcons} from "@expo/vector-icons";
9 9
 import ThemeManager from "../utils/ThemeManager";
10
-import BaseContainer from "../components/BaseContainer";
11 10
 
12 11
 type Props = {
13 12
     navigation: Object,
@@ -50,8 +49,11 @@ export default class WebViewScreen extends React.Component<Props> {
50 49
         this.onOpenWebLink = this.onOpenWebLink.bind(this);
51 50
     }
52 51
 
53
-    openWebLink(url: string) {
54
-        Linking.openURL(url).catch((err) => console.error('Error opening link', err));
52
+    componentDidMount() {
53
+        const rightButton = this.getRefreshButton.bind(this);
54
+        this.props.navigation.setOptions({
55
+            headerRight: rightButton,
56
+        });
55 57
     }
56 58
 
57 59
     getHeaderButton(clickAction: Function, icon: string) {
@@ -69,7 +71,10 @@ export default class WebViewScreen extends React.Component<Props> {
69 71
 
70 72
     getRefreshButton() {
71 73
         return (
72
-            <View style={{flexDirection: 'row'}}>
74
+            <View style={{
75
+                flexDirection: 'row',
76
+                marginRight: 10
77
+            }}>
73 78
                 {this.getHeaderButton(this.onRefreshClicked, 'refresh')}
74 79
             </View>
75 80
         );
@@ -165,15 +170,7 @@ export default class WebViewScreen extends React.Component<Props> {
165 170
         const nav = this.props.navigation;
166 171
         this.webviewArray = [];
167 172
         return (
168
-            <BaseContainer
169
-                navigation={nav}
170
-                headerTitle={this.props.headerTitle}
171
-                headerRightButton={this.getRefreshButton()}
172
-                hasBackButton={this.props.hasHeaderBackButton}
173
-                hasSideMenu={this.props.hasSideMenu}
174
-                enableRotation={true}
175
-                hideHeaderOnLandscape={true}
176
-                hasTabs={this.props.data.length > 1}>
173
+            <Container>
177 174
                 {this.props.data.length === 1 ?
178 175
                     this.getWebview(this.props.data[0]) :
179 176
                     <Tabs
@@ -190,30 +187,7 @@ export default class WebViewScreen extends React.Component<Props> {
190 187
                     >
191 188
                         {this.getTabbedWebview()}
192 189
                     </Tabs>}
193
-                {this.props.hasFooter && this.props.data.length === 1 ?
194
-                    <Footer>
195
-                        <Left style={{
196
-                            paddingLeft: 6,
197
-                        }}>
198
-                            {this.getHeaderButton(this.onOpenWebLink, 'open-in-new')}
199
-                        </Left>
200
-                        <Body/>
201
-                        <Right style={{
202
-                            flexDirection: 'row',
203
-                            alignItems: 'flex-end',
204
-                            paddingRight: 6
205
-                        }}>
206
-                            <View style={{
207
-                                flexDirection: 'row',
208
-                                marginRight: 0,
209
-                                marginLeft: 'auto'
210
-                            }}>
211
-                                {this.getHeaderButton(this.onGoBackWebview, 'chevron-left')}
212
-                                {this.getHeaderButton(this.onGoForwardWebview, 'chevron-right')}
213
-                            </View>
214
-                        </Right>
215
-                    </Footer> : <View/>}
216
-            </BaseContainer>
190
+            </Container>
217 191
         );
218 192
     }
219 193
 }

+ 164
- 37
navigation/DrawerNavigator.js View File

@@ -8,10 +8,52 @@ import AboutScreen from '../screens/About/AboutScreen';
8 8
 import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen';
9 9
 import SelfMenuScreen from '../screens/SelfMenuScreen';
10 10
 import AvailableRoomScreen from "../screens/Websites/AvailableRoomScreen";
11
+import BibScreen from "../screens/Websites/BibScreen";
11 12
 import DebugScreen from '../screens/DebugScreen';
12 13
 import Sidebar from "../components/Sidebar";
13 14
 import {createStackNavigator, TransitionPresets} from "@react-navigation/stack";
14 15
 import PerfHomeScreen from '../screens/PerfHomeScreen';
16
+import {Platform, StyleSheet, View} from "react-native";
17
+import ThemeManager from "../utils/ThemeManager";
18
+import Touchable from "react-native-platform-touchable";
19
+import {MaterialCommunityIcons} from "@expo/vector-icons";
20
+
21
+
22
+const styles = StyleSheet.create({
23
+    header: {
24
+        backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
25
+    },
26
+    headerTitle: {
27
+        color: "#ffffff",
28
+    },
29
+});
30
+
31
+const defaultScreenOptions = {
32
+    headerTintColor: 'white',
33
+    headerStyle: styles.header,
34
+    gestureEnabled: true,
35
+    cardOverlayEnabled: true,
36
+    ...TransitionPresets.SlideFromRightIOS,
37
+};
38
+
39
+function getDrawerButton(navigation: Object) {
40
+    return (
41
+        <View
42
+            style={{
43
+                flexDirection: 'row',
44
+                marginLeft: 10
45
+            }}>
46
+            <Touchable
47
+                style={{padding: 6}}
48
+                onPress={navigation.openDrawer}>
49
+                <MaterialCommunityIcons
50
+                    name="menu"
51
+                    size={26}
52
+                    color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}/>
53
+            </Touchable>
54
+        </View>
55
+    );
56
+}
15 57
 
16 58
 const AboutStack = createStackNavigator();
17 59
 
@@ -19,30 +61,134 @@ function AboutStackComponent() {
19 61
     return (
20 62
         <AboutStack.Navigator
21 63
             initialRouteName="AboutScreen"
22
-            mode='card'
23
-            headerMode="none"
24
-            screenOptions={{
25
-                gestureEnabled: true,
26
-                cardOverlayEnabled: true,
27
-                ...TransitionPresets.SlideFromRightIOS,
28
-            }}
64
+            headerMode="float"
65
+            screenOptions={defaultScreenOptions}
29 66
         >
30 67
             <AboutStack.Screen
31 68
                 name="AboutScreen"
32 69
                 component={AboutScreen}
70
+                options={({navigation}) => {
71
+                    const openDrawer = getDrawerButton.bind(this, navigation);
72
+                    return {
73
+                        title: 'About',
74
+                        headerLeft: openDrawer
75
+                    };
76
+                }}
33 77
             />
34 78
             <AboutStack.Screen
35 79
                 name="AboutDependenciesScreen"
36 80
                 component={AboutDependenciesScreen}
81
+                options={{
82
+                    title: 'Dependencies'
83
+                }}
37 84
             />
38 85
             <AboutStack.Screen
39 86
                 name="DebugScreen"
40 87
                 component={DebugScreen}
88
+                options={{
89
+                    title: 'Debug'
90
+                }}
41 91
             />
42 92
         </AboutStack.Navigator>
43 93
     );
44 94
 }
45 95
 
96
+const SettingsStack = createStackNavigator();
97
+
98
+function SettingsStackComponent() {
99
+    return (
100
+        <SettingsStack.Navigator
101
+            initialRouteName="SettingsScreen"
102
+            headerMode="float"
103
+            screenOptions={defaultScreenOptions}
104
+        >
105
+            <SettingsStack.Screen
106
+                name="SettingsScreen"
107
+                component={SettingsScreen}
108
+                options={({navigation}) => {
109
+                    const openDrawer = getDrawerButton.bind(this, navigation);
110
+                    return {
111
+                        title: 'Settings',
112
+                        headerLeft: openDrawer
113
+                    };
114
+                }}
115
+            />
116
+        </SettingsStack.Navigator>
117
+    );
118
+}
119
+
120
+const SelfMenuStack = createStackNavigator();
121
+
122
+function SelfMenuStackComponent() {
123
+    return (
124
+        <SelfMenuStack.Navigator
125
+            initialRouteName="SelfMenuScreen"
126
+            headerMode="float"
127
+            screenOptions={defaultScreenOptions}
128
+        >
129
+            <SelfMenuStack.Screen
130
+                name="SelfMenuScreen"
131
+                component={SelfMenuScreen}
132
+                options={({navigation}) => {
133
+                    const openDrawer = getDrawerButton.bind(this, navigation);
134
+                    return {
135
+                        title: 'Menu RU',
136
+                        headerLeft: openDrawer
137
+                    };
138
+                }}
139
+            />
140
+        </SelfMenuStack.Navigator>
141
+    );
142
+}
143
+
144
+const AvailableRoomStack = createStackNavigator();
145
+
146
+function AvailableRoomStackComponent() {
147
+    return (
148
+        <AvailableRoomStack.Navigator
149
+            initialRouteName="AvailableRoomScreen"
150
+            headerMode="float"
151
+            screenOptions={defaultScreenOptions}
152
+        >
153
+            <AvailableRoomStack.Screen
154
+                name="AvailableRoomScreen"
155
+                component={AvailableRoomScreen}
156
+                options={({navigation}) => {
157
+                    const openDrawer = getDrawerButton.bind(this, navigation);
158
+                    return {
159
+                        title: 'Available Rooms',
160
+                        headerLeft: openDrawer
161
+                    };
162
+                }}
163
+            />
164
+        </AvailableRoomStack.Navigator>
165
+    );
166
+}
167
+
168
+const BibStack = createStackNavigator();
169
+
170
+function BibStackComponent() {
171
+    return (
172
+        <BibStack.Navigator
173
+            initialRouteName="BibScreen"
174
+            headerMode="float"
175
+            screenOptions={defaultScreenOptions}
176
+        >
177
+            <BibStack.Screen
178
+                name="BibScreen"
179
+                component={BibScreen}
180
+                options={({navigation}) => {
181
+                    const openDrawer = getDrawerButton.bind(this, navigation);
182
+                    return {
183
+                        title: 'Bib',
184
+                        headerLeft: openDrawer
185
+                    };
186
+                }}
187
+            />
188
+        </BibStack.Navigator>
189
+    );
190
+}
191
+
46 192
 const Drawer = createDrawerNavigator();
47 193
 
48 194
 function getDrawerContent(nav) {
@@ -53,13 +199,11 @@ export default function DrawerNavigator() {
53 199
     return (
54 200
         <Drawer.Navigator
55 201
             initialRouteName={'Main'}
56
-            mode='card'
202
+            headerMode={'float'}
203
+            backBehavior={'initialRoute'}
204
+            drawerType={'back'}
57 205
             drawerContent={props => getDrawerContent(props.navigation)}
58
-            screenOptions={{
59
-                gestureEnabled: true,
60
-                cardOverlayEnabled: true,
61
-                ...TransitionPresets.SlideFromRightIOS,
62
-            }}
206
+            screenOptions={defaultScreenOptions}
63 207
         >
64 208
             <Drawer.Screen
65 209
                 name="Main"
@@ -68,7 +212,7 @@ export default function DrawerNavigator() {
68 212
             </Drawer.Screen>
69 213
             <Drawer.Screen
70 214
                 name="SettingsScreen"
71
-                component={SettingsScreen}
215
+                component={SettingsStackComponent}
72 216
             />
73 217
             <Drawer.Screen
74 218
                 name="AboutScreen"
@@ -76,33 +220,16 @@ export default function DrawerNavigator() {
76 220
             />
77 221
             <Drawer.Screen
78 222
                 name="SelfMenuScreen"
79
-                component={SelfMenuScreen}
223
+                component={SelfMenuStackComponent}
80 224
             />
81 225
             <Drawer.Screen
82 226
                 name="AvailableRoomScreen"
83
-                component={AvailableRoomScreen}
227
+                component={AvailableRoomStackComponent}
84 228
             />
85
-        </Drawer.Navigator>
86
-    );
87
-}
88
-
89
-const basicStack = createStackNavigator();
90
-
91
-function DrawerNavigator1() {
92
-    return (
93
-        <basicStack.Navigator
94
-            initialRouteName={'Main'}
95
-            mode='card'
96
-            screenOptions={{
97
-                gestureEnabled: true,
98
-                cardOverlayEnabled: true,
99
-                ...TransitionPresets.SlideFromRightIOS,
100
-            }}
101
-        >
102
-            <basicStack.Screen
103
-                name="Main"
104
-                component={TabNavigator}
229
+            <Drawer.Screen
230
+                name="BibScreen"
231
+                component={BibStackComponent}
105 232
             />
106
-        </basicStack.Navigator>
233
+        </Drawer.Navigator>
107 234
     );
108 235
 }

+ 99
- 33
navigation/MainTabNavigator.js View File

@@ -14,7 +14,7 @@ import PlanexScreen from '../screens/Websites/PlanexScreen';
14 14
 import {MaterialCommunityIcons} from "@expo/vector-icons";
15 15
 import ThemeManager from "../utils/ThemeManager";
16 16
 import AsyncStorageManager from "../utils/AsyncStorageManager";
17
-import {StyleSheet, View} from "react-native";
17
+import {Platform, StyleSheet, View} from "react-native";
18 18
 import Touchable from "react-native-platform-touchable";
19 19
 
20 20
 const TAB_ICONS = {
@@ -25,8 +25,6 @@ const TAB_ICONS = {
25 25
     Planex: 'timetable',
26 26
 };
27 27
 
28
-const ProximoStack = createStackNavigator();
29
-
30 28
 const styles = StyleSheet.create({
31 29
     header: {
32 30
         backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
@@ -36,24 +34,50 @@ const styles = StyleSheet.create({
36 34
     },
37 35
 });
38 36
 
37
+const defaultScreenOptions = {
38
+    headerTintColor: 'white',
39
+    headerStyle: styles.header,
40
+    gestureEnabled: true,
41
+    cardOverlayEnabled: true,
42
+    ...TransitionPresets.SlideFromRightIOS,
43
+};
44
+
45
+function getDrawerButton(navigation: Object) {
46
+    return (
47
+        <View
48
+            style={{
49
+                flexDirection: 'row',
50
+                marginLeft: 10
51
+            }}>
52
+            <Touchable
53
+                style={{padding: 6}}
54
+                onPress={navigation.openDrawer}>
55
+                <MaterialCommunityIcons
56
+                    name="menu"
57
+                    size={26}
58
+                    color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}/>
59
+            </Touchable>
60
+        </View>
61
+    );
62
+}
63
+
64
+const ProximoStack = createStackNavigator();
39 65
 
40 66
 function ProximoStackComponent() {
41 67
     return (
42 68
         <ProximoStack.Navigator
43 69
             initialRouteName="ProximoMainScreen"
44 70
             headerMode="float"
45
-            screenOptions={{
46
-                headerTintColor: 'white',
47
-                headerStyle: styles.header,
48
-                gestureEnabled: true,
49
-                cardOverlayEnabled: true,
50
-                ...TransitionPresets.SlideFromRightIOS,
51
-            }}
71
+            screenOptions={defaultScreenOptions}
52 72
         >
53 73
             <ProximoStack.Screen
54 74
                 name="ProximoMainScreen"
55
-                options={{
56
-                    title: 'Proximo',
75
+                options={({navigation}) => {
76
+                    const openDrawer = getDrawerButton.bind(this, navigation);
77
+                    return {
78
+                        title: 'Proximo',
79
+                        headerLeft: openDrawer
80
+                    };
57 81
                 }}
58 82
                 component={ProximoMainScreen}
59 83
             />
@@ -82,21 +106,27 @@ function ProxiwashStackComponent() {
82 106
     return (
83 107
         <ProxiwashStack.Navigator
84 108
             initialRouteName="ProxiwashScreen"
85
-            mode='card'
86
-            headerMode="none"
87
-            screenOptions={{
88
-                gestureEnabled: true,
89
-                cardOverlayEnabled: true,
90
-                ...TransitionPresets.ModalSlideFromBottomIOS,
91
-            }}
109
+            headerMode='float'
110
+            screenOptions={defaultScreenOptions}
92 111
         >
93 112
             <ProxiwashStack.Screen
94 113
                 name="ProxiwashScreen"
95 114
                 component={ProxiwashScreen}
115
+                options={({navigation}) => {
116
+                    const openDrawer = getDrawerButton.bind(this, navigation);
117
+                    return {
118
+                        title: 'Proxiwash',
119
+                        headerLeft: openDrawer
120
+                    };
121
+                }}
96 122
             />
97 123
             <ProxiwashStack.Screen
98 124
                 name="ProxiwashAboutScreen"
99 125
                 component={ProxiwashAboutScreen}
126
+                options={{
127
+                    title: 'Proxiwash',
128
+                    ...TransitionPresets.ModalSlideFromBottomIOS,
129
+                }}
100 130
             />
101 131
         </ProxiwashStack.Navigator>
102 132
     );
@@ -108,21 +138,27 @@ function PlanningStackComponent() {
108 138
     return (
109 139
         <PlanningStack.Navigator
110 140
             initialRouteName="PlanningScreen"
111
-            mode='card'
112
-            headerMode="none"
113
-            screenOptions={{
114
-                gestureEnabled: true,
115
-                cardOverlayEnabled: true,
116
-                ...TransitionPresets.ModalSlideFromBottomIOS,
117
-            }}
141
+            headerMode='float'
142
+            screenOptions={defaultScreenOptions}
118 143
         >
119 144
             <PlanningStack.Screen
120 145
                 name="PlanningScreen"
121 146
                 component={PlanningScreen}
147
+                options={({navigation}) => {
148
+                    const openDrawer = getDrawerButton.bind(this, navigation);
149
+                    return {
150
+                        title: 'Planning',
151
+                        headerLeft: openDrawer
152
+                    };
153
+                }}
122 154
             />
123 155
             <PlanningStack.Screen
124 156
                 name="PlanningDisplayScreen"
125 157
                 component={PlanningDisplayScreen}
158
+                options={{
159
+                    title: 'Details',
160
+                    ...TransitionPresets.ModalSlideFromBottomIOS,
161
+                }}
126 162
             />
127 163
         </PlanningStack.Navigator>
128 164
     );
@@ -134,26 +170,56 @@ function HomeStackComponent() {
134 170
     return (
135 171
         <HomeStack.Navigator
136 172
             initialRouteName="HomeScreen"
137
-            mode='card'
138 173
             headerMode="float"
139
-            screenOptions={{
140
-                gestureEnabled: true,
141
-                cardOverlayEnabled: true,
142
-                ...TransitionPresets.ModalSlideFromBottomIOS,
143
-            }}
174
+            screenOptions={defaultScreenOptions}
144 175
         >
145 176
             <HomeStack.Screen
146 177
                 name="HomeScreen"
147 178
                 component={HomeScreen}
179
+                options={({navigation}) => {
180
+                    const openDrawer = getDrawerButton.bind(this, navigation);
181
+                    return {
182
+                        title: 'Home',
183
+                        headerLeft: openDrawer
184
+                    };
185
+                }}
148 186
             />
149 187
             <HomeStack.Screen
150 188
                 name="PlanningDisplayScreen"
151 189
                 component={PlanningDisplayScreen}
190
+                options={{
191
+                    title: 'Details',
192
+                    ...TransitionPresets.ModalSlideFromBottomIOS,
193
+                }}
152 194
             />
153 195
         </HomeStack.Navigator>
154 196
     );
155 197
 }
156 198
 
199
+const PlanexStack = createStackNavigator();
200
+
201
+function PlanexStackComponent() {
202
+    return (
203
+        <PlanexStack.Navigator
204
+            initialRouteName="HomeScreen"
205
+            headerMode="float"
206
+            screenOptions={defaultScreenOptions}
207
+        >
208
+            <PlanexStack.Screen
209
+                name="PlanexScreen"
210
+                component={PlanexScreen}
211
+                options={({navigation}) => {
212
+                    const openDrawer = getDrawerButton.bind(this, navigation);
213
+                    return {
214
+                        title: 'Planex',
215
+                        headerLeft: openDrawer
216
+                    };
217
+                }}
218
+            />
219
+        </PlanexStack.Navigator>
220
+    );
221
+}
222
+
157 223
 const Tab = createMaterialBottomTabNavigator();
158 224
 
159 225
 export default function TabNavigator() {
@@ -188,7 +254,7 @@ export default function TabNavigator() {
188 254
             />
189 255
             <Tab.Screen
190 256
                 name="Planex"
191
-                component={PlanexScreen}
257
+                component={PlanexStackComponent}
192 258
             />
193 259
         </Tab.Navigator>
194 260
     );

+ 21
- 25
screens/About/AboutDependenciesScreen.js View File

@@ -1,10 +1,9 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Body, Container, ListItem, Text} from 'native-base';
5
-import CustomHeader from "../../components/CustomHeader";
4
+import {Body, ListItem, Text} from 'native-base';
6 5
 import {FlatList} from "react-native";
7
-import i18n from "i18n-js";
6
+import packageJson from '../../package';
8 7
 
9 8
 function generateListFromObject(object) {
10 9
     let list = [];
@@ -17,7 +16,8 @@ function generateListFromObject(object) {
17 16
 }
18 17
 
19 18
 type Props = {
20
-    navigation: Object
19
+    navigation: Object,
20
+    route: Object
21 21
 }
22 22
 
23 23
 /**
@@ -26,28 +26,24 @@ type Props = {
26 26
 export default class AboutDependenciesScreen extends React.Component<Props> {
27 27
 
28 28
     render() {
29
-        const nav = this.props.navigation;
30
-        const data = generateListFromObject(nav.getParam('data', {}));
29
+        const data = generateListFromObject(packageJson.dependencies);
31 30
         return (
32
-            <Container>
33
-                <CustomHeader hasBackButton={true} navigation={nav} title={i18n.t('aboutScreen.libs')}/>
34
-                <FlatList
35
-                    data={data}
36
-                    keyExtractor={(item) => item.name}
37
-                    style={{minHeight: 300, width: '100%'}}
38
-                    renderItem={({item}) =>
39
-                        <ListItem>
40
-                            <Body>
41
-                                <Text>
42
-                                    {item.name}
43
-                                </Text>
44
-                                <Text note>
45
-                                    {item.version.replace('^', '')}
46
-                                </Text>
47
-                            </Body>
48
-                        </ListItem>}
49
-                />
50
-            </Container>
31
+            <FlatList
32
+                data={data}
33
+                keyExtractor={(item) => item.name}
34
+                style={{minHeight: 300, width: '100%'}}
35
+                renderItem={({item}) =>
36
+                    <ListItem>
37
+                        <Body>
38
+                            <Text>
39
+                                {item.name}
40
+                            </Text>
41
+                            <Text note>
42
+                                {item.version.replace('^', '')}
43
+                            </Text>
44
+                        </Body>
45
+                    </ListItem>}
46
+            />
51 47
         );
52 48
     }
53 49
 }

+ 4
- 8
screens/About/AboutScreen.js View File

@@ -2,11 +2,9 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import {FlatList, Linking, Platform, View} from 'react-native';
5
-import {Body, Button, Card, CardItem, Container, H1, Left, Right, Text, Thumbnail} from 'native-base';
6
-import CustomHeader from "../../components/CustomHeader";
5
+import {Body, Button, Card, CardItem, Content, H1, Left, Right, Text, Thumbnail} from 'native-base';
7 6
 import i18n from "i18n-js";
8 7
 import appJson from '../../app';
9
-import packageJson from '../../package';
10 8
 import {MaterialCommunityIcons} from "@expo/vector-icons";
11 9
 import AsyncStorageManager from "../../utils/AsyncStorageManager";
12 10
 import {Modalize} from "react-native-modalize";
@@ -169,7 +167,7 @@ export default class AboutScreen extends React.Component<Props, State> {
169 167
             showChevron: true
170 168
         },
171 169
         {
172
-            onPressCallback: () => this.props.navigation.navigate('AboutDependenciesScreen', {data: packageJson.dependencies}),
170
+            onPressCallback: () => this.props.navigation.navigate('AboutDependenciesScreen'),
173 171
             icon: 'developer-board',
174 172
             text: i18n.t('aboutScreen.libs'),
175 173
             showChevron: true
@@ -391,11 +389,9 @@ export default class AboutScreen extends React.Component<Props, State> {
391 389
     }
392 390
 
393 391
     render() {
394
-        const nav = this.props.navigation;
395 392
         return (
396
-            <Container>
393
+            <Content padder>
397 394
                 {this.getBugReportModal()}
398
-                <CustomHeader navigation={nav} title={i18n.t('screens.about')} hasBackButton={true}/>
399 395
                 <FlatList
400 396
                     style={{padding: 5}}
401 397
                     data={this.dataOrder}
@@ -403,7 +399,7 @@ export default class AboutScreen extends React.Component<Props, State> {
403 399
                     keyExtractor={(item) => item.id}
404 400
                     renderItem={this.getMainCard}
405 401
                 />
406
-            </Container>
402
+            </Content>
407 403
         );
408 404
     }
409 405
 }

+ 0
- 4
screens/DebugScreen.js View File

@@ -20,9 +20,7 @@ import {
20 20
     Right,
21 21
     Text
22 22
 } from "native-base";
23
-import CustomHeader from "../components/CustomHeader";
24 23
 import ThemeManager from '../utils/ThemeManager';
25
-import i18n from "i18n-js";
26 24
 import {MaterialCommunityIcons} from "@expo/vector-icons";
27 25
 import {Alert, Clipboard, View} from "react-native";
28 26
 import AsyncStorageManager from "../utils/AsyncStorageManager";
@@ -150,7 +148,6 @@ export default class DebugScreen extends React.Component<Props, State> {
150 148
     }
151 149
 
152 150
     render() {
153
-        const nav = this.props.navigation;
154 151
         return (
155 152
             <Container>
156 153
                 <Modalize
@@ -159,7 +156,6 @@ export default class DebugScreen extends React.Component<Props, State> {
159 156
                     modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
160 157
                     {this.getModalContent()}
161 158
                 </Modalize>
162
-                <CustomHeader navigation={nav} title={i18n.t('screens.debug')} hasBackButton={true}/>
163 159
                 <Content padder>
164 160
                     <Card>
165 161
                         <CardItem header>

+ 6
- 11
screens/HomeScreen.js View File

@@ -9,7 +9,6 @@ import Autolink from 'react-native-autolink';
9 9
 import ThemeManager from "../utils/ThemeManager";
10 10
 import DashboardItem from "../components/DashboardItem";
11 11
 import * as WebBrowser from 'expo-web-browser';
12
-import BaseContainer from "../components/BaseContainer";
13 12
 import WebSectionList from "../components/WebSectionList";
14 13
 // import DATA from "../dashboard_data.json";
15 14
 
@@ -571,17 +570,13 @@ export default class HomeScreen extends React.Component<Props> {
571 570
     render() {
572 571
         const nav = this.props.navigation;
573 572
         return (
574
-            <BaseContainer
573
+            <WebSectionList
574
+                createDataset={this.createDataset}
575 575
                 navigation={nav}
576
-                headerTitle={i18n.t('screens.home')}>
577
-                <WebSectionList
578
-                    createDataset={this.createDataset}
579
-                    navigation={nav}
580
-                    refreshTime={REFRESH_TIME}
581
-                    fetchUrl={DATA_URL}
582
-                    renderItem={this.getRenderItem}
583
-                    updateErrorText={i18n.t("homeScreen.listUpdateFail")}/>
584
-            </BaseContainer>
576
+                refreshTime={REFRESH_TIME}
577
+                fetchUrl={DATA_URL}
578
+                renderItem={this.getRenderItem}
579
+                updateErrorText={i18n.t("homeScreen.listUpdateFail")}/>
585 580
         );
586 581
     }
587 582
 }

+ 10
- 14
screens/PlanningDisplayScreen.js View File

@@ -3,7 +3,6 @@
3 3
 import * as React from 'react';
4 4
 import {Image} from 'react-native';
5 5
 import {Container, Content, H1, H3, View} from 'native-base';
6
-import CustomHeader from "../components/CustomHeader";
7 6
 import ThemeManager from "../utils/ThemeManager";
8 7
 import HTML from "react-native-render-html";
9 8
 import {Linking} from "expo";
@@ -11,6 +10,7 @@ import PlanningEventManager from '../utils/PlanningEventManager';
11 10
 
12 11
 type Props = {
13 12
     navigation: Object,
13
+    route: Object
14 14
 };
15 15
 
16 16
 function openWebLink(event, link) {
@@ -21,37 +21,33 @@ function openWebLink(event, link) {
21 21
  * Class defining an about screen. This screen shows the user information about the app and it's author.
22 22
  */
23 23
 export default class PlanningDisplayScreen extends React.Component<Props> {
24
+
25
+    displayData = this.props.route.params['data'];
26
+
24 27
     render() {
25 28
         // console.log("rendering planningDisplayScreen");
26
-        const nav = this.props.navigation;
27
-        const displayData = nav.getParam('data', []);
28 29
         return (
29 30
             <Container>
30
-                <CustomHeader
31
-                    navigation={nav}
32
-                    title={displayData.title}
33
-                    subtitle={PlanningEventManager.getFormattedTime(displayData)}
34
-                    hasBackButton={true}/>
35 31
                 <Content padder>
36 32
                     <H1>
37
-                        {displayData.title}
33
+                        {this.displayData.title}
38 34
                     </H1>
39 35
                     <H3 style={{
40 36
                         marginTop: 10,
41 37
                         color: ThemeManager.getCurrentThemeVariables().listNoteColor
42 38
                     }}>
43
-                        {PlanningEventManager.getFormattedTime(displayData)}
39
+                        {PlanningEventManager.getFormattedTime(this.displayData)}
44 40
                     </H3>
45
-                    {displayData.logo !== null ?
41
+                    {this.displayData.logo !== null ?
46 42
                         <View style={{width: '100%', height: 300, marginTop: 20, marginBottom: 20}}>
47 43
                             <Image style={{flex: 1, resizeMode: "contain"}}
48
-                                   source={{uri: displayData.logo}}/>
44
+                                   source={{uri: this.displayData.logo}}/>
49 45
                         </View>
50 46
                         : <View/>}
51 47
 
52
-                    {displayData.description !== null ?
48
+                    {this.displayData.description !== null ?
53 49
                         // Surround description with div to allow text styling if the description is not html
54
-                        <HTML html={"<div>" + displayData.description + "</div>"}
50
+                        <HTML html={"<div>" + this.displayData.description + "</div>"}
55 51
                               tagsStyles={{
56 52
                                   p: {
57 53
                                       color: ThemeManager.getCurrentThemeVariables().textColor,

+ 54
- 58
screens/PlanningScreen.js View File

@@ -5,7 +5,6 @@ import {BackHandler, Image} from 'react-native';
5 5
 import {H3, Text, View} from 'native-base';
6 6
 import i18n from "i18n-js";
7 7
 import ThemeManager from "../utils/ThemeManager";
8
-import BaseContainer from "../components/BaseContainer";
9 8
 import {Agenda, LocaleConfig} from 'react-native-calendars';
10 9
 import Touchable from 'react-native-platform-touchable';
11 10
 import WebDataManager from "../utils/WebDataManager";
@@ -61,6 +60,7 @@ export default class PlanningScreen extends React.Component<Props, State> {
61 60
     onAgendaRef: Function;
62 61
     onCalendarToggled: Function;
63 62
     onBackButtonPressAndroid: Function;
63
+    currentDate = this.getCurrentDate();
64 64
 
65 65
     constructor(props: any) {
66 66
         super(props);
@@ -271,66 +271,62 @@ export default class PlanningScreen extends React.Component<Props, State> {
271 271
         this.setState({calendarShowing: isCalendarOpened});
272 272
     }
273 273
 
274
-    currentDate = this.getCurrentDate();
275
-
276 274
     render() {
277 275
         // console.log("rendering PlanningScreen");
278 276
         return (
279
-            <BaseContainer navigation={this.props.navigation} headerTitle={i18n.t('screens.planning')}>
280
-                <Agenda
281
-                    // the list of items that have to be displayed in agenda. If you want to render item as empty date
282
-                    // the value of date key kas to be an empty array []. If there exists no value for date key it is
283
-                    // considered that the date in question is not yet loaded
284
-                    items={this.state.agendaItems}
285
-                    // initially selected day
286
-                    selected={this.currentDate}
287
-                    // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
288
-                    minDate={this.currentDate}
289
-                    // Max amount of months allowed to scroll to the past. Default = 50
290
-                    pastScrollRange={1}
291
-                    // Max amount of months allowed to scroll to the future. Default = 50
292
-                    futureScrollRange={AGENDA_MONTH_SPAN}
293
-                    // If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly.
294
-                    onRefresh={this.onRefresh}
295
-                    // callback that fires when the calendar is opened or closed
296
-                    onCalendarToggled={this.onCalendarToggled}
297
-                    // Set this true while waiting for new data from a refresh
298
-                    refreshing={this.state.refreshing}
299
-                    renderItem={this.getRenderItem}
300
-                    renderEmptyDate={this.getRenderEmptyDate}
301
-                    rowHasChanged={this.rowHasChanged}
302
-                    // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
303
-                    firstDay={1}
304
-                    // ref to this agenda in order to handle back button event
305
-                    ref={this.onAgendaRef}
306
-                    // agenda theme
307
-                    theme={{
308
-                        backgroundColor: ThemeManager.getCurrentThemeVariables().agendaBackgroundColor,
309
-                        calendarBackground: ThemeManager.getCurrentThemeVariables().containerBgColor,
310
-                        textSectionTitleColor: ThemeManager.getCurrentThemeVariables().listNoteColor,
311
-                        selectedDayBackgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
312
-                        selectedDayTextColor: '#ffffff',
313
-                        todayTextColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
314
-                        dayTextColor: ThemeManager.getCurrentThemeVariables().textColor,
315
-                        textDisabledColor: ThemeManager.getCurrentThemeVariables().textDisabledColor,
316
-                        dotColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
317
-                        selectedDotColor: '#ffffff',
318
-                        arrowColor: 'orange',
319
-                        monthTextColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
320
-                        indicatorColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
321
-                        textDayFontWeight: '300',
322
-                        textMonthFontWeight: 'bold',
323
-                        textDayHeaderFontWeight: '300',
324
-                        textDayFontSize: 16,
325
-                        textMonthFontSize: 16,
326
-                        textDayHeaderFontSize: 16,
327
-                        agendaDayTextColor: ThemeManager.getCurrentThemeVariables().listNoteColor,
328
-                        agendaDayNumColor: ThemeManager.getCurrentThemeVariables().listNoteColor,
329
-                        agendaTodayColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
330
-                        agendaKnobColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
331
-                    }}
332
-                />
333
-            </BaseContainer>
277
+            <Agenda
278
+                // the list of items that have to be displayed in agenda. If you want to render item as empty date
279
+                // the value of date key kas to be an empty array []. If there exists no value for date key it is
280
+                // considered that the date in question is not yet loaded
281
+                items={this.state.agendaItems}
282
+                // initially selected day
283
+                selected={this.currentDate}
284
+                // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
285
+                minDate={this.currentDate}
286
+                // Max amount of months allowed to scroll to the past. Default = 50
287
+                pastScrollRange={1}
288
+                // Max amount of months allowed to scroll to the future. Default = 50
289
+                futureScrollRange={AGENDA_MONTH_SPAN}
290
+                // If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly.
291
+                onRefresh={this.onRefresh}
292
+                // callback that fires when the calendar is opened or closed
293
+                onCalendarToggled={this.onCalendarToggled}
294
+                // Set this true while waiting for new data from a refresh
295
+                refreshing={this.state.refreshing}
296
+                renderItem={this.getRenderItem}
297
+                renderEmptyDate={this.getRenderEmptyDate}
298
+                rowHasChanged={this.rowHasChanged}
299
+                // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
300
+                firstDay={1}
301
+                // ref to this agenda in order to handle back button event
302
+                ref={this.onAgendaRef}
303
+                // agenda theme
304
+                theme={{
305
+                    backgroundColor: ThemeManager.getCurrentThemeVariables().agendaBackgroundColor,
306
+                    calendarBackground: ThemeManager.getCurrentThemeVariables().containerBgColor,
307
+                    textSectionTitleColor: ThemeManager.getCurrentThemeVariables().listNoteColor,
308
+                    selectedDayBackgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
309
+                    selectedDayTextColor: '#ffffff',
310
+                    todayTextColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
311
+                    dayTextColor: ThemeManager.getCurrentThemeVariables().textColor,
312
+                    textDisabledColor: ThemeManager.getCurrentThemeVariables().textDisabledColor,
313
+                    dotColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
314
+                    selectedDotColor: '#ffffff',
315
+                    arrowColor: 'orange',
316
+                    monthTextColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
317
+                    indicatorColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
318
+                    textDayFontWeight: '300',
319
+                    textMonthFontWeight: 'bold',
320
+                    textDayHeaderFontWeight: '300',
321
+                    textDayFontSize: 16,
322
+                    textMonthFontSize: 16,
323
+                    textDayHeaderFontSize: 16,
324
+                    agendaDayTextColor: ThemeManager.getCurrentThemeVariables().listNoteColor,
325
+                    agendaDayNumColor: ThemeManager.getCurrentThemeVariables().listNoteColor,
326
+                    agendaTodayColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
327
+                    agendaKnobColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
328
+                }}
329
+            />
334 330
         );
335 331
     }
336 332
 }

+ 0
- 1
screens/Proximo/ProximoAboutScreen.js View File

@@ -3,7 +3,6 @@
3 3
 import * as React from 'react';
4 4
 import {Image, View} from 'react-native';
5 5
 import {Card, CardItem, Container, Content, H2, Left, Text} from 'native-base';
6
-import CustomHeader from "../../components/CustomHeader";
7 6
 import i18n from "i18n-js";
8 7
 import {MaterialCommunityIcons} from "@expo/vector-icons";
9 8
 

+ 3
- 4
screens/Proximo/ProximoListScreen.js View File

@@ -1,8 +1,7 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Body, Container, Content, H1, H3, Input, Item, Left, ListItem, Right, Text, Thumbnail} from 'native-base';
5
-import CustomHeader from "../../components/CustomHeader";
4
+import {Body, Content, H1, H3, Input, Item, Left, ListItem, Right, Text, Thumbnail} from 'native-base';
6 5
 import {FlatList, Image, Platform, View} from "react-native";
7 6
 import Touchable from 'react-native-platform-touchable';
8 7
 import Menu, {MenuItem} from 'react-native-material-menu';
@@ -387,7 +386,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
387 386
         // console.log("rendering ProximoListScreen");
388 387
         const nav = this.props.navigation;
389 388
         return (
390
-            <Container>
389
+            <View>
391 390
                 <Modalize ref={this.modalRef}
392 391
                           adjustToContentHeight
393 392
                           modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
@@ -400,7 +399,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
400 399
                     style={{minHeight: 300, width: '100%'}}
401 400
                     renderItem={this.renderItem}
402 401
                 />
403
-            </Container>
402
+            </View>
404 403
         );
405 404
     }
406 405
 }

+ 16
- 18
screens/Proximo/ProximoMainScreen.js View File

@@ -2,7 +2,7 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import {Platform, View} from 'react-native'
5
-import {Body, Left, ListItem, Right, Text, Container} from 'native-base';
5
+import {Body, Left, ListItem, Right, Text} from 'native-base';
6 6
 import i18n from "i18n-js";
7 7
 import {MaterialCommunityIcons} from "@expo/vector-icons";
8 8
 import ThemeManager from "../../utils/ThemeManager";
@@ -40,14 +40,6 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
40 40
         this.createDataset = this.createDataset.bind(this);
41 41
     }
42 42
 
43
-    componentDidMount() {
44
-        const button = this.getRightButton.bind(this);
45
-        this.props.navigation.setOptions({
46
-            headerRight: button
47
-            ,
48
-        });
49
-    }
50
-
51 43
     static sortFinalData(a: Object, b: Object) {
52 44
         let str1 = a.type.name.toLowerCase();
53 45
         let str2 = b.type.name.toLowerCase();
@@ -66,6 +58,13 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
66 58
         return 0;
67 59
     }
68 60
 
61
+    componentDidMount() {
62
+        const rightButton = this.getRightButton.bind(this);
63
+        this.props.navigation.setOptions({
64
+            headerRight: rightButton,
65
+        });
66
+    }
67
+
69 68
     getKeyExtractor(item: Object) {
70 69
         return item !== undefined ? item.type['id'] : undefined;
71 70
     }
@@ -180,6 +179,7 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
180 179
         );
181 180
     }
182 181
 
182
+
183 183
     getRenderItem({item}: Object) {
184 184
         let dataToSend = {
185 185
             shouldFocusSearchBar: false,
@@ -223,15 +223,13 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
223 223
     render() {
224 224
         const nav = this.props.navigation;
225 225
         return (
226
-            <Container>
227
-                <WebSectionList
228
-                    createDataset={this.createDataset}
229
-                    navigation={nav}
230
-                    refreshTime={0}
231
-                    fetchUrl={DATA_URL}
232
-                    renderItem={this.getRenderItem}
233
-                    updateErrorText={i18n.t("homeScreen.listUpdateFail")}/>
234
-            </Container>
226
+            <WebSectionList
227
+                createDataset={this.createDataset}
228
+                navigation={nav}
229
+                refreshTime={0}
230
+                fetchUrl={DATA_URL}
231
+                renderItem={this.getRenderItem}
232
+                updateErrorText={i18n.t("homeScreen.listUpdateFail")}/>
235 233
         );
236 234
     }
237 235
 }

+ 124
- 135
screens/Proxiwash/ProxiwashAboutScreen.js View File

@@ -2,8 +2,7 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import {Image, View} from 'react-native';
5
-import {Body, Card, CardItem, Container, Content, H2, H3, Left, Tab, TabHeading, Tabs, Text} from 'native-base';
6
-import CustomHeader from "../../components/CustomHeader";
5
+import {Body, Card, CardItem, Content, H2, H3, Left, Tab, TabHeading, Tabs, Text} from 'native-base';
7 6
 import i18n from "i18n-js";
8 7
 import {MaterialCommunityIcons} from "@expo/vector-icons";
9 8
 import ThemeManager from "../../utils/ThemeManager";
@@ -18,140 +17,130 @@ type Props = {
18 17
 export default class ProxiwashAboutScreen extends React.Component<Props> {
19 18
 
20 19
     render() {
21
-        const nav = this.props.navigation;
22 20
         return (
23
-            <Container>
24
-                <CustomHeader
25
-                    navigation={nav} title={i18n.t('screens.proxiwash')}
26
-                    hasBackButton={true}
27
-                    hasTabs={true}/>
28
-                <Tabs
29
-                    tabContainerStyle={{
30
-                        elevation: 0, // Fix for android shadow
31
-                    }}>
32
-                    <Tab
33
-                        heading={
34
-                            <TabHeading>
35
-                                <MaterialCommunityIcons
36
-                                    name={'information'}
37
-                                    color={ThemeManager.getCurrentThemeVariables().tabIconColor}
38
-                                    size={20}
39
-                                />
40
-                                <Text>{i18n.t('proxiwashScreen.informationTab')}</Text>
41
-                            </TabHeading>
42
-                        }
43
-                        key={1}
44
-                        style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
45
-                        <Content padder>
46
-                            <View style={{
47
-                                width: '100%',
48
-                                height: 100,
49
-                                marginTop: 20,
50
-                                marginBottom: 20,
51
-                                justifyContent: 'center',
52
-                                alignItems: 'center'
53
-                            }}>
54
-                                <Image
55
-                                    source={require('../../assets/proxiwash-logo.png')}
56
-                                    style={{flex: 1, resizeMode: "contain"}}
57
-                                    resizeMode="contain"/>
58
-                            </View>
59
-                            <Text>{i18n.t('proxiwashScreen.description')}</Text>
60
-                            <Card>
61
-                                <CardItem>
62
-                                    <Left>
63
-                                        <MaterialCommunityIcons
64
-                                            name={'tumble-dryer'}
65
-                                            size={26}/>
66
-                                        <H2>{i18n.t('proxiwashScreen.dryer')}</H2>
67
-                                    </Left>
68
-                                </CardItem>
69
-                                <CardItem>
70
-                                    <Body>
71
-                                        <H3>{i18n.t('proxiwashScreen.procedure')}</H3>
72
-                                        <Text>{i18n.t('proxiwashScreen.dryerProcedure')}</Text>
73
-                                    </Body>
74
-                                </CardItem>
75
-                                <CardItem>
76
-                                    <Body>
77
-                                        <H3>{i18n.t('proxiwashScreen.tips')}</H3>
78
-                                        <Text>{i18n.t('proxiwashScreen.dryerTips')}</Text>
79
-                                    </Body>
80
-                                </CardItem>
81
-                            </Card>
82
-                            <Card>
83
-                                <CardItem>
84
-                                    <Left>
85
-                                        <MaterialCommunityIcons
86
-                                            name={'washing-machine'}
87
-                                            size={26}/>
88
-                                        <H2>{i18n.t('proxiwashScreen.washer')}</H2>
89
-                                    </Left>
90
-                                </CardItem>
91
-                                <CardItem>
92
-                                    <Body>
93
-                                        <H3>{i18n.t('proxiwashScreen.procedure')}</H3>
94
-                                        <Text>{i18n.t('proxiwashScreen.washerProcedure')}</Text>
95
-                                    </Body>
96
-                                </CardItem>
97
-                                <CardItem>
98
-                                    <Body>
99
-                                        <H3>{i18n.t('proxiwashScreen.tips')}</H3>
100
-                                        <Text>{i18n.t('proxiwashScreen.washerTips')}</Text>
101
-                                    </Body>
102
-                                </CardItem>
103
-                            </Card>
104
-                        </Content>
105
-                    </Tab>
106
-                    <Tab
107
-                        heading={
108
-                            <TabHeading>
109
-                                <MaterialCommunityIcons
110
-                                    name={'cash'}
111
-                                    color={ThemeManager.getCurrentThemeVariables().tabIconColor}
112
-                                    size={20}
113
-                                />
114
-                                <Text>{i18n.t('proxiwashScreen.paymentTab')}</Text>
115
-                            </TabHeading>
116
-                        }
117
-                        key={2}
118
-                        style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
119
-                        <Content padder>
120
-                            <Card>
121
-                                <CardItem>
122
-                                    <Left>
123
-                                        <MaterialCommunityIcons
124
-                                            name={'coins'}
125
-                                            size={26}/>
126
-                                        <H2>{i18n.t('proxiwashScreen.tariffs')}</H2>
127
-                                    </Left>
128
-                                </CardItem>
129
-                                <CardItem>
130
-                                    <Body>
131
-                                        <Text>{i18n.t('proxiwashScreen.washersTariff')}</Text>
132
-                                        <Text>{i18n.t('proxiwashScreen.dryersTariff')}</Text>
133
-                                    </Body>
134
-                                </CardItem>
135
-                            </Card>
136
-                            <Card>
137
-                                <CardItem>
138
-                                    <Left>
139
-                                        <MaterialCommunityIcons
140
-                                            name={'cash'}
141
-                                            size={26}/>
142
-                                        <H2>{i18n.t('proxiwashScreen.paymentMethods')}</H2>
143
-                                    </Left>
144
-                                </CardItem>
145
-                                <CardItem>
146
-                                    <Body>
147
-                                        <Text>{i18n.t('proxiwashScreen.paymentMethodsDescription')}</Text>
148
-                                    </Body>
149
-                                </CardItem>
150
-                            </Card>
151
-                        </Content>
152
-                    </Tab>
153
-                </Tabs>
154
-            </Container>
21
+            <Tabs>
22
+                <Tab
23
+                    heading={
24
+                        <TabHeading>
25
+                            <MaterialCommunityIcons
26
+                                name={'information'}
27
+                                color={ThemeManager.getCurrentThemeVariables().tabIconColor}
28
+                                size={20}
29
+                            />
30
+                            <Text>{i18n.t('proxiwashScreen.informationTab')}</Text>
31
+                        </TabHeading>
32
+                    }
33
+                    key={1}
34
+                    style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
35
+                    <Content padder>
36
+                        <View style={{
37
+                            width: '100%',
38
+                            height: 100,
39
+                            marginTop: 20,
40
+                            marginBottom: 20,
41
+                            justifyContent: 'center',
42
+                            alignItems: 'center'
43
+                        }}>
44
+                            <Image
45
+                                source={require('../../assets/proxiwash-logo.png')}
46
+                                style={{flex: 1, resizeMode: "contain"}}
47
+                                resizeMode="contain"/>
48
+                        </View>
49
+                        <Text>{i18n.t('proxiwashScreen.description')}</Text>
50
+                        <Card>
51
+                            <CardItem>
52
+                                <Left>
53
+                                    <MaterialCommunityIcons
54
+                                        name={'tumble-dryer'}
55
+                                        size={26}/>
56
+                                    <H2>{i18n.t('proxiwashScreen.dryer')}</H2>
57
+                                </Left>
58
+                            </CardItem>
59
+                            <CardItem>
60
+                                <Body>
61
+                                    <H3>{i18n.t('proxiwashScreen.procedure')}</H3>
62
+                                    <Text>{i18n.t('proxiwashScreen.dryerProcedure')}</Text>
63
+                                </Body>
64
+                            </CardItem>
65
+                            <CardItem>
66
+                                <Body>
67
+                                    <H3>{i18n.t('proxiwashScreen.tips')}</H3>
68
+                                    <Text>{i18n.t('proxiwashScreen.dryerTips')}</Text>
69
+                                </Body>
70
+                            </CardItem>
71
+                        </Card>
72
+                        <Card>
73
+                            <CardItem>
74
+                                <Left>
75
+                                    <MaterialCommunityIcons
76
+                                        name={'washing-machine'}
77
+                                        size={26}/>
78
+                                    <H2>{i18n.t('proxiwashScreen.washer')}</H2>
79
+                                </Left>
80
+                            </CardItem>
81
+                            <CardItem>
82
+                                <Body>
83
+                                    <H3>{i18n.t('proxiwashScreen.procedure')}</H3>
84
+                                    <Text>{i18n.t('proxiwashScreen.washerProcedure')}</Text>
85
+                                </Body>
86
+                            </CardItem>
87
+                            <CardItem>
88
+                                <Body>
89
+                                    <H3>{i18n.t('proxiwashScreen.tips')}</H3>
90
+                                    <Text>{i18n.t('proxiwashScreen.washerTips')}</Text>
91
+                                </Body>
92
+                            </CardItem>
93
+                        </Card>
94
+                    </Content>
95
+                </Tab>
96
+                <Tab
97
+                    heading={
98
+                        <TabHeading>
99
+                            <MaterialCommunityIcons
100
+                                name={'cash'}
101
+                                color={ThemeManager.getCurrentThemeVariables().tabIconColor}
102
+                                size={20}
103
+                            />
104
+                            <Text>{i18n.t('proxiwashScreen.paymentTab')}</Text>
105
+                        </TabHeading>
106
+                    }
107
+                    key={2}
108
+                    style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
109
+                    <Content padder>
110
+                        <Card>
111
+                            <CardItem>
112
+                                <Left>
113
+                                    <MaterialCommunityIcons
114
+                                        name={'coins'}
115
+                                        size={26}/>
116
+                                    <H2>{i18n.t('proxiwashScreen.tariffs')}</H2>
117
+                                </Left>
118
+                            </CardItem>
119
+                            <CardItem>
120
+                                <Body>
121
+                                    <Text>{i18n.t('proxiwashScreen.washersTariff')}</Text>
122
+                                    <Text>{i18n.t('proxiwashScreen.dryersTariff')}</Text>
123
+                                </Body>
124
+                            </CardItem>
125
+                        </Card>
126
+                        <Card>
127
+                            <CardItem>
128
+                                <Left>
129
+                                    <MaterialCommunityIcons
130
+                                        name={'cash'}
131
+                                        size={26}/>
132
+                                    <H2>{i18n.t('proxiwashScreen.paymentMethods')}</H2>
133
+                                </Left>
134
+                            </CardItem>
135
+                            <CardItem>
136
+                                <Body>
137
+                                    <Text>{i18n.t('proxiwashScreen.paymentMethodsDescription')}</Text>
138
+                                </Body>
139
+                            </CardItem>
140
+                        </Card>
141
+                    </Content>
142
+                </Tab>
143
+            </Tabs>
155 144
         );
156 145
     }
157 146
 }

+ 15
- 14
screens/Proxiwash/ProxiwashScreen.js View File

@@ -12,7 +12,6 @@ import PlatformTouchable from "react-native-platform-touchable";
12 12
 import Touchable from "react-native-platform-touchable";
13 13
 import AsyncStorageManager from "../../utils/AsyncStorageManager";
14 14
 import * as Expo from "expo";
15
-import BaseContainer from "../../components/BaseContainer";
16 15
 
17 16
 const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json";
18 17
 
@@ -102,6 +101,10 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
102 101
      * Setup notification channel for android and add listeners to detect notifications fired
103 102
      */
104 103
     componentDidMount() {
104
+        const rightButton = this.getRightButton.bind(this);
105
+        this.props.navigation.setOptions({
106
+            headerRight: rightButton,
107
+        });
105 108
         if (AsyncStorageManager.getInstance().preferences.expoToken.current !== '') {
106 109
             // Get latest watchlist from server
107 110
             NotificationsManager.getMachineNotificationWatchlist((fetchedList) => {
@@ -283,10 +286,13 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
283 286
         this.props.navigation.navigate('ProxiwashAboutScreen');
284 287
     }
285 288
 
286
-    getRightButton(): * {
289
+    getRightButton() {
287 290
         return (
288 291
             <Touchable
289
-                style={{padding: 6}}
292
+                style={{
293
+                    padding: 6,
294
+                    marginRight: 10
295
+                }}
290 296
                 onPress={this.onAboutPress}>
291 297
                 <MaterialCommunityIcons
292 298
                     color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
@@ -299,18 +305,13 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
299 305
     render() {
300 306
         const nav = this.props.navigation;
301 307
         return (
302
-            <BaseContainer
308
+            <WebSectionList
309
+                createDataset={this.createDataset}
303 310
                 navigation={nav}
304
-                headerTitle={i18n.t('screens.proxiwash')}
305
-                headerRightButton={this.getRightButton()}>
306
-                <WebSectionList
307
-                    createDataset={this.createDataset}
308
-                    navigation={nav}
309
-                    refreshTime={REFRESH_TIME}
310
-                    fetchUrl={DATA_URL}
311
-                    renderItem={this.getRenderItem}
312
-                    updateErrorText={i18n.t("proxiwashScreen.listUpdateFail")}/>
313
-            </BaseContainer>
311
+                refreshTime={REFRESH_TIME}
312
+                fetchUrl={DATA_URL}
313
+                renderItem={this.getRenderItem}
314
+                updateErrorText={i18n.t("proxiwashScreen.listUpdateFail")}/>
314 315
         );
315 316
     }
316 317
 

+ 8
- 15
screens/SelfMenuScreen.js View File

@@ -5,7 +5,6 @@ import {View} from 'react-native';
5 5
 import {Card, CardItem, H2, H3, Text} from 'native-base';
6 6
 import ThemeManager from "../utils/ThemeManager";
7 7
 import i18n from "i18n-js";
8
-import BaseContainer from "../components/BaseContainer";
9 8
 import WebSectionList from "../components/WebSectionList";
10 9
 
11 10
 const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/menu/menu_data.json";
@@ -95,7 +94,6 @@ export default class SelfMenuScreen extends React.Component<Props> {
95 94
     }
96 95
 
97 96
     getRenderSectionHeader({section}: Object) {
98
-        let title = "";
99 97
         return (
100 98
             <Card style={{
101 99
                 marginLeft: 10,
@@ -164,20 +162,15 @@ export default class SelfMenuScreen extends React.Component<Props> {
164 162
     render() {
165 163
         const nav = this.props.navigation;
166 164
         return (
167
-            <BaseContainer
165
+            <WebSectionList
166
+                createDataset={this.createDataset}
168 167
                 navigation={nav}
169
-                headerTitle={i18n.t('screens.menuSelf')}
170
-                hasBackButton={true}>
171
-                <WebSectionList
172
-                    createDataset={this.createDataset}
173
-                    navigation={nav}
174
-                    refreshTime={0}
175
-                    fetchUrl={DATA_URL}
176
-                    renderItem={this.getRenderItem}
177
-                    renderSectionHeader={this.getRenderSectionHeader}
178
-                    updateErrorText={i18n.t("homeScreen.listUpdateFail")}
179
-                    stickyHeader={true}/>
180
-            </BaseContainer>
168
+                refreshTime={0}
169
+                fetchUrl={DATA_URL}
170
+                renderItem={this.getRenderItem}
171
+                renderSectionHeader={this.getRenderSectionHeader}
172
+                updateErrorText={i18n.t("homeScreen.listUpdateFail")}
173
+                stickyHeader={true}/>
181 174
         );
182 175
     }
183 176
 }

+ 20
- 38
screens/SettingsScreen.js View File

@@ -1,21 +1,7 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {
5
-    Body,
6
-    Card,
7
-    CardItem,
8
-    CheckBox,
9
-    Container,
10
-    Content,
11
-    Left,
12
-    List,
13
-    ListItem,
14
-    Picker,
15
-    Right,
16
-    Text,
17
-} from "native-base";
18
-import CustomHeader from "../components/CustomHeader";
4
+import {Body, Card, CardItem, CheckBox, Content, Left, List, ListItem, Picker, Right, Text,} from "native-base";
19 5
 import ThemeManager from '../utils/ThemeManager';
20 6
 import i18n from "i18n-js";
21 7
 import {NavigationActions, StackActions} from "@react-navigation/native";
@@ -228,30 +214,26 @@ export default class SettingsScreen extends React.Component<Props, State> {
228 214
     }
229 215
 
230 216
     render() {
231
-        const nav = this.props.navigation;
232 217
         return (
233
-            <Container>
234
-                <CustomHeader navigation={nav} title={i18n.t('screens.settings')} hasBackButton={true}/>
235
-                <Content padder>
236
-                    <Card>
237
-                        <CardItem header>
238
-                            <Text>{i18n.t('settingsScreen.generalCard')}</Text>
239
-                        </CardItem>
240
-                        <List>
241
-                            {this.getToggleItem(this.onToggleNightMode, 'theme-light-dark', i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.nightModeSub'))}
242
-                            {SettingsScreen.getGeneralItem(this.getStartScreenPicker(), 'power', i18n.t('settingsScreen.startScreen'), i18n.t('settingsScreen.startScreenSub'))}
243
-                        </List>
244
-                    </Card>
245
-                    <Card>
246
-                        <CardItem header>
247
-                            <Text>Proxiwash</Text>
248
-                        </CardItem>
249
-                        <List>
250
-                            {SettingsScreen.getGeneralItem(this.getProxiwashNotifPicker(), 'washing-machine', i18n.t('settingsScreen.proxiwashNotifReminder'), i18n.t('settingsScreen.proxiwashNotifReminderSub'))}
251
-                        </List>
252
-                    </Card>
253
-                </Content>
254
-            </Container>
218
+            <Content padder>
219
+                <Card>
220
+                    <CardItem header>
221
+                        <Text>{i18n.t('settingsScreen.generalCard')}</Text>
222
+                    </CardItem>
223
+                    <List>
224
+                        {this.getToggleItem(this.onToggleNightMode, 'theme-light-dark', i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.nightModeSub'))}
225
+                        {SettingsScreen.getGeneralItem(this.getStartScreenPicker(), 'power', i18n.t('settingsScreen.startScreen'), i18n.t('settingsScreen.startScreenSub'))}
226
+                    </List>
227
+                </Card>
228
+                <Card>
229
+                    <CardItem header>
230
+                        <Text>Proxiwash</Text>
231
+                    </CardItem>
232
+                    <List>
233
+                        {SettingsScreen.getGeneralItem(this.getProxiwashNotifPicker(), 'washing-machine', i18n.t('settingsScreen.proxiwashNotifReminder'), i18n.t('settingsScreen.proxiwashNotifReminderSub'))}
234
+                    </List>
235
+                </Card>
236
+            </Content>
255 237
 
256 238
         );
257 239
     }

+ 0
- 19
screens/Websites/AvailableRoomScreen.js View File

@@ -11,9 +11,7 @@ type Props = {
11 11
 
12 12
 const ROOM_URL = 'http://planex.insa-toulouse.fr/salles.php';
13 13
 const PC_URL = 'http://planex.insa-toulouse.fr/sallesInfo.php';
14
-const BIB_URL = 'https://bibbox.insa-toulouse.fr/';
15 14
 const CUSTOM_CSS_GENERAL = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/rooms/customMobile.css';
16
-const CUSTOM_CSS_Bib = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/rooms/customBibMobile.css';
17 15
 
18 16
 /**
19 17
  * Class defining the app's planex screen.
@@ -32,17 +30,6 @@ export default class AvailableRoomScreen extends React.Component<Props> {
32 30
             'let header = $(".table tbody tr:first");' +
33 31
             '$("table").prepend("<thead></thead>");true;' + // Fix for crash on ios
34 32
             '$("thead").append(header);true;';
35
-
36
-        this.customBibInjectedJS =
37
-            'document.querySelector(\'head\').innerHTML += \'<meta name="viewport" content="width=device-width, initial-scale=1.0">\';' +
38
-            'document.querySelector(\'head\').innerHTML += \'<link rel="stylesheet" href="' + CUSTOM_CSS_Bib + '" type="text/css"/>\';' +
39
-            'if ($(".hero-unit-form").length > 0 && $("#customBackButton").length === 0)' +
40
-            '$(".hero-unit-form").append("' +
41
-            '<div style=\'width: 100%; display: flex\'>' +
42
-            '<a style=\'margin: auto\' href=\'' + BIB_URL + '\'>' +
43
-            '<button id=\'customBackButton\' class=\'btn btn-primary\'>Retour</button>' +
44
-            '</a>' +
45
-            '</div>");true;';
46 33
     }
47 34
 
48 35
     render() {
@@ -63,12 +50,6 @@ export default class AvailableRoomScreen extends React.Component<Props> {
63 50
                         name: i18n.t('availableRoomScreen.computerRoom'),
64 51
                         customJS: this.customInjectedJS
65 52
                     },
66
-                    {
67
-                        url: BIB_URL,
68
-                        icon: 'book',
69
-                        name: i18n.t('availableRoomScreen.bibRoom'),
70
-                        customJS: this.customBibInjectedJS
71
-                    },
72 53
                 ]}
73 54
                 customInjectedJS={this.customInjectedJS}
74 55
                 headerTitle={i18n.t('screens.availableRooms')}

+ 66
- 0
screens/Websites/BibScreen.js View File

@@ -0,0 +1,66 @@
1
+// @flow
2
+
3
+import * as React from 'react';
4
+import WebViewScreen from "../../components/WebViewScreen";
5
+import i18n from "i18n-js";
6
+
7
+type Props = {
8
+    navigation: Object,
9
+}
10
+
11
+const BIB_URL = 'https://bibbox.insa-toulouse.fr/';
12
+const CUSTOM_CSS_GENERAL = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/rooms/customMobile.css';
13
+const CUSTOM_CSS_Bib = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/rooms/customBibMobile.css';
14
+
15
+/**
16
+ * Class defining the app's planex screen.
17
+ * This screen uses a webview to render the planex page
18
+ */
19
+export default class AvailableRoomScreen extends React.Component<Props> {
20
+
21
+    customInjectedJS: string;
22
+    customBibInjectedJS: string;
23
+
24
+    constructor() {
25
+        super();
26
+        this.customInjectedJS =
27
+            'document.querySelector(\'head\').innerHTML += \'<meta name="viewport" content="width=device-width, initial-scale=1.0">\';' +
28
+            'document.querySelector(\'head\').innerHTML += \'<link rel="stylesheet" href="' + CUSTOM_CSS_GENERAL + '" type="text/css"/>\';' +
29
+            'let header = $(".table tbody tr:first");' +
30
+            '$("table").prepend("<thead></thead>");true;' + // Fix for crash on ios
31
+            '$("thead").append(header);true;';
32
+
33
+        this.customBibInjectedJS =
34
+            'document.querySelector(\'head\').innerHTML += \'<meta name="viewport" content="width=device-width, initial-scale=1.0">\';' +
35
+            'document.querySelector(\'head\').innerHTML += \'<link rel="stylesheet" href="' + CUSTOM_CSS_Bib + '" type="text/css"/>\';' +
36
+            'if ($(".hero-unit-form").length > 0 && $("#customBackButton").length === 0)' +
37
+            '$(".hero-unit-form").append("' +
38
+            '<div style=\'width: 100%; display: flex\'>' +
39
+            '<a style=\'margin: auto\' href=\'' + BIB_URL + '\'>' +
40
+            '<button id=\'customBackButton\' class=\'btn btn-primary\'>Retour</button>' +
41
+            '</a>' +
42
+            '</div>");true;';
43
+    }
44
+
45
+    render() {
46
+        const nav = this.props.navigation;
47
+        return (
48
+            <WebViewScreen
49
+                navigation={nav}
50
+                data={[
51
+                    {
52
+                        url: BIB_URL,
53
+                        icon: 'book',
54
+                        name: i18n.t('availableRoomScreen.bibRoom'),
55
+                        customJS: this.customBibInjectedJS
56
+                    },
57
+                ]}
58
+                customInjectedJS={this.customInjectedJS}
59
+                headerTitle={i18n.t('screens.availableRooms')}
60
+                hasHeaderBackButton={true}
61
+                hasSideMenu={false}
62
+                hasFooter={false}/>
63
+        );
64
+    }
65
+}
66
+

Loading…
Cancel
Save