diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/App.js | 46 | ||||
| -rw-r--r-- | components/Header.js | 33 | ||||
| -rw-r--r-- | components/Layout.js | 42 | ||||
| -rw-r--r-- | components/Popup.js | 38 | ||||
| -rw-r--r-- | components/Splash.js | 13 | ||||
| -rw-r--r-- | components/index.js | 2 |
6 files changed, 105 insertions, 69 deletions
diff --git a/components/App.js b/components/App.js index a68e593..59fd5a0 100644 --- a/components/App.js +++ b/components/App.js @@ -3,11 +3,11 @@ import {close, toggleMin, toggleMax, move} from 'helpers/windowActions' import {faArrowUp, faExpandAlt, faTimes, faCompressAlt} from '@fortawesome/free-solid-svg-icons' import {FontAwesomeIcon} from '@fortawesome/react-fontawesome' -const App = ({children, app, apps, setApps}) => { +const App = ({children, app, setApps}) => { const winRef = useRef(null); useEffect(() => { - move(app.name, winRef, apps, setApps) + move(app.name, winRef, setApps) }, []) return ( @@ -15,26 +15,40 @@ const App = ({children, app, apps, setApps}) => { <div ref={winRef} className={ - 'list window' + 'window' + (app.min ? ' hidden' : '') + (app.max ? ' maximized' : '') } - style={app.pos.length ? {top: app.pos[1], left: app.pos[0]} : {}} - tabIndex={0} + style={{ + maxHeight: app.height, + maxWidth: 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'>Notes</h2> + <h2 className='window__title'>{app.name}</h2> + <div className='window__content'>{children}</div> <div className='window__title-buttons'> - <span onClick={() => toggleMin('Notes', apps, setApps)}> - <FontAwesomeIcon icon={faArrowUp} /> - </span> - <span onClick={() => toggleMax('Notes', apps, setApps)}> - <FontAwesomeIcon icon={app.max ? faCompressAlt : faExpandAlt} /> - </span> - <span onClick={() => close('Notes', apps, setApps)}> - <FontAwesomeIcon icon={faTimes} /> - </span> + { app.buttons.includes('min') && ( + <span onClick={() => toggleMin(app.name, setApps)}> + <FontAwesomeIcon icon={faArrowUp} /> + </span> + )} + { app.buttons.includes('max') && ( + <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 className='window__content'>{children}</div> </div> </> ) diff --git a/components/Header.js b/components/Header.js index a208e70..5279c80 100644 --- a/components/Header.js +++ b/components/Header.js @@ -1,10 +1,12 @@ import styles from 'styles/Main.module.scss' import React, {useState} from 'react' +import {useRouter} from 'next/router' import Link from 'next/link' import useUser from 'lib/useUser' import fetchJson from 'lib/fetchJson' -import {toggleMin} from 'helpers/windowActions' -import {useRouter} from 'next/router' +import {focus, toggleMin} from 'helpers/windowActions' +import {open} from 'helpers/windowActions' +import appList from 'helpers/appList' const Header = ({apps, setApps}) => { const [userMenu, setUserMenu] = useState(false); @@ -20,18 +22,32 @@ const Header = ({apps, setApps}) => { router.push('/login') } + + const handleClick = (app, setApps) => { + if (app.min) { + toggleMin(app.name, setApps) + } + focus(app.name, setApps) + } + return ( <header className={styles.header}> <nav> <ul> { - apps && apps.map(app => ( + apps && [...apps].sort((a,b) => a.name > b.name).map(app => ( <li key={app.name} - style={app.min ? {fontWeight: 600} : {}} - onClick={() => toggleMin(app.name, apps, setApps)} + onClick={() => handleClick(app, setApps)} > - <span>{app.name}</span> + <span + style={{ + ...apps.findIndex(a => a.name === app.name) === apps.length - 1 ? {fontWeight: 600} : {}, + ...app.min ? {color: '#888'} : {} + }} + > + {app.name} + </span> </li> )) } @@ -64,7 +80,10 @@ const Header = ({apps, setApps}) => { <div className={styles.headerOverlay} onClick={() => setUserMenu(false)} /> <ul className={styles.submenu}> <li> - <span onClick={() => {}}> + <span onClick={() => { + open({appName: 'Settings', ...appList.Settings}, setApps) + setUserMenu() + }}> Settings </span> </li> diff --git a/components/Layout.js b/components/Layout.js index 0b8348c..e915285 100644 --- a/components/Layout.js +++ b/components/Layout.js @@ -1,30 +1,26 @@ import styles from 'styles/Main.module.scss' -import React, {useState} from 'react' +import React from 'react' import Head from 'next/head' -import Context from '../context'; -import Header from './Header' -import Popup from './Popup' +import {Header, Popup} from 'components' import PropTypes from 'prop-types' -const Layout = ({ children, apps, setApps}) => { - const [options, setOptions] = useState({theme: 'dark'}) - const [popup, setPopup] = useState({}) - - return ( - <Context.Provider value={{ setPopup }}> - <section className={styles.layout+' '+options.theme}> - <Head> - <title>My Apps</title> - </Head> - <main> - <div className="container">{children}</div> - </main> - <Header apps={apps} setApps={setApps} /> - <Popup popup={popup} /> - </section> - </Context.Provider> - ) -} +const Layout = ({ + children, + apps, + setApps, + settings, +}) => ( + <section className={styles.layout +' '+ (settings ? settings.theme : 'green')}> + <Head> + <title>My Apps</title> + </Head> + <main> + <div className="container">{children}</div> + </main> + <Header apps={apps} setApps={setApps} /> + <Popup/> + </section> +) export default Layout diff --git a/components/Popup.js b/components/Popup.js index 911d2fa..3df11c5 100644 --- a/components/Popup.js +++ b/components/Popup.js @@ -1,32 +1,24 @@ -import React, {useState, useEffect} from 'react' +import React from 'react' +import usePopup from 'hooks/usePopup' -const Popup = ({popup}) => { - const [visible, setVisible] = useState(false) - const { - content = null, - time = null, - error = null, - yes = null, - no = null, - } = popup +const Popup = () => { + const {popupData: p} = usePopup() - useEffect(() => { - setVisible(true) - time && setTimeout(() => setVisible(false), time) - }, [popup]) + if (!p || !p.content) return null - if (!content) return null - - return visible ? ( - <div className={`window window--popup${error ? ' window--error' : ''}`}> - <div className="window__content--popup">{ content }</div> + return ( + <div className={`window window--popup${p.error ? ' window--error' : ''}`}> + <div className="window__content--popup">{p.content}</div> { - (yes || no) && (<div className="window__buttons--popup"> - {[yes, no].map(a => a && <input key={a.label} className='window__button' type="button" onClick={() => { setVisible(false); a.action() }} value={a.label} />)} - </div>) + (p.yes || p.no) && ( + <div className="window__buttons--popup"> + {[p.no, p.yes].map(a => a && <input key={a.label} className='window__button' type="button" onClick={async () => a.action()} value={a.label} />)} + </div> + ) } </div> - ) : null + ) } export default Popup + diff --git a/components/Splash.js b/components/Splash.js new file mode 100644 index 0000000..7976de4 --- /dev/null +++ b/components/Splash.js @@ -0,0 +1,13 @@ +import styles from 'styles/Main.module.scss' +import React from 'react' +import {FontAwesomeIcon} from '@fortawesome/react-fontawesome' +import {faBan, faSpinner} from '@fortawesome/free-solid-svg-icons' + +const Splash = ({type, fixed = false}) => ( + <div className={`${type === 'connection' ? styles.connection : styles.loader} ${fixed ? styles.fixed : ''}`}> + <FontAwesomeIcon icon={type === 'connection' ? faBan : faSpinner} /> + <p>{type === 'connection' ? 'No connection' : 'Loading...'}</p> + </div> +) + +export default Splash diff --git a/components/index.js b/components/index.js index 4875559..19d8173 100644 --- a/components/index.js +++ b/components/index.js @@ -2,3 +2,5 @@ export {default as Form} from './Form' export {default as Header} from './Header' export {default as Layout} from './Layout' export {default as App} from './App' +export {default as Popup} from './Popup' +export {default as Splash} from './Splash' |