LUMI Witelabel APP UI Enhancement

https://dev.wormwood.com.sg/zentao/task-view-339.html

Strides-APP/app/components/BottomModal.js

@@ -8,6 +8,7 @@ export const ModalProps = {
   animationOut: "fadeOut",
   propagateSwipe: true,
   useNativeDriver: !isIOS,
+  statusBarTranslucent: true,
   hideModalContentWhileAnimating: true
 }
 
@@ -24,6 +25,7 @@ export default BottomModal = ({
       onBackButtonPress={onHide}
       onBackdropPress={onHide}
       useNativeDriver={!isIOS}
+      statusBarTranslucent={true}
       backdropOpacity={backdropOpacity}
       style={style}>
       <View style={contentStyle}>

Strides-APP/app/components/Dialog.js

@@ -18,10 +18,6 @@ const maxWidth = _maxWidth > maxDef ? maxDef: _maxWidth;
 const BUTTON_OK = 'ok';
 const BUTTON_CANCEL = 'cancel';
 
-export const getDialogWidth = () => {
-  return maxWidth;
-}
-
 /**
  * 显示一个弹窗
  * @param {*} props 参数{title, message, ok, cancel, showCancel, callback(button)}

Strides-APP/app/components/Dropdown.js

@@ -1,8 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { FlatList, Keyboard, Pressable, StyleSheet, Text, View } from 'react-native';
-import Modal from 'react-native-modal';
+import { FlatList, Keyboard, Pressable, StyleSheet, Modal, View, Text } from 'react-native';
 import Button from './Button';
-import Dialog, { getDialogWidth } from './Dialog';
+import Dialog from './Dialog';
 import TextView from './TextView';
 import app from '../../app.json';
 
@@ -169,25 +168,29 @@ export default Dropdown = ({
         }
       </Pressable>
       <Modal
-        isVisible={visible}
-        onTouchOutside={() => showDialog(false)}
-        onBackdropPress={() => showDialog(false)}
-        onBackButtonPress={() => showDialog(false)}
-        {...Dialog.modalProps}
-      >
+        visible={visible}
+        transparent={true}
+        animationType="fade"
+        statusBarTranslucent={true}>
         <View style={styles.dialog}>
-          { title !== '' && <TextView style={styles.title}>{title}</TextView> }
-          <FlatList
-            data={list}
-            ref={refFlat}
-            renderItem={renderItem}
-            initialScrollIndex={currentIndex}
-            keyExtractor={(item, index) => index}
-            style={{maxHeight: $vh(55)}}
-            getItemLayout={(data, index) => (
-              {length: itemHeight, offset: itemHeight * index, index}
-            )}
-          />
+          <Text
+            style={StyleSheet.absoluteFillObject}
+            onPress={() => showDialog(false)}>
+          </Text>
+          <View style={styles.dialogContent}>
+            { title !== '' && <TextView style={styles.title}>{title}</TextView> }
+            <FlatList
+              data={list}
+              ref={refFlat}
+              renderItem={renderItem}
+              initialScrollIndex={currentIndex}
+              keyExtractor={(item, index) => index}
+              style={{maxHeight: $vh(55)}}
+              getItemLayout={(data, index) => (
+                {length: itemHeight, offset: itemHeight * index, index}
+              )}
+            />
+          </View>
         </View>
       </Modal>
     </>
@@ -196,7 +199,13 @@ export default Dropdown = ({
 
 const styles = StyleSheet.create({
   dialog: {
-    width: getDialogWidth(),
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0,0,0,.6)'
+  },
+  dialogContent: {
+    width: Dialog.dialogWidth,
     marginLeft: 'auto',
     marginRight: 'auto',
     paddingTop: isIOS ? 12 : 8,

Strides-APP/app/components/ModalPortal.js

@@ -143,24 +143,28 @@ export default class ModalPortal extends Component {
     return (
       <>
         <Modal
-          style={{zIndex: 900}}
+          style={{margin: 0, zIndex: 900}}
           isVisible={this.state.showDialog}
+          deviceHeight={$height + statusHeight}
           avoidKeyboard={true}
           animationIn={"fadeIn"}
           animationOut={"fadeOut"}
           useNativeDriver={true}
+          statusBarTranslucent={true}
           onBackButtonPress={() => this.onBackPress()}
           onModalHide={() => this.onModalHide()}>
           {this.state.children}
         </Modal>
         <Modal
-          style={{zIndex: 900}}
+          style={{margin: 0, zIndex: 901}}
           isVisible={this.state.showLoading}
+          deviceHeight={$height + statusHeight}
           animationIn="fadeIn"
           animationOut="fadeOut"
           useNativeDriver={true}
           animationInTiming={80}
           animationOutTiming={100}
+          statusBarTranslucent={true}
           onBackButtonPress={() => this.onBackPress()}>
           {this.state.loadChildren}
         </Modal>

Strides-APP/app/components/MyStatusBar.js

@@ -3,15 +3,17 @@
  * @邠心vbe on 2023/02/15
  */
 import React, { Component } from 'react';
-import { StatusBar } from 'react-native';
+import { Animated, StatusBar } from 'react-native';
+import TextView from './TextView';
 
 let statusBar;
 export default class MyStatusBar extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      statusTheme: themeStatusBar,
-      statusColor: colorPrimaryDark
+      statusTheme: "dark-content", //themeStatusBar,
+      statusColor: "transparent", //colorPrimaryDark,
+      isTranslucent: true
     };
     statusBar = this;
   }
@@ -44,6 +46,13 @@ export default class MyStatusBar extends Component {
     statusBar.setStatusBarThemes(theme, color);
   }
 
+  /**
+   * 设置透明状态栏
+   */
+  static setTranslucentStatusBar() {
+    statusBar.setStatusBarThemes(MyStatusBar.DARK_STYLE, "transparent", true);
+  }
+
   setStatusBarColor(color) {
     this.setState({
       statusColor: color
@@ -56,16 +65,20 @@ export default class MyStatusBar extends Component {
     })
   }
 
-  setStatusBarThemes(theme, color) {
+  setStatusBarThemes(theme, color, trans=true) {
     this.setState({
       statusColor: color,
-      statusTheme: theme
+      statusTheme: theme,
+      isTranslucent: trans
     })
   }
 
   render() {
     return (
-      <StatusBar barStyle={this.state.statusTheme} backgroundColor={this.state.statusColor}/>
+      <StatusBar
+        barStyle={this.state.statusTheme}
+        translucent={this.state.isTranslucent}
+        backgroundColor={this.state.statusColor}/>
     );
   }
 }

Strides-APP/app/components/Toolbar.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Image, Pressable, StyleSheet, View } from 'react-native';
+import { Pressable, StyleSheet, View } from 'react-native';
 import TopChargeBackground from '../icons/TopChargeBackground';
+import HeaderTitle from './HeaderTitle';
 
 export const BackButton = ({style=Styles.backIcon, color=pageTitleTint, children, onPress}) => {
   return (
@@ -56,16 +57,44 @@ export const StationBack = ({bottom = 24, scale=1.0}) => {
   );
 }
 
+export default Toolbar = ({
+  title,
+  scope,
+  showBack=true,
+  rightIcon,
+  onBackPress
+}) => {
+  return (
+    <View style={Styles.toolbar}>
+      { showBack &&
+        <BackButton onPress={onBackPress}/>
+      }
+      <HeaderTitle scope={scope} title={title} style={Styles.titleText}/>
+      { rightIcon
+      ? rightIcon()
+      : showBack
+      ? <View style={Styles.backIcon}>
+          <MaterialIcons
+            name={'arrow-back-ios'}
+            size={16}
+            color={'transparent'} />
+        </View>
+      : <></>
+      }
+    </View>
+  )
+}
+
 export const Styles = StyleSheet.create({
   toolbar: {
-    height: toolbarSize,
+    height: toolbarSize + statusHeight,
     paddingLeft: 2,
     paddingRight: 2,
-    paddingTop: isIOS ? statusHeight : 0,
+    paddingTop: statusHeight,
     alignItems: 'center',
     flexDirection: 'row',
     justifyContent: 'center',
-    backgroundColor: colorThemes
+    backgroundColor: colorPrimary
   },
   backIcon: {
     width: 48,
@@ -90,20 +119,10 @@ export const Styles = StyleSheet.create({
   },
   iconOpacity: {
     opacity: 0.9
+  },
+  titleText: {
+    flex: 1,
+    color: pageTitleTint,
+    paddingLeft: isIOS ? 8 : 16
   }
-});
-
-export default Toolbar = (props) => {
-  return (
-    <View style={Styles.toolbar}>
-      <BackButton/>
-      <View style={Styles.content}>
-        <Image
-          source={require('../images/tool-logo.png')}
-          style={Styles.logo}
-          resizeMode="contain"
-        />
-      </View>
-    </View>
-  )
-}
+});

Strides-APP/app/components/ToolbarUgly.js

@@ -43,6 +43,7 @@ export default ToolbarUgly = ({
 
 const styles = StyleSheet.create({
   toolbarUgly: {
+    paddingTop: statusHeight,
     alignItems: 'center',
     flexDirection: 'row',
     backgroundColor: colorLight

Strides-APP/app/pages/Launch.js

@@ -7,7 +7,6 @@ import { Animated, Easing, Image, StyleSheet, View } from 'react-native'
 import {InitSomething} from '../components/Dialog';
 import MyStatusBar from '../components/MyStatusBar';
 import { PageList } from './Router';
-import app from '../../app.json';
 
 class Launch extends React.Component {
   
@@ -21,7 +20,7 @@ class Launch extends React.Component {
 
   componentDidMount() {
     this.init();
-    MyStatusBar.setStatusBarThemes(MyStatusBar.DARK_STYLE, colorLight);
+    //MyStatusBar.setStatusBarThemes(MyStatusBar.DARK_STYLE, colorLight);
     InitSomething();
     if (isIOS) {
       this.goHome(100);

Strides-APP/app/pages/Router.js

@@ -7,7 +7,7 @@ import { Pressable } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator, TransitionPresets } from '@react-navigation/stack';
 import { enableScreens } from 'react-native-screens';
-import { BackButton, Styles } from '../components/Toolbar';
+import Toolbar, { BackButton, Styles } from '../components/Toolbar';
 import app from '../../app.json';
 import About from './about/AboutV2';
 import Launcher from './Launch';
@@ -465,11 +465,12 @@ const Title = (title, opt = {}, titleScope) => {
     ...opt
   }
   if (titleScope && $t) {
-    options.headerTitle = () => <HeaderTitle scope={titleScope}/>
+    //options.headerTitle = () => <HeaderTitle scope={titleScope}/>
+    options.header = () => <Toolbar scope={titleScope} rightIcon={options?.headerRight}/>
   } else {
-    options.title = title
+    options.title = title;
+    options.headerLeft = () => <BackButton/>
   }
-  options.headerLeft = () => <BackButton/>
   return options;
 }
 

Strides-APP/app/pages/chargingV2/DialogPayPerUse.js

@@ -28,7 +28,9 @@ const DialogPayPerUse = ({
   return (
     <Modal
       visible={visible}
-      transparent={true}>
+      transparent={true}
+      animationType="fade"
+      statusBarTranslucent={true}>
       <View style={styles.container}>
         <View style={styles.content}>
           <TextView style={styles.title}>{$t("payment.titleNote")}</TextView>

Strides-APP/app/pages/home/Home.js

@@ -66,7 +66,7 @@ export default class HomePage extends Component {
       }
     }
     navigation.addListener('focus', () => {
-      console.log('------Home------', "Focus")
+      //console.log('------Home------', "Focus")
       this.onCloseInfo();
       SettingUtil.getSettings(set => {
         //console.log("获取设置信息", set);
@@ -74,20 +74,26 @@ export default class HomePage extends Component {
         this.init();
       })
       this.isHide = false;
-      if (!app.isWhitelabel) {
+      /*if (!app.isWhitelabel) {
         MyStatusBar.setStatusBarThemes(MyStatusBar.DARK_STYLE, colorLight);
-      }
+      }*/
+      MyStatusBar.setTranslucentStatusBar();
     });
 
     navigation.addListener('blur', () => {
       //toastShort('onStop')
       this.isHide = true;
-      if (!app.isWhitelabel) {
-        MyStatusBar.setStatusBarThemes(themeStatusBar, colorPrimaryDark); 
-      }
+      /*if (app.isLumiWhitelabel) {
+        MyStatusBar.setStatusBarThemes(MyStatusBar.DARK_STYLE, colorLight);
+      } else {
+        MyStatusBar.setStatusBarThemes(themeStatusBar, colorPrimaryDark);
+      }*/
+      setTimeout(() => {
+        MyStatusBar.setStatusBarTheme(app.isWhitelabel ? MyStatusBar.DARK_STYLE : MyStatusBar.LIGHT_STYLE);
+      }, 50);
       setTimeout(() => {
         navigation.closeDrawer();
-      }, 200);
+      }, 500);
     });
     this.stateListener = AppState.addEventListener("change", state => {
       if (state == 'active' && this.forceUpdateDialog) {

Strides-APP/app/pages/home/Index.js

@@ -135,10 +135,10 @@ export default class Home extends Component {
           headerShown: false,
           drawerType: global.$width >= 768 ? 'back' : 'front',
           drawerStyle: {
-            width: app.v3.drawer && !app.isLumiWhitelabel ? $vw(100) : ($vw(75) > 320 ? 320 : $vw(75)),
-            backgroundColor: app.v3.drawer ? 'rgba(0,0,0,0.1)' : colorLight
+            width: (app.v3.drawer && !app.isLumiWhitelabel) ? $vw(100) : ($vw(75) > 320 ? 320 : $vw(75)),
+            backgroundColor: (app.v3.drawer && !app.isLumiWhitelabel) ? 'rgba(0,0,0,0.1)' : colorLight
           },
-          swipeEnabled: !app.v3.drawer, //启用侧滑打开抽屉
+          swipeEnabled: (!app.v3.drawer || app.isLumiWhitelabel), //启用侧滑打开抽屉
         }}>
         <Drawer.Screen name="maps" component={Maps} />
       </Drawer.Navigator>
@@ -151,7 +151,7 @@ const CustomerDrawerContent = (props) => {
     <DrawerContentScrollView 
       {...props}
       canCancelContentTouches={true}
-      style={app.v3.drawer ? styles.contentV2 : {}}>
+      style={(app.v3.drawer && !app.isLumiWhitelabel) ? styles.contentV2 : {}}>
       { app.v3.drawer
       ? app.isLumiWhitelabel
         ? <DrawerViewV3 {...props}/>

Strides-APP/app/pages/home/maps/FilterTop.js

@@ -158,7 +158,7 @@ export default class FilterTop extends React.Component {
 
 const styles = StyleSheet.create({
   filterTopView: {
-    top: 50,
+    top: 45 + statusHeight,
     position: 'absolute'
   },
   typeIcon: {

Strides-APP/app/pages/my/Feedback.js

@@ -324,6 +324,7 @@ export default class Feedback extends React.Component {
           animationIn={"fadeIn"}
           animationOut={"fadeOut"}
           useNativeDriver={true}
+          statusBarTranslucent={true}
           onBackdropPress={() => this.changeChargeBox()}
           onBackButtonPress={() => this.changeChargeBox()}>
           <View style={Dialog.styles.modalDialog}>

Strides-APP/app/pages/my/ProfileV3.js

@@ -15,6 +15,7 @@ import { PageList } from '../Router';
 import app from '../../../app.json';
 import Svg, { Defs, Ellipse, G, LinearGradient, Path, Rect, Stop } from 'react-native-svg';
 import ShadowView from '../../components/ShadowView';
+import MyStatusBar from '../../components/MyStatusBar';
 
 export default class ProfileV3 extends Component {
   constructor(props) {
@@ -32,12 +33,18 @@ export default class ProfileV3 extends Component {
       this.init();
       this.setState({
         isHide: false
-      })
+      }, () => {
+        setTimeout(() => {
+          MyStatusBar.setStatusBarTheme(MyStatusBar.LIGHT_STYLE);
+        }, 100);
+      });
+      
     });
     this.props.navigation.addListener('blur', () => {
       this.setState({
         isHide: true
       })
+      MyStatusBar.setStatusBarTheme(MyStatusBar.DARK_STYLE);
     });
   }
 
@@ -114,7 +121,7 @@ export default class ProfileV3 extends Component {
 
   render() {
     return (
-      <ScrollView style={styles.container}>
+      <ScrollView style={styles.container} stickyHeaderIndices={[0]}>
         {/* <StatusBar backgroundColor={this.state.isHide ? colorLight : colorPrimary} /> */}
         <View style={styles.headerView}>
           <Pressable
@@ -355,6 +362,7 @@ const styles = StyleSheet.create({
   },
   headerView: {
     zIndex: 2,
+    paddingTop: statusHeight,
     backgroundColor: colorPrimary
   },
   titleBar: {

Strides-APP/app/pages/signLumi/LoginVL.js

@@ -14,14 +14,14 @@ import { BackButton } from '../../components/Toolbar';
 import CheckBoxText from '../../components/CheckBoxText';
 import { getStorageJsonSync, setStorageJson } from '../../utils/storage';
 
-export default class Login extends React.Component {
+export default class LoginVL extends React.Component {
 
   constructor(props) {
     super(props);
     this.state = {
       email: '',
       password: '',
-      rememberMe: true,
+      rememberMe: false,
       showPassword: false
     }
     this.isHide = false;
@@ -178,13 +178,13 @@ export default class Login extends React.Component {
             </View>
             <View style={ui.flexcw}>
               <View style={$padding(12, 8)}>
-                <CheckBoxText
+                {/* <CheckBoxText
                   value={this.state.rememberMe}
                   onValueChange={(newValue) => {
                     this.setState({ rememberMe: newValue });
                   }}
                   text={$t('sign.rememberMe')}
-                />
+                /> */}
               </View>
               <TextView
                 style={styles.linksText}