Browse Source

Moved services screen outside of tab navigation for improved usability

Arnaud Vergnet 3 years ago
parent
commit
3a3cf200f5
3 changed files with 123 additions and 82 deletions
  1. 121
    0
      src/navigation/MainNavigator.js
  2. 0
    80
      src/navigation/TabNavigator.js
  3. 2
    2
      src/screens/Home/HomeScreen.js

+ 121
- 0
src/navigation/MainNavigator.js View File

@@ -9,6 +9,27 @@ import {createStackNavigator, TransitionPresets} from "@react-navigation/stack";
9 9
 import i18n from "i18n-js";
10 10
 import TabNavigator from "./TabNavigator";
11 11
 import TetrisScreen from "../screens/Tetris/TetrisScreen";
12
+import VoteScreen from "../screens/Amicale/VoteScreen";
13
+import LoginScreen from "../screens/Amicale/LoginScreen";
14
+import {useTheme} from "react-native-paper";
15
+import {createCollapsibleStack} from "react-navigation-collapsible";
16
+import {Platform} from "react-native";
17
+import AvailableRoomScreen from "../screens/Websites/AvailableRoomScreen";
18
+import BibScreen from "../screens/Websites/BibScreen";
19
+import SelfMenuScreen from "../screens/Services/SelfMenuScreen";
20
+import ProximoMainScreen from "../screens/Proximo/ProximoMainScreen";
21
+import ProximoListScreen from "../screens/Proximo/ProximoListScreen";
22
+import ProximoAboutScreen from "../screens/Proximo/ProximoAboutScreen";
23
+import {AmicaleWebsiteScreen} from "../screens/Websites/AmicaleWebsiteScreen";
24
+import {ElusEtudiantsWebsiteScreen} from "../screens/Websites/ElusEtudiantsWebsiteScreen";
25
+import {WiketudWebsiteScreen} from "../screens/Websites/WiketudWebsiteScreen";
26
+import {TutorInsaWebsiteScreen} from "../screens/Websites/TutorInsaWebsiteScreen";
27
+import {ENTWebsiteScreen} from "../screens/Websites/ENTWebsiteScreen";
28
+import {BlueMindWebsiteScreen} from "../screens/Websites/BlueMindWebsiteScreen";
29
+import ProfileScreen from "../screens/Amicale/ProfileScreen";
30
+import ClubListScreen from "../screens/Amicale/Clubs/ClubListScreen";
31
+import ClubAboutScreen from "../screens/Amicale/Clubs/ClubAboutScreen";
32
+import AmicaleContactScreen from "../screens/Amicale/AmicaleContactScreen";
12 33
 
13 34
 const defaultScreenOptions = {
14 35
     gestureEnabled: true,
@@ -16,6 +37,42 @@ const defaultScreenOptions = {
16 37
     ...TransitionPresets.SlideFromRightIOS,
17 38
 };
18 39
 
40
+const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentationIOS : TransitionPresets.ModalSlideFromBottomIOS;
41
+
42
+const screenTransition = Platform.OS === 'ios' ? TransitionPresets.SlideFromRightIOS : TransitionPresets.ScaleFromCenterAndroid;
43
+
44
+function createScreenCollapsibleStack(
45
+    name: string,
46
+    Stack: any,
47
+    component: any,
48
+    title: string,
49
+    useNativeDriver?: boolean,
50
+    options?: { [key: string]: any }) {
51
+    const {colors} = useTheme();
52
+    const screenOptions = options != null ? options : {};
53
+    return createCollapsibleStack(
54
+        <Stack.Screen
55
+            name={name}
56
+            component={component}
57
+            options={{
58
+                title: title,
59
+                headerStyle: {
60
+                    backgroundColor: colors.surface,
61
+                },
62
+                ...screenOptions,
63
+            }}
64
+        />,
65
+        {
66
+            collapsedColor: 'transparent',
67
+            useNativeDriver: useNativeDriver != null ? useNativeDriver : true, // native driver does not work with webview
68
+        }
69
+    )
70
+}
71
+
72
+function getWebsiteStack(name: string, Stack: any, component: any, title: string) {
73
+    return createScreenCollapsibleStack(name, Stack, component, title, false);
74
+}
75
+
19 76
 const MainStack = createStackNavigator();
20 77
 
21 78
 function MainStackComponent(props: { createTabNavigator: () => React.Node }) {
@@ -67,6 +124,70 @@ function MainStackComponent(props: { createTabNavigator: () => React.Node }) {
67 124
                     title: i18n.t("game.title"),
68 125
                 }}
69 126
             />
127
+            <MainStack.Screen
128
+                name="login"
129
+                component={LoginScreen}
130
+                options={{
131
+                    title: i18n.t('screens.login'),
132
+                }}
133
+            />
134
+
135
+            {/*     INSA        */}
136
+            {getWebsiteStack("available-rooms", MainStack, AvailableRoomScreen, i18n.t('screens.availableRooms'))}
137
+            {getWebsiteStack("bib", MainStack, BibScreen, i18n.t('screens.bib'))}
138
+            {createScreenCollapsibleStack("self-menu", MainStack, SelfMenuScreen, i18n.t('screens.menuSelf'))}
139
+
140
+            {/*     STUDENTS     */}
141
+            {createScreenCollapsibleStack("proximo", MainStack, ProximoMainScreen, i18n.t('screens.proximo'))}
142
+            {createScreenCollapsibleStack(
143
+                "proximo-list",
144
+                MainStack,
145
+                ProximoListScreen,
146
+                i18n.t('screens.proximoArticles'),
147
+                true,
148
+                {...screenTransition},
149
+            )}
150
+            <MainStack.Screen
151
+                name="proximo-about"
152
+                component={ProximoAboutScreen}
153
+                options={{
154
+                    title: i18n.t('screens.proximo'),
155
+                    ...modalTransition,
156
+                }}
157
+            />
158
+            {getWebsiteStack("amicale-website", MainStack, AmicaleWebsiteScreen, i18n.t('screens.amicaleWebsite'))}
159
+            {getWebsiteStack("elus-etudiants", MainStack, ElusEtudiantsWebsiteScreen, "Élus Étudiants")}
160
+            {getWebsiteStack("wiketud", MainStack, WiketudWebsiteScreen, "Wiketud")}
161
+            {getWebsiteStack("tutorinsa", MainStack, TutorInsaWebsiteScreen, "Tutor'INSA")}
162
+            {getWebsiteStack("ent", MainStack, ENTWebsiteScreen, i18n.t('screens.ent'))}
163
+            {getWebsiteStack("bluemind", MainStack, BlueMindWebsiteScreen, i18n.t('screens.bluemind'))}
164
+
165
+
166
+            {/*     AMICALE     */}
167
+            {createScreenCollapsibleStack("profile", MainStack, ProfileScreen, i18n.t('screens.profile'))}
168
+            {createScreenCollapsibleStack("club-list", MainStack, ClubListScreen, i18n.t('clubs.clubList'))}
169
+            <MainStack.Screen
170
+                name="club-about"
171
+                component={ClubAboutScreen}
172
+                options={{
173
+                    title: i18n.t('screens.clubsAbout'),
174
+                    ...modalTransition,
175
+                }}
176
+            />
177
+            <MainStack.Screen
178
+                name="vote"
179
+                component={VoteScreen}
180
+                options={{
181
+                    title: i18n.t('screens.vote'),
182
+                }}
183
+            />
184
+            <MainStack.Screen
185
+                name="amicale-contact"
186
+                component={AmicaleContactScreen}
187
+                options={{
188
+                    title: i18n.t('screens.amicaleAbout'),
189
+                }}
190
+            />
70 191
         </MainStack.Navigator>
71 192
     );
72 193
 }

+ 0
- 80
src/navigation/TabNavigator.js View File

@@ -7,9 +7,6 @@ import PlanningScreen from '../screens/Planning/PlanningScreen';
7 7
 import PlanningDisplayScreen from '../screens/Planning/PlanningDisplayScreen';
8 8
 import ProxiwashScreen from '../screens/Proxiwash/ProxiwashScreen';
9 9
 import ProxiwashAboutScreen from '../screens/Proxiwash/ProxiwashAboutScreen';
10
-import ProximoMainScreen from '../screens/Proximo/ProximoMainScreen';
11
-import ProximoListScreen from "../screens/Proximo/ProximoListScreen";
12
-import ProximoAboutScreen from "../screens/Proximo/ProximoAboutScreen";
13 10
 import PlanexScreen from '../screens/Planex/PlanexScreen';
14 11
 import AsyncStorageManager from "../managers/AsyncStorageManager";
15 12
 import {useTheme} from 'react-native-paper';
@@ -21,21 +18,6 @@ import FeedItemScreen from "../screens/Home/FeedItemScreen";
21 18
 import {createCollapsibleStack} from "react-navigation-collapsible";
22 19
 import GroupSelectionScreen from "../screens/Planex/GroupSelectionScreen";
23 20
 import CustomTabBar from "../components/Tabbar/CustomTabBar";
24
-import SelfMenuScreen from "../screens/Services/SelfMenuScreen";
25
-import AvailableRoomScreen from "../screens/Websites/AvailableRoomScreen";
26
-import BibScreen from "../screens/Websites/BibScreen";
27
-import {AmicaleWebsiteScreen} from "../screens/Websites/AmicaleWebsiteScreen";
28
-import {ElusEtudiantsWebsiteScreen} from "../screens/Websites/ElusEtudiantsWebsiteScreen";
29
-import {WiketudWebsiteScreen} from "../screens/Websites/WiketudWebsiteScreen";
30
-import {TutorInsaWebsiteScreen} from "../screens/Websites/TutorInsaWebsiteScreen";
31
-import {ENTWebsiteScreen} from "../screens/Websites/ENTWebsiteScreen";
32
-import {BlueMindWebsiteScreen} from "../screens/Websites/BlueMindWebsiteScreen";
33
-import LoginScreen from "../screens/Amicale/LoginScreen";
34
-import ProfileScreen from "../screens/Amicale/ProfileScreen";
35
-import ClubListScreen from "../screens/Amicale/Clubs/ClubListScreen";
36
-import ClubAboutScreen from "../screens/Amicale/Clubs/ClubAboutScreen";
37
-import VoteScreen from "../screens/Amicale/VoteScreen";
38
-import AmicaleContactScreen from "../screens/Amicale/AmicaleContactScreen";
39 21
 import WebsitesHomeScreen from "../screens/Services/ServicesScreen";
40 22
 import ServicesSectionScreen from "../screens/Services/ServicesSectionScreen";
41 23
 
@@ -47,8 +29,6 @@ const defaultScreenOptions = {
47 29
 
48 30
 const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentationIOS : TransitionPresets.ModalSlideFromBottomIOS;
49 31
 
50
-const screenTransition = Platform.OS === 'ios' ? TransitionPresets.SlideFromRightIOS : TransitionPresets.ScaleFromCenterAndroid;
51
-
52 32
 function createScreenCollapsibleStack(
53 33
     name: string,
54 34
     Stack: any,
@@ -93,64 +73,6 @@ function ServicesStackComponent() {
93 73
         >
94 74
             {createScreenCollapsibleStack("index", ServicesStack, WebsitesHomeScreen, i18n.t('screens.services'))}
95 75
             {createScreenCollapsibleStack("services-section", ServicesStack, ServicesSectionScreen, "SECTION")}
96
-
97
-            {/*     INSA        */}
98
-            {getWebsiteStack("available-rooms", ServicesStack, AvailableRoomScreen, i18n.t('screens.availableRooms'))}
99
-            {getWebsiteStack("bib", ServicesStack, BibScreen, i18n.t('screens.bib'))}
100
-            {createScreenCollapsibleStack("self-menu", ServicesStack, SelfMenuScreen, i18n.t('screens.menuSelf'))}
101
-
102
-            {/*     STUDENTS     */}
103
-            {createScreenCollapsibleStack("proximo", ServicesStack, ProximoMainScreen, i18n.t('screens.proximo'))}
104
-            {createScreenCollapsibleStack(
105
-                "proximo-list",
106
-                ServicesStack,
107
-                ProximoListScreen,
108
-                i18n.t('screens.proximoArticles'),
109
-                true,
110
-                {...screenTransition},
111
-            )}
112
-            <ServicesStack.Screen
113
-                name="proximo-about"
114
-                component={ProximoAboutScreen}
115
-                options={{
116
-                    title: i18n.t('screens.proximo'),
117
-                    ...modalTransition,
118
-                }}
119
-            />
120
-            {getWebsiteStack("amicale-website", ServicesStack, AmicaleWebsiteScreen, i18n.t('screens.amicaleWebsite'))}
121
-            {getWebsiteStack("elus-etudiants", ServicesStack, ElusEtudiantsWebsiteScreen, "Élus Étudiants")}
122
-            {getWebsiteStack("wiketud", ServicesStack, WiketudWebsiteScreen, "Wiketud")}
123
-            {getWebsiteStack("tutorinsa", ServicesStack, TutorInsaWebsiteScreen, "Tutor'INSA")}
124
-            {getWebsiteStack("ent", ServicesStack, ENTWebsiteScreen, i18n.t('screens.ent'))}
125
-            {getWebsiteStack("bluemind", ServicesStack, BlueMindWebsiteScreen, i18n.t('screens.bluemind'))}
126
-
127
-
128
-            {/*     AMICALE     */}
129
-            {createScreenCollapsibleStack("login", ServicesStack, LoginScreen, i18n.t('screens.login'))}
130
-            {createScreenCollapsibleStack("profile", ServicesStack, ProfileScreen, i18n.t('screens.profile'))}
131
-            {createScreenCollapsibleStack("club-list", ServicesStack, ClubListScreen, i18n.t('clubs.clubList'))}
132
-            <ServicesStack.Screen
133
-                name="club-about"
134
-                component={ClubAboutScreen}
135
-                options={{
136
-                    title: i18n.t('screens.clubsAbout'),
137
-                    ...modalTransition,
138
-                }}
139
-            />
140
-            <ServicesStack.Screen
141
-                name="vote"
142
-                component={VoteScreen}
143
-                options={{
144
-                    title: i18n.t('screens.vote'),
145
-                }}
146
-            />
147
-            <ServicesStack.Screen
148
-                name="amicale-contact"
149
-                component={AmicaleContactScreen}
150
-                options={{
151
-                    title: i18n.t('screens.amicaleAbout'),
152
-                }}
153
-            />
154 76
         </ServicesStack.Navigator>
155 77
     );
156 78
 }
@@ -267,8 +189,6 @@ function HomeStackComponent(initialRoute: string | null, defaultData: { [key: st
267 189
                     ...modalTransition,
268 190
                 }}
269 191
             />
270
-            {createScreenCollapsibleStack("self-menu", HomeStack, SelfMenuScreen, i18n.t('screens.menuSelf'), true, {...modalTransition})}
271
-            {createScreenCollapsibleStack("login", HomeStack, LoginScreen, i18n.t('screens.login'))}
272 192
         </HomeStack.Navigator>
273 193
     );
274 194
 }

+ 2
- 2
src/screens/Home/HomeScreen.js View File

@@ -192,11 +192,11 @@ class HomeScreen extends React.Component<Props, State> {
192 192
     };
193 193
 
194 194
     onProximoClick = () => {
195
-        this.props.navigation.navigate('services', {screen: "index"});
195
+        this.props.navigation.navigate("proximo");
196 196
     };
197 197
 
198 198
     onTutorInsaClick = () => {
199
-        this.props.navigation.navigate('services', {screen: "index"});
199
+        this.props.navigation.navigate("tutorinsa");
200 200
     };
201 201
 
202 202
     onMenuClick = () => {

Loading…
Cancel
Save