style: menubar mockup

client/src/common/components/buttons/DownloadIconBtn.jsx

@@ -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

@@ -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

@@ -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 MenuBar from 'features/menu/MenuBar';
-import { downloadEvents } from 'app/api/ontimeApi';
 
 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

@@ -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'
+    'sett even play info'
-    'even mess info sett';
+    '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: 1em;
-  gap: 2.6em;
 }
 
 .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

@@ -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

@@ -0,0 +1,3 @@
+.gap {
+  height: 1em;
+}

client/src/features/menu/buttons/DownloadIconBtn.jsx

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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>
+  );
+}