diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/App.js | 6 | ||||
| -rw-r--r-- | components/Header.js | 17 |
2 files changed, 15 insertions, 8 deletions
diff --git a/components/App.js b/components/App.js index 9faa9c9..f6a297b 100644 --- a/components/App.js +++ b/components/App.js @@ -1,11 +1,13 @@ import { useEffect, useRef } from 'react' +import useApps from 'hooks/useApps' import useSettings from 'hooks/useSettings' import useMediaQuery from 'hooks/useMediaQuery' 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' -const App = ({ children, app, setApps }) => { +const App = ({ children, app }) => { + const { apps, setApps } = useApps() const { t } = useSettings() const winRef = useRef(null) const forceMax = useMediaQuery(`(max-width: ${app.width}), (max-height: ${app.height})`) @@ -36,7 +38,7 @@ const App = ({ children, app, setApps }) => { <div className='window__content'>{children}</div> <div className='window__title-buttons'> {app.buttons.includes('min') && ( - <span onClick={e => { e.preventDefault(); e.stopPropagation(); toggleMin(app.name, setApps) }}> + <span onClick={e => { e.preventDefault(); e.stopPropagation(); toggleMin(app.name, apps, setApps) }}> <FontAwesomeIcon icon={faArrowUp} /> </span> )} diff --git a/components/Header.js b/components/Header.js index 87c31e8..5e4ff12 100644 --- a/components/Header.js +++ b/components/Header.js @@ -8,7 +8,7 @@ import { focus, toggleMin, open, close } from 'helpers/windowActions' import appList from 'configs/appList' import useSettings from 'hooks/useSettings' import useApps from 'hooks/useApps' -import { faTimes } from '@fortawesome/free-solid-svg-icons' +import { faArrowUp, faTimes } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' const Header = () => { @@ -30,7 +30,7 @@ const Header = () => { const handleClick = (app, setApps) => { if (app.min) { - toggleMin(app.name, setApps) + toggleMin(app.name, apps, setApps) } focus(app.name, setApps) } @@ -54,13 +54,18 @@ const Header = () => { onClick={() => handleClick(app, setApps)} > <span + className={ + apps.findIndex(a => a && a.name === app.name) === apps.length - 1 ? 'active' : '' + } style={{ - ...apps.findIndex(a => a && a.name === app.name) === apps.length - 1 ? { fontWeight: 600 } : {}, ...app.min ? { color: '#888' } : {} }} > - {t(app.name)} - <span className='mobile-only' onClick={() => close(app.name, setApps)}> + <span>{t(app.name)}</span> + <span className='mobile-only' onClick={e => { e.stopPropagation(); toggleMin(app.name, apps, setApps) }}> + <FontAwesomeIcon icon={faArrowUp} /> + </span> + <span className='mobile-only' onClick={e => { e.stopPropagation(); close(app.name, setApps) }}> <FontAwesomeIcon icon={faTimes} /> </span> </span> @@ -69,7 +74,7 @@ const Header = () => { }) } <li className='mobile-only'> - <span onClick={() => setShowApps(false)} className='window__button'>{t('close')}</span> + <div onClick={() => setShowApps(false)} className='window__button'>{t('close')}</div> </li> </ul> </div> |