Skip to content

A
AppUms_Student
Commit fd8f9fa4 by tungnq
Options

TODO: Đã sửa lai giao diện một số componet

parent 5b569b78
Showing with 215 additions and 169 deletions
src/components/Dropdown/DropdownSel.js
......@@ -57,12 +57,12 @@ const DropdownSelect = ({
searchable = false,
searchPlaceholder = "Search...",
titleColor, // Màu chữ title
titleFontSize, // Kích thước font title
titleFontWeight, // Độ đậm font title (normal, bold, 100-900)
titleFontFamily, // Font family title
titleFontStyle, // Font style title (normal, italic)
titleTextAlign, // Text align title (left, center, right)
titleColor = "black", // Màu chữ title
titleFontSize = 12, // Kích thước font title
titleFontWeight = "400", // Độ đậm font title (normal, bold, 100-900)
titleFontFamily = R.fonts.InterMedium, // Font family title
titleFontStyle = "normal", // Font style title (normal, italic)
titleTextAlign = "left", // Text align title (left, center, right)
titleLineHeight, // Line height title
titleLetterSpacing, // Letter spacing title
titleTextTransform, // Text transform (none, uppercase, lowercase, capitalize)
......@@ -98,7 +98,7 @@ const DropdownSelect = ({
keyExtractor,
width,
height,
height = 30,
paddingHorizontal,
paddingVertical,
paddingTop,
......
src/components/Input/TextFieldCus.js
......@@ -68,8 +68,8 @@ const styles = StyleSheet.create({
// UI/UX: Title text
title: {
fontSize: R.fontsize.fontsSize12,
fontFamily: R.fonts.InterRegular,
fontWeight: '400',
fontFamily: R.fonts.InterMedium,
fontWeight: '600',
color: R.colors.black
},
......
src/screens/certificate_registration/view.js
......@@ -28,10 +28,6 @@ const CertificateRegistrationView = (props) => {
<DropdownSelect
title={"Loại chứng chỉ *"}
titleFontFamily={R.fonts.InterRegular}
titleFontSize={R.fontsize.fontsSize12}
titleFontWeight={"400"}
titleColor={R.colors.black}
data={dataList}
placeholder="HS"
placeholderFontFamily={R.fonts.InterRegular}
......@@ -43,7 +39,7 @@ const CertificateRegistrationView = (props) => {
marginHorizontal={15}
marginVertical={5}
iconColor={R.colors.black}
iconSize={10}
iconSize={5}
/>
<View style={{ marginHorizontal: 15, }}>
<CustomTextInput
......@@ -134,7 +130,7 @@ const CertificateRegistrationView = (props) => {
/>
</View>
<Text style={{ marginHorizontal: 15, color: R.colors.black }}>
<Text style={{ marginHorizontal: 15, color: R.colors.black, fontSize: R.fontsize.fontsSize12, fontWeight: "600", fontFamily: R.fonts.InterMedium }}>
Ảnh chứng chỉ <Text style={{ color: "red" }}>*</Text>
</Text>
<CardButtonImage />
......
src/screens/medical/view.js
......@@ -32,11 +32,9 @@ const MedicalView = (props) => {
placeholderColor={R.colors.grey_800}
borderRadius={10}
height={30}
iconSize={5}
iconColor={R.colors.black}
titleFontWeight={"300"}
fontSize={R.fontsize.fontsSize12}
titleFontSize={R.fontsize.fontsSize12}
titleFontFamily={R.fonts.InterRegular}
/>
<CustomTextInput
title={"Ngày hết hạn BHYT"}
......@@ -64,9 +62,7 @@ const MedicalView = (props) => {
height={30}
iconColor={R.colors.black}
titleFontWeight={"300"}
fontSize={R.fontsize.fontsSize12}
titleFontSize={R.fontsize.fontsSize12}
titleFontFamily={R.fonts.InterRegular}
iconSize={5}
marginBottom={50}
marginHorizontal={0}
marginVertical={0}
......
src/screens/outpatient_information/item.js
......@@ -38,16 +38,13 @@ const styles = StyleSheet.create({
container: {
backgroundColor: R.colors.white ,
borderRadius: 15,
marginBottom: 18,
padding: 15,
marginBottom: 7.5,
padding: 10,
shadowColor: R.colors.black,
shadowOffset: {
width: 0,
height:2
},
shadowOpacity: 0.5,
shadowRadius: 1,
elevation: 1,
shadowOffset: {width: 0.5, height: 2},
shadowOpacity: Platform.OS === 'ios' ? 0.25 : 1,
shadowRadius: 5,
elevation: Platform.OS === 'ios' ? 1 : 2,
},
text: {
......
src/screens/outpatient_information/modal.js
......@@ -130,13 +130,9 @@ const RegistrationModal = ({visible, onClose, onNavigateToOther}) => {
borderRadius={10}
height={30}
iconColor={R.colors.black}
iconSize={10}
iconSize={5}
marginHorizontal={0}
marginVertical={0}
titleFontWeight={'400'}
fontSize={R.fontsize.fontsSize12}
titleFontSize={R.fontsize.fontsSize12}
titleFontFamily={R.fonts.InterRegular}
/>
</View>
<View style={{width: '3%'}}></View>
......@@ -151,13 +147,9 @@ const RegistrationModal = ({visible, onClose, onNavigateToOther}) => {
borderRadius={10}
height={30}
iconColor={R.colors.black}
iconSize={10}
iconSize={5}
marginHorizontal={0}
marginVertical={0}
titleFontWeight={'400'}
fontSize={R.fontsize.fontsSize12}
titleFontSize={R.fontsize.fontsSize12}
titleFontFamily={R.fonts.InterRegular}
/>
</View>
</View>
......
src/screens/outpatient_information/view.js
......@@ -93,11 +93,10 @@ const styles = StyleSheet.create({
},
scrollableList: {
flex: 1,
paddingHorizontal: 15,
},
flatListContent: {
paddingTop: 10,
paddingBottom: 10,
paddingVertical: 5,
paddingHorizontal:15
},
buttonSection: {
paddingHorizontal: 15,
......
src/screens/profile/view.js
import React from "react";
import React from 'react';
import {
Text,
View,
TouchableOpacity,
StyleSheet,
ScrollView,
SafeAreaView,
TextInput,
} from "react-native";
import R from "../../assets/R";
import Header from "../../components/Header/Header";
import Button from "../../components/Button";
import DropdownSelect from "../../components/Dropdown/DropdownSel";
import Checkbox from "../../components/CheckBox";
import CustomTextInput from "../../components/Input/TextFieldCus";
const ProfileView = (props) => {
const { phone, setPhone, cmnd, setCmnd, bank, setBank } = props;
} from 'react-native';
import R from '../../assets/R';
import Header from '../../components/Header/Header';
import Button from '../../components/Button';
import DropdownSelect from '../../components/Dropdown/DropdownSel';
import Checkbox from '../../components/CheckBox';
import CustomTextInput from '../../components/Input/TextFieldCus';
const ProfileView = props => {
const {phone, setPhone, cmnd, setCmnd, bank, setBank} = props;
const IconCamera = R.images.icCamera;
return (
<View style={{ flex: 1, backgroundColor:R.colors.white}}>
<Header title={"Hồ sơ cá nhân"} isBack />
<ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}>
<View style={{flex: 1, backgroundColor: R.colors.white}}>
<Header title={'Hồ sơ cá nhân'} isBack />
<ScrollView showsVerticalScrollIndicator={false} style={{flex: 1}}>
<View style={styles.container}>
<View style={styles.body_header}>
<View style={styles.container_image}>
<TouchableOpacity style={styles.images}>
<View style={{ alignItems: "center" }}>
<View style={{alignItems: 'center'}}>
<IconCamera />
</View>
</TouchableOpacity>
......@@ -38,19 +36,121 @@ const ProfileView = (props) => {
textColor={R.colors.white}
fontFamily={R.fonts.InterRegular}
fontSize={R.fontsize.fontsSize12}
fontWeight={"400"}
fontWeight={'400'}
backgroundColor={R.colors.main}
title={"Chọn ảnh"}
title={'Chọn ảnh'}
/>
</View>
<View style={styles.body_info_user}>
<Text style={styles.text}>Họ và tên: Nguyễn Minh Duy</Text>
<Text style={styles.text}>Giới tính: Nam</Text>
<Text style={styles.text}>Năm sinh : 23/10/2003</Text>
<Text style={styles.text}>Mã sinh viên: PH32251</Text>
<Text style={styles.text}>Khoa: Khoa học máy tính</Text>
<Text style={styles.text}>Chuyên ngành lập trình web</Text>
<View style={{ marginTop: 15 }}>
<Text
style={[
styles.text,
{fontFamily: R.fonts.InterMedium, fontWeight: '600'},
]}>
Họ và tên:{' '}
<Text
style={[
styles.text_label,
{
fontFamily: R.fonts.InterMedium,
fontWeight: '600',
color: R.colors.black,
},
]}>
Nguyễn Minh Duy
</Text>
</Text>
<Text
style={[
styles.text,
{fontFamily: R.fonts.InterMedium, fontWeight: '600'},
]}>
Giới tính:{' '}
<Text
style={[
styles.text_label,
{
fontFamily: R.fonts.InterMedium,
fontWeight: '600',
color: R.colors.black,
},
]}>
Nam
</Text>
</Text>
<Text
style={[
styles.text,
{fontFamily: R.fonts.InterMedium, fontWeight: '600'},
]}>
Năm sinh :{' '}
<Text
style={[
styles.text_label,
{
fontFamily: R.fonts.InterMedium,
fontWeight: '600',
color: R.colors.black,
},
]}>
23/10/2003
</Text>
</Text>
<Text
style={[
styles.text,
{fontFamily: R.fonts.InterMedium, fontWeight: '600'},
]}>
Mã sinh viên:{' '}
<Text
style={[
styles.text_label,
{
fontFamily: R.fonts.InterMedium,
fontWeight: '600',
color: R.colors.black,
},
]}>
PH32251
</Text>
</Text>
<Text
style={[
styles.text,
{fontFamily: R.fonts.InterMedium, fontWeight: '600'},
]}>
Khoa:{' '}
<Text
style={[
styles.text_label,
{
fontFamily: R.fonts.InterMedium,
fontWeight: '600',
color: R.colors.black,
},
]}>
Khoa học máy tính
</Text>
</Text>
<Text
style={[
styles.text,
{fontFamily: R.fonts.InterMedium, fontWeight: '600'},
]}>
Chuyên ngành:{' '}
<Text
style={[
styles.text_label,
{
fontFamily: R.fonts.InterMedium,
fontWeight: '600',
color: R.colors.black,
},
]}>
Lập trình web
</Text>
</Text>
<View style={{marginTop: 15}}>
<Text style={styles.text_label}>
Ảnh chụp thẳng, nền TRẮNG hoặc XANH, mặc áo có cổ; tỷ lệ 4x6,
dung lượng từ 200 đến 500 KB
......@@ -59,97 +159,77 @@ const ProfileView = (props) => {
</View>
</View>
<View style={styles.body}>
<View style={{ flexDirection: "row" }}>
<View style={{ flex: 1 }}>
<View style={{flexDirection: 'row'}}>
<View style={{flex: 1}}>
<DropdownSelect
title={"Dân tộc *"}
title={'Dân tộc *'}
placeholder="Kinh"
placeholderColor={R.colors.gray800}
placeholderFontFamily={R.fonts.InterRegular}
placeholderFontSize={R.fontsize.fontsSize10}
placeholderFontWeight={"400"}
placeholderFontWeight={'400'}
borderRadius={10}
height={40}
iconSize={10}
iconSize={5}
iconColor={R.colors.black}
titleFontWeight={"400"}
titleFontSize={R.fontsize.fontsSize12}
fontSize={R.fontsize.fontsSize12}
titleFontFamily={R.fonts.InterRegular}
marginHorizontal={0}
marginVertical={0}
/>
</View>
<View style={{ width: '5%' }}></View>
<View style={{ flex: 1 }}>
<View style={{width: '5%'}}></View>
<View style={{flex: 1}}>
<DropdownSelect
title={"Tôn giáo *"}
title={'Tôn giáo *'}
placeholder="Không"
placeholderColor={R.colors.gray800}
placeholderFontFamily={R.fonts.InterRegular}
placeholderFontSize={R.fontsize.fontsSize10}
placeholderFontWeight={"400"}
placeholderFontWeight={'400'}
borderRadius={10}
height={40}
iconSize={10}
iconSize={5}
iconColor={R.colors.black}
titleFontWeight={"400"}
titleFontSize={R.fontsize.fontsSize12}
fontSize={R.fontsize.fontsSize12}
titleFontFamily={R.fonts.InterRegular}
marginHorizontal={0}
marginVertical={0}
/>
</View>
</View>
<View
style={styles.container_body}
>
<View style={{ flex: 1 }}>
<View style={styles.container_body}>
<View style={{flex: 1}}>
<DropdownSelect
title={"Thành phần xuất thân *"}
titleFontWeight={"400"}
titleFontSize={R.fontsize.fontsSize12}
titleFontFamily={R.fonts.InterRegular}
title={'Thành phần xuất thân *'}
placeholder="Khác"
placeholderColor={R.colors.gray800}
placeholderFontFamily={R.fonts.InterRegular}
placeholderFontSize={R.fontsize.fontsSize10}
placeholderFontWeight={"400"}
placeholderFontWeight={'400'}
borderRadius={10}
height={40}
iconSize={10}
iconSize={5}
iconColor={R.colors.black}
fontSize={R.fontsize.fontsSize12}
marginHorizontal={0}
marginVertical={0}
/>
</View>
<View style={{ width: '5%' }}></View>
<View style={{ flex: 1 }}>
<View style={{width: '5%'}}></View>
<View style={{flex: 1}}>
<DropdownSelect
title={"Nơi sinh *"}
title={'Nơi sinh *'}
placeholder="Tỉnh kiên giang"
placeholderColor={R.colors.gray800}
placeholderFontFamily={R.fonts.InterRegular}
placeholderFontSize={R.fontsize.fontsSize10}
placeholderFontWeight={"400"}
placeholderFontWeight={'400'}
fontSize={R.fontsize.fontsSize12}
borderRadius={10}
backgroundColor={R.colors.greyBlue_soft_50}
height={40}
iconSize={10}
iconSize={5}
iconColor={R.colors.black}
titleFontWeight={"400"}
titleFontSize={R.fontsize.fontsSize12}
titleFontFamily={R.fonts.InterRegular}
marginHorizontal={0}
marginVertical={0}
/>
</View>
</View>
<CustomTextInput
title={"Điện thoại cá nhân "}
title={'Điện thoại cá nhân '}
placeholder="Điện thoại cá nhân"
required={true}
value={phone}
......@@ -158,7 +238,7 @@ const ProfileView = (props) => {
/>
<CustomTextInput
title={"CMND/CCCD"}
title={'CMND/CCCD'}
placeholder="CMND/CCCD"
required={true}
value={cmnd}
......@@ -168,7 +248,7 @@ const ProfileView = (props) => {
/>
<CustomTextInput
title={"Ngày cấp CMND/CCCD"}
title={'Ngày cấp CMND/CCCD'}
placeholder="17/01/2021"
required={true}
value={cmnd}
......@@ -178,7 +258,7 @@ const ProfileView = (props) => {
/>
<CustomTextInput
title={"Nơi cấp CMND/CCCD"}
title={'Nơi cấp CMND/CCCD'}
placeholder="Cục cảnh sát quản lý hành chính Hà Nội"
required={true}
value={cmnd}
......@@ -187,19 +267,19 @@ const ProfileView = (props) => {
backgroundColor={R.colors.greyBlue_soft_50}
/>
<Text style={[styles.text, { lineHeight: 16 }]}>
<Text style={[styles.text, {lineHeight: 16}]}>
Thông tin tài khoản ngân hàng của sinh viên (Tài khoản chính chủ
của sinh viên, không được là số tài khoản của người khác)
</Text>
<CustomTextInput
title={"Thông tin ngân hàng"}
title={'Thông tin ngân hàng'}
placeholder="Thông tin ngân hàng"
required={true}
value={bank}
onChangeText={setBank}
/>
<CustomTextInput
title={"Số tài khoản"}
title={'Số tài khoản'}
placeholder="Số tài khoản"
required={true}
value={bank}
......@@ -207,7 +287,7 @@ const ProfileView = (props) => {
/>
<CustomTextInput
title={"Chi nhánh"}
title={'Chi nhánh'}
placeholder="Chi nhánh"
required={true}
value={bank}
......@@ -215,7 +295,7 @@ const ProfileView = (props) => {
/>
<CustomTextInput
title={"Email cá nhân"}
title={'Email cá nhân'}
placeholder="Email cá nhân"
required={true}
value={bank}
......@@ -223,7 +303,7 @@ const ProfileView = (props) => {
/>
<CustomTextInput
title={"Địa chỉ facebook"}
title={'Địa chỉ facebook'}
placeholder="Địa chỉ facebook"
required={true}
value={bank}
......@@ -231,7 +311,7 @@ const ProfileView = (props) => {
/>
<CustomTextInput
title={"Địa chỉ thường trú"}
title={'Địa chỉ thường trú'}
placeholder="Địa chỉ thường trú"
required={true}
value={bank}
......@@ -239,58 +319,46 @@ const ProfileView = (props) => {
/>
<DropdownSelect
title={"Tỉnh/ TP-54"}
title={'Tỉnh/ TP-54'}
placeholder="Hà Nội"
placeholderColor={R.colors.gray800}
borderRadius={10}
iconSize={10}
iconSize={5}
placeholderFontFamily={R.fonts.InterRegular}
placeholderFontSize={R.fontsize.fontsSize10}
placeholderFontWeight={"400"}
height={40}
placeholderFontWeight={'400'}
marginHorizontal={0}
iconColor={R.colors.black}
titleFontWeight={"400"}
titleFontSize={R.fontsize.fontsSize12}
fontSize={R.fontsize.fontsSize12}
marginVertical={5}
titleFontFamily={R.fonts.InterRegular}
backgroundColor={R.colors.greyBlue_soft_50}
/>
<DropdownSelect
title={"Phường/Xã"}
title={'Phường/Xã'}
placeholder="Hà Nội"
placeholderColor={R.colors.gray800}
borderRadius={10}
iconSize={10}
iconSize={5}
placeholderFontFamily={R.fonts.InterRegular}
placeholderFontSize={R.fontsize.fontsSize10}
placeholderFontWeight={"400"}
height={40}
placeholderFontWeight={'400'}
marginHorizontal={0}
iconColor={R.colors.black}
titleFontWeight={"400"}
titleFontSize={R.fontsize.fontsSize12}
fontSize={R.fontsize.fontsSize12}
titleFontFamily={R.fonts.InterRegular}
marginVertical={5}
backgroundColor={R.colors.greyBlue_soft_50}
/>
<View style={styles.container_body_footer}>
<Checkbox
label={"Đoàn viên?"}
label={'Đoàn viên?'}
labelStyle={styles.text_check_box}
size={14}
borderColor={R.colors.blue500}
/>
<View style={{ flex: 1, marginLeft: 16 }}>
<Text style={styles.text_check_box_label}>
Ngày vào đoàn
</Text>
<View style={{flex: 1, marginLeft: 16}}>
<Text style={styles.text_check_box_label}>Ngày vào đoàn</Text>
</View>
<View style={{ flex: 1.2 }}>
<View style={{flex: 1.2}}>
<CustomTextInput
placeholder="Ngày vào đoàn"
required={true}
......@@ -298,20 +366,18 @@ const ProfileView = (props) => {
onChangeText={setBank}
/>
</View>
</View >
</View>
<View style={styles.container_body_footer}>
<Checkbox
label={"Đảng viên?"}
label={'Đảng viên?'}
labelStyle={styles.text_check_box}
size={14}
borderColor={R.colors.blue500}
/>
<View style={{ flex: 1, marginLeft: 16 }}>
<Text style={styles.text_check_box_label}>
Ngày vào đảng
</Text>
<View style={{flex: 1, marginLeft: 16}}>
<Text style={styles.text_check_box_label}>Ngày vào đảng</Text>
</View>
<View style={{ flex: 1.2 }}>
<View style={{flex: 1.2}}>
<CustomTextInput
placeholder="Ngày vào đoàn"
required={true}
......@@ -334,8 +400,8 @@ const ProfileView = (props) => {
/>
</View>
</View>
</ScrollView>
</View>
</ScrollView>
</View>
);
};
......@@ -345,20 +411,20 @@ const styles = StyleSheet.create({
container: {
flex: 1,
paddingHorizontal: 15,
paddingBottom: 9,
paddingVertical: 10,
},
body_header: {
flexDirection: "row",
flexDirection: 'row',
},
container_image: {
flex: 1,
alignItems: "flex-start",
justifyContent: "flex-start",
alignItems: 'flex-start',
justifyContent: 'flex-start',
},
container_body: {
flexDirection: "row",
flexDirection: 'row',
marginTop: 10,
marginBottom: 5
marginBottom: 5,
},
images: {
backgroundColor: R.colors.grey_50,
......@@ -367,29 +433,29 @@ const styles = StyleSheet.create({
borderRadius: 15,
borderWidth: 1,
borderColor: R.colors.grey_200,
justifyContent: "center",
alignItems: "center",
justifyContent: 'center',
alignItems: 'center',
},
body_info_user: {
flex: 1.8,
},
text: {
fontFamily: R.fonts.InterRegular,
fontWeight: "400",
fontWeight: '400',
fontSize: R.fontsize.fontsSize12,
color: R.colors.blue500,
lineHeight: 24
lineHeight: 24,
},
text_label: {
fontFamily: R.fonts.InterRegular,
fontWeight: "400",
fontWeight: '400',
fontSize: R.fontsize.fontsSize12,
color: R.colors.grey_100,
},
text_button: {
fontFamily: R.fonts.InterRegular,
fontWeight: "400",
fontWeight: '400',
fontSize: R.fontsize.fontsSize12,
color: R.colors.white,
},
......@@ -398,21 +464,21 @@ const styles = StyleSheet.create({
},
text_check_box_label: {
fontFamily: R.fonts.InterRegular,
fontWeight: "400",
fontWeight: '400',
fontSize: R.fontsize.fontsSize12,
color: R.colors.black_800,
alignSelf: "center"
alignSelf: 'center',
},
text_check_box: {
fontFamily: R.fonts.InterRegular,
fontWeight: "400",
fontWeight: '400',
fontSize: R.fontsize.fontsSize12,
color: R.colors.blue500,
},
container_body_footer: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginVertical: 5,
},
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment