Browse Source

Improved night mode

keplyx 2 years ago
parent
commit
7cd543ac74

+ 17
- 11
App.js View File

@@ -1,11 +1,13 @@
1 1
 import React from 'react';
2
-import {Dimensions, StyleSheet, View, Text} from 'react-native';
3
-import {StyleProvider, Root} from 'native-base';
2
+import {StyleProvider, Root, View} from 'native-base';
4 3
 import AppNavigator from './navigation/AppNavigator';
5 4
 import ThemeManager from './utils/ThemeManager';
6 5
 import LocaleManager from './utils/LocaleManager';
7 6
 import * as Font from 'expo-font';
8
-
7
+// edited native-base-shoutem-theme according to
8
+// https://github.com/GeekyAnts/theme/pull/5/files/91f67c55ca6e65fe3af779586b506950c9f331be#diff-4cfc2dd4d5dae7954012899f2268a422
9
+// to allow for dynamic theme switching
10
+import { clearThemeCache } from 'native-base-shoutem-theme';
9 11
 
10 12
 export default class App extends React.Component {
11 13
 
@@ -35,9 +37,10 @@ export default class App extends React.Component {
35 37
     updateTheme() {
36 38
         console.log('update theme called');
37 39
         // Change not propagating, need to restart the app
38
-        // this.setState({
39
-        //     currentTheme: ThemeManager.getInstance().getCurrentTheme()
40
-        // });
40
+        this.setState({
41
+            currentTheme: ThemeManager.getInstance().getCurrentTheme()
42
+        });
43
+        clearThemeCache();
41 44
     }
42 45
 
43 46
     render() {
@@ -45,12 +48,15 @@ export default class App extends React.Component {
45 48
             return <View/>;
46 49
         }
47 50
         console.log('rendering');
48
-        // console.log(this.state.currentTheme.variables.containerBgColor);
51
+        console.log(this.state.currentTheme.variables.containerBgColor);
49 52
         return (
50
-            <StyleProvider style={this.state.currentTheme}>
51
-                <Root>
53
+            <Root>
54
+                <StyleProvider style={this.state.currentTheme}>
55
+
52 56
                     <AppNavigator/>
53
-                </Root>
54
-            </StyleProvider>);
57
+
58
+                </StyleProvider>
59
+            </Root>
60
+        );
55 61
     }
56 62
 }

+ 7
- 2
app.json View File

@@ -12,10 +12,11 @@
12 12
     "version": "0.0.1",
13 13
     "orientation": "portrait",
14 14
     "icon": "./assets/icon.png",
15
+    "primaryColor": "#e42612",
15 16
     "splash": {
16 17
       "image": "./assets/splash.png",
17 18
       "resizeMode": "contain",
18
-      "backgroundColor": "#ffffff"
19
+      "backgroundColor": "#fff"
19 20
     },
20 21
     "updates": {
21 22
       "fallbackToCacheTimeout": 0
@@ -24,7 +25,11 @@
24 25
       "**/*"
25 26
     ],
26 27
     "ios": {
27
-      "supportsTablet": true
28
+      "supportsTablet": true,
29
+      "bundleIdentifier": "com.test.applicationamicale"
30
+    },
31
+    "android": {
32
+      "package": "com.test.applicationamicale"
28 33
     }
29 34
   }
30 35
 }

BIN
assets/splash.png View File


+ 30
- 0
components/CustomMaterialIcon.js View File

@@ -0,0 +1,30 @@
1
+import React from 'react';
2
+import {Icon} from "native-base";
3
+import ThemeManager from '../utils/ThemeManager';
4
+
5
+export default class CustomMaterialIcon extends React.Component {
6
+
7
+    constructor(props) {
8
+        super(props);
9
+    }
10
+
11
+    render() {
12
+        return (
13
+            <Icon
14
+                active
15
+                name={this.props.icon}
16
+                type={'MaterialCommunityIcons'}
17
+                style={{
18
+                    color:
19
+                        this.props.color !== undefined ?
20
+                            this.props.color :
21
+                            this.props.active ?
22
+                                ThemeManager.getInstance().getCurrentThemeVariables().brandPrimary :
23
+                                ThemeManager.getInstance().getCurrentThemeVariables().customMaterialIconColor,
24
+                    fontSize: this.props.fontSize !== undefined ? this.props.fontSize : 26,
25
+                    width: this.props.width !== undefined ? this.props.width : 30
26
+                }}
27
+            />
28
+        );
29
+    }
30
+}

+ 4
- 5
components/SideMenu.js View File

@@ -2,6 +2,7 @@ import React from 'react';
2 2
 import {Platform, Dimensions, StyleSheet, Image, FlatList, Linking} from 'react-native';
3 3
 import {Badge, Text, Container, Content, Icon, Left, ListItem, Right} from "native-base";
4 4
 import i18n from "i18n-js";
5
+import CustomMaterialIcon from '../components/CustomMaterialIcon';
5 6
 
6 7
 const deviceHeight = Dimensions.get("window").height;
7 8
 
@@ -101,11 +102,9 @@ export default class SideBar extends React.Component {
101 102
                                 }}
102 103
                             >
103 104
                                 <Left>
104
-                                    <Icon
105
-                                        active
106
-                                        name={item.icon}
107
-                                        type={'MaterialCommunityIcons'}
108
-                                        style={{color: "#777", fontSize: 26, width: 30}}
105
+                                    <CustomMaterialIcon
106
+                                        icon={item.icon}
107
+                                        active={this.state.active === item.route}
109 108
                                     />
110 109
                                     <Text style={styles.text}>
111 110
                                         {item.name}

+ 3
- 3
native-base-theme/components/Button.js View File

@@ -319,7 +319,7 @@ export default (variables /*: * */ = variable) => {
319 319
       fontFamily: variables.btnFontFamily,
320 320
       marginLeft: 0,
321 321
       marginRight: 0,
322
-      color: variables.inverseTextColor,
322
+      color: variables.btnTextColor,
323 323
       fontSize: variables.btnTextSize,
324 324
       paddingHorizontal: 16,
325 325
       backgroundColor: "transparent"
@@ -327,13 +327,13 @@ export default (variables /*: * */ = variable) => {
327 327
     },
328 328
 
329 329
     "NativeBase.Icon": {
330
-      color: variables.inverseTextColor,
330
+      color: variables.btnTextColor,
331 331
       fontSize: 24,
332 332
       marginHorizontal: 16,
333 333
       paddingTop: platform === "ios" ? 2 : undefined
334 334
     },
335 335
     "NativeBase.IconNB": {
336
-      color: variables.inverseTextColor,
336
+      color: variables.btnTextColor,
337 337
       fontSize: 24,
338 338
       marginHorizontal: 16,
339 339
       paddingTop: platform === "ios" ? 2 : undefined

+ 14
- 2
native-base-theme/variables/platform.js View File

@@ -35,6 +35,7 @@ export default {
35 35
 
36 36
   // Button
37 37
   btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
38
+  btnTextColor: '#fff',
38 39
   btnDisabledBg: "#b5b5b5",
39 40
   buttonPadding: 6,
40 41
   get btnPrimaryBg() {
@@ -100,7 +101,7 @@ export default {
100 101
   CheckboxIconSize: platform === "ios" ? 21 : 16,
101 102
   CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
102 103
   CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17,
103
-  checkboxBgColor: "#039BE5",
104
+  checkboxBgColor: "#E4202D",
104 105
   checkboxSize: 20,
105 106
   checkboxTickColor: "#fff",
106 107
 
@@ -210,7 +211,7 @@ export default {
210 211
 
211 212
   // Radio Button
212 213
   radioBtnSize: platform === "ios" ? 25 : 23,
213
-  radioSelectedColorAndroid: "#3F51B5",
214
+  radioSelectedColorAndroid: "#E4202D",
214 215
   radioBtnLineHeight: platform === "ios" ? 29 : 24,
215 216
   get radioColor() {
216 217
     return this.brandPrimary;
@@ -254,6 +255,17 @@ export default {
254 255
   subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF",
255 256
   titleFontColor: platform === "ios" ? "#000" : "#FFF",
256 257
 
258
+
259
+  // CUSTOM
260
+  customMaterialIconColor: "#5d5d5d",
261
+
262
+  // PROXIWASH
263
+  proxiwashFinishedColor: "rgba(54,165,22,0.4)",
264
+  proxiwashReadyColor: "transparent",
265
+  proxiwashRunningColor: "rgba(94,104,241,0.4)",
266
+  proxiwashBrokenColor: "#a2a2a2",
267
+  proxiwashErrorColor: "rgba(204,7,0,0.4)",
268
+
257 269
   // Other
258 270
   borderRadiusBase: platform === "ios" ? 5 : 2,
259 271
   borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),

+ 26
- 13
native-base-theme/variables/platformDark.js View File

@@ -35,37 +35,38 @@ export default {
35 35
 
36 36
     // Button
37 37
     btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
38
+    btnTextColor: '#fff',
38 39
     btnDisabledBg: "#b5b5b5",
39 40
     buttonPadding: 6,
40 41
     get btnPrimaryBg() {
41 42
         return this.brandPrimary;
42 43
     },
43 44
     get btnPrimaryColor() {
44
-        return this.inverseTextColor;
45
+        return this.textColor;
45 46
     },
46 47
     get btnInfoBg() {
47 48
         return this.brandInfo;
48 49
     },
49 50
     get btnInfoColor() {
50
-        return this.inverseTextColor;
51
+        return this.textColor;
51 52
     },
52 53
     get btnSuccessBg() {
53 54
         return this.brandSuccess;
54 55
     },
55 56
     get btnSuccessColor() {
56
-        return this.inverseTextColor;
57
+        return this.textColor;
57 58
     },
58 59
     get btnDangerBg() {
59 60
         return this.brandDanger;
60 61
     },
61 62
     get btnDangerColor() {
62
-        return this.inverseTextColor;
63
+        return this.textColor;
63 64
     },
64 65
     get btnWarningBg() {
65 66
         return this.brandWarning;
66 67
     },
67 68
     get btnWarningColor() {
68
-        return this.inverseTextColor;
69
+        return this.textColor;
69 70
     },
70 71
     get btnTextSize() {
71 72
         return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
@@ -87,8 +88,8 @@ export default {
87 88
     },
88 89
 
89 90
     // Card
90
-    cardDefaultBg: "#2b2b2b",
91
-    cardBorderColor: "#ccc",
91
+    cardDefaultBg: "#363636",
92
+    cardBorderColor: "#1a1a1a",
92 93
     cardBorderRadius: 2,
93 94
     cardItemPadding: platform === "ios" ? 10 : 12,
94 95
 
@@ -100,7 +101,7 @@ export default {
100 101
     CheckboxIconSize: platform === "ios" ? 21 : 16,
101 102
     CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
102 103
     CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17,
103
-    checkboxBgColor: "#039BE5",
104
+    checkboxBgColor: "#E4202D",
104 105
     checkboxSize: 20,
105 106
     checkboxTickColor: "#fff",
106 107
 
@@ -114,7 +115,7 @@ export default {
114 115
     brandLight: "#f4f4f4",
115 116
 
116 117
     //Container
117
-    containerBgColor: "#2b2b2b",
118
+    containerBgColor: "#333333",
118 119
 
119 120
     //Date Picker
120 121
     datePickerTextColor: "#000",
@@ -197,11 +198,11 @@ export default {
197 198
 
198 199
     // List
199 200
     listBg: "transparent",
200
-    listBorderColor: "#c9c9c9",
201
+    listBorderColor: "#727272",
201 202
     listDividerBg: "#f4f4f4",
202 203
     listBtnUnderlayColor: "#DDD",
203 204
     listItemPadding: platform === "ios" ? 10 : 12,
204
-    listNoteColor: "#808080",
205
+    listNoteColor: "#acacac",
205 206
     listNoteSize: 13,
206 207
 
207 208
     // Progress Bar
@@ -210,7 +211,7 @@ export default {
210 211
 
211 212
     // Radio Button
212 213
     radioBtnSize: platform === "ios" ? 25 : 23,
213
-    radioSelectedColorAndroid: "#3F51B5",
214
+    radioSelectedColorAndroid: "#E4202D",
214 215
     radioBtnLineHeight: platform === "ios" ? 29 : 24,
215 216
     get radioColor() {
216 217
         return this.brandPrimary;
@@ -240,7 +241,7 @@ export default {
240 241
     tabFontSize: 15,
241 242
 
242 243
     // Text
243
-    textColor: "#fff",
244
+    textColor: "#d6d6d6",
244 245
     inverseTextColor: "#000",
245 246
     noteFontSize: 14,
246 247
     get defaultTextColor() {
@@ -254,6 +255,18 @@ export default {
254 255
     subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF",
255 256
     titleFontColor: platform === "ios" ? "#000" : "#FFF",
256 257
 
258
+
259
+    // CUSTOM
260
+    customMaterialIconColor: "#b3b3b3",
261
+
262
+    // PROXIWASH
263
+    proxiwashFinishedColor: "rgba(12,157,13,0.72)",
264
+    proxiwashReadyColor: "transparent",
265
+    proxiwashRunningColor: "rgba(29,59,175,0.65)",
266
+    proxiwashBrokenColor: "#000000",
267
+    proxiwashErrorColor: "rgba(213,8,0,0.57)",
268
+
269
+
257 270
     // Other
258 271
     borderRadiusBase: platform === "ios" ? 5 : 2,
259 272
     borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),

+ 23
- 0
package-lock.json View File

@@ -1098,6 +1098,24 @@
1098 1098
         }
1099 1099
       }
1100 1100
     },
1101
+    "@shoutem/theme": {
1102
+      "version": "0.11.3",
1103
+      "resolved": "https://registry.npmjs.org/@shoutem/theme/-/theme-0.11.3.tgz",
1104
+      "integrity": "sha512-2soc/w0QYWjvm+vFOemSAuDpRAzBW/sTtNkkqwwZfz0VcNH78FWnUfyMOJetmr1aiulFoE87JYeyHlfOhxKbbw==",
1105
+      "requires": {
1106
+        "hoist-non-react-statics": "^1.0.5",
1107
+        "lodash": "~4.17.4",
1108
+        "prop-types": "^15.5.10",
1109
+        "tinycolor2": "^1.3.0"
1110
+      },
1111
+      "dependencies": {
1112
+        "hoist-non-react-statics": {
1113
+          "version": "1.2.0",
1114
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz",
1115
+          "integrity": "sha1-qkSM8JhtVcxAdzsXF0t90GbLfPs="
1116
+        }
1117
+      }
1118
+    },
1101 1119
     "@types/fbemitter": {
1102 1120
       "version": "2.0.32",
1103 1121
       "resolved": "https://registry.npmjs.org/@types/fbemitter/-/fbemitter-2.0.32.tgz",
@@ -8068,6 +8086,11 @@
8068 8086
       "resolved": "https://registry.npmjs.org/tiny-queue/-/tiny-queue-0.2.1.tgz",
8069 8087
       "integrity": "sha1-JaZ/LG4lOyypQZd7XvdELvl6YEY="
8070 8088
     },
8089
+    "tinycolor2": {
8090
+      "version": "1.4.1",
8091
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
8092
+      "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
8093
+    },
8071 8094
     "tmp": {
8072 8095
       "version": "0.0.33",
8073 8096
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",

+ 2
- 0
package.json View File

@@ -9,6 +9,7 @@
9 9
   },
10 10
   "dependencies": {
11 11
     "@expo/vector-icons": "latest",
12
+    "@shoutem/theme": "latest",
12 13
     "expo": "^33.0.0",
13 14
     "expo-font": "^5.0.1",
14 15
     "expo-localization": "^5.0.1",
@@ -16,6 +17,7 @@
16 17
     "i18n-js": "^3.3.0",
17 18
     "i18next": "latest",
18 19
     "native-base": "latest",
20
+    "native-base-shoutem-theme": "latest",
19 21
     "react": "16.8.3",
20 22
     "react-dom": "^16.8.6",
21 23
     "react-i18next": "latest",

+ 120
- 168
screens/About/AboutScreen.js View File

@@ -1,10 +1,11 @@
1 1
 import React from 'react';
2
-import {Platform, StyleSheet, Linking, Alert} from 'react-native';
3
-import {Container, Content, Text, Card, CardItem, Body, Icon, Left, Right, Thumbnail, H1} from 'native-base';
2
+import {Platform, StyleSheet, Linking, Alert, FlatList} from 'react-native';
3
+import {Container, Content, Text, Card, CardItem, Body, Icon, Left, Right, Thumbnail, H1, ListItem} from 'native-base';
4 4
 import CustomHeader from "../../components/CustomHeader";
5 5
 import i18n from "i18n-js";
6 6
 import appJson from '../../app';
7 7
 import packageJson from '../../package';
8
+import CustomMaterialIcon from "../../components/CustomMaterialIcon";
8 9
 
9 10
 const links = {
10 11
     appstore: 'https://qwant.com',
@@ -19,11 +20,105 @@ const links = {
19 20
     react: 'https://facebook.github.io/react-native/',
20 21
 };
21 22
 
23
+function openWebLink(link) {
24
+    Linking.openURL(link).catch((err) => console.error('Error opening link', err));
25
+}
22 26
 
23 27
 export default class AboutScreen extends React.Component {
24 28
 
25
-    openWebLink(link) {
26
-        Linking.openURL(link).catch((err) => console.error('Error opening link', err));
29
+    appData = [
30
+        {
31
+            onPressCallback: () => openWebLink(Platform.OS === "ios" ? links.appstore : links.playstore),
32
+            icon: Platform.OS === "ios" ? 'apple' : 'google-play',
33
+            text: Platform.OS === "ios" ? i18n.t('aboutScreen.appstore') : i18n.t('aboutScreen.playstore'),
34
+            showChevron: true
35
+        },
36
+        {
37
+            onPressCallback: () => openWebLink(links.gitlab),
38
+            icon: 'git',
39
+            text: 'Gitlab',
40
+            showChevron: true
41
+        },
42
+        {
43
+            onPressCallback: () => openWebLink(links.bugs),
44
+            icon: 'bug',
45
+            text: i18n.t('aboutScreen.bugs'),
46
+            showChevron: true
47
+        },
48
+        {
49
+            onPressCallback: () => openWebLink(links.changelog),
50
+            icon: 'refresh',
51
+            text: i18n.t('aboutScreen.changelog'),
52
+            showChevron: true
53
+        },
54
+        {
55
+            onPressCallback: () => openWebLink(links.license),
56
+            icon: 'file-document',
57
+            text: i18n.t('aboutScreen.license'),
58
+            showChevron: true
59
+        },
60
+    ];
61
+
62
+    authorData = [
63
+        {
64
+            onPressCallback: () => Alert.alert('Coucou', 'Whaou'),
65
+            icon: 'account-circle',
66
+            text: 'Arnaud VERGNET',
67
+            showChevron: false
68
+        },
69
+        {
70
+            onPressCallback: () => openWebLink(links.mail),
71
+            icon: 'email',
72
+            text: i18n.t('aboutScreen.mail'),
73
+            showChevron: true
74
+        },
75
+        {
76
+            onPressCallback: () => openWebLink(links.linkedin),
77
+            icon: 'linkedin',
78
+            text: 'Linkedin',
79
+            showChevron: true
80
+        },
81
+        {
82
+            onPressCallback: () => openWebLink(links.facebook),
83
+            icon: 'facebook',
84
+            text: 'Facebook',
85
+            showChevron: true
86
+        },
87
+    ];
88
+
89
+    technoData = [
90
+        {
91
+            onPressCallback: () => openWebLink(links.react),
92
+            icon: 'react',
93
+            text: i18n.t('aboutScreen.reactNative'),
94
+            showChevron: false
95
+        },
96
+        {
97
+            onPressCallback: () => this.props.navigation.navigate('AboutDependenciesScreen', {data: packageJson.dependencies}),
98
+            icon: 'developer-board',
99
+            text: i18n.t('aboutScreen.libs'),
100
+            showChevron: true
101
+        },
102
+    ];
103
+
104
+    getCardItem(onPressCallback, icon, text, showChevron) {
105
+        return (
106
+            <CardItem button
107
+                      onPress={onPressCallback}>
108
+                <Left>
109
+                    <CustomMaterialIcon icon={icon}/>
110
+                    <Text>{text}</Text>
111
+                </Left>
112
+                {showChevron ?
113
+                    <Right>
114
+                        <CustomMaterialIcon icon="chevron-right"
115
+                                            fontSize={20}/>
116
+                    </Right>
117
+                    :
118
+                    <Right/>
119
+                }
120
+            </CardItem>)
121
+            ;
27 122
     }
28 123
 
29 124
     render() {
@@ -44,182 +139,39 @@ export default class AboutScreen extends React.Component {
44 139
                                 </Body>
45 140
                             </Left>
46 141
                         </CardItem>
47
-                        <CardItem button
48
-                                  onPress={() => this.openWebLink(Platform.OS === "ios" ? links.appstore : links.playstore)}>
49
-                            <Left>
50
-                                <Icon active name={Platform.OS === "ios" ? 'apple' : 'google-play'}
51
-                                      type={'MaterialCommunityIcons'}
52
-                                      style={{color: "#777", fontSize: 26, width: 30}}
53
-                                />
54
-                                <Text>{Platform.OS === "ios" ? i18n.t('aboutScreen.appstore') : i18n.t('aboutScreen.playstore')}</Text>
55
-                            </Left>
56
-                            <Right>
57
-                                <Icon name="chevron-right"
58
-                                      type={'MaterialCommunityIcons'}/>
59
-                            </Right>
60
-                        </CardItem>
61
-                        <CardItem button
62
-                                  onPress={() => this.openWebLink(links.gitlab)}>
63
-                            <Left>
64
-                                <Icon active name="git"
65
-                                      type={'MaterialCommunityIcons'}
66
-                                      style={{color: "#777", fontSize: 26, width: 30}}
67
-                                />
68
-                                <Text>Gitlab</Text>
69
-                            </Left>
70
-                            <Right>
71
-                                <Icon name="chevron-right"
72
-                                      type={'MaterialCommunityIcons'}/>
73
-                            </Right>
74
-                        </CardItem>
75
-                        <CardItem button
76
-                                  onPress={() => this.openWebLink(links.bugs)}>
77
-                            <Left>
78
-                                <Icon active name="bug"
79
-                                      type={'MaterialCommunityIcons'}
80
-                                      style={{color: "#777", fontSize: 26, width: 30}}
81
-                                />
82
-                                <Text>{i18n.t('aboutScreen.bugs')}</Text>
83
-                            </Left>
84
-                            <Right>
85
-                                <Icon name="chevron-right"
86
-                                      type={'MaterialCommunityIcons'}/>
87
-                            </Right>
88
-                        </CardItem>
89
-                        <CardItem button
90
-                                  onPress={() => this.openWebLink(links.changelog)}>
91
-                            <Left>
92
-                                <Icon active name="refresh"
93
-                                      type={'MaterialCommunityIcons'}
94
-                                      style={{color: "#777", fontSize: 26, width: 30}}
95
-                                />
96
-                                <Text>
97
-                                    {i18n.t('aboutScreen.changelog')}
98
-                                </Text>
99
-                            </Left>
100
-                            <Right>
101
-                                <Icon name="chevron-right"
102
-                                      type={'MaterialCommunityIcons'}/>
103
-                            </Right>
104
-                        </CardItem>
105
-                        <CardItem button
106
-                                  onPress={() => this.openWebLink(links.license)}>
107
-                            <Left>
108
-                                <Icon active name="file-document"
109
-                                      type={'MaterialCommunityIcons'}
110
-                                      style={{color: "#777", fontSize: 26, width: 30}}
111
-                                />
112
-                                <Text>
113
-                                    {i18n.t('aboutScreen.license')}
114
-                                </Text>
115
-                            </Left>
116
-                            <Right>
117
-                                <Icon name="chevron-right"
118
-                                      type={'MaterialCommunityIcons'}/>
119
-                            </Right>
120
-                        </CardItem>
142
+                        <FlatList
143
+                            data={this.appData}
144
+                            keyExtractor={(item) => item.icon}
145
+                            renderItem={({item}) =>
146
+                                this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron)
147
+                            }
148
+                        />
121 149
                     </Card>
122 150
 
123 151
                     <Card>
124 152
                         <CardItem header>
125 153
                             <Text>{i18n.t('aboutScreen.author')}</Text>
126 154
                         </CardItem>
127
-                        <CardItem button
128
-                        onPress={() => Alert.alert('Coucou', 'Whaou')}>
129
-                            <Left>
130
-                                <Icon active name="account-circle"
131
-                                      type={'MaterialCommunityIcons'}
132
-                                      style={{color: "#777", fontSize: 26, width: 30}}
133
-                                />
134
-                                <Text>Arnaud VERGNET</Text>
135
-                            </Left>
136
-                        </CardItem>
137
-                        <CardItem button
138
-                                  onPress={() => this.openWebLink(links.mail)}>
139
-                            <Left>
140
-                                <Icon active name="email"
141
-                                      type={'MaterialCommunityIcons'}
142
-                                      style={{color: "#777", fontSize: 26, width: 30}}
143
-                                />
144
-                                <Text>
145
-                                    {i18n.t('aboutScreen.mail')}
146
-                                </Text>
147
-                            </Left>
148
-                            <Right>
149
-                                <Icon name="chevron-right"
150
-                                      type={'MaterialCommunityIcons'}/>
151
-                            </Right>
152
-                        </CardItem>
153
-                        <CardItem button
154
-                                  onPress={() => this.openWebLink(links.linkedin)}>
155
-                            <Left>
156
-                                <Icon active name="linkedin"
157
-                                      type={'MaterialCommunityIcons'}
158
-                                      style={{color: "#777", fontSize: 26, width: 30}}
159
-                                />
160
-                                <Text>
161
-                                    Linkedin
162
-                                </Text>
163
-                            </Left>
164
-                            <Right>
165
-                                <Icon name="chevron-right"
166
-                                      type={'MaterialCommunityIcons'}/>
167
-                            </Right>
168
-                        </CardItem>
169
-                        <CardItem button
170
-                                  onPress={() => this.openWebLink(links.facebook)}>
171
-                            <Left>
172
-                                <Icon active name="facebook"
173
-                                      type={'MaterialCommunityIcons'}
174
-                                      style={{color: "#777", fontSize: 26, width: 30}}
175
-                                />
176
-                                <Text>
177
-                                    Facebook
178
-                                </Text>
179
-                            </Left>
180
-                            <Right>
181
-                                <Icon name="chevron-right"
182
-                                      type={'MaterialCommunityIcons'}/>
183
-                            </Right>
184
-                        </CardItem>
155
+                        <FlatList
156
+                            data={this.authorData}
157
+                            keyExtractor={(item) => item.icon}
158
+                            renderItem={({item}) =>
159
+                                this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron)
160
+                            }
161
+                        />
185 162
                     </Card>
186 163
 
187 164
                     <Card>
188 165
                         <CardItem header>
189 166
                             <Text>{i18n.t('aboutScreen.technologies')}</Text>
190 167
                         </CardItem>
191
-                        <CardItem button
192
-                                  onPress={() => this.openWebLink(links.react)}>
193
-                            <Left>
194
-                                <Icon active name="react"
195
-                                      type={'MaterialCommunityIcons'}
196
-                                      style={{color: "#777", fontSize: 26, width: 30}}
197
-                                />
198
-                                <Text>
199
-                                    {i18n.t('aboutScreen.reactNative')}
200
-                                </Text>
201
-                            </Left>
202
-                            <Right>
203
-                                <Icon name="chevron-right"
204
-                                      type={'MaterialCommunityIcons'}/>
205
-                            </Right>
206
-                        </CardItem>
207
-                        <CardItem button
208
-                                  onPress={() => this.props.navigation.navigate('AboutDependenciesScreen', {data: packageJson.dependencies})}>
209
-                            <Left>
210
-                                <Icon active name="developer-board"
211
-                                      type={'MaterialCommunityIcons'}
212
-                                      style={{color: "#777", fontSize: 26, width: 30}}
213
-                                />
214
-                                <Text>
215
-                                    {i18n.t('aboutScreen.libs')}
216
-                                </Text>
217
-                            </Left>
218
-                            <Right>
219
-                                <Icon name="chevron-right"
220
-                                      type={'MaterialCommunityIcons'}/>
221
-                            </Right>
222
-                        </CardItem>
168
+                        <FlatList
169
+                            data={this.technoData}
170
+                            keyExtractor={(item) => item.icon}
171
+                            renderItem={({item}) =>
172
+                                this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron)
173
+                            }
174
+                        />
223 175
                     </Card>
224 176
                 </Content>
225 177
             </Container>

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

@@ -1,5 +1,5 @@
1 1
 import React from 'react';
2
-import {Container, Text, Content, ListItem, Left, Thumbnail, Right, Button, Icon} from 'native-base';
2
+import {Container, Text, Content, ListItem, Left, Thumbnail, Right, Body, Icon} from 'native-base';
3 3
 import CustomHeader from "../../components/CustomHeader";
4 4
 import {AsyncStorage, FlatList, View} from "react-native";
5 5
 import Touchable from 'react-native-platform-touchable';
@@ -181,10 +181,12 @@ export default class ProximoMainScreen extends React.Component {
181 181
                             >
182 182
                                 <Left>
183 183
                                     <Thumbnail square source={{uri: IMG_URL + item.name + '.jpg'}}/>
184
+                                </Left>
185
+                                <Body>
184 186
                                     <Text style={{marginLeft: 20}}>
185 187
                                         {item.name}
186 188
                                     </Text>
187
-                                </Left>
189
+                                </Body>
188 190
                                 <Right style={{flex: 1}}>
189 191
                                     <Text>
190 192
                                         {item.price}€

+ 11
- 12
screens/Proximo/ProximoMainScreen.js View File

@@ -3,6 +3,7 @@ import {StyleSheet, RefreshControl, FlatList} from 'react-native';
3 3
 import {Container, Text, Content, ListItem, Left, Right, Body, Badge, Icon, Toast} from 'native-base';
4 4
 import CustomHeader from "../../components/CustomHeader";
5 5
 import i18n from "i18n-js";
6
+import CustomMaterialIcon from "../../components/CustomMaterialIcon";
6 7
 
7 8
 const DATA_URL = "https://etud.insa-toulouse.fr/~vergnet/appli-amicale/dataProximo.json";
8 9
 
@@ -20,6 +21,7 @@ export default class ProximoMainScreen extends React.Component {
20 21
         super(props);
21 22
         this.state = {
22 23
             refreshing: false,
24
+            firstLoading: true,
23 25
             data: {},
24 26
         };
25 27
     }
@@ -64,7 +66,10 @@ export default class ProximoMainScreen extends React.Component {
64 66
     _onRefresh = () => {
65 67
         this.setState({refreshing: true});
66 68
         this.readData().then(() => {
67
-            this.setState({refreshing: false});
69
+            this.setState({
70
+                refreshing: false,
71
+                firstLoading: false
72
+            });
68 73
             Toast.show({
69 74
                 text: i18n.t('proximoScreen.listUpdated'),
70 75
                 buttonText: 'OK',
@@ -100,9 +105,10 @@ export default class ProximoMainScreen extends React.Component {
100 105
                             }}
101 106
                         >
102 107
                             <Left>
103
-                                <Icon name={typesIcons[item.type] ? typesIcons[item.type] : typesIcons.Default}
104
-                                      type={'MaterialCommunityIcons'}
105
-                                      style={styles.icon}/>
108
+                                <CustomMaterialIcon
109
+                                    icon={typesIcons[item.type] ? typesIcons[item.type] : typesIcons.Default}
110
+                                    fontSize={30}
111
+                                />
106 112
                             </Left>
107 113
                             <Body>
108 114
                                 <Text>
@@ -113,8 +119,7 @@ export default class ProximoMainScreen extends React.Component {
113 119
                                 </Text></Badge>
114 120
                             </Body>
115 121
                             <Right>
116
-                                <Icon name="chevron-right"
117
-                                      type={'MaterialCommunityIcons'}/>
122
+                                <CustomMaterialIcon icon="chevron-right"/>
118 123
                             </Right>
119 124
                         </ListItem>}
120 125
                 />
@@ -123,9 +128,3 @@ export default class ProximoMainScreen extends React.Component {
123 128
     }
124 129
 }
125 130
 
126
-const styles = StyleSheet.create({
127
-    icon: {
128
-        fontSize: 30,
129
-        width: 30
130
-    }
131
-});

+ 25
- 14
screens/ProxiwashScreen.js View File

@@ -1,10 +1,12 @@
1 1
 import React from 'react';
2
-import {SectionList, RefreshControl, StyleSheet, View, ScrollView} from 'react-native';
3
-import {Badge, Body, Container, Content, Icon, Left, ListItem, Right, Text, Toast, H2, Button} from 'native-base';
2
+import {SectionList, RefreshControl, View} from 'react-native';
3
+import {Body, Container, Icon, Left, ListItem, Right, Text, Toast, H2, Button} from 'native-base';
4 4
 import CustomHeader from "../components/CustomHeader";
5
+import ThemeManager from '../utils/ThemeManager';
5 6
 import NotificationsManager from '../utils/NotificationsManager';
6 7
 import i18n from "i18n-js";
7 8
 import {AsyncStorage} from 'react-native'
9
+import CustomMaterialIcon from "../components/CustomMaterialIcon";
8 10
 
9 11
 const DATA_URL = "https://etud.insa-toulouse.fr/~vergnet/appli-amicale/dataProxiwash.json";
10 12
 const WATCHED_MACHINES_PREFKEY = "proxiwash.watchedMachines";
@@ -28,11 +30,12 @@ export default class ProxiwashScreen extends React.Component {
28 30
 
29 31
     constructor(props) {
30 32
         super(props);
31
-        stateColors[MACHINE_STATES.TERMINE] = 'rgba(54,165,22,0.4)';
32
-        stateColors[MACHINE_STATES.DISPONIBLE] = '#ffffff';
33
-        stateColors[MACHINE_STATES.FONCTIONNE] = 'rgba(241,237,41,0.4)';
34
-        stateColors[MACHINE_STATES.HS] = '#a2a2a2';
35
-        stateColors[MACHINE_STATES.ERREUR] = 'rgba(204,7,0,0.4)';
33
+        let colors = ThemeManager.getInstance().getCurrentThemeVariables();
34
+        stateColors[MACHINE_STATES.TERMINE] = colors.proxiwashFinishedColor;
35
+        stateColors[MACHINE_STATES.DISPONIBLE] = colors.proxiwashReadyColor;
36
+        stateColors[MACHINE_STATES.FONCTIONNE] = colors.proxiwashRunningColor;
37
+        stateColors[MACHINE_STATES.HS] = colors.proxiwashBrokenColor;
38
+        stateColors[MACHINE_STATES.ERREUR] = colors.proxiwashErrorColor;
36 39
 
37 40
         stateStrings[MACHINE_STATES.TERMINE] = i18n.t('proxiwashScreen.states.finished');
38 41
         stateStrings[MACHINE_STATES.DISPONIBLE] = i18n.t('proxiwashScreen.states.ready');
@@ -41,6 +44,7 @@ export default class ProxiwashScreen extends React.Component {
41 44
         stateStrings[MACHINE_STATES.ERREUR] = i18n.t('proxiwashScreen.states.error');
42 45
         this.state = {
43 46
             refreshing: false,
47
+            firstLoading: true,
44 48
             data: {},
45 49
             machinesWatched: [],
46 50
         };
@@ -78,7 +82,10 @@ export default class ProxiwashScreen extends React.Component {
78 82
     _onRefresh = () => {
79 83
         this.setState({refreshing: true});
80 84
         this.readData().then(() => {
81
-            this.setState({refreshing: false});
85
+            this.setState({
86
+                refreshing: false,
87
+                firstLoading: false
88
+            });
82 89
             Toast.show({
83 90
                 text: i18n.t('proxiwashScreen.listUpdated'),
84 91
                 buttonText: 'OK',
@@ -158,13 +165,12 @@ export default class ProxiwashScreen extends React.Component {
158 165
                     alignSelf: 'flex-end',
159 166
                     right: 0,
160 167
                     width: item.donePercent !== '' ? (100 - parseInt(item.donePercent)).toString() + '%' : 0,
161
-                    backgroundColor: '#fff'
168
+                    backgroundColor: ThemeManager.getInstance().getCurrentThemeVariables().containerBgColor
162 169
                 }}>
163 170
                 </View>
164 171
                 <Left>
165
-                    <Icon name={section.title === data[0].title ? 'tumble-dryer' : 'washing-machine'}
166
-                          type={'MaterialCommunityIcons'}
167
-                          style={{fontSize: 30, width: 30}}
172
+                    <CustomMaterialIcon icon={section.title === data[0].title ? 'tumble-dryer' : 'washing-machine'}
173
+                                        fontSize={30}
168 174
                     />
169 175
                 </Left>
170 176
                 <Body>
@@ -214,12 +220,17 @@ export default class ProxiwashScreen extends React.Component {
214 220
                 extraData: this.state
215 221
             },
216 222
         ];
217
-        console.log(this.state.machinesWatched);
223
+        const loadingData = [
224
+            {
225
+                title: i18n.t('proxiwashScreen.loading'),
226
+                data: []
227
+            }
228
+        ];
218 229
         return (
219 230
             <Container>
220 231
                 <CustomHeader navigation={nav} title={'Proxiwash'}/>
221 232
                 <SectionList
222
-                    sections={data}
233
+                    sections={this.state.firstLoading ? loadingData : data}
223 234
                     keyExtractor={(item) => item.number}
224 235
                     refreshControl={
225 236
                         <RefreshControl

+ 15
- 9
screens/SettingsScreen.js View File

@@ -1,9 +1,10 @@
1 1
 import React from 'react';
2
-import {Alert} from 'react-native'
3
-import {Badge, Container, Content, Icon, Left, ListItem, Right, Text, List, CheckBox} from "native-base";
2
+import {Container, Content, Left, ListItem, Right, Text, List, CheckBox, Button} from "native-base";
4 3
 import CustomHeader from "../components/CustomHeader";
5 4
 import ThemeManager from '../utils/ThemeManager';
6 5
 import i18n from "i18n-js";
6
+import {NavigationActions, StackActions} from "react-navigation";
7
+import CustomMaterialIcon from "../components/CustomMaterialIcon";
7 8
 
8 9
 
9 10
 const nightModeKey = 'nightMode';
@@ -16,8 +17,18 @@ export default class SettingsScreen extends React.Component {
16 17
     toggleNightMode() {
17 18
         this.setState({nightMode: !this.state.nightMode});
18 19
         ThemeManager.getInstance().setNightmode(!this.state.nightMode);
19
-        Alert.alert(i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.restart'));
20
+        // Alert.alert(i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.restart'));
21
+        this.resetStack();
22
+    }
20 23
 
24
+    resetStack() {
25
+        const resetAction = StackActions.reset({
26
+            index: 0,
27
+            key: null,
28
+            actions: [NavigationActions.navigate({ routeName: 'Main' })],
29
+        });
30
+        this.props.navigation.dispatch(resetAction);
31
+        this.props.navigation.navigate('Settings');
21 32
     }
22 33
 
23 34
     render() {
@@ -32,12 +43,7 @@ export default class SettingsScreen extends React.Component {
32 43
                             onPress={() => this.toggleNightMode()}
33 44
                         >
34 45
                             <Left>
35
-                                <Icon
36
-                                    active
37
-                                    name={'theme-light-dark'}
38
-                                    type={'MaterialCommunityIcons'}
39
-                                    style={{color: "#777", fontSize: 26, width: 30}}
40
-                                />
46
+                                <CustomMaterialIcon icon={'theme-light-dark'} />
41 47
                                 <Text>
42 48
                                     {i18n.t('settingsScreen.nightMode')}
43 49
                                 </Text>

+ 1
- 0
translations/en.json View File

@@ -36,6 +36,7 @@
36 36
     "washers": "Washers",
37 37
     "min": "min",
38 38
     "listUpdated": "Machines state updated",
39
+    "loading": "Loading...",
39 40
     "states": {
40 41
       "finished": "FINISHED",
41 42
       "ready": "READY",

+ 1
- 0
translations/fr.json View File

@@ -36,6 +36,7 @@
36 36
     "washers": "Lave Linges",
37 37
     "min": "min",
38 38
     "listUpdated": "Etat des machines mis à jour",
39
+    "loading": "Chargement...",
39 40
     "states": {
40 41
       "finished": "TERMINE",
41 42
       "ready": "DISPONIBLE",

+ 4
- 0
utils/ThemeManager.js View File

@@ -53,4 +53,8 @@ export default class ThemeManager {
53 53
             return getTheme(platform);
54 54
     }
55 55
 
56
+    getCurrentThemeVariables() {
57
+        return this.getCurrentTheme().variables;
58
+    }
59
+
56 60
 };

Loading…
Cancel
Save