y0rune/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

popover styled

Browse Source
This commit is contained in:
Maciek Głowacki 2020-11-25 03:14:39 +01:00
parent 4d8dbdd0a9
commit d0d685ef64
1 changed files with 32 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/SchedulerRow.tsx
View File

@ -2,7 +2,6 @@ import React, { Fragment, MouseEvent, useState, useEffect, useRef } from 'react'
import { GroupType, SchedulerEvent } from '../types'; import { GroupType, SchedulerEvent } from '../types';
import styled from 'styled-components/macro'; import styled from 'styled-components/macro';
import Popover from '@material-ui/core/Popover'; import Popover from '@material-ui/core/Popover';
import Typography from '@material-ui/core/Typography';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import { MONDAY_TO_FRIDAY } from '../constants'; import { MONDAY_TO_FRIDAY } from '../constants';
@ -10,15 +9,21 @@ const useStyles = makeStyles((theme: Theme) =>
createStyles({ createStyles({
popover: { popover: {
pointerEvents: 'none', pointerEvents: 'none',
fontSize: '14px',
}, },
paper: { paper: {
padding: theme.spacing(1), padding: '15px 15px 15px 15px',
marginLeft: 5, textAlign: 'left',
textAlign: 'center', lineHeight: `1 !important`,
}, },
}), }),
); );
const PopoverSpan = styled.span`
font-weight: 'bold';
margin-right: 2px;
`;
interface SchedulerEventsWrapperProps { interface SchedulerEventsWrapperProps {
eventIndex: number; eventIndex: number;
rowTop: number; rowTop: number;
@ -61,10 +66,6 @@ const StyledSchedulerEvent = styled.div<SchedulerEventProps>`
box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.75); box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.75);
`; `;
const StyledTypography = styled(Typography)`
background-color: white;
`;
const threeStyles = () => { const threeStyles = () => {
return ` return `
white-space: nowrap; white-space: nowrap;
@ -72,7 +73,6 @@ const threeStyles = () => {
max-width: 70px;`; max-width: 70px;`;
}; };
type BoldParagraphProps = { type BoldParagraphProps = {
isThree?: boolean; isThree?: boolean;
}; };
@ -97,7 +97,7 @@ const ClassWrap = styled.div`
const TextWrapper = styled.div` const TextWrapper = styled.div`
flex: 1; flex: 1;
width: inherit; width: inherit;
padding: 0 5px 0 5px; padding: 0 5px 5px 5px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
`; `;
@ -120,9 +120,10 @@ const getGroupsPerDay = (groups: Array<SchedulerEvent>) => {
export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }: SchedulerRowProps) => { export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }: SchedulerRowProps) => {
const classes = useStyles(); const classes = useStyles();
const groupsPerDay = getGroupsPerDay(groups);
console.log('groups: ', groups);
const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null); const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);
const [popoverId, setPopoverId] = useState<string | null>(null); const [popoverId, setPopoverId] = useState<string | null>(null);
const groupsPerDay = getGroupsPerDay(groups);
//looks weird //looks weird
const handlePopoverOpen = (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => { const handlePopoverOpen = (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
setAnchorEl(event.currentTarget); setAnchorEl(event.currentTarget);
@ -167,11 +168,11 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
{groupsPerDay[group.day] < 3 ? ( {groupsPerDay[group.day] < 3 ? (
<TextWrapper> <TextWrapper>
<div>{`${groups[index].time[0]}-${groups[index].time[1]}`}</div> <div>{`${groups[index].time[0]}-${groups[index].time[1]}`}</div>
<div>3/30</div> <div>3/{groups[index].capacity}</div>
</TextWrapper> </TextWrapper>
) : ( ) : (
<TextWrapper style={{ flexDirection: 'column' }}> <TextWrapper style={{ flexDirection: 'column' }}>
<div style={{ alignSelf: 'flex-end' }}>3/30</div> <div style={{ alignSelf: 'flex-end' }}>3/{groups[index].capacity}</div>
</TextWrapper> </TextWrapper>
)} )}
</ClassWrap> </ClassWrap>
@ -195,11 +196,24 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
onClose={handlePopoverClose} onClose={handlePopoverClose}
disableRestoreFocus disableRestoreFocus
> >
<StyledTypography> <div style={{ display: 'flex', flexDirection: 'column' }}>
<p>{groups[index].name}</p> <p style={{ margin: '7px 0 7px 0', fontWeight: 'bold' }}>{groups[index].name}</p>
<p>{groups[index].lecturer}</p> <p style={{ margin: '2px 0 2px 0' }}>
<p>{groups[index].room}</p> <PopoverSpan>Prowadzący:</PopoverSpan> {groups[index].lecturer}
</StyledTypography> </p>
<p style={{ margin: '2px 0 2px 0' }}>
<span style={{ fontWeight: 'bold', marginRight: '2px' }}>Sala zajęć</span>: {groups[index].room}
</p>
<p style={{ margin: '2px 0 2px 0' }}>
<span style={{ fontWeight: 'bold', marginRight: '2px' }}>Kod przedmiotu: </span>ACB129
</p>
<p style={{ margin: '2px 0 2px 0' }}>
<span style={{ fontWeight: 'bold', marginRight: '2px' }}>Kod grupy: </span>FVJ753
</p>
<p style={{ margin: '2px 0 2px 0' }}>
<span style={{ fontWeight: 'bold', marginRight: '2px' }}>Punkty ECTS:</span> 2
</p>
</div>
</Popover> </Popover>
</Fragment> </Fragment>
), ),