diff --git a/client/package.json b/client/package.json index 8bd8947b3..7b7d00292 100644 --- a/client/package.json +++ b/client/package.json @@ -1,6 +1,6 @@ { "name": "ontime-ui", - "version": "1.0.1", + "version": "1.1.0", "private": true, "dependencies": { "@chakra-ui/react": "^2.0.0-next.3", diff --git a/client/src/common/components/nav/NavLogo.jsx b/client/src/common/components/nav/NavLogo.jsx index 7bba30c01..53ae0fe55 100644 --- a/client/src/common/components/nav/NavLogo.jsx +++ b/client/src/common/components/nav/NavLogo.jsx @@ -5,6 +5,16 @@ import { Image } from '@chakra-ui/react'; import { AnimatePresence, motion } from 'framer-motion'; import navlogo from 'assets/images/logos/LOGO-72.png'; import style from './NavLogo.module.scss'; +import { IconButton } from '@chakra-ui/button'; +import { IoExpand } from '@react-icons/all-files/io5/IoExpand'; + +/* Styling for action buttons */ +const navButtonStyle = { + size: 'md', + variant: 'outline', + colorScheme: 'whiteAlpha', + _hover: { bg: '#ebedf0', color: '#333' }, +}; export default function NavLogo(props) { const { isHidden } = props; @@ -24,6 +34,16 @@ export default function NavLogo(props) { } }, []); + const toggleFullscreen = useCallback(() => { + if (!document.fullscreenElement) { + document.documentElement.requestFullscreen(); + } else { + if (document.exitFullscreen) { + document.exitFullscreen(); + } + } + }, []); + useEffect(() => { // attach the event listener document.addEventListener('keydown', handleKeyPress); @@ -49,33 +69,51 @@ export default function NavLogo(props) { {showNav && ( - - Timer - - Minimal Timer - - - Backstage - - - Public - - - Lower Thirds - - - PIP - - - Studio Clock - - + <> + + } + onClick={toggleFullscreen} + {...navButtonStyle} + /> + + + + Timer + + + Minimal Timer + + + Backstage + + + Public + + + Lower Thirds + + + PIP + + + Studio Clock + + + )} diff --git a/client/src/common/components/nav/NavLogo.module.scss b/client/src/common/components/nav/NavLogo.module.scss index 4eb069dec..67ecabd7c 100644 --- a/client/src/common/components/nav/NavLogo.module.scss +++ b/client/src/common/components/nav/NavLogo.module.scss @@ -18,6 +18,7 @@ .nav, .showNav { + margin-top: 2vh; gap: 2vh; display: flex; flex-direction: column; @@ -29,4 +30,12 @@ color: $text-white; } } + + .actions { + display: flex; + gap: 8px; + position: absolute; + top: 0.5vw; + right: 75px; + } }