cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-07 08:23:55 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

style: menubar mockup

Browse Source
This commit is contained in:
cv
2021-05-29 22:46:05 +02:00
parent 32396cd427
commit 455ac6bff4
13 changed files with 202 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/common/components/buttons/DownloadIconBtn.jsx
-18
View File
@@ -1,18 +0,0 @@
import { IconButton } from '@chakra-ui/button';
import { FiDownload } from 'react-icons/fi';
export default function DownloadIconBtn(props) {
const { clickhandler, ...rest } = props;
return (
<IconButton
size={props.size || 'xs'}
icon={<FiDownload />}
isRound
variant='outline'
onClick={clickhandler}
_focus={{ boxShadow: 'none' }}
colorScheme='whiteAlpha'
{...rest}
/>
);
}
client/src/common/components/buttons/SettingsIconBtn.jsx
-18
View File
@@ -1,18 +0,0 @@
import { IconButton } from '@chakra-ui/button';
import { FiSettings } from 'react-icons/fi';
export default function SettingsIconBtn(props) {
const { clickhandler, ...rest } = props;
return (
<IconButton
size={props.size || 'xs'}
icon={<FiSettings />}
isRound
variant='outline'
onClick={clickhandler}
_focus={{ boxShadow: 'none' }}
colorScheme='whiteAlpha'
{...rest}
/>
);
}
client/src/features/editors/Editor.jsx
+5 -14
View File
@@ -7,10 +7,8 @@ import styles from './Editor.module.css';
import EventListWrapper from './list/EventListWrapper';
import { useDisclosure } from '@chakra-ui/hooks';
import SettingsModal from '../modals/SettingsModal';
import SettingsIconBtn from 'common/components/buttons/SettingsIconBtn';
import { useEffect } from 'react';
import DownloadIconBtn from 'common/components/buttons/DownloadIconBtn';
import { downloadEvents } from 'app/api/ontimeApi';
import MenuBar from 'features/menu/MenuBar';
export default function Editor() {
const { isOpen, onOpen, onClose } = useDisclosure();
@@ -20,15 +18,15 @@ export default function Editor() {
document.title = 'ontime - Editor';
}, []);
const handleDownload = () => {
downloadEvents();
};
return (
<>
<SettingsModal isOpen={isOpen} onClose={onClose} />
<div className={styles.mainContainer}>
<Box id='settings' className={styles.settings}>
<NavMenu onOpen={onOpen} onClose={onClose} />
</Box>
<Box className={styles.editor}>
<Heading size='lg' paddingBottom={'0.25em'}>
Event List
@@ -69,13 +67,6 @@ export default function Editor() {
<NumberedText number={4} text={'Running Info'} />
<div className={styles.content}></div>
</Box>
<Box className={styles.settings}>
<div className={styles.content}>
<SettingsIconBtn size='md' clickhandler={onOpen} />
<DownloadIconBtn size='md' clickhandler={handleDownload} />
</div>
</Box>
</div>
</>
);
client/src/features/editors/Editor.module.css
+11 -13
View File
@@ -8,10 +8,10 @@
display: grid;
grid-template-rows: 38vh 1fr;
grid-template-columns: 48em 27vw 25vw 4vw;
grid-template-columns: 40px 48em 27vw 1fr;
grid-template-areas:
'even play info sett'
'even mess info sett';
'sett even play info'
'sett even mess info';
gap: 2vh;
}
@@ -20,7 +20,7 @@
.mainContainer {
height: 100%;
grid-template-rows: 1fr 1fr;
grid-template-columns: 48em 1fr 1fr;
grid-template-columns: 40px 48em 1fr 1fr;
/* grid-template-areas:
'even play sett'
'even mess sett'; */
@@ -95,24 +95,22 @@
grid-area: play;
}
.settings {
.mainContainer > .settings {
grid-area: sett;
background-color: transparent;
padding: 0;
margin: 0;
width: fit-content;
display: flex;
flex-direction: column;
align-items: center;
gap: 2.6em;
gap: 1em;
}
.content {
padding-top: 1.5em;
}
.settings > .content {
display: flex;
flex-direction: column;
gap: 1em;
}
.cornerButtonContainer {
position: relative;
top: -4.5em;
client/src/features/menu/MenuBar.jsx
+30
View File
@@ -0,0 +1,30 @@
import { downloadEvents } from 'app/api/ontimeApi';
import DownloadIconBtn from './buttons/DownloadIconBtn';
import SettingsIconBtn from './buttons/SettingsIconBtn';
import InfoIconBtn from './buttons/InfoIconBtn';
import MaxIconBtn from './buttons/MaxIconBtn';
import MinIconBtn from './buttons/MinIconBtn';
import QuitIconBtn from './buttons/QuitIconBtn';
import style from './MenuBar.module.css';
import HelpIconBtn from './buttons/HelpIconBtn';
export default function MenuBar(props) {
const { onOpen, onClose } = props;
const handleDownload = () => {
downloadEvents();
};
return (
<>
<QuitIconBtn size='md' />
<MaxIconBtn size='md' />
<MinIconBtn size='md' />
<div className={style.gap} />
<HelpIconBtn size='md' disabled />
<SettingsIconBtn size='md' disabled />
<InfoIconBtn size='md' clickhandler={onOpen} />
<DownloadIconBtn size='md' clickhandler={handleDownload} />
</>
);
}
client/src/features/menu/MenuBar.module.css
+3
View File
@@ -0,0 +1,3 @@
.gap {
height: 1em;
}
client/src/features/menu/buttons/DownloadIconBtn.jsx
+22
View File
@@ -0,0 +1,22 @@
import { IconButton } from '@chakra-ui/button';
import { Tooltip } from '@chakra-ui/tooltip';
import { FiDownload } from 'react-icons/fi';
export default function DownloadIconBtn(props) {
const { clickhandler, ...rest } = props;
return (
<Tooltip label='Download File'>
<IconButton
size={props.size || 'xs'}
icon={<FiDownload />}
colorScheme='white'
variant='outline'
isRound
borderColor='#fff1'
onClick={clickhandler}
_focus={{ boxShadow: 'none' }}
{...rest}
/>
</Tooltip>
);
}
client/src/features/menu/buttons/HelpIconBtn.jsx
+22
View File
@@ -0,0 +1,22 @@
import { IconButton } from '@chakra-ui/button';
import { Tooltip } from '@chakra-ui/tooltip';
import { FiHelpCircle } from 'react-icons/fi';
export default function HelpIconBtn(props) {
const { clickhandler, ...rest } = props;
return (
<Tooltip label='Help'>
<IconButton
size={props.size || 'xs'}
icon={<FiHelpCircle />}
colorScheme='white'
variant='outline'
isRound
borderColor='#fff1'
onClick={clickhandler}
_focus={{ boxShadow: 'none' }}
{...rest}
/>
</Tooltip>
);
}
client/src/features/menu/buttons/InfoIconBtn.jsx
+22
View File
@@ -0,0 +1,22 @@
import { IconButton } from '@chakra-ui/button';
import { Tooltip } from '@chakra-ui/tooltip';
import { FiHome } from 'react-icons/fi';
export default function InfoIconBtn(props) {
const { clickhandler, ...rest } = props;
return (
<Tooltip label='Event Main'>
<IconButton
size={props.size || 'xs'}
icon={<FiHome />}
colorScheme='white'
variant='outline'
isRound
borderColor='#fff1'
onClick={clickhandler}
_focus={{ boxShadow: 'none' }}
{...rest}
/>
</Tooltip>
);
}
client/src/features/menu/buttons/MaxIconBtn.jsx
+22
View File
@@ -0,0 +1,22 @@
import { IconButton } from '@chakra-ui/button';
import { Tooltip } from '@chakra-ui/tooltip';
import { FiMaximize } from 'react-icons/fi';
export default function MaxIconBtn(props) {
const { clickhandler, ...rest } = props;
return (
<Tooltip label='Show full window'>
<IconButton
size={props.size || 'xs'}
icon={<FiMaximize />}
colorScheme='white'
variant='outline'
isRound
borderColor='#fff1'
onClick={clickhandler}
_focus={{ boxShadow: 'none' }}
{...rest}
/>
</Tooltip>
);
}
client/src/features/menu/buttons/MinIconBtn.jsx
+22
View File
@@ -0,0 +1,22 @@
import { IconButton } from '@chakra-ui/button';
import { Tooltip } from '@chakra-ui/tooltip';
import { FiMinimize } from 'react-icons/fi';
export default function MinIconBtn(props) {
const { clickhandler, ...rest } = props;
return (
<Tooltip label='Close to tray'>
<IconButton
size={props.size || 'xs'}
icon={<FiMinimize />}
colorScheme='white'
variant='outline'
isRound
borderColor='#fff1'
onClick={clickhandler}
_focus={{ boxShadow: 'none' }}
{...rest}
/>
</Tooltip>
);
}
client/src/features/menu/buttons/QuitIconBtn.jsx
+21
View File
@@ -0,0 +1,21 @@
import { IconButton } from '@chakra-ui/button';
import { Tooltip } from '@chakra-ui/tooltip';
import { FiPower } from 'react-icons/fi';
export default function QuitIconBtn(props) {
const { clickhandler, ...rest } = props;
return (
<Tooltip label='Quit Application'>
<IconButton
size={props.size || 'xs'}
icon={<FiPower />}
colorScheme='red'
variant='outline'
isRound
onClick={clickhandler}
_focus={{ boxShadow: 'none' }}
{...rest}
/>
</Tooltip>
);
}
client/src/features/menu/buttons/SettingsIconBtn.jsx
+22
View File
@@ -0,0 +1,22 @@
import { IconButton } from '@chakra-ui/button';
import { Tooltip } from '@chakra-ui/tooltip';
import { FiSettings } from 'react-icons/fi';
export default function SettingsIconBtn(props) {
const { clickhandler, ...rest } = props;
return (
<Tooltip label='Application Settings'>
<IconButton
size={props.size || 'xs'}
icon={<FiSettings />}
colorScheme='white'
variant='outline'
isRound
borderColor='#fff1'
onClick={clickhandler}
_focus={{ boxShadow: 'none' }}
{...rest}
/>
</Tooltip>
);
}