From 18b77775e14453aaf032eceb1616dda7abdfe3f9 Mon Sep 17 00:00:00 2001
From: Emil <Emil>
Date: Sat, 3 Apr 2021 12:34:03 +0200
Subject: [PATCH 1/2] feat: added layouts for styleFor and bgImg
---
.../components/SettingsPanel.tsx | 3 +-
.../components/SlideSettings.tsx | 4 +-
.../components/StyleSettings.test.tsx | 7 ++
.../components/StyleSettings.tsx | 71 +++++++++++++++++++
4 files changed, 82 insertions(+), 3 deletions(-)
create mode 100644 client/src/pages/presentationEditor/components/StyleSettings.test.tsx
create mode 100644 client/src/pages/presentationEditor/components/StyleSettings.tsx
diff --git a/client/src/pages/presentationEditor/components/SettingsPanel.tsx b/client/src/pages/presentationEditor/components/SettingsPanel.tsx
index 97301c25..4ca3a6ce 100644
--- a/client/src/pages/presentationEditor/components/SettingsPanel.tsx
+++ b/client/src/pages/presentationEditor/components/SettingsPanel.tsx
@@ -4,6 +4,7 @@ import React from 'react'
import CompetitionSettings from './CompetitionSettings'
import SlideSettings from './SlideSettings'
import { SettingsTab } from './styled'
+import StyleSettings from './StyleSettings'
interface TabPanelProps {
activeTab: number
@@ -16,7 +17,7 @@ function TabContent(props: TabPanelProps) {
} else if (activeTab === 1) {
return <SlideSettings />
}
- return <div>3</div>
+ return <StyleSettings />
}
const SettingsPanel: React.FC = () => {
diff --git a/client/src/pages/presentationEditor/components/SlideSettings.tsx b/client/src/pages/presentationEditor/components/SlideSettings.tsx
index 9441f908..b765104d 100644
--- a/client/src/pages/presentationEditor/components/SlideSettings.tsx
+++ b/client/src/pages/presentationEditor/components/SlideSettings.tsx
@@ -37,7 +37,7 @@ const useStyles = makeStyles((theme: Theme) =>
display: 'flex',
justifyContent: 'center',
},
- slideTypeSelection: {
+ dropDown: {
margin: theme.spacing(2),
width: '87%',
},
@@ -88,7 +88,7 @@ const SlideSettings: React.FC = () => {
return (
<div className={classes.textInputContainer}>
- <FormControl variant="outlined" className={classes.slideTypeSelection}>
+ <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">
diff --git a/client/src/pages/presentationEditor/components/StyleSettings.test.tsx b/client/src/pages/presentationEditor/components/StyleSettings.test.tsx
new file mode 100644
index 00000000..0961afdf
--- /dev/null
+++ b/client/src/pages/presentationEditor/components/StyleSettings.test.tsx
@@ -0,0 +1,7 @@
+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
new file mode 100644
index 00000000..ab0e8ced
--- /dev/null
+++ b/client/src/pages/presentationEditor/components/StyleSettings.tsx
@@ -0,0 +1,71 @@
+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
--
GitLab
From 56f4e7407eed025dd40cf287720346f30265fbe6 Mon Sep 17 00:00:00 2001
From: Emil <Emil>
Date: Tue, 6 Apr 2021 17:50:19 +0200
Subject: [PATCH 2/2] Fix: competition editor settings panel layout
---
.../PresentationEditorPage.tsx | 1 +
.../components/CompetitionSettings.tsx | 20 ++++-
.../components/SettingsPanel.test.tsx | 8 --
.../components/SettingsPanel.tsx | 6 +-
.../components/SlideSettings.tsx | 90 +++++++++++--------
.../components/StyleSettings.test.tsx | 7 --
.../components/StyleSettings.tsx | 71 ---------------
.../presentationEditor/components/styled.tsx | 4 +-
8 files changed, 74 insertions(+), 133 deletions(-)
delete mode 100644 client/src/pages/presentationEditor/components/StyleSettings.test.tsx
delete mode 100644 client/src/pages/presentationEditor/components/StyleSettings.tsx
diff --git a/client/src/pages/presentationEditor/PresentationEditorPage.tsx b/client/src/pages/presentationEditor/PresentationEditorPage.tsx
index 65140251..5a0dbc99 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 6b555abc..a9a1d767 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 a421b30a..b4daa57b 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 4ca3a6ce..ac3c45f1 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 b765104d..936f3d8b 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 0961afdf..00000000
--- 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 ab0e8ced..00000000
--- 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 6534cd6e..81459a54 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;
+`
--
GitLab