Browse Source

Improved banners and added one on the home screen

Arnaud Vergnet 3 years ago
parent
commit
06d01e98b0

+ 5
- 0
src/managers/AsyncStorageManager.js View File

@@ -59,6 +59,11 @@ export default class AsyncStorageManager {
59 59
             default: 'home',
60 60
             current: '',
61 61
         },
62
+        homeShowBanner: {
63
+            key: 'homeShowBanner',
64
+            default: '1',
65
+            current: '',
66
+        },
62 67
         proxiwashShowBanner: {
63 68
             key: 'proxiwashShowBanner',
64 69
             default: '1',

+ 71
- 13
src/screens/Home/HomeScreen.js View File

@@ -5,7 +5,7 @@ import {FlatList} from 'react-native';
5 5
 import i18n from "i18n-js";
6 6
 import DashboardItem from "../../components/Home/EventDashboardItem";
7 7
 import WebSectionList from "../../components/Screens/WebSectionList";
8
-import {withTheme} from 'react-native-paper';
8
+import {Avatar, Banner, withTheme} from 'react-native-paper';
9 9
 import FeedItem from "../../components/Home/FeedItem";
10 10
 import SquareDashboardItem from "../../components/Home/SmallDashboardItem";
11 11
 import PreviewEventDashboardItem from "../../components/Home/PreviewEventDashboardItem";
@@ -19,6 +19,9 @@ import type {CustomTheme} from "../../managers/ThemeManager";
19 19
 import {View} from "react-native-animatable";
20 20
 import ConnectionManager from "../../managers/ConnectionManager";
21 21
 import LogoutDialog from "../../components/Amicale/LogoutDialog";
22
+import {withCollapsible} from "../../utils/withCollapsible";
23
+import {Collapsible} from "react-navigation-collapsible";
24
+import AsyncStorageManager from "../../managers/AsyncStorageManager";
22 25
 // import DATA from "../dashboard_data.json";
23 26
 
24 27
 
@@ -95,10 +98,12 @@ type Props = {
95 98
     navigation: StackNavigationProp,
96 99
     route: { params: any, ... },
97 100
     theme: CustomTheme,
101
+    collapsibleStack: Collapsible,
98 102
 }
99 103
 
100 104
 type State = {
101 105
     dialogVisible: boolean,
106
+    bannerVisible: boolean,
102 107
 }
103 108
 
104 109
 /**
@@ -115,6 +120,7 @@ class HomeScreen extends React.Component<Props, State> {
115 120
 
116 121
     state = {
117 122
         dialogVisible: false,
123
+        bannerVisible: false,
118 124
     }
119 125
 
120 126
     constructor(props) {
@@ -140,6 +146,11 @@ class HomeScreen extends React.Component<Props, State> {
140 146
         this.props.navigation.addListener('focus', this.onScreenFocus);
141 147
         // Handle link open when home is focused
142 148
         this.props.navigation.addListener('state', this.handleNavigationParams);
149
+        setTimeout(this.onBannerTimeout, 2000);
150
+    }
151
+
152
+    onBannerTimeout = () => {
153
+        this.setState({bannerVisible: AsyncStorageManager.getInstance().preferences.homeShowBanner.current === "1"})
143 154
     }
144 155
 
145 156
     onScreenFocus = () => {
@@ -535,22 +546,46 @@ class HomeScreen extends React.Component<Props, State> {
535 546
             this.fabRef.current.onScroll(event);
536 547
     };
537 548
 
549
+    /**
550
+     * Callback used when closing the banner.
551
+     * This hides the banner and saves to preferences to prevent it from reopening
552
+     */
553
+    onHideBanner = () => {
554
+        this.setState({bannerVisible: false});
555
+        AsyncStorageManager.getInstance().savePref(
556
+            AsyncStorageManager.getInstance().preferences.homeShowBanner.key,
557
+            '0'
558
+        );
559
+    };
560
+
561
+    onLoginBanner = () => {
562
+        this.onHideBanner();
563
+        this.props.navigation.navigate("login", {nextScreen: "profile"});
564
+    }
565
+
538 566
     render() {
567
+        const {containerPaddingTop} = this.props.collapsibleStack;
539 568
         return (
540 569
             <View
541 570
                 style={{flex: 1}}
542 571
             >
543
-                <WebSectionList
544
-                    {...this.props}
545
-                    createDataset={this.createDataset}
546
-                    autoRefreshTime={REFRESH_TIME}
547
-                    refreshOnFocus={true}
548
-                    fetchUrl={DATA_URL}
549
-                    renderItem={this.getRenderItem}
550
-                    itemHeight={FEED_ITEM_HEIGHT}
551
-                    onScroll={this.onScroll}
552
-                    showError={false}
553
-                />
572
+                <View style={{
573
+                    position: "absolute",
574
+                    width: "100%",
575
+                    height: "100%",
576
+                }}>
577
+                    <WebSectionList
578
+                        {...this.props}
579
+                        createDataset={this.createDataset}
580
+                        autoRefreshTime={REFRESH_TIME}
581
+                        refreshOnFocus={true}
582
+                        fetchUrl={DATA_URL}
583
+                        renderItem={this.getRenderItem}
584
+                        itemHeight={FEED_ITEM_HEIGHT}
585
+                        onScroll={this.onScroll}
586
+                        showError={false}
587
+                    />
588
+                </View>
554 589
                 <AnimatedFAB
555 590
                     {...this.props}
556 591
                     ref={this.fabRef}
@@ -562,9 +597,32 @@ class HomeScreen extends React.Component<Props, State> {
562 597
                     visible={this.state.dialogVisible}
563 598
                     onDismiss={this.hideDisconnectDialog}
564 599
                 />
600
+                <Banner
601
+                    style={{
602
+                        marginTop: containerPaddingTop,
603
+                        backgroundColor: this.props.theme.colors.surface
604
+                    }}
605
+                    visible={this.state.bannerVisible}
606
+                    actions={[
607
+                        {
608
+                            label: i18n.t('homeScreen.loginBanner.login'),
609
+                            onPress: this.onLoginBanner,
610
+                        },
611
+                        {
612
+                            label: i18n.t('homeScreen.loginBanner.later'),
613
+                            onPress: this.onHideBanner,
614
+                        },
615
+                    ]}
616
+                    icon={() => <Avatar.Icon
617
+                        icon={'login'}
618
+                        size={50}
619
+                    />}
620
+                >
621
+                    {i18n.t('homeScreen.loginBanner.message')}
622
+                </Banner>
565 623
             </View>
566 624
         );
567 625
     }
568 626
 }
569 627
 
570
-export default withTheme(HomeScreen);
628
+export default withCollapsible(withTheme(HomeScreen));

+ 16
- 6
src/screens/Planex/PlanexScreen.js View File

@@ -150,9 +150,7 @@ class PlanexScreen extends React.Component<Props, State> {
150 150
             props.navigation.setOptions({title: currentGroup.name})
151 151
         }
152 152
         this.state = {
153
-            bannerVisible:
154
-                AsyncStorageManager.getInstance().preferences.planexShowBanner.current === '1' &&
155
-                AsyncStorageManager.getInstance().preferences.defaultStartScreen.current !== 'Planex',
153
+            bannerVisible: false,
156 154
             dialogVisible: false,
157 155
             dialogTitle: "",
158 156
             dialogMessage: "",
@@ -163,6 +161,15 @@ class PlanexScreen extends React.Component<Props, State> {
163 161
 
164 162
     componentDidMount() {
165 163
         this.props.navigation.addListener('focus', this.onScreenFocus);
164
+        setTimeout(this.onBannerTimeout, 2000);
165
+    }
166
+
167
+    onBannerTimeout = () => {
168
+        this.setState({
169
+            bannerVisible:
170
+                AsyncStorageManager.getInstance().preferences.planexShowBanner.current === '1' &&
171
+                AsyncStorageManager.getInstance().preferences.defaultStartScreen.current !== 'Planex'
172
+        })
166 173
     }
167 174
 
168 175
     onScreenFocus = () => {
@@ -315,7 +322,10 @@ class PlanexScreen extends React.Component<Props, State> {
315 322
                         : <View style={{height: '100%'}}>{this.getWebView()}</View>}
316 323
                 </View>
317 324
                 <Banner
318
-                    style={{marginTop: containerPaddingTop,}}
325
+                    style={{
326
+                        marginTop: containerPaddingTop,
327
+                        backgroundColor: this.props.theme.colors.surface
328
+                    }}
319 329
                     visible={this.state.bannerVisible}
320 330
                     actions={[
321 331
                         {
@@ -329,7 +339,7 @@ class PlanexScreen extends React.Component<Props, State> {
329 339
 
330 340
                     ]}
331 341
                     icon={() => <Avatar.Icon
332
-                        icon={'information'}
342
+                        icon={'power'}
333 343
                         size={40}
334 344
                     />}
335 345
                 >
@@ -351,4 +361,4 @@ class PlanexScreen extends React.Component<Props, State> {
351 361
     }
352 362
 }
353 363
 
354
-export default withCollapsible(withTheme(PlanexScreen));
364
+export default withCollapsible(withTheme(PlanexScreen));

+ 12
- 4
src/screens/Proxiwash/ProxiwashScreen.js View File

@@ -68,7 +68,7 @@ class ProxiwashScreen extends React.Component<Props, State> {
68 68
         refreshing: false,
69 69
         modalCurrentDisplayItem: null,
70 70
         machinesWatched: JSON.parse(AsyncStorageManager.getInstance().preferences.proxiwashWatchedMachines.current),
71
-        bannerVisible: AsyncStorageManager.getInstance().preferences.proxiwashShowBanner.current === '1',
71
+        bannerVisible: false,
72 72
     };
73 73
 
74 74
     /**
@@ -107,6 +107,11 @@ class ProxiwashScreen extends React.Component<Props, State> {
107 107
                     <Item title="information" iconName="information" onPress={this.onAboutPress}/>
108 108
                 </MaterialHeaderButtons>,
109 109
         });
110
+        setTimeout(this.onBannerTimeout, 2000);
111
+    }
112
+
113
+    onBannerTimeout = () => {
114
+        this.setState({bannerVisible: AsyncStorageManager.getInstance().preferences.proxiwashShowBanner.current === "1"})
110 115
     }
111 116
 
112 117
     /**
@@ -417,16 +422,19 @@ class ProxiwashScreen extends React.Component<Props, State> {
417 422
                         updateData={this.state.machinesWatched.length}/>
418 423
                 </View>
419 424
                 <Banner
420
-                    style={{marginTop: containerPaddingTop,}}
425
+                    style={{
426
+                        marginTop: containerPaddingTop,
427
+                        backgroundColor: this.props.theme.colors.surface
428
+                    }}
421 429
                     visible={this.state.bannerVisible}
422 430
                     actions={[
423 431
                         {
424
-                            label: 'OK',
432
+                            label: i18n.t('proxiwashScreen.bannerButton'),
425 433
                             onPress: this.onHideBanner,
426 434
                         },
427 435
                     ]}
428 436
                     icon={() => <Avatar.Icon
429
-                        icon={'information'}
437
+                        icon={'bell'}
430 438
                         size={40}
431 439
                     />}
432 440
                 >

+ 6
- 0
translations/en.json View File

@@ -109,6 +109,11 @@
109 109
       "amicaleTitle": "The Amicale",
110 110
       "amicaleConnect": "Login",
111 111
       "amicaleConnected": "See available services"
112
+    },
113
+    "loginBanner": {
114
+      "login": "Login",
115
+      "later": "Later",
116
+      "message": "Login to your Amicale account to get access to more services!"
112 117
     }
113 118
   },
114 119
   "aboutScreen": {
@@ -174,6 +179,7 @@
174 179
     "enableNotificationsTip": "Click on a running machine to enable notifications",
175 180
     "numAvailable": "available",
176 181
     "numAvailablePlural": "available",
182
+    "bannerButton": "Got it!",
177 183
     "modal": {
178 184
       "enableNotifications": "Notify me",
179 185
       "disableNotifications": "Stop notifications",

+ 7
- 0
translations/fr.json View File

@@ -109,7 +109,13 @@
109 109
       "amicaleTitle": "L'Amicale",
110 110
       "amicaleConnect": "Se connecter",
111 111
       "amicaleConnected": "Voir les services disponibles"
112
+    },
113
+    "loginBanner": {
114
+      "login": "Se Connecter",
115
+      "later": "Plus Tard",
116
+      "message": "Connectez-vous à votre compte Amicale pour profiter de plus de services !"
112 117
     }
118
+
113 119
   },
114 120
   "aboutScreen": {
115 121
     "buttonDesc": "Informations sur l'appli et son créateur",
@@ -174,6 +180,7 @@
174 180
     "enableNotificationsTip": "Cliquez sur une machine en cours pour activer les notifications",
175 181
     "numAvailable": "disponible",
176 182
     "numAvailablePlural": "disponibles",
183
+    "bannerButton": "Compris !",
177 184
     "modal": {
178 185
       "enableNotifications": "Me Notifier",
179 186
       "disableNotifications": "Désactiver les  notifications",

Loading…
Cancel
Save