diff --git a/client/src/pages/presentationEditor/PresentationEditorPage.tsx b/client/src/pages/presentationEditor/PresentationEditorPage.tsx
index 651402514ca49e0d2f3eb5bcbb9bffd610dea243..5a0dbc99f7e98559365e5a1adbea11bd2e13bf03 100644
--- a/client/src/pages/presentationEditor/PresentationEditorPage.tsx
+++ b/client/src/pages/presentationEditor/PresentationEditorPage.tsx
@@ -51,6 +51,7 @@ const useStyles = makeStyles((theme: Theme) =>
},
rightDrawerPaper: {
width: rightDrawerWidth,
+ background: '#EAEAEA',
},
// necessary for content to be below app bar
toolbar: theme.mixins.toolbar,
diff --git a/client/src/pages/presentationEditor/components/CompetitionSettings.tsx b/client/src/pages/presentationEditor/components/CompetitionSettings.tsx
index 6b555abc5a08e628f95bbf337b6425e009b96d1b..a9a1d7677eca1d3a9fedf55ba0c43a35e19f5979 100644
--- a/client/src/pages/presentationEditor/components/CompetitionSettings.tsx
+++ b/client/src/pages/presentationEditor/components/CompetitionSettings.tsx
@@ -9,18 +9,27 @@ const useStyles = makeStyles((theme: Theme) =>
'& > *': {
margin: theme.spacing(1),
width: '100%',
+ background: 'white',
},
},
textInput: {
margin: theme.spacing(2),
width: '87%',
+ background: 'white',
},
textCenter: {
textAlign: 'center',
+ background: 'white',
},
center: {
display: 'flex',
justifyContent: 'center',
+ background: 'white',
+ },
+ importedImage: {
+ width: 70,
+ height: 50,
+ background: 'white',
},
})
)
@@ -43,8 +52,8 @@ const CompetitionSettings: React.FC = () => {
<Divider />
<TextField className={classes.textInput} id="outlined-basic" label="Stad" variant="outlined" />
</form>
+
<List>
- <Divider />
<ListItem>
<ListItemText className={classes.textCenter} primary="Lag" />
</ListItem>
@@ -60,6 +69,15 @@ const CompetitionSettings: React.FC = () => {
<Button>Lägg till lag</Button>
</ListItem>
</List>
+
+ <ListItem button>
+ <img
+ id="temp source, todo: add image source to elements of pictureList"
+ src="https://i1.wp.com/stickoutmedia.se/wp-content/uploads/2021/01/placeholder-3.png?ssl=1"
+ className={classes.importedImage}
+ />
+ <ListItemText className={classes.textCenter} primary="Välj bakgrundsbild ..." />
+ </ListItem>
</div>
)
}
diff --git a/client/src/pages/presentationEditor/components/SettingsPanel.test.tsx b/client/src/pages/presentationEditor/components/SettingsPanel.test.tsx
index a421b30a9cd38c7b0893ea99b76f19af3af79693..b4daa57be6bc6574d2b2617e986f50348e345246 100644
--- a/client/src/pages/presentationEditor/components/SettingsPanel.test.tsx
+++ b/client/src/pages/presentationEditor/components/SettingsPanel.test.tsx
@@ -15,11 +15,3 @@ it('renders slide settings tab', () => {
tabs.children().at(1).simulate('click')
expect(wrapper.text().includes('2')).toBe(true) //TODO: check that SlideSettings exists
})
-
-it('renders style settings tab', () => {
- const wrapper = mount(<SettingsPanel />)
- const tabs = wrapper.find('.MuiTabs-flexContainer')
- expect(wrapper.find(CompetitionSettings).length).toEqual(1)
- tabs.children().at(2).simulate('click')
- expect(wrapper.text().includes('3')).toBe(true) //TODO: check that StyleSettings exists
-})
diff --git a/client/src/pages/presentationEditor/components/SettingsPanel.tsx b/client/src/pages/presentationEditor/components/SettingsPanel.tsx
index 4ca3a6cebe89829fbb87e9e650f424e2a2c3d05a..ac3c45f106305d3f09e84c3c133433f582c8ed9f 100644
--- a/client/src/pages/presentationEditor/components/SettingsPanel.tsx
+++ b/client/src/pages/presentationEditor/components/SettingsPanel.tsx
@@ -4,7 +4,6 @@ import React from 'react'
import CompetitionSettings from './CompetitionSettings'
import SlideSettings from './SlideSettings'
import { SettingsTab } from './styled'
-import StyleSettings from './StyleSettings'
interface TabPanelProps {
activeTab: number
@@ -14,10 +13,8 @@ function TabContent(props: TabPanelProps) {
const { activeTab } = props
if (activeTab === 0) {
return <CompetitionSettings />
- } else if (activeTab === 1) {
- return <SlideSettings />
}
- return <StyleSettings />
+ return <SlideSettings />
}
const SettingsPanel: React.FC = () => {
@@ -28,7 +25,6 @@ const SettingsPanel: React.FC = () => {
<Tabs value={activeTab} onChange={(event, val) => setActiveTab(val)} aria-label="simple tabs example">
<SettingsTab label="Tävling" />
<SettingsTab label="Sida" />
- <SettingsTab label="Stil" />
</Tabs>
</AppBar>
<TabContent activeTab={activeTab} />
diff --git a/client/src/pages/presentationEditor/components/SlideSettings.tsx b/client/src/pages/presentationEditor/components/SlideSettings.tsx
index b765104d16cf894f21a07dd769bac2735d4c5fc4..936f3d8b5f4285fae1f8be488e608595887515ee 100644
--- a/client/src/pages/presentationEditor/components/SlideSettings.tsx
+++ b/client/src/pages/presentationEditor/components/SlideSettings.tsx
@@ -1,9 +1,7 @@
import {
Button,
Checkbox,
- Divider,
FormControl,
- Grid,
InputLabel,
List,
ListItem,
@@ -11,7 +9,6 @@ import {
MenuItem,
Select,
TextField,
- Typography,
} from '@material-ui/core'
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
import CloseIcon from '@material-ui/icons/Close'
@@ -24,29 +21,39 @@ const useStyles = makeStyles((theme: Theme) =>
'& > *': {
margin: theme.spacing(1),
width: '100%',
+ background: 'white',
},
},
textInput: {
margin: theme.spacing(2),
width: '87%',
+ background: 'white',
},
textCenter: {
textAlign: 'center',
+ background: 'white',
},
center: {
display: 'flex',
justifyContent: 'center',
+ background: 'white',
},
dropDown: {
margin: theme.spacing(2),
width: '87%',
+ background: 'white',
},
clickableIcon: {
cursor: 'pointer',
+ background: 'white',
},
importedImage: {
width: 70,
height: 50,
+ background: 'white',
+ },
+ whiteBackground: {
+ background: 'white',
},
})
)
@@ -88,39 +95,39 @@ const SlideSettings: React.FC = () => {
return (
<div className={classes.textInputContainer}>
- <FormControl variant="outlined" className={classes.dropDown}>
- <InputLabel id="slide-type-selection-label">Sidtyp</InputLabel>
- <Select value={slideTypeSelected} label="Sidtyp" defaultValue="informationSlide" onChange={handleChange}>
- <MenuItem value="informationSlide">
- <Button>Informationssida</Button>
- </MenuItem>
- <MenuItem value="textQuestion">
- <Button>Skriftlig fråga</Button>
- </MenuItem>
- <MenuItem value="practicalQuestion">
- <Button>Praktisk fråga</Button>
- </MenuItem>
- <MenuItem value="multipleChoiceQuestion">
- <Button>Flervalsfråga</Button>
- </MenuItem>
- </Select>
- </FormControl>
- <Divider />
+ <div className={classes.whiteBackground}>
+ <FormControl variant="outlined" className={classes.dropDown}>
+ <InputLabel id="slide-type-selection-label">Sidtyp</InputLabel>
+ <Select value={slideTypeSelected} label="Sidtyp" defaultValue="informationSlide" onChange={handleChange}>
+ <MenuItem value="informationSlide">
+ <Button>Informationssida</Button>
+ </MenuItem>
+ <MenuItem value="textQuestion">
+ <Button>Skriftlig fråga</Button>
+ </MenuItem>
+ <MenuItem value="practicalQuestion">
+ <Button>Praktisk fråga</Button>
+ </MenuItem>
+ <MenuItem value="multipleChoiceQuestion">
+ <Button>Flervalsfråga</Button>
+ </MenuItem>
+ </Select>
+ </FormControl>
+ </div>
- <Grid container spacing={0} justify="space-evenly" alignItems="center">
- <Grid item>
- <Typography variant="subtitle2">Timer (s):</Typography>
- </Grid>
- <Divider orientation="vertical" flexItem />
- <Grid item>
- <TextField margin="dense" id="outlined-basic" label="Antal sekunder" variant="outlined" />
- </Grid>
- </Grid>
- <Divider />
+ <ListItem>
+ <TextField
+ id="standard-number"
+ variant="outlined"
+ placeholder="Antal sekunder"
+ helperText="Lämna blank för att inte använda timerfunktionen"
+ label="Timer"
+ type="number"
+ />
+ </ListItem>
<List>
- <Divider />
- <ListItem>
+ <ListItem divider>
<ListItemText
className={classes.textCenter}
primary="Svarsalternativ"
@@ -140,11 +147,9 @@ const SlideSettings: React.FC = () => {
<Button>Lägg till svarsalternativ</Button>
</ListItem>
</List>
- <Divider />
<List>
- <Divider />
- <ListItem>
+ <ListItem divider>
<ListItemText className={classes.textCenter} primary="Text" />
</ListItem>
{texts.map((text) => (
@@ -160,11 +165,9 @@ const SlideSettings: React.FC = () => {
<Button>Lägg till text</Button>
</ListItem>
</List>
- <Divider />
<List>
- <Divider />
- <ListItem>
+ <ListItem divider>
<ListItemText className={classes.textCenter} primary="Bilder" />
</ListItem>
{pictures.map((picture) => (
@@ -184,6 +187,15 @@ const SlideSettings: React.FC = () => {
<Button>Lägg till bild</Button>
</ListItem>
</List>
+
+ <ListItem button>
+ <img
+ id="temp source, todo: add image source to elements of pictureList"
+ src="https://i1.wp.com/stickoutmedia.se/wp-content/uploads/2021/01/placeholder-3.png?ssl=1"
+ className={classes.importedImage}
+ />
+ <ListItemText className={classes.textCenter}>Välj bakgrundsbild ...</ListItemText>
+ </ListItem>
</div>
)
}
diff --git a/client/src/pages/presentationEditor/components/StyleSettings.test.tsx b/client/src/pages/presentationEditor/components/StyleSettings.test.tsx
deleted file mode 100644
index 0961afdfa6620b979645b8a98d79e4b5afea5ac0..0000000000000000000000000000000000000000
--- a/client/src/pages/presentationEditor/components/StyleSettings.test.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { render } from '@testing-library/react'
-import React from 'react'
-import StyleSettings from './SlideSettings'
-
-it('renders slide settings', () => {
- render(<StyleSettings />)
-})
diff --git a/client/src/pages/presentationEditor/components/StyleSettings.tsx b/client/src/pages/presentationEditor/components/StyleSettings.tsx
deleted file mode 100644
index ab0e8ced7bf679eb8b83de364a1fe42f2853d18c..0000000000000000000000000000000000000000
--- a/client/src/pages/presentationEditor/components/StyleSettings.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Button, Divider, FormControl, Grid, InputLabel, MenuItem, Select, Typography } from '@material-ui/core'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import MoreHorizOutlinedIcon from '@material-ui/icons/MoreHorizOutlined'
-import React from 'react'
-
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- textInputContainer: {
- '& > *': {
- margin: theme.spacing(1),
- width: '100%',
- },
- },
- textInput: {
- margin: theme.spacing(2),
- width: '87%',
- },
- textCenter: {
- textAlign: 'center',
- },
- center: {
- display: 'flex',
- justifyContent: 'center',
- },
- dropDown: {
- margin: theme.spacing(2),
- width: '87%',
- },
- clickableIcon: {
- cursor: 'pointer',
- },
- })
-)
-
-const SlideSettings: React.FC = () => {
- const classes = useStyles()
-
- const [styleForSelected, selectStyleFor] = React.useState('')
- const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
- selectStyleFor(event.target.value as string)
- }
-
- return (
- <div className={classes.textInputContainer}>
- <FormControl variant="outlined" className={classes.dropDown}>
- <InputLabel id="style-for-selection-label">Stil för:</InputLabel>
- <Select value={styleForSelected} label="Sidtyp" defaultValue="styleForCompetition" onChange={handleChange}>
- <MenuItem value="styleForCompetition">
- <Button>Tävling</Button>
- </MenuItem>
- <MenuItem value="styleForSlide">
- <Button>Sida</Button>
- </MenuItem>
- </Select>
- </FormControl>
- <Divider />
-
- <Grid container spacing={2} justify="space-evenly" alignItems="center">
- <Grid item>
- <Typography variant="subtitle2">Bakgrundsbild</Typography>
- </Grid>
- <Grid item>
- <MoreHorizOutlinedIcon className={classes.clickableIcon} />
- </Grid>
- </Grid>
- <Divider />
- </div>
- )
-}
-
-export default SlideSettings
diff --git a/client/src/pages/presentationEditor/components/styled.tsx b/client/src/pages/presentationEditor/components/styled.tsx
index 6534cd6e6fe4d545bb9bfb15a13f9b74ca9e31bf..81459a54e0c71d8d1f60485d8f932a3a04bbaa78 100644
--- a/client/src/pages/presentationEditor/components/styled.tsx
+++ b/client/src/pages/presentationEditor/components/styled.tsx
@@ -3,5 +3,5 @@ import styled from 'styled-components'
export const SettingsTab = styled(Tab)`
height: 64px;
- min-width: 130px;
-`
\ No newline at end of file
+ min-width: 195px;
+`