TODO: Đã hoàn thiện xong giao diện soạn email

src/assets/colors.js

@@ -7,6 +7,9 @@ const colors = {
   gray: 'rgba(217, 217, 217, 1)',
   gray1: 'rgba(204, 204, 204, 1)',
   gray2:'rgba(196, 196, 196, 1)',
+  gray3:'#6F6F6F',
+  gray4:'rgba(80, 80, 80, 1)',
+
   grayBorderInputTextHeader:'rgba(204, 204, 204, 0.36)',
   grayButton:'rgba(217, 217, 217, 0.56)',
 

src/routers/ScreenNames.js

@@ -51,7 +51,7 @@ export const EDITSENDDOCUMENT = 'EDITSENDDOCUMENT';
 export const DETAILSENDDOCUMENT = 'DETAILDOCUMENT';
 export const STATUSSENDDOCUMENT ='STATUSSENDDOCUMENT';
 
-export const DRAWERTABEMAIL = 'DRAWERTABEMAIL';
+export const SENDEDEMAIL = 'SENDEDEMAIL';
 export const EMAIL = 'EMAIL';
 export const SENDEMAIL = 'SENDEMAIL';
 export const DETAILEMAIL = 'DETAILEMAIL';

src/routers/StackNavigation.js

@@ -30,6 +30,7 @@ import StatusSendDocument from '../screens/list_send_document/status';
 import ListWork from '../screens/list_work';
 import DetailListWork from '../screens/list_work/detail';
 import DrawerEmailView from '../routers/drawer_email/drawerView';
+import SendEmail from '../screens/email/send';
 const Stack = createStackNavigator();
 
 function MyStack(props) {
@@ -68,6 +69,7 @@ function MyStack(props) {
       <Stack.Screen name={ScreenName.LISTWORK} component={ListWork}/>
       <Stack.Screen name={ScreenName.DETAILWORK} component={DetailListWork}/>
       <Stack.Screen name={ScreenName.EMAIL} component={DrawerEmailView}/>
+      <Stack.Screen name={ScreenName.SENDEMAIL} component={SendEmail}/>
     </Stack.Navigator>
   );
 }

src/routers/drawer_email/drawerView.js

@@ -108,7 +108,7 @@ const DrawerNavigatorEmailView = (props) =>{
                 }
             />
             <Drawer.Screen
-                name={ScreenName.SENDEMAIL}
+                name={ScreenName.SENDEDEMAIL}
                 component={SendEmail}
                 options={
                     {

src/routers/drawer_email/style.js

@@ -71,6 +71,11 @@ const styles = StyleSheet.create({
     },
     label:{
         marginLeft:8
+    },
+    labelSel:{
+        color:R.colors.white,
+        fontWeight:'600',
+        fontFamily:R.fonts.fontMedium
     }
 })
 

src/screens/email/send/style.js

+import { StyleSheet, Text, View } from 'react-native'
+import R from '../../../assets/R'
+
+const styles = StyleSheet.create({
+    container:{
+        flex:1,
+        backgroundColor:R.colors.white
+    },
+    body:{
+        flex:1,
+        backgroundColor:R.colors.white
+    },
+    header:{
+        flexDirection:'row',
+        backgroundColor:R.colors.blue,
+        height:50,
+        alignItems:'center',
+        justifyContent:'space-between',
+        paddingHorizontal:15
+    },
+    icon:{
+        width:25,
+        height:20
+    },
+    sendButton:{
+        backgroundColor:R.colors.orange,
+        borderRadius:5,
+        width:90,
+        paddingHorizontal:5,
+        height:35,
+        alignItems:'center',
+        justifyContent:'space-around',
+        flexDirection:'row'
+    },
+    sendText:{
+        color:R.colors.white,
+        fontSize:R.fontsize.fontSizeSubTitle,
+        fontFamily:R.fonts.fontRegular,
+        fontWeight:'400',
+    },
+    iconSend:{
+        width:20,
+        height:20
+    },
+    title:{
+        fontSize:R.fontsize.fontSizeSubTitle,
+        fontFamily:R.fonts.fontMedium,
+        fontWeight:'600',
+        color:R.colors.white
+    }
+})
+
+export default styles
\ No newline at end of file

src/screens/email/send/view.js

 import React from 'react';
-import {Text, View, TouchableOpacity, StyleSheet} from 'react-native';
+import {Text, View, TouchableOpacity, StyleSheet, Image} from 'react-native';
+import styles from './style';
+import R from '../../../assets/R';
+import Button from '../../../components/Button';
+import { useNavigation } from '@react-navigation/native';
 
 const SendEmailView = (props) => {
   const {  } = props;
+
+const navigation = useNavigation();
+
+const renderHeader = () => {
+    return (
+        <View style={styles.header}>
+            <TouchableOpacity onPress={() => navigation.goBack()}>
+                <Image source={R.images.icBack} style={styles.icon}/>
+            </TouchableOpacity>
+            <Text style={styles.title}>Soạn email</Text>
+            <TouchableOpacity onPress={() => (navigation.goBack())} style={styles.sendButton}>
+              <Text style={styles.sendText}>Gửi Đi</Text>
+              <Image source={R.images.icSend} style={styles.iconSend} tintColor={R.colors.white}/>
+            </TouchableOpacity>
+        </View>
+    );
+}
+  
   return (
     <View
-      style={{
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}>
-      <TouchableOpacity>
-        <Text>SendEmail</Text>
-      </TouchableOpacity>
+      style={styles.container}>
+        <View style={styles.body}>
+          {renderHeader()}
+
+        </View>
     </View>
   );
 };
 
 export default SendEmailView;
-
-const styles = StyleSheet.create({})
\ No newline at end of file

src/screens/email/style.js

@@ -39,7 +39,6 @@ const styles = StyleSheet.create({
         alignItems: 'flex-start'
     },
     unreadEmail: {
-        backgroundColor: R.colors.grayBorderInputTextHeader
     },
     avatarContainer: {
         marginRight: 10,
@@ -69,7 +68,9 @@ const styles = StyleSheet.create({
     },
     senderName: {
         fontSize: R.fontsize.fontsSizeTitle,
-        color: R.colors.black,
+        fontWeight:'400',
+        fontFamily: R.fonts.fontRegular,
+        color: R.colors.gray4,
         flex: 1,
         marginRight: 10
     },
@@ -78,31 +79,37 @@ const styles = StyleSheet.create({
         fontFamily: R.fonts.fontMedium,
         color: R.colors.black
     },
+    unreadEmail: {
+      fontWeight: '600',
+        fontFamily: R.fonts.fontMedium,
+        color: R.colors.gray3
+    },
     emailDate: {
         fontSize: R.fontsize.fontSizeContent,
         color: R.colors.gray2
     },
     emailSubject: {
         fontSize: R.fontsize.fontSizeBtn,
-        color: R.colors.black,
+        color: R.colors.gray4,
     },
     emailPreview: {
         fontSize: R.fontsize.fontSizeContent,
-        color: R.colors.gray2,
+        color: R.colors.gray4,
     },
     attachmentIndicator: {
         width: 20,
         height: 20,
         borderRadius: 10,
-        backgroundColor: R.colors.blue,
+        backgroundColor: R.colors.blue3,
         justifyContent: 'center',
         alignItems: 'center',
         marginTop: 4
     },
     attachmentCount: {
-        color: R.colors.white,
+        color: R.colors.blue,
+        fontWeight: '600',
+        fontFamily: R.fonts.fontMedium,
         fontSize: R.fontsize.fontSizeContent,
-        fontWeight: 'bold'
     }
 })
 

src/screens/email/view.js

@@ -9,10 +9,25 @@ import {
   RefreshControl,
 } from 'react-native';
 import styles from './style';
+import FAB from '../../components/FAB/fab';
+import SubButton from '../../components/FAB/sub_button';
+import R from '../../assets/R';
+import * as SCREENNAME from '../../routers/ScreenNames';
+import { useNavigation } from '@react-navigation/native';
 
 const EmailHomeView = props => {
-  const {groupedEmails, loading, onEmailPress, onRefresh, formatEmailDate} =
-    props;
+  const {groupedEmails, loading, onEmailPress, onRefresh, formatEmailDate} = props;
+
+  const navigation = useNavigation();
+
+  if (loading) {
+    return (
+      <View style={styles.loadingContainer}>
+        <ActivityIndicator size="large" color="#007AFF" />
+        <Text style={styles.loadingText}>Đang tải email...</Text>
+      </View>
+    );
+  }
 
   const renderEmailItem = ({item}) => (
     <TouchableOpacity
@@ -31,7 +46,6 @@ const EmailHomeView = props => {
           <Text style={[styles.senderName, !item.isRead && styles.unreadText]}>
             {item.sender}
           </Text>
-       
         </View>
 
         <Text
@@ -40,20 +54,33 @@ const EmailHomeView = props => {
           {item.subject}
         </Text>
 
-        <Text style={styles.emailPreview} numberOfLines={2}>
+        <Text
+          style={[styles.emailPreview, !item.isRead && styles.unreadEmail]}
+          numberOfLines={2}>
           {item.preview}
         </Text>
       </View>
 
-      <View style={{justifyContent: 'center', alignItems: 'flex-end', position:'absolute', right:15, top:10 }}>
-            <Text style={styles.emailDate}>
-              {`${item.date.getDate().toString().padStart(2, '0')}/${(item.date.getMonth() + 1).toString().padStart(2, '0')}/${item.date.getFullYear()}`}
-            </Text>
-            {item.hasAttachment && (
-              <View style={styles.attachmentIndicator}>
-                <Text style={styles.attachmentCount}>2</Text>
-              </View>
-            )}
+      <View
+        style={{
+          justifyContent: 'center',
+          alignItems: 'flex-end',
+          position: 'absolute',
+          right: 15,
+          top: 10,
+        }}>
+        <Text style={styles.emailDate}>
+          {`${item.date.getDate().toString().padStart(2, '0')}/${(
+            item.date.getMonth() + 1
+          )
+            .toString()
+            .padStart(2, '0')}/${item.date.getFullYear()}`}
+        </Text>
+        {item.hasAttachment && (
+          <View style={styles.attachmentIndicator}>
+            <Text style={styles.attachmentCount}>2</Text>
+          </View>
+        )}
       </View>
     </TouchableOpacity>
   );
@@ -67,33 +94,36 @@ const EmailHomeView = props => {
     </View>
   );
 
-  if (loading) {
-    return (
-      <View style={styles.loadingContainer}>
-        <ActivityIndicator size="large" color="#007AFF" />
-        <Text style={styles.loadingText}>Đang tải email...</Text>
-      </View>
-    );
-  }
-
   return (
     <View style={styles.container}>
-      <FlatList
-        data={Object.keys(groupedEmails)}
-        keyExtractor={item => item}
-        renderItem={({item: dateLabel}) =>
-          renderDateSection(dateLabel, groupedEmails[dateLabel])
-        }
-        refreshControl={
-          <RefreshControl
-            refreshing={loading}
-            onRefresh={onRefresh}
-            colors={['#007AFF']}
-          />
-        }
-        showsVerticalScrollIndicator={false}
-        contentContainerStyle={styles.listContainer}
-      />
+      <View style={styles.body}>
+        <FlatList
+          data={Object.keys(groupedEmails)}
+          keyExtractor={item => item}
+          renderItem={({item: dateLabel}) =>
+            renderDateSection(dateLabel, groupedEmails[dateLabel])
+          }
+          refreshControl={
+            <RefreshControl
+              refreshing={loading}
+              onRefresh={onRefresh}
+              colors={['#007AFF']}
+            />
+          }
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={styles.listContainer}
+        />
+      </View>
+
+      <FAB>
+        <SubButton
+          onPress={() => navigation.navigate(SCREENNAME.SENDEMAIL)}
+          label="Soạn email"
+          images={R.images.icEdit}
+          backgroundColor={R.colors.orange}
+        />
+      </FAB>
+     
     </View>
   );
 };