Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Frontend visuals done #285

Merged
merged 28 commits into from
May 19, 2024
Merged

Frontend visuals done #285

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
24c9016
added secondary button in custom components
friedrecursion May 18, 2024
376097f
fixed subject page
friedrecursion May 18, 2024
a7afed7
added evenlyspaced row and added it to assignmentPage
friedrecursion May 18, 2024
b565725
alignment fixed for assignment and subjectpage
friedrecursion May 19, 2024
c961783
knoppen assignmentpage fix
friedrecursion May 19, 2024
9e5ae3f
updated group page
friedrecursion May 19, 2024
2d69029
opzoeken student werkt
friedrecursion May 19, 2024
2dcb922
type errors weggekregen
Bendemeurichy May 19, 2024
af5db55
made clickable area of listitems for assigment and subject page smaller
friedrecursion May 19, 2024
f0eab2e
typo in secondaryButton
friedrecursion May 19, 2024
ac4d381
started removing anies
friedrecursion May 19, 2024
773c334
any gone now
friedrecursion May 19, 2024
3f6ea63
inladen studenten bij groepen is niet meer onacceptabel traag
Bendemeurichy May 19, 2024
98ab637
ran formatting and removed unused imports
friedrecursion May 19, 2024
3130bd3
run npm format
Bendemeurichy May 19, 2024
9dedf3b
Revert "inladen studenten bij groepen is niet meer onacceptabel traag"
Bendemeurichy May 19, 2024
6d8a29b
Merge branch 'frontend_visuals' into group_performance
friedrecursion May 19, 2024
7578f13
Merge pull request #278 from SELab-2/group_performance
friedrecursion May 19, 2024
b65475e
opnieuw performance omhoog gedaan
Bendemeurichy May 19, 2024
ddca5cc
some minor changes
friedrecursion May 19, 2024
a65d816
Merge pull request #282 from SELab-2/group_performance
friedrecursion May 19, 2024
7e82fa8
done cleaning choose page
friedrecursion May 19, 2024
6acdde4
bij submmissionpage green en red voor status geslaagd of niet
friedrecursion May 19, 2024
40ee204
scoringpage done
friedrecursion May 19, 2024
4dc8e36
done visuals
friedrecursion May 19, 2024
f0f9c53
small tweek
friedrecursion May 19, 2024
41e069a
Merge branch 'frontend' into frontend_visuals
friedrecursion May 19, 2024
07c9ce5
remove double import
mathis2003 May 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 9 additions & 5 deletions frontend/frontend/src/components/CopyToClipboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { useState } from 'react'
import { darken } from '@mui/system'
import { Box, Collapse, Tooltip, Typography } from '@mui/material'
import Button from '@mui/material/Button'
import { Button } from './CustomComponents.tsx'
import { AssignmentTurnedIn, ContentPaste } from '@mui/icons-material'
import { t } from 'i18next'
import theme from '../Theme.ts'

interface CopyToClipboardProps {
invitationLink: string
Expand Down Expand Up @@ -42,21 +44,23 @@ export const CopyToClipboard = ({ invitationLink }: CopyToClipboardProps) => {
>
<Button
onClick={copyToClipboard}
variant={'contained'}
sx={{
height: 40,
maxWidth: 500,
minWidth: 200,
backgroundColor: 'background.default',
backgroundColor: 'secondary.main',
color: 'text.primary',
textTransform: 'none',
borderRadius: 2,
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
padding: 0,
gap: 1,
'&:hover': {
backgroundColor: 'secondary.main',
backgroundColor: darken(
theme.palette.secondary.main,
0.2
),
},
}}
>
Expand Down
95 changes: 87 additions & 8 deletions frontend/frontend/src/components/CustomComponents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,33 @@
import { darken } from '@mui/system'
import {
Button as BaseButton,
Card as BaseCard,
Divider as BaseDivider,
Box,
ButtonProps,
CardProps,
DividerProps,
} from '@mui/material'
import theme from '../Theme.ts'
import { ReactNode } from 'react'

export const Button = ({ children, ...props }: any) => {
interface PrimaryButtonProps extends ButtonProps {
children: ReactNode
}

export const Button = ({ children, ...props }: PrimaryButtonProps) => {
return (
<BaseButton
variant="contained"
disableElevation
size="large"
sx={{
maxHeight: '35px',
bgcolor: 'primary.main',
maxHeight: '40px',
backgroundColor: 'primary.main',
textTransform: 'none',
color: 'primary.contrastText',
'&:hover': {
backgroundColor: 'secondary.main',
color: 'secondary.contrastText',
backgroundColor: darken(theme.palette.primary.main, 0.5),
},
}}
{...props}
Expand All @@ -28,7 +37,40 @@ export const Button = ({ children, ...props }: any) => {
)
}

export const Card = ({ children, ...props }: any) => {
interface SecondaryButtonProps extends ButtonProps {
children: ReactNode
}

export const SecondaryButton = ({
children,
...props
}: SecondaryButtonProps) => {
return (
<BaseButton
variant="contained"
disableElevation
size="large"
sx={{
maxHeight: '40px',
backgroundColor: 'secondary.main',
textTransform: 'none',
color: 'secondary.contrastText',
'&:hover': {
backgroundColor: darken(theme.palette.secondary.main, 0.2),
},
}}
{...props}
>
{children}
</BaseButton>
)
}

interface CustomCardProps extends CardProps {
children: ReactNode
}

export const Card = ({ children, ...props }: CustomCardProps) => {
return (
<BaseCard
elevation={0}
Expand All @@ -44,7 +86,11 @@ export const Card = ({ children, ...props }: any) => {
)
}

export const Divider = ({ children, ...props }: any) => {
interface CustomDividerProps extends DividerProps {
children?: ReactNode
}

export const Divider = ({ children, ...props }: CustomDividerProps) => {
return (
<BaseDivider
sx={{
Expand All @@ -58,4 +104,37 @@ export const Divider = ({ children, ...props }: any) => {
)
}

export default { Button, Card, Divider }
interface EvenlySpacedRowProps {
items: ReactNode[]
}

export const EvenlySpacedRow = ({ items }: EvenlySpacedRowProps) => {
return (
<Box width={'100%'} display="flex" justifyContent={'space-between'}>
{items.map((item, index) => (
<Box
key={index}
width={
items.length == 2
? '50%'
: index == 0 || index == items.length - 1
? 50 / items.length + '%'
: (100 - 100 / items.length) /
(items.length - 2) +
'%'
}
sx={{
//border: '1px solid red',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Box>{item}</Box>
</Box>
))}
</Box>
)
}

export default { Button, Card, Divider, EvenlySpacedRow }
22 changes: 6 additions & 16 deletions frontend/frontend/src/components/DeadlineCalendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ import {
import dayjs, { Dayjs } from 'dayjs'
import {
Badge,
SxProps,
Stack,
Typography,
List,
ListItem,
ListItemButton,
ListItemText,
Stack,
SxProps,
Typography,
} from '@mui/material'
import { useEffect, useRef, useState } from 'react'
import AssignmentIcon from '@mui/icons-material/Assignment'
Expand Down Expand Up @@ -125,14 +125,7 @@ function DeadlineMenu({ assignments, selectedDay }: DeadlineMenuProps) {
<ListItem>
<ListItemButton
sx={{
border: 0.5,
borderColor: 'primary.main',
textAlign: 'center',
width: '100%',
borderRadius: 2,
'&:hover': {
backgroundColor: 'primary.light',
},
border: 1,
}}
onClick={() =>
handleProjectClick(
Expand All @@ -141,11 +134,8 @@ function DeadlineMenu({ assignments, selectedDay }: DeadlineMenuProps) {
)
}
>
<ListItemText>
<Typography color={'text.primary'}>
{assignment.titel}
</Typography>
</ListItemText>
<ListItemText primary={assignment.titel} />

</ListItemButton>
</ListItem>
))}
Expand Down
1 change: 1 addition & 0 deletions frontend/frontend/src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,7 @@ export const Header = ({ variant, title }: Props) => {
sx={{
color: 'background.default',
paddingTop: 1,
textTransform: 'none',
}}
>
Logout
Expand Down
68 changes: 32 additions & 36 deletions frontend/frontend/src/components/SubmissionListItemStudentPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { EvenlySpacedRow } from './CustomComponents.tsx'
import {
ListItem,
ListItemButton,
ListItemIcon,
ListItemText,
Box,
} from '@mui/material'
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
import HighlightOffIcon from '@mui/icons-material/HighlightOff'
Expand Down Expand Up @@ -49,46 +51,40 @@ export function SubmissionListItemStudentPage({

return (
<>
<ListItem key={realId} sx={{ margin: 0 }} disablePadding={true}>
<ListItem key={realId} sx={{ maxHeight: '30px' }} disablePadding>
<ListItemButton
sx={{
width: '100%',
height: 30,
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
paddingX: 5,
paddingY: 3,
borderRadius: 2,
}}
sx={{ maxHeight: '30px' }}
onClick={handleSubmissionClick}
>
{/* Display submission id */}
<ListItemText
sx={{
maxWidth: 110,
color: 'primary.main',
'&:hover': {
color: 'primary.light',
},
}}
primary={visualId}
<EvenlySpacedRow
items={[
<ListItemText
sx={{
color: 'primary.main',
'&:hover': {
color: 'primary.light',
},
}}
primary={visualId}
/>,
<ListItemText
primary={timestamp ? timestamp : t('time')}
/>,
<Box sx={{ maxWidth: '24px' }}>
<ListItemIcon sx={{ minWidth: 35 }}>
{status ? (
<CheckCircleOutlineIcon
sx={{ color: 'success.main' }}
/>
) : (
<HighlightOffIcon
sx={{ color: 'error.main' }}
/>
)}
</ListItemIcon>
</Box>,
]}
/>
{/* Display submission timestamp */}
<ListItemText
sx={{ maxWidth: 150 }}
primary={timestamp ? timestamp : t('time')}
/>
{/* Display submission status icon */}
<ListItemIcon sx={{ minWidth: 35 }}>
{status ? (
<CheckCircleOutlineIcon
sx={{ color: 'success.main' }}
/>
) : (
<HighlightOffIcon sx={{ color: 'error.main' }} />
)}
</ListItemIcon>
</ListItemButton>
</ListItem>
</>
Expand Down
Loading