From e7d8e024d65728abf3ddd99d9a9699cb3e4c07b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciek=20G=C5=82owacki?= Date: Wed, 2 Dec 2020 09:04:06 +0100 Subject: [PATCH] design changes --- src/components/CourseCard.tsx | 23 +++++--- src/components/Dropdown.tsx | 2 +- src/components/SchedulerRow.tsx | 38 +++++++------ src/components/SelectMenu.tsx | 95 ++++++++++++++++++++++++++++++++ src/components/Topbar.tsx | 48 +++++++++------- src/contexts/CoursesProvider.tsx | 12 ++-- 6 files changed, 167 insertions(+), 51 deletions(-) create mode 100644 src/components/SelectMenu.tsx diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx index 8cbccc2..8be8eb6 100644 --- a/src/components/CourseCard.tsx +++ b/src/components/CourseCard.tsx @@ -66,7 +66,7 @@ interface ExpandIconProps { selected: boolean; } -const ExpandIcon = styled(Expand)` +export const ExpandIcon = styled(Expand)` width: 20px; height: 20px; max-width: 20px; @@ -144,10 +144,14 @@ export const CourseCard = ({ course }: CourseCardProps) => { } = useContext(coursesContext)!; const [isSelected, setSelected] = useState(false); const groups = [...course.lectures!, ...course.classes!]; - const [courseLecture, courseClasses] = selectBasketCourseGroups(course.id); + const basketCourseGroups = useMemo(() => selectBasketCourseGroups(course.id), []); + const [previous, setPrevious] = useState(basketCourseGroups); // console.log('lecture is: ', courseLecture); // console.log('class is: ', courseClasses); - const onGroupClick = (group: Group, courseId: number) => changeGroupInBasket(group, courseId); + const onGroupClick = (group: Group, courseId: number) => { + setPrevious((prev) => (group.type === GroupType.CLASS ? { ...prev, classes: group } : { ...prev, lecture: group })); + changeGroupInBasket(group, courseId); + }; return ( @@ -168,20 +172,23 @@ export const CourseCard = ({ course }: CourseCardProps) => { key={index} onClick={() => onGroupClick(group, course.id)} onMouseEnter={() => { - if (group.type === GroupType.CLASS && courseClasses !== undefined) { + if (group.type === GroupType.CLASS) { changeGroupInBasket(group, course.id); // setTimeout(()=> { changeHoveredGroup(courseClasses)},[500]) - } - if (group.type === GroupType.LECTURE && courseLecture !== undefined) { + if (group.type === GroupType.LECTURE) { changeGroupInBasket(group, course.id); // setTimeout(()=> { changeHoveredGroup(courseLecture)},[500]) } - }} onMouseLeave={() => { if (hoveredGroup) { - changeGroupInBasket(hoveredGroup, course.id); + if (hoveredGroup.type === GroupType.CLASS && previous.classes !== undefined) { + changeGroupInBasket(previous.classes, course.id); + } + if (hoveredGroup.type === GroupType.LECTURE && previous.lecture !== undefined) { + changeGroupInBasket(previous.lecture, course.id); + } changeHoveredGroup(null); } }} diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx index f3f18a1..0940371 100644 --- a/src/components/Dropdown.tsx +++ b/src/components/Dropdown.tsx @@ -34,7 +34,7 @@ const CourseContainer = styled.div` background-color: #f2f4f7; font-size: 16px; font-weight: 500; - scroll-snap-align: end; + /* scroll-snap-align: end; */ :hover { background-color: #eceef4; cursor: pointer; diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx index 5d3192a..1fcef30 100644 --- a/src/components/SchedulerRow.tsx +++ b/src/components/SchedulerRow.tsx @@ -5,12 +5,11 @@ import Popover from '@material-ui/core/Popover'; import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; import { MONDAY_TO_FRIDAY } from '../constants'; import { coursesContext } from '../contexts/CoursesProvider'; -import { group } from 'console'; +import { ClickAwayListener, Popper } from '@material-ui/core'; const useStyles = makeStyles((theme: Theme) => createStyles({ popover: { - pointerEvents: 'none', fontSize: '14px', }, paper: { @@ -56,7 +55,7 @@ const StyledSchedulerEvent = styled.div` flex-direction: column; justify-content: center; align-items: center; - z-index: 2; + z-index: 20000; font-size: 0.65vw; line-height: normal; border-radius: 10px; @@ -129,28 +128,30 @@ const getGroupsPerDay = (groups: Array) => { }; export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }: SchedulerRowProps) => { - const { hoveredGroup, selectBasketNames } = useContext(coursesContext)!; - console.log('hovered group is: ', hoveredGroup); - console.log('groups: ', groups); - const basketNames = useMemo(() => selectBasketNames(), [selectBasketNames]); - console.log('basket names: ', basketNames); - console.log('groups: ', groups); + const { hoveredGroup } = useContext(coursesContext)!; const classes = useStyles(); const groupsPerDay = getGroupsPerDay(groups); const [anchorEl, setAnchorEl] = React.useState(null); const [popoverId, setPopoverId] = useState(null); //looks weird const handlePopoverOpen = (event: MouseEvent) => { + console.log('I was clicked!!!!'); setAnchorEl(event.currentTarget); setPopoverId(event.currentTarget.id); }; - const handlePopoverClose = () => { - setAnchorEl(null); + const handlePopoverClose = (e: MouseEvent) => { + console.log('current target:', e.currentTarget); + console.log(' target:', e.target); setPopoverId(null); + setAnchorEl(null); + console.log('click awayyy'); }; - + useEffect(() => { + console.log('anchorEl: ', anchorEl); + }, [anchorEl]); const open = Boolean(anchorEl); + const id = open ? 'simple-popover' : undefined; return (
@@ -168,6 +169,7 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight } group.day === eventIndex && ( handlePopoverOpen(e)} - onMouseLeave={handlePopoverClose} + onClick={(e) => handlePopoverOpen(e)} > = 3}>{groups[index].name} @@ -194,7 +195,7 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight } -
+
{ + console.log('XDD'); + }} + >

{groups[index].name}

Prowadzący: {groups[index].lecturer} diff --git a/src/components/SelectMenu.tsx b/src/components/SelectMenu.tsx new file mode 100644 index 0000000..c8e87b8 --- /dev/null +++ b/src/components/SelectMenu.tsx @@ -0,0 +1,95 @@ +import { ClickAwayListener } from '@material-ui/core'; +import React, { useState } from 'react'; +import styled from 'styled-components'; +import { ExpandIcon } from './CourseCard'; + +const Wrapper = styled.div` + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + width: 10%; + margin-top: 15px; + font-family: 'Roboto', sans-serif; + background-color: #f1f2f5; + color: black; + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + &:focus { + outline: none; + } + padding-left: 15px; + cursor: pointer; + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + user-select: none; +`; +const Header = styled.div` + display: flex; + align-items: center; +`; +const HeaderTitle = styled.div` + font-family: 'Roboto', sans-serif; + font-size: 16px; + font-weight: 400; +`; +const List = styled.ul` + list-style-type: none; + margin: 0; + padding: 0; + background-color: #f2f4f7; +`; +const ListItem = styled.li` + font-family: 'Roboto', sans-serif; + font-size: 16px; + user-select: none; + font-weight: 400; + :hover { + background-color: #eceef4; + } +`; +const ExpandIconSelect = styled(ExpandIcon)` + width: 10px; + height: 10px; +`; +export const SelectMenu = () => { + const [isOpen, setIsOpen] = useState(false); + const [selectedOption, setSelectedOption] = useState('przedmioty'); + return ( + { + setIsOpen(false); + }} + > + +

{ + console.log('clicked'); + setIsOpen(!isOpen); + }} + > + {selectedOption} + +
+ {isOpen && ( + + { + setSelectedOption('przedmioty'); + }} + > + przedmioty + + { + setSelectedOption('studenci'); + }} + > + studenci + + + )} + + + ); +}; diff --git a/src/components/Topbar.tsx b/src/components/Topbar.tsx index 39c926c..70ee4d1 100644 --- a/src/components/Topbar.tsx +++ b/src/components/Topbar.tsx @@ -7,6 +7,7 @@ import PolishIcon from '../assets/poland.svg'; import EnglishIcon from '../assets/united-kingdom.svg'; import styled from 'styled-components/macro'; import ClickAwayListener from 'react-click-away-listener'; +import { SelectMenu } from './SelectMenu'; const Topbar = styled.div` background-color: #e3e5ed; @@ -51,11 +52,12 @@ const FlexboxColumn = styled.div` `; const InputWrapper = styled.div` + width: 95%; display: flex; margin-top: 15px; + max-height: 40px; background-color: #f2f4f7; - border-radius: 6px; - align-items: center; + border-radius: 0 6px 6px 0; &:hover { background-color: #ffffff; } @@ -91,17 +93,17 @@ const Input = styled.input` font-size: 18px; background-color: #f1f2f5; height: 40px; + max-height: 40px; width: 100%; border: none; margin-left: 5px; - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; &:focus { outline: none; } `; const CloseIcon = styled(Close)` + align-self: center; width: 30px; height: 30px; margin-right: 5px; @@ -130,6 +132,10 @@ const Icon = styled.img` } `; +export const Flexbox = styled.div` + display: flex; +`; + interface TopbarProps { handleTransfer: (e: MouseEvent) => void; } @@ -173,21 +179,25 @@ export default function ({ handleTransfer }: TopbarProps) { - - - Przedmiot - Student - - { - handleShowDropdown(); - }} - /> - - + + + + + {/* + Przedmiot + Student + */} + { + handleShowDropdown(); + }} + /> + + + diff --git a/src/contexts/CoursesProvider.tsx b/src/contexts/CoursesProvider.tsx index d5b854a..f0f0c48 100644 --- a/src/contexts/CoursesProvider.tsx +++ b/src/contexts/CoursesProvider.tsx @@ -7,7 +7,9 @@ import CloseIcon from '@material-ui/icons/Close'; import styled from 'styled-components'; const StyledCloseIcon = styled(CloseIcon)` + color: #000000; &:hover { + color: white; cursor: pointer; } `; @@ -25,7 +27,7 @@ interface CourseContext { selectSchedulerEvents: () => Array; selectBasketNames: () => Array; selectBasketCourses: () => Array; - selectBasketCourseGroups: (courseId: number) => Array; + selectBasketCourseGroups: (courseId: number) => { lecture: Group | undefined; classes: Group | undefined }; } export const coursesContext = createContext(undefined); @@ -41,9 +43,6 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { const [courses, setCourses] = useState>([]); const [basket, setBasket] = useState>([]); const [hoveredGroup, setHoveredGroup] = useState(null); - useEffect(() => { - console.log('actually hovered group is: ', hoveredGroup); - }, [hoveredGroup]); const selectBasketIds = () => { const classesIds = basket.map((course) => course?.classes?.id).filter((course) => course !== undefined); const lecturesIds = basket.map((course) => course?.lecture?.id).filter((course) => course !== undefined); @@ -78,9 +77,9 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { const selectBasketCourseGroups = (courseId: number) => { const course = basket.find(({ id }) => id === courseId); if (course !== undefined) { - return [course.lecture, course.classes]; + return { lecture: course.lecture, classes: course.classes }; } else { - return [undefined, undefined]; + return { lecture: undefined, classes: undefined }; } }; @@ -172,7 +171,6 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { `${process.env.REACT_APP_API_URL}/api/v1/courses/getCoursesWithGroups`, ); const sortedCourses = courses.sort((a, b) => (a.name > b.name ? 1 : -1)); - console.log('courses: ', courses); setCourses(sortedCourses); } catch (e) { console.log(e);