diff --git a/client/src/pages/presentationEditor/PresentationEditorPage.tsx b/client/src/pages/presentationEditor/PresentationEditorPage.tsx
index 80d35c5f38c8b879976b91204f9572ac9cf5735a..6d9bc11905e9cca28526bd27ceb0921648ef5ed7 100644
--- a/client/src/pages/presentationEditor/PresentationEditorPage.tsx
+++ b/client/src/pages/presentationEditor/PresentationEditorPage.tsx
@@ -1,10 +1,6 @@
-import { Button, Checkbox, CircularProgress, Divider, Menu, MenuItem, Typography } from '@material-ui/core'
-import AppBar from '@material-ui/core/AppBar'
-import { CheckboxProps } from '@material-ui/core/Checkbox'
+import { Button, CircularProgress, Divider, Menu, MenuItem, Typography } from '@material-ui/core'
import CssBaseline from '@material-ui/core/CssBaseline'
-import Drawer from '@material-ui/core/Drawer'
import ListItemText from '@material-ui/core/ListItemText'
-import { createStyles, makeStyles, Theme, withStyles } from '@material-ui/core/styles'
import AddOutlinedIcon from '@material-ui/icons/AddOutlined'
import axios from 'axios'
import React, { useEffect, useState } from 'react'
@@ -13,22 +9,29 @@ import { getCities } from '../../actions/cities'
import { getEditorCompetition, setEditorSlideId, setEditorViewId } from '../../actions/editor'
import { getTypes } from '../../actions/typesAction'
import { useAppDispatch, useAppSelector } from '../../hooks'
-import { RichSlide } from '../../interfaces/ApiRichModels'
import { renderSlideIcon } from '../../utils/renderSlideIcon'
import { RemoveMenuItem } from '../admin/styledComp'
import { Content, InnerContent } from '../views/styled'
import SettingsPanel from './components/SettingsPanel'
import SlideDisplay from './components/SlideDisplay'
import {
+ AppBarEditor,
CenteredSpinnerContainer,
HomeIcon,
+ LeftDrawer,
+ RightDrawer,
PresentationEditorContainer,
SlideList,
SlideListItem,
ToolBarContainer,
ViewButton,
- ViewButtonClicked,
ViewButtonGroup,
+ ToolbarMargin,
+ FillLeftContainer,
+ PositionBottom,
+ FillRightContainer,
+ CompetitionName,
+ RightPanelScroll,
} from './styled'
const initialState = {
@@ -40,52 +43,11 @@ const initialState = {
const leftDrawerWidth = 150
const rightDrawerWidth = 390
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- appBar: {
- width: `calc(100% - ${rightDrawerWidth}px)`,
- marginLeft: leftDrawerWidth,
- marginRight: rightDrawerWidth,
- },
- leftDrawer: {
- width: leftDrawerWidth,
- flexShrink: 0,
- position: 'relative',
- zIndex: 1,
- },
- rightDrawer: {
- width: rightDrawerWidth,
- flexShrink: 0,
- },
- leftDrawerPaper: {
- width: leftDrawerWidth,
- },
- rightDrawerPaper: {
- width: rightDrawerWidth,
- background: '#EAEAEA',
- },
- // necessary for content to be below app bar
- toolbar: theme.mixins.toolbar,
- content: {
- flexGrow: 1,
- backgroundColor: theme.palette.background.default,
- padding: theme.spacing(3),
- },
- alignCheckboxText: {
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- paddingRight: 20,
- },
- })
-)
-
interface CompetitionParams {
competitionId: string
}
const PresentationEditorPage: React.FC = () => {
- const classes = useStyles()
const { competitionId }: CompetitionParams = useParams()
const dispatch = useAppDispatch()
const activeSlideId = useAppSelector((state) => state.editor.activeSlideId)
@@ -103,7 +65,7 @@ const PresentationEditorPage: React.FC = () => {
}
const createNewSlide = async () => {
- await axios.post(`/api/competitions/${competitionId}/slides`, { title: 'new slide' })
+ await axios.post(`/api/competitions/${competitionId}/slides`, { title: 'Ny sida' })
dispatch(getEditorCompetition(competitionId))
}
@@ -138,17 +100,6 @@ const PresentationEditorPage: React.FC = () => {
setContextState(initialState)
}
- const GreenCheckbox = withStyles({
- root: {
- color: '#FFFFFF',
- '&$checked': {
- color: '#FFFFFF',
- },
- },
- checked: {},
- })((props: CheckboxProps) => <Checkbox color="default" {...props} />)
- const [checkbox, setCheckbox] = useState(false)
-
const viewTypes = useAppSelector((state) => state.types.viewTypes)
const [activeViewTypeName, setActiveViewTypeName] = useState('')
const changeView = (clickedViewTypeName: string) => {
@@ -162,20 +113,16 @@ const PresentationEditorPage: React.FC = () => {
return (
<PresentationEditorContainer>
<CssBaseline />
- <AppBar position="fixed" className={classes.appBar}>
+ <AppBarEditor leftDrawerWidth={leftDrawerWidth} rightDrawerWidth={rightDrawerWidth} position="fixed">
<ToolBarContainer>
<Button component={Link} to="/admin/tävlingshanterare" style={{ padding: 0 }}>
<HomeIcon src="/t8.png" />
</Button>
- <Typography variant="h6" noWrap>
+ <CompetitionName variant="h5" noWrap>
{competition.name}
- </Typography>
+ </CompetitionName>
<ViewButtonGroup>
- <GreenCheckbox checked={checkbox} onChange={(event) => setCheckbox(event.target.checked)} />
- <Typography className={classes.alignCheckboxText} variant="button">
- Applicera ändringar på samtliga vyer
- </Typography>
<ViewButton
$activeView={activeViewTypeName === 'Audience'}
variant="contained"
@@ -194,19 +141,11 @@ const PresentationEditorPage: React.FC = () => {
</ViewButton>
</ViewButtonGroup>
</ToolBarContainer>
- </AppBar>
- <Drawer
- className={classes.leftDrawer}
- variant="permanent"
- classes={{
- paper: classes.leftDrawerPaper,
- }}
- anchor="left"
- >
- <div className={classes.toolbar} />
- <Divider />
- <SlideList>
- <div>
+ </AppBarEditor>
+ <LeftDrawer leftDrawerWidth={leftDrawerWidth} rightDrawerWidth={undefined} variant="permanent" anchor="left">
+ <FillLeftContainer leftDrawerWidth={leftDrawerWidth} rightDrawerWidth={undefined}>
+ <ToolbarMargin />
+ <SlideList>
{competition.slides &&
competition.slides.map((slide) => (
<SlideListItem
@@ -221,33 +160,30 @@ const PresentationEditorPage: React.FC = () => {
<ListItemText primary={`Sida ${slide.order + 1}`} />
</SlideListItem>
))}
- </div>
- <div>
+ </SlideList>
+ <PositionBottom>
<Divider />
<SlideListItem divider button onClick={() => createNewSlide()}>
<ListItemText primary="Ny sida" />
<AddOutlinedIcon />
</SlideListItem>
- </div>
- </SlideList>
- </Drawer>
- <div className={classes.toolbar} />
- <Drawer
- className={classes.rightDrawer}
- variant="permanent"
- classes={{
- paper: classes.rightDrawerPaper,
- }}
- anchor="right"
- >
- {!competitionLoading ? (
- <SettingsPanel />
- ) : (
- <CenteredSpinnerContainer>
- <CircularProgress />
- </CenteredSpinnerContainer>
- )}
- </Drawer>
+ </PositionBottom>
+ </FillLeftContainer>
+ </LeftDrawer>
+ <ToolbarMargin />
+ <RightDrawer leftDrawerWidth={undefined} rightDrawerWidth={rightDrawerWidth} variant="permanent" anchor="right">
+ <FillRightContainer leftDrawerWidth={undefined} rightDrawerWidth={rightDrawerWidth}>
+ <RightPanelScroll>
+ {!competitionLoading ? (
+ <SettingsPanel />
+ ) : (
+ <CenteredSpinnerContainer>
+ <CircularProgress />
+ </CenteredSpinnerContainer>
+ )}
+ </RightPanelScroll>
+ </FillRightContainer>
+ </RightDrawer>
<Content leftDrawerWidth={leftDrawerWidth} rightDrawerWidth={rightDrawerWidth}>
<InnerContent>
diff --git a/client/src/pages/presentationEditor/styled.tsx b/client/src/pages/presentationEditor/styled.tsx
index f68eb166043c970cb5f6e69bc57b090790b1d607..c02054090f9b597fc32f1cacc03d145f3b77d9fe 100644
--- a/client/src/pages/presentationEditor/styled.tsx
+++ b/client/src/pages/presentationEditor/styled.tsx
@@ -1,16 +1,24 @@
-import { Button, List, ListItem, Toolbar } from '@material-ui/core'
+import { AppBar, Button, Drawer, List, ListItem, Toolbar, Typography } from '@material-ui/core'
import styled from 'styled-components'
+interface ViewButtonProps {
+ $activeView: boolean
+}
+
+interface DrawerSizeProps {
+ leftDrawerWidth: number | undefined
+ rightDrawerWidth: number | undefined
+}
+
+const AppBarHeight = 64
+const SlideListHeight = 60
+
export const ToolBarContainer = styled(Toolbar)`
display: flex;
justify-content: space-between;
padding-left: 0;
`
-interface ViewButtonProps {
- $activeView: boolean
-}
-
export const ViewButton = styled(Button)<ViewButtonProps>`
margin-right: 8px;
background: ${(props) => (props.$activeView ? '#5a0017' : undefined)};
@@ -27,16 +35,19 @@ export const ViewButtonGroup = styled.div`
`
export const SlideList = styled(List)`
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
+ height: calc(100% - ${SlideListHeight}px);
+ padding: 0px;
+ overflow-y: auto;
+`
+
+export const RightPanelScroll = styled(List)`
padding: 0px;
+ overflow-y: auto;
`
export const SlideListItem = styled(ListItem)`
text-align: center;
- height: 60px;
+ height: ${SlideListHeight}px;
`
export const PresentationEditorContainer = styled.div`
@@ -51,5 +62,54 @@ export const CenteredSpinnerContainer = styled.div`
`
export const HomeIcon = styled.img`
- height: 64px;
+ height: ${AppBarHeight}px;
+`
+
+export const LeftDrawer = styled(Drawer)<DrawerSizeProps>`
+ width: ${(props) => (props ? props.leftDrawerWidth : 0)}px;
+ flex-shrink: 0;
+ position: relative;
+ z-index: 1;
+`
+
+export const RightDrawer = styled(Drawer)<DrawerSizeProps>`
+ width: ${(props) => (props ? props.rightDrawerWidth : 0)}px;
+ flex-shrink: 0;
+`
+
+export const AppBarEditor = styled(AppBar)<DrawerSizeProps>`
+ width: calc(100% - ${(props) => (props ? props.rightDrawerWidth : 0)}px);
+ left: 0;
+ margin-left: leftDrawerWidth;
+ margin-right: rightDrawerWidth;
+`
+
+// Necessary for content to be below app bar
+export const ToolbarMargin = styled.div`
+ padding-top: ${AppBarHeight}px;
+`
+
+export const FillLeftContainer = styled.div<DrawerSizeProps>`
+ width: ${(props) => (props ? props.leftDrawerWidth : 0)}px;
+ height: calc(100% - ${SlideListHeight}px);
+ overflow: hidden;
+`
+
+export const FillRightContainer = styled.div<DrawerSizeProps>`
+ width: ${(props) => (props ? props.rightDrawerWidth : 0)}px;
+ height: 100%;
+ overflow-y: auto;
+ background: #e9e9e9;
+`
+
+export const PositionBottom = styled.div`
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+`
+
+export const CompetitionName = styled(Typography)`
+ text-decoration: none;
+ position: absolute;
+ left: 180px;
`