Skip to content

A
AppUms_Lecturer
Commit 2e54f2ca by tungnq
Options

TODO: Đã kiểm tra giao diện lịch học và refactor code

parent 74d29a3c
Showing with 285 additions and 253 deletions
src/routers/drawer_schedule/drawerView.js
...@@ -18,7 +18,6 @@ import FilterWeekView from "../../screens/class_schedule/filterWeek"; ...@@ -18,7 +18,6 @@ import FilterWeekView from "../../screens/class_schedule/filterWeek";
import Filter3Date from "../../screens/class_schedule/filter3day"; import Filter3Date from "../../screens/class_schedule/filter3day";
const Drawer = createDrawerNavigator(); const Drawer = createDrawerNavigator();
const ArrowLeft = R.images.icBack;
const IconMenu = R.images.icMenu; const IconMenu = R.images.icMenu;
const IconSearch = R.images.icSearch; const IconSearch = R.images.icSearch;
...@@ -58,7 +57,7 @@ const DrawerNavigatorView = (props) => { ...@@ -58,7 +57,7 @@ const DrawerNavigatorView = (props) => {
const MenuButton = ({ onPress }) => ( const MenuButton = ({ onPress }) => (
<TouchableOpacity style={styles.menuButton} onPress={onPress}> <TouchableOpacity style={styles.menuButton} onPress={onPress}>
<Image source={IconMenu} style={{width: 25, height: 20}} tintColor={R.colors.white}/> <Image source={IconMenu} style={styles.icon} tintColor={R.colors.white}/>
</TouchableOpacity> </TouchableOpacity>
); );
...@@ -126,7 +125,7 @@ const DrawerNavigatorView = (props) => { ...@@ -126,7 +125,7 @@ const DrawerNavigatorView = (props) => {
headerRight: () => ( headerRight: () => (
<View style={styles.headerRightContainer}> <View style={styles.headerRightContainer}>
<TouchableOpacity style={styles.searchButton}> <TouchableOpacity style={styles.searchButton}>
<Image source={IconSearch} style={{width: 25, height: 25}} tintColor={R.colors.white}/> <Image source={IconSearch} style={styles.iconSearch} tintColor={R.colors.white}/>
</TouchableOpacity> </TouchableOpacity>
<View style={styles.avatarButton} /> <View style={styles.avatarButton} />
</View> </View>
...@@ -198,8 +197,8 @@ const styles = StyleSheet.create({ ...@@ -198,8 +197,8 @@ const styles = StyleSheet.create({
marginRight: 10, marginRight: 10,
}, },
avatarButton: { avatarButton: {
width: 30, width: 25,
height: 30, height: 25,
borderRadius: 30, borderRadius: 30,
backgroundColor: R.colors.white, backgroundColor: R.colors.white,
}, },
...@@ -212,10 +211,19 @@ const styles = StyleSheet.create({ ...@@ -212,10 +211,19 @@ const styles = StyleSheet.create({
fontSize: R.sizes.lg, fontSize: R.sizes.lg,
color: R.colors.white, color: R.colors.white,
fontFamily: R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
fontWeight: '600',
}, },
headerTitleContainer: { headerTitleContainer: {
flexDirection: 'row', flexDirection: 'row',
}, },
icon: {
width: 25,
height: 20,
},
iconSearch: {
width: 25,
height: 25,
},
}); });
export default connect(mapStateToProps, {})(DrawerNavigatorView); export default connect(mapStateToProps, {})(DrawerNavigatorView);
\ No newline at end of file
src/routers/drawer_schedule/itemDrawer.js
...@@ -201,7 +201,7 @@ const styles = StyleSheet.create({ ...@@ -201,7 +201,7 @@ const styles = StyleSheet.create({
color: R.colors.black, color: R.colors.black,
flex: 1, flex: 1,
fontFamily: R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
fontWeight: '400', fontWeight: '600',
}, },
filterLabelSelected: { filterLabelSelected: {
color: R.colors.white, color: R.colors.white,
...@@ -218,7 +218,7 @@ const styles = StyleSheet.create({ ...@@ -218,7 +218,7 @@ const styles = StyleSheet.create({
marginTop: 24, marginTop: 24,
}, },
sectionTitle: { sectionTitle: {
fontWeight: "400", fontWeight: "600",
fontFamily: R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
marginBottom: 10, marginBottom: 10,
fontSize: R.sizes.lg, fontSize: R.sizes.lg,
......
src/screens/class_schedule/detail/style.js
...@@ -4,6 +4,7 @@ import R from '../../../assets/R' ...@@ -4,6 +4,7 @@ import R from '../../../assets/R'
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
backgroundColor: R.colors.white,
}, },
back_button: { back_button: {
position: 'absolute', position: 'absolute',
...@@ -16,8 +17,8 @@ const styles = StyleSheet.create({ ...@@ -16,8 +17,8 @@ const styles = StyleSheet.create({
}, },
text_title: { text_title: {
fontSize: R.fontsize.fontSizeSubTitle, fontSize: R.fontsize.fontSizeSubTitle,
fontWeight: '500', fontWeight: '600',
fontFamily: R.fonts.InterRegular, fontFamily: R.fonts.fontMedium,
color: R.colors.blue, color: R.colors.blue,
}, },
container_content: { container_content: {
...@@ -25,9 +26,16 @@ const styles = StyleSheet.create({ ...@@ -25,9 +26,16 @@ const styles = StyleSheet.create({
}, },
text_content: { text_content: {
fontSize: R.fontsize.fontSizeLabel, fontSize: R.fontsize.fontSizeLabel,
fontWeight: '500', fontWeight: '400',
fontFamily: R.fonts.fontMedium, fontFamily: R.fonts.fontRegular,
color: R.colors.black, color: R.colors.black,
}, },
icon:{
width:20,
height:15,
},
info:{
paddingHorizontal: 15, paddingVertical: 5
}
}) })
export default styles export default styles
\ No newline at end of file
src/screens/class_schedule/detail/view.js
...@@ -16,13 +16,13 @@ const DetailClassScheduleView = (props) => { ...@@ -16,13 +16,13 @@ const DetailClassScheduleView = (props) => {
style={styles.background_header} style={styles.background_header}
> >
<TouchableOpacity style={styles.back_button} onPress={() => navigate.goBack()}> <TouchableOpacity style={styles.back_button} onPress={() => navigate.goBack()}>
<Image source={ArrowLeftIcon} style= {{width:20, height:15}}/> <Image source={ArrowLeftIcon} style= {styles.icon}/>
</TouchableOpacity> </TouchableOpacity>
</ImageBackground> </ImageBackground>
<View style={styles.container_content}> <View style={styles.container_content}>
<Text style={styles.text_title}>Lịch dạy lớp IT0032.47.T1</Text> <Text style={styles.text_title}>Lịch dạy lớp IT0032.47.T1</Text>
<Text style={styles.text_content}>Thứ 6: 25/07/2025, 07:00 - 09:00</Text> <Text style={styles.text_content}>Thứ 6: 25/07/2025, 07:00 - 09:00</Text>
<View style={[styles.container_content, { paddingHorizontal: 15, paddingVertical: 5 }]}> <View style={[styles.container_content, styles.info]}>
<Text style={styles.text_content}>Vị trí: Phòng B205</Text> <Text style={styles.text_content}>Vị trí: Phòng B205</Text>
<Text style={styles.text_content}>Sĩ số: 40</Text> <Text style={styles.text_content}>Sĩ số: 40</Text>
<Text style={styles.text_content}>Lớp học: Thực hành</Text> <Text style={styles.text_content}>Lớp học: Thực hành</Text>
......
src/screens/class_schedule/filter3day/style.js
...@@ -56,12 +56,14 @@ const styles = StyleSheet.create({ ...@@ -56,12 +56,14 @@ const styles = StyleSheet.create({
}, },
dayHeaderText: { dayHeaderText: {
fontSize: R.fontsize.fontSizeLabel, fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontRegular, fontFamily: R.fonts.fontMedium,
color: R.colors.black, color: R.colors.black,
fontWeight: '600',
}, },
todayHeaderText: { todayHeaderText: {
color: R.colors.black, color: R.colors.black,
fontFamily: R.fonts.fontRegular, fontFamily: R.fonts.fontMedium,
fontWeight: '600',
}, },
dayNumberContainer: { dayNumberContainer: {
minWidth: 28, minWidth: 28,
...@@ -78,6 +80,7 @@ const styles = StyleSheet.create({ ...@@ -78,6 +80,7 @@ const styles = StyleSheet.create({
fontSize: R.fontsize.fontSizeLabel, fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontRegular, fontFamily: R.fonts.fontRegular,
color: R.colors.black, color: R.colors.black,
fontWeight: '400',
}, },
todayHeaderNumber: { todayHeaderNumber: {
color: R.colors.white, color: R.colors.white,
...@@ -125,6 +128,7 @@ const styles = StyleSheet.create({ ...@@ -125,6 +128,7 @@ const styles = StyleSheet.create({
fontSize: R.fontsize.fontSizeLabel, fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontRegular, fontFamily: R.fonts.fontRegular,
color: R.colors.black, color: R.colors.black,
fontWeight: '400',
}, },
eventCard: { eventCard: {
borderRadius: 8, borderRadius: 8,
...@@ -141,11 +145,13 @@ const styles = StyleSheet.create({ ...@@ -141,11 +145,13 @@ const styles = StyleSheet.create({
fontSize: R.fontsize.fontSizeLabel, fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontRegular, fontFamily: R.fonts.fontRegular,
color: R.colors.white, color: R.colors.white,
fontWeight: '400',
}, },
eventTime: { eventTime: {
fontSize: R.fontsize.fontSizeLabel, fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontRegular, fontFamily: R.fonts.fontRegular,
color: R.colors.white, color: R.colors.white,
fontWeight: '400',
}, },
}); });
......
src/screens/class_schedule/filter3day/view.js
...@@ -11,9 +11,7 @@ import styles from './style'; ...@@ -11,9 +11,7 @@ import styles from './style';
const Filter3DayView = (props) => { const Filter3DayView = (props) => {
const { const {
navigation,
currentDate, currentDate,
selectedDate,
showMonthPicker, showMonthPicker,
scrollViewRef, scrollViewRef,
panResponder, panResponder,
...@@ -23,7 +21,6 @@ const Filter3DayView = (props) => { ...@@ -23,7 +21,6 @@ const Filter3DayView = (props) => {
get3DaysDates, get3DaysDates,
isToday, isToday,
handleMonthSelect, handleMonthSelect,
toggleMonthPicker,
calculateEventPosition calculateEventPosition
} = props; } = props;
......
src/screens/class_schedule/filterWeek/style.js
...@@ -46,14 +46,15 @@ const styles = StyleSheet.create({ ...@@ -46,14 +46,15 @@ const styles = StyleSheet.create({
}, },
dayHeaderText: { dayHeaderText: {
fontSize: R.fontsize.fontSizeLabel, fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontRegular, fontFamily: R.fonts.fontMedium,
fontWeight: '400', fontWeight: '600',
color: R.colors.black, color: R.colors.black,
}, },
dayHeaderNumber: { dayHeaderNumber: {
fontSize: R.fontsize.fontSizeContent, fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
color: R.colors.black, color: R.colors.black,
fontWeight: '600',
}, },
dayHeaderNumberContainerToday: { dayHeaderNumberContainerToday: {
...@@ -65,6 +66,7 @@ const styles = StyleSheet.create({ ...@@ -65,6 +66,7 @@ const styles = StyleSheet.create({
color: R.colors.blue, color: R.colors.blue,
fontFamily: R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
fontSize: R.fontsize.fontSizeContent, fontSize: R.fontsize.fontSizeContent,
fontWeight: '600',
}, },
timeSlotsContainer: { timeSlotsContainer: {
flex: 1, flex: 1,
...@@ -130,17 +132,20 @@ const styles = StyleSheet.create({ ...@@ -130,17 +132,20 @@ const styles = StyleSheet.create({
fontSize: R.fontsize.fontSizeBtn, fontSize: R.fontsize.fontSizeBtn,
fontFamily: R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
color: R.colors.white, color: R.colors.white,
fontWeight: '600',
marginBottom: 1, marginBottom: 1,
}, },
eventSubtitle: { eventSubtitle: {
fontSize: R.fontsize.fontSizeContent, fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular, fontFamily: R.fonts.fontRegular,
color: R.colors.white, color: R.colors.white,
fontWeight: '400',
}, },
eventTime: { eventTime: {
fontSize: R.fontsize.fontSizeContent, fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular, fontFamily: R.fonts.fontRegular,
color: R.colors.white, color: R.colors.white,
fontWeight: '400',
}, },
}); });
......
src/screens/class_schedule/filterWeek/view.js
...@@ -10,9 +10,7 @@ import R from '../../../assets/R'; ...@@ -10,9 +10,7 @@ import R from '../../../assets/R';
import styles from './style'; import styles from './style';
const FilterWeekView = ({ const FilterWeekView = ({
navigation,
currentDate, currentDate,
selectedDate,
showMonthPicker, showMonthPicker,
scrollViewRef, scrollViewRef,
panResponder, panResponder,
...@@ -23,9 +21,6 @@ const FilterWeekView = ({ ...@@ -23,9 +21,6 @@ const FilterWeekView = ({
getEventsForDate, getEventsForDate,
calculateEventPosition, calculateEventPosition,
handleMonthSelect, handleMonthSelect,
toggleMonthPicker,
HOUR_HEIGHT,
DAY_COLUMN_WIDTH,
}) => { }) => {
const renderMonthPicker = () => { const renderMonthPicker = () => {
...@@ -66,7 +61,7 @@ const FilterWeekView = ({ ...@@ -66,7 +61,7 @@ const FilterWeekView = ({
<View style={styles.weekHeaderContainer}> <View style={styles.weekHeaderContainer}>
<View style={styles.timeColumnHeader} /> <View style={styles.timeColumnHeader} />
{weekDates.map((date, index) => { {weekDates.map((date, index) => {
const isCurrentDay = isToday(date); // Gọi hàm kiểm tra const isCurrentDay = isToday(date);
return ( return (
<View key={index} style={styles.dayHeaderCell}> <View key={index} style={styles.dayHeaderCell}>
......
src/screens/class_schedule/filterday/index.js
...@@ -59,7 +59,7 @@ const FilterDay = ({navigation}) => { ...@@ -59,7 +59,7 @@ const FilterDay = ({navigation}) => {
}; };
const getDayName = (date) => { const getDayName = (date) => {
const days = ['CN', 'Thứ 2', 'Thứ 3', 'Thứ 4', 'Thứ 5', 'Thứ 6', 'Thứ 7']; const days = ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7'];
return days[date.getDay()]; return days[date.getDay()];
}; };
......
src/screens/class_schedule/filterday/style.js
...@@ -35,15 +35,17 @@ const styles = StyleSheet.create({ ...@@ -35,15 +35,17 @@ const styles = StyleSheet.create({
borderRightColor:R.colors.gray, borderRightColor:R.colors.gray,
}, },
dayName: { dayName: {
fontSize: R.sizes.xs, fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontRegular, fontFamily: R.fonts.fontMedium,
color: R.colors.black, color: R.colors.black,
fontWeight: '600',
marginBottom: 2, marginBottom: 2,
}, },
dayNumber: { dayNumber: {
fontSize: R.fontsize.fontSizeContent, fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular, fontFamily: R.fonts.fontRegular,
color: R.colors.black, color: R.colors.black,
fontWeight: '400',
}, },
timeSlotsContainer: { timeSlotsContainer: {
flex: 1, flex: 1,
...@@ -83,6 +85,7 @@ const styles = StyleSheet.create({ ...@@ -83,6 +85,7 @@ const styles = StyleSheet.create({
fontSize: R.fontsize.fontSizeContent, fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular, fontFamily: R.fonts.fontRegular,
color: R.colors.black, color: R.colors.black,
fontWeight: '400',
}, },
eventCard: { eventCard: {
borderRadius: 15, borderRadius: 15,
......
src/screens/class_schedule/filterday/view.js
...@@ -9,17 +9,13 @@ import R from '../../../assets/R'; ...@@ -9,17 +9,13 @@ import R from '../../../assets/R';
import styles from './style'; import styles from './style';
const FilterDayView = (props) => { const FilterDayView = (props) => {
const { navigation, const {
currentDate,
selectedDate, selectedDate,
showMonthPicker, showMonthPicker,
scrollViewRef, scrollViewRef,
panResponder, panResponder,
getEventsForDate, getEventsForDate,
getDayName, getDayName,
getMonthName,
handleMonthSelect,
toggleMonthPicker,
calculateEventPosition, } = props; calculateEventPosition, } = props;
const isToday = (date) => { const isToday = (date) => {
......
src/screens/class_schedule/style.js
...@@ -13,218 +13,229 @@ const styles = StyleSheet.create({ ...@@ -13,218 +13,229 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
}, },
header: { header: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
paddingVertical: 15, paddingVertical: 15,
}, },
header_title: { header_title: {
fontSize: R.fontsize.fontsSizeTitle, fontSize: R.fontsize.fontsSizeTitle,
fontFamily: R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
color: R.colors.black, color: R.colors.black,
fontWeight: '600', fontWeight: '600',
}, },
navButton: { navButton: {
width: 30, width: 30,
height: 30, height: 30,
borderRadius: 20, borderRadius: 20,
backgroundColor: R.colors.blue, backgroundColor: R.colors.blue,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
}, },
navButtonText: { navButtonText: {
color: R.colors.white, color: R.colors.white,
fontSize: R.fontsize.fontsSizeTitle, fontSize: R.fontsize.fontsSizeTitle,
fontFamily: R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
}, },
weekDaysContainer: { weekDaysContainer: {
flexDirection: 'row', flexDirection: 'row',
paddingBottom: 5, paddingBottom: 5,
marginBottom: 5, marginBottom: 5,
}, },
weekDayCell: { weekDayCell: {
width: CELL_WIDTH, width: CELL_WIDTH,
alignItems: 'center', alignItems: 'center',
}, },
weekDayText: { weekDayText: {
fontFamily: R.fonts.fontRegular, fontFamily: R.fonts.fontMedium,
fontSize: R.fontsize.fontSizeLabel, fontSize: R.fontsize.fontSizeLabel,
fontWeight: '400', fontWeight: '600',
color: R.colors.black, color: R.colors.black,
}, },
calendarGrid: { calendarGrid: {},
}, weekRow: {
weekRow: { flexDirection: 'row',
flexDirection: 'row', },
}, dayCell: {
dayCell: { width: CELL_WIDTH,
width: CELL_WIDTH, minHeight: CELL_HEIGHT,
minHeight: CELL_HEIGHT, borderWidth: 1,
borderWidth: 1, borderColor: R.colors.grayBorderInputTextHeader,
borderColor: R.colors.grayBorderInputTextHeader, padding: 4,
padding: 4, alignItems: 'center',
alignItems: 'center', },
},
selectedDayCell: {
selectedDayCell: { borderColor: R.colors.blue,
borderColor: R.colors.blue, borderWidth: 1,
borderWidth: 1, },
}, dayText: {
dayText: { fontSize: R.fontsize.fontSizeLabel,
fontSize: R.fontsize.fontSizeLabel, fontWeight: '400',
fontWeight: '500', fontFamily: R.fonts.fontRegular,
fontFamily:R.fonts.fontSemiBold, color: R.colors.black,
color: R.colors.black, marginBottom: 2,
marginBottom: 2, },
}, dayTextInactive: {
dayTextInactive: { color: R.colors.black,
color: R.colors.black, opacity: 1,
opacity: 1, },
}, selectedDayText: {
selectedDayText: { color: R.colors.black,
color: R.colors.black, fontWeight: 'bold',
fontWeight: 'bold', fontFamily: R.fonts.fontSemiBold,
fontFamily: R.fonts.fontSemiBold, },
}, todayText: {
todayText: { color: R.colors.white,
color: R.colors.white, fontWeight: 'bold',
fontWeight: 'bold', fontFamily: R.fonts.fontSemiBold,
fontFamily: R.fonts.fontSemiBold, backgroundColor: R.colors.blue,
backgroundColor: R.colors.blue, borderRadius: 15,
borderRadius:15, paddingHorizontal: 4,
paddingHorizontal: 4, paddingVertical: 3,
paddingVertical: 3, },
},
eventsContainer: {
eventsContainer: { width: '100%',
width: '100%', flex: 1,
flex: 1, },
}, eventBar: {
eventBar: { paddingVertical: 2,
paddingVertical: 2, paddingHorizontal: 5,
paddingHorizontal: 5, borderRadius: 10,
borderRadius: 10, marginBottom: 2,
marginBottom: 2, backgroundColor: R.colors.blue,
backgroundColor:R.colors.blue },
}, eventBarText: {
eventBarText: { fontSize: R.fontsize.fontSizeLabel,
fontSize: R.fontsize.fontSizeLabel, color: R.colors.white,
color: R.colors.white, fontWeight: '400',
fontWeight: '500', fontFamily: R.fonts.fontRegular,
fontFamily: R.fonts.fontRegular },
}, moreEventsText: {
moreEventsText: { fontSize: R.fontsize.fontSizeLabel,
fontSize: R.sizes.xs, color: R.colors.gray,
color: R.colors.gray, fontWeight: '400',
textAlign: 'center', fontFamily: R.fonts.fontRegular,
}, textAlign: 'center',
},
modalBackdrop: { containerBottomSheet:{
flex: 1, flex:1,
backgroundColor: R.colors.grayBorderInputTextHeader, marginBottom:10,
justifyContent: 'flex-end', },
},
bottomSheet: { modalBackdrop: {
height: BOTTOM_SHEET_HEIGHT, flex: 1,
backgroundColor: R.colors.white, backgroundColor: R.colors.grayBorderInputTextHeader,
borderTopLeftRadius: 20, justifyContent: 'flex-end',
borderTopRightRadius: 20, },
bottomSheet: {
}, height: BOTTOM_SHEET_HEIGHT,
bottomSheetContent: { backgroundColor: R.colors.white,
paddingHorizontal: 15, borderTopLeftRadius: 20,
}, borderTopRightRadius: 20,
dragHandle: { },
width: 40, bottomSheetContent: {
height: 4, height: BOTTOM_SHEET_HEIGHT,
backgroundColor: R.colors.gray,
borderRadius: 2, },
alignSelf: 'center', dragHandle: {
marginTop: 10, width: 40,
marginBottom: 15, height: 4,
}, backgroundColor: R.colors.gray,
bottomSheetHeader: { borderRadius: 5,
flexDirection: 'row', alignSelf: 'center',
alignItems: 'center', marginTop: 10,
justifyContent: 'space-between', marginBottom: 15,
marginBottom: 20, },
}, bottomSheetHeader: {
bottomSheetTitle: { flexDirection: 'row',
fontSize: R.fontsize.fontSizeContent, alignItems: 'center',
fontFamily: R.fonts.fontMedium, justifyContent: 'space-between',
color: R.colors.black, paddingHorizontal: 15,
flex: 1, },
}, bottomSheetTitle: {
closeButton: { fontSize: R.fontsize.fontSizeContent,
width: 30, fontFamily: R.fonts.fontMedium,
height: 30, color: R.colors.black,
borderRadius: 15, fontWeight: '600',
backgroundColor: R.colors.gray, flex: 1,
alignItems: 'center', },
justifyContent: 'center', closeButton: {
}, width: 30,
closeButtonText: { height: 30,
fontSize: R.fontsize.fontsSize12, borderRadius: 15,
color: R.colors.black, backgroundColor: R.colors.gray,
fontFamily: R.fonts.fontRegular, alignItems: 'center',
}, justifyContent: 'center',
},
noEventsContainer: { closeButtonText: {
flex: 1, fontSize: R.fontsize.fontSizeContent,
alignItems: 'center', color: R.colors.black,
justifyContent: 'center', fontFamily: R.fonts.fontRegular,
paddingVertical: 40, fontWeight: '400',
}, },
noEventsText: { eventsScrollView: {
fontSize: R.fontsize.fontSizeContent, paddingTop:10,
fontFamily: R.fonts.fontRegular, },
color: R.colors.gray, noEventsContainer: {
fontWeight: '400' flex: 1,
}, alignItems: 'center',
eventCard: { justifyContent: 'center',
flexDirection: 'row', paddingVertical: 40,
backgroundColor: R.colors.white, },
borderRadius: 12, noEventsText: {
padding: 15, fontSize: R.fontsize.fontSizeContent,
marginBottom: 12, fontFamily: R.fonts.fontRegular,
borderLeftWidth: 4, color: R.colors.gray,
borderLeftColor: R.colors.blue500, fontWeight: '400',
shadowColor: R.colors.black, },
shadowOffset: { eventCard: {
width: 0, flexDirection: 'row',
height: 2, backgroundColor: R.colors.white,
}, borderRadius: 12,
shadowOpacity: 1, padding: 15,
shadowRadius: 1, marginBottom: 10,
elevation: 2, marginHorizontal:15,
}, borderLeftWidth: 4,
eventTimeContainer: { borderLeftColor: R.colors.blue500,
minWidth: 80, shadowColor: R.colors.black,
alignItems: 'flex-start', shadowOffset: {
justifyContent: 'flex-start', width: 0,
marginRight: 15, height: 2,
}, },
eventTime: { shadowOpacity: 1,
fontSize: R.fontsize.fontSizeContent, shadowRadius: 1,
fontFamily: R.fonts.fontMedium, elevation: 2,
color: R.colors.blue, },
fontWeight: '600', eventTimeContainer: {
}, minWidth: 80,
eventContent: { alignItems: 'flex-start',
flex: 1, justifyContent: 'flex-start',
}, marginRight: 15,
eventTitle: { },
fontSize: R.fontsize.fontSizeContent, eventTime: {
fontFamily: R.fonts.fontMedium, fontSize: R.fontsize.fontSizeContent,
color: R.colors.black, fontFamily: R.fonts.fontMedium,
fontWeight: '600', color: R.colors.blue,
marginBottom: 4, fontWeight: '600',
}, },
eventDescription: { eventContent: {
fontSize: R.fontsize.fontSizeContent, flex: 1,
fontFamily: R.fonts.fontRegular, },
color: R.colors.gray, eventTitle: {
}, fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontMedium,
color: R.colors.black,
fontWeight: '600',
marginBottom: 4,
},
eventDescription: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular,
color: R.colors.gray2,
fontWeight: '400',
},
}); });
export {styles, CELL_WIDTH, BOTTOM_SHEET_HEIGHT}; export {styles, CELL_WIDTH, BOTTOM_SHEET_HEIGHT};
src/screens/class_schedule/view.js
...@@ -127,8 +127,6 @@ const ClassScheduleView = ({ ...@@ -127,8 +127,6 @@ const ClassScheduleView = ({
); );
}; };
const renderCalendarGrid = () => { const renderCalendarGrid = () => {
const weeks = []; const weeks = [];
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
...@@ -152,7 +150,9 @@ const ClassScheduleView = ({ ...@@ -152,7 +150,9 @@ const ClassScheduleView = ({
return ( return (
<View style={styles.bottomSheetContent}> <View style={styles.bottomSheetContent}>
<View style={styles.dragHandle} /> <View style={styles.dragHandle} >
</View>
<View style={styles.bottomSheetHeader}> <View style={styles.bottomSheetHeader}>
<Text style={styles.bottomSheetTitle}> <Text style={styles.bottomSheetTitle}>
...@@ -164,7 +164,6 @@ const ClassScheduleView = ({ ...@@ -164,7 +164,6 @@ const ClassScheduleView = ({
<Text style={styles.closeButtonText}>✕</Text> <Text style={styles.closeButtonText}>✕</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<ScrollView <ScrollView
style={styles.eventsScrollView} style={styles.eventsScrollView}
showsVerticalScrollIndicator={false}> showsVerticalScrollIndicator={false}>
...@@ -172,8 +171,9 @@ const ClassScheduleView = ({ ...@@ -172,8 +171,9 @@ const ClassScheduleView = ({
<View style={styles.noEventsContainer}> <View style={styles.noEventsContainer}>
<Text style={styles.noEventsText}>Không có sự kiện nào</Text> <Text style={styles.noEventsText}>Không có sự kiện nào</Text>
</View> </View>
) : ( ) :
selectedEvents.map((event, index) => ( (selectedEvents.map((event, index) => (
<View style={styles.containerBottomSheet}>
<TouchableOpacity <TouchableOpacity
key={event.id} key={event.id}
style={styles.eventCard} style={styles.eventCard}
...@@ -198,6 +198,7 @@ const ClassScheduleView = ({ ...@@ -198,6 +198,7 @@ const ClassScheduleView = ({
)} )}
</View> </View>
</TouchableOpacity> </TouchableOpacity>
</View>
)) ))
)} )}
</ScrollView> </ScrollView>
...@@ -226,7 +227,7 @@ const ClassScheduleView = ({ ...@@ -226,7 +227,7 @@ const ClassScheduleView = ({
}, },
]} ]}
{...panResponder.panHandlers}> {...panResponder.panHandlers}>
<TouchableOpacity activeOpacity={1}> <TouchableOpacity activeOpacity={1} >
{renderBottomSheetContent()} {renderBottomSheetContent()}
</TouchableOpacity> </TouchableOpacity>
</Animated.View> </Animated.View>
......
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