diff options
Diffstat (limited to 'components/App.js')
-rw-r--r-- | components/App.js | 81 |
1 files changed, 40 insertions, 41 deletions
diff --git a/components/App.js b/components/App.js index b24aead..c539e72 100644 --- a/components/App.js +++ b/components/App.js @@ -1,7 +1,7 @@ import React, {useEffect, useRef} from 'react' import useSettings from 'hooks/useSettings' import useMediaQuery from 'hooks/useMediaQuery' -import {close, toggleMin, toggleMax, move} from 'helpers/windowActions' +import {close, toggleMin, toggleMax, move, focus} from 'helpers/windowActions' import {faArrowUp, faExpandAlt, faTimes, faCompressAlt} from '@fortawesome/free-solid-svg-icons' import {FontAwesomeIcon} from '@fortawesome/react-fontawesome' @@ -11,50 +11,49 @@ const App = ({children, app, setApps}) => { const forceMax = useMediaQuery(`(max-width: ${app.width}), (max-height: ${app.height})`); useEffect(() => { - move(app.name, winRef, setApps) + move(app, winRef, setApps) }, []) return ( - <> - <div - ref={winRef} - className={ - 'window' - + (app.min ? ' hidden' : '') - + (app.max || forceMax ? ' maximized' : '') - } - style={{ - height: app.height, - width: app.width, - ...app.pos.length - ? {top: app.pos[1], left: app.pos[0]} - : { - top: `calc((( 100vh - ${app.height} ) / 2) + 2em)`, - left: `calc(( 100vw - ${app.width} ) / 2)`, - } - }} - > - <h2 className='window__title'>{t(app.name)}</h2> - <div className='window__content'>{children}</div> - <div className='window__title-buttons'> - { app.buttons.includes('min') && ( - <span onClick={() => toggleMin(app.name, setApps)}> - <FontAwesomeIcon icon={faArrowUp} /> - </span> - )} - { app.buttons.includes('max') && !forceMax && ( - <span onClick={() => toggleMax(app.name, setApps)}> - <FontAwesomeIcon icon={app.max ? faCompressAlt : faExpandAlt} /> - </span> - )} - { app.buttons.includes('close') && ( - <span onClick={() => close(app.name, setApps)}> - <FontAwesomeIcon icon={faTimes} /> - </span> - )} - </div> + <div + ref={winRef} + onClick={() => {focus(app.name, setApps)}} + className={ + 'window' + + (app.min ? ' hidden' : '') + + (app.max || forceMax ? ' maximized' : '') + } + style={{ + height: app.height, + width: app.width, + ...app.pos.length + ? {top: app.pos[1], left: app.pos[0]} + : { + top: `calc((( 100vh - ${app.height} ) / 2) + 2em)`, + left: `calc(( 100vw - ${app.width} ) / 2)`, + } + }} + > + <h2 className='window__title'>{t(app.name)}</h2> + <div className='window__content'>{children}</div> + <div className='window__title-buttons'> + { app.buttons.includes('min') && ( + <span onClick={() => toggleMin(app.name, setApps)}> + <FontAwesomeIcon icon={faArrowUp} /> + </span> + )} + { app.buttons.includes('max') && !forceMax && ( + <span onClick={() => toggleMax(app.name, setApps)}> + <FontAwesomeIcon icon={app.max ? faCompressAlt : faExpandAlt} /> + </span> + )} + { app.buttons.includes('close') && ( + <span onClick={() => close(app.name, setApps)}> + <FontAwesomeIcon icon={faTimes} /> + </span> + )} </div> - </> + </div> ) } |