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 97301c25213d864784c62b819bbfa3619af22cfe..ac3c45f106305d3f09e84c3c133433f582c8ed9f 100644
--- a/client/src/pages/presentationEditor/components/SettingsPanel.tsx
+++ b/client/src/pages/presentationEditor/components/SettingsPanel.tsx
@@ -13,10 +13,8 @@ function TabContent(props: TabPanelProps) {
const { activeTab } = props
if (activeTab === 0) {
return <CompetitionSettings />
- } else if (activeTab === 1) {
- return <SlideSettings />
}
- return <div>3</div>
+ return <SlideSettings />
}
const SettingsPanel: React.FC = () => {
@@ -27,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 9441f9081279fba2cad53585b931653c9217c7ec..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',
},
- slideTypeSelection: {
+ 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.slideTypeSelection}>
- <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/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;
+`