r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Makes Account view a modal

Browse source
This commit is contained in:
Andrew Nicolaou 2019-05-24 11:59:56 +02:00 committed by Cassie Tarakajian
parent 7b0d128082
commit b16cb26a4b
3 changed files with 56 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
client/components/NavBasic.jsx Normal file
View file

@ -0,0 +1,23 @@
import React from 'react';
import InlineSVG from 'react-inlinesvg';
const logoUrl = require('../images/p5js-logo-small.svg');
class NavBasic extends React.PureComponent {
render() {
return (
<nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
<ul className="nav__items-left" title="project-menu">
<li className="nav__item-logo">
<InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
</li>
</ul>
</nav>
);
}
}
NavBasic.propTypes = {};
export default NavBasic;

64
client/modules/User/pages/AccountView.jsx
View file

@ -12,9 +12,9 @@ import AccountForm from '../components/AccountForm';
import { validateSettings } from '../../../utils/reduxFormUtils'; import { validateSettings } from '../../../utils/reduxFormUtils';
import GithubButton from '../components/GithubButton'; import GithubButton from '../components/GithubButton';
import APIKeyForm from '../components/APIKeyForm'; import APIKeyForm from '../components/APIKeyForm';
import NavBasic from '../../../components/NavBasic';
const exitUrl = require('../../../images/exit.svg'); const exitUrl = require('../../../images/exit.svg');
const logoUrl = require('../../../images/p5js-logo.svg');
class AccountView extends React.Component { class AccountView extends React.Component {
constructor(props) { constructor(props) {
@ -24,7 +24,7 @@ class AccountView extends React.Component {
} }
componentDidMount() { componentDidMount() {
document.body.className = 'light'; document.body.className = this.props.theme;
} }
closeAccountPage() { closeAccountPage() {
@ -37,43 +37,43 @@ class AccountView extends React.Component {
render() { render() {
return ( return (
<section className="form-container form-container--align-top form-container--align-left user"> <React.Fragment>
<Helmet> <Helmet>
<title>p5.js Web Editor | Account</title> <title>p5.js Web Editor | Account</title>
</Helmet> </Helmet>
<div className="form-container__header">
<button className="form-container__logo-button" onClick={this.gotoHomePage}> <NavBasic />
<InlineSVG src={logoUrl} alt="p5js Logo" />
</button> <section className="modal user">
<button className="form-container__exit-button" onClick={this.closeAccountPage}> <div className="modal-content">
<InlineSVG src={exitUrl} alt="Close Account Page" /> <div className="modal__header">
</button> <h2 className="modal__title">My Account</h2>
</div> <button className="modal__exit-button" onClick={this.closeAccountPage}>
<div className="form-container__content"> <InlineSVG src={exitUrl} alt="Close Account Page" />
<h2 className="form-container__title">My Account</h2> </button>
<Tabs className="account__tabs"> </div>
<TabList> <Tabs className="account__tabs">
<div className="tabs__titles"> <TabList>
<Tab><h4 className="tabs__title">Account</h4></Tab> <div className="tabs__titles">
<Tab><h4 className="tabs__title">Access Tokens</h4></Tab> <Tab><h4 className="tabs__title">Account</h4></Tab>
</div> <Tab><h4 className="tabs__title">Access Tokens</h4></Tab>
</TabList> </div>
<TabPanel> </TabList>
<AccountForm {...this.props} /> <TabPanel>
<div className="account__social"> <AccountForm {...this.props} />
<h2 className="form-container__divider">Social Login</h2> <h2 className="form-container__divider">Social Login</h2>
<p className="account__social__context"> <p className="account__social-text">
Link this account with your GitHub account to allow login from both. Link this account with your GitHub account to allow login from both.
</p> </p>
<GithubButton buttonText="Login with GitHub" /> <GithubButton buttonText="Login with GitHub" />
</div> </TabPanel>
</TabPanel> <TabPanel>
<TabPanel> <APIKeyForm {...this.props} />
<APIKeyForm {...this.props} /> </TabPanel>
</TabPanel> </Tabs>
</Tabs> </div>
</div> </section>
</section> </React.Fragment>
); );
} }
} }

2
client/styles/components/_account.scss
View file

@ -2,6 +2,6 @@
padding-top: #{20 / $base-font-size}rem; padding-top: #{20 / $base-font-size}rem;
} }
.account__social__context { .account__social-text {
padding-bottom: #{15 / $base-font-size}rem; padding-bottom: #{15 / $base-font-size}rem;
} }