Merge branch 'feature/public-api' of https://github.com/processing/p5.js-web-editor into feature/public-api
This commit is contained in:
commit
a7b465d446
29 changed files with 409 additions and 286 deletions
|
@ -530,12 +530,16 @@ class Nav extends React.PureComponent {
|
|||
</ul>
|
||||
{ __process.env.LOGIN_ENABLED && !this.props.user.authenticated &&
|
||||
<ul className="nav__items-right" title="user-menu">
|
||||
<li className="nav__item">
|
||||
<p>
|
||||
<Link to="/login">Log in</Link>
|
||||
<span className="nav__item-spacer">or</span>
|
||||
<Link to="/signup">Sign up</Link>
|
||||
</p>
|
||||
<li>
|
||||
<Link to="/login">
|
||||
<span className="nav__item-header">Log in</span>
|
||||
</Link>
|
||||
</li>
|
||||
<span className="nav__item-spacer">or</span>
|
||||
<li>
|
||||
<Link to="/signup">
|
||||
<span className="nav__item-header">Sign up</span>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>}
|
||||
{ __process.env.LOGIN_ENABLED && this.props.user.authenticated &&
|
||||
|
|
40
client/components/NavBasic.jsx
Normal file
40
client/components/NavBasic.jsx
Normal file
|
@ -0,0 +1,40 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import InlineSVG from 'react-inlinesvg';
|
||||
|
||||
const logoUrl = require('../images/p5js-logo-small.svg');
|
||||
const arrowUrl = require('../images/triangle-arrow-left.svg');
|
||||
|
||||
class NavBasic extends React.PureComponent {
|
||||
static defaultProps = {
|
||||
onBack: null
|
||||
}
|
||||
|
||||
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>
|
||||
{ this.props.onBack && (
|
||||
<li className="nav__item">
|
||||
<button onClick={this.props.onBack}>
|
||||
<span className="nav__item-header">
|
||||
<InlineSVG src={arrowUrl} alt="Left arrow" />
|
||||
</span>
|
||||
Back to the editor
|
||||
</button>
|
||||
</li>)
|
||||
}
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
NavBasic.propTypes = {
|
||||
onBack: PropTypes.func,
|
||||
};
|
||||
|
||||
export default NavBasic;
|
14
client/images/triangle-arrow-left.svg
Normal file
14
client/images/triangle-arrow-left.svg
Normal file
|
@ -0,0 +1,14 @@
|
|||
<svg width="10px" height="10px" viewBox="0 0 5 5" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>Left Arrow</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="environment" transform="translate(-26.000000, -42.000000)" fill="#B5B5B5">
|
||||
<g id="libraries" transform="translate(21.000000, 32.000000)">
|
||||
<polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(270.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 665 B |
|
@ -215,32 +215,6 @@ export function autosaveProject() {
|
|||
};
|
||||
}
|
||||
|
||||
export function createProject() {
|
||||
return (dispatch, getState) => {
|
||||
const state = getState();
|
||||
if (state.project.isSaving) {
|
||||
Promise.resolve();
|
||||
return;
|
||||
}
|
||||
dispatch(startSavingProject());
|
||||
axios.post(`${ROOT_URL}/projects`, {}, { withCredentials: true })
|
||||
.then((response) => {
|
||||
dispatch(endSavingProject());
|
||||
dispatch(setUnsavedChanges(false));
|
||||
browserHistory.push(`/${response.data.user.username}/sketches/${response.data.id}`);
|
||||
const { hasChanges, synchedProject } = getSynchedProject(getState(), response.data);
|
||||
if (hasChanges) {
|
||||
dispatch(setUnsavedChanges(true));
|
||||
}
|
||||
dispatch(setNewProject(synchedProject));
|
||||
})
|
||||
.catch((response) => {
|
||||
dispatch(endSavingProject());
|
||||
dispatch(projectSaveFail(response.data));
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export function exportProjectAsZip(projectId) {
|
||||
const win = window.open(`${ROOT_URL}/projects/${projectId}/zip`, '_blank');
|
||||
win.focus();
|
||||
|
|
|
@ -59,9 +59,9 @@ class Preferences extends React.Component {
|
|||
</Helmet>
|
||||
<Tabs>
|
||||
<TabList>
|
||||
<div className="preference__subheadings">
|
||||
<Tab><h4 className="preference__subheading">General Settings</h4></Tab>
|
||||
<Tab><h4 className="preference__subheading">Accessibility</h4></Tab>
|
||||
<div className="tabs__titles">
|
||||
<Tab><h4 className="tabs__title">General Settings</h4></Tab>
|
||||
<Tab><h4 className="tabs__title">Accessibility</h4></Tab>
|
||||
</div>
|
||||
</TabList>
|
||||
<TabPanel>
|
||||
|
|
|
@ -12,9 +12,9 @@ import AccountForm from '../components/AccountForm';
|
|||
import { validateSettings } from '../../../utils/reduxFormUtils';
|
||||
import GithubButton from '../components/GithubButton';
|
||||
import APIKeyForm from '../components/APIKeyForm';
|
||||
import NavBasic from '../../../components/NavBasic';
|
||||
|
||||
const exitUrl = require('../../../images/exit.svg');
|
||||
const logoUrl = require('../../../images/p5js-logo.svg');
|
||||
|
||||
class AccountView extends React.Component {
|
||||
constructor(props) {
|
||||
|
@ -24,7 +24,7 @@ class AccountView extends React.Component {
|
|||
}
|
||||
|
||||
componentDidMount() {
|
||||
document.body.className = 'light';
|
||||
document.body.className = this.props.theme;
|
||||
}
|
||||
|
||||
closeAccountPage() {
|
||||
|
@ -37,43 +37,40 @@ class AccountView extends React.Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<section className="form-container form-container--align-top form-container--align-left account-container">
|
||||
<div className="user">
|
||||
<Helmet>
|
||||
<title>p5.js Web Editor | Account</title>
|
||||
</Helmet>
|
||||
<div className="form-container__header">
|
||||
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
|
||||
<InlineSVG src={logoUrl} alt="p5js Logo" />
|
||||
</button>
|
||||
<button className="form-container__exit-button" onClick={this.closeAccountPage}>
|
||||
<InlineSVG src={exitUrl} alt="Close Account Page" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="form-container__content">
|
||||
<h2 className="form-container__title">My Account</h2>
|
||||
<Tabs className="account__tabs">
|
||||
<TabList>
|
||||
<div className="preference__subheadings">
|
||||
<Tab><h4 className="preference__subheading">Account</h4></Tab>
|
||||
<Tab><h4 className="preference__subheading">Access Tokens</h4></Tab>
|
||||
</div>
|
||||
</TabList>
|
||||
<TabPanel>
|
||||
<AccountForm {...this.props} />
|
||||
<div className="account__social">
|
||||
|
||||
<NavBasic onBack={this.closeAccountPage} />
|
||||
|
||||
<section className="modal">
|
||||
<div className="modal-content">
|
||||
<div className="modal__header">
|
||||
<h2 className="modal__title">My Account</h2>
|
||||
</div>
|
||||
<Tabs className="account__tabs">
|
||||
<TabList>
|
||||
<div className="tabs__titles">
|
||||
<Tab><h4 className="tabs__title">Account</h4></Tab>
|
||||
<Tab><h4 className="tabs__title">Access Tokens</h4></Tab>
|
||||
</div>
|
||||
</TabList>
|
||||
<TabPanel>
|
||||
<AccountForm {...this.props} />
|
||||
<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.
|
||||
</p>
|
||||
<GithubButton buttonText="Login with GitHub" />
|
||||
</div>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<APIKeyForm {...this.props} />
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
</div>
|
||||
</section>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<APIKeyForm {...this.props} />
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -65,21 +65,23 @@ class EmailVerificationView extends React.Component {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="form-container">
|
||||
<Helmet>
|
||||
<title>p5.js Web Editor | Email Verification</title>
|
||||
</Helmet>
|
||||
<div className="form-container__header">
|
||||
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
|
||||
<InlineSVG src={logoUrl} alt="p5js Logo" />
|
||||
</button>
|
||||
<button className="form-container__exit-button" onClick={this.closeLoginPage}>
|
||||
<InlineSVG src={exitUrl} alt="Close Login Page" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="form-container__content">
|
||||
<h2 className="form-container__title">Verify your email</h2>
|
||||
{status}
|
||||
<div className="user">
|
||||
<div className="form-container">
|
||||
<Helmet>
|
||||
<title>p5.js Web Editor | Email Verification</title>
|
||||
</Helmet>
|
||||
<div className="form-container__header">
|
||||
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
|
||||
<InlineSVG src={logoUrl} alt="p5js Logo" />
|
||||
</button>
|
||||
<button className="form-container__exit-button" onClick={this.closeLoginPage}>
|
||||
<InlineSVG src={exitUrl} alt="Close Login Page" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="form-container__content">
|
||||
<h2 className="form-container__title">Verify your email</h2>
|
||||
{status}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -34,32 +34,34 @@ class LoginView extends React.Component {
|
|||
return null;
|
||||
}
|
||||
return (
|
||||
<div className="form-container">
|
||||
<Helmet>
|
||||
<title>p5.js Web Editor | Login</title>
|
||||
</Helmet>
|
||||
<div className="form-container__header">
|
||||
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
|
||||
<InlineSVG src={logoUrl} alt="p5js Logo" />
|
||||
</button>
|
||||
<button className="form-container__exit-button" onClick={this.closeLoginPage}>
|
||||
<InlineSVG src={exitUrl} alt="Close Login Page" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="form-container__content">
|
||||
<h2 className="form-container__title">Log In</h2>
|
||||
<LoginForm {...this.props} />
|
||||
<h2 className="form-container__divider">Or</h2>
|
||||
<GithubButton buttonText="Login with Github" />
|
||||
<GoogleButton buttonText="Login with Google" />
|
||||
<p className="form__navigation-options">
|
||||
Don't have an account?
|
||||
<Link className="form__signup-button" to="/signup">Sign Up</Link>
|
||||
</p>
|
||||
<p className="form__navigation-options">
|
||||
Forgot your password?
|
||||
<Link className="form__reset-password-button" to="/reset-password">Reset your password</Link>
|
||||
</p>
|
||||
<div className="user">
|
||||
<div className="form-container">
|
||||
<Helmet>
|
||||
<title>p5.js Web Editor | Login</title>
|
||||
</Helmet>
|
||||
<div className="form-container__header">
|
||||
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
|
||||
<InlineSVG src={logoUrl} alt="p5js Logo" />
|
||||
</button>
|
||||
<button className="form-container__exit-button" onClick={this.closeLoginPage}>
|
||||
<InlineSVG src={exitUrl} alt="Close Login Page" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="form-container__content">
|
||||
<h2 className="form-container__title">Log In</h2>
|
||||
<LoginForm {...this.props} />
|
||||
<h2 className="form-container__divider">Or</h2>
|
||||
<GithubButton buttonText="Login with Github" />
|
||||
<GoogleButton buttonText="Login with Google" />
|
||||
<p className="form__navigation-options">
|
||||
Don't have an account?
|
||||
<Link className="form__signup-button" to="/signup">Sign Up</Link>
|
||||
</p>
|
||||
<p className="form__navigation-options">
|
||||
Forgot your password?
|
||||
<Link className="form__reset-password-button" to="/reset-password">Reset your password</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -31,27 +31,30 @@ class NewPasswordView extends React.Component {
|
|||
const newPasswordClass = classNames({
|
||||
'new-password': true,
|
||||
'new-password--invalid': this.props.user.resetPasswordInvalid,
|
||||
'form-container': true
|
||||
'form-container': true,
|
||||
'user': true
|
||||
});
|
||||
return (
|
||||
<div className={newPasswordClass}>
|
||||
<Helmet>
|
||||
<title>p5.js Web Editor | New Password</title>
|
||||
</Helmet>
|
||||
<div className="form-container__header">
|
||||
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
|
||||
<InlineSVG src={logoUrl} alt="p5js Logo" />
|
||||
</button>
|
||||
<button className="form-container__exit-button" onClick={this.gotoHomePage}>
|
||||
<InlineSVG src={exitUrl} alt="Close NewPassword Page" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="form-container__content">
|
||||
<h2 className="form-container__title">Set a New Password</h2>
|
||||
<NewPasswordForm {...this.props} />
|
||||
<p className="new-password__invalid">
|
||||
The password reset token is invalid or has expired.
|
||||
</p>
|
||||
<div className="user">
|
||||
<div className={newPasswordClass}>
|
||||
<Helmet>
|
||||
<title>p5.js Web Editor | New Password</title>
|
||||
</Helmet>
|
||||
<div className="form-container__header">
|
||||
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
|
||||
<InlineSVG src={logoUrl} alt="p5js Logo" />
|
||||
</button>
|
||||
<button className="form-container__exit-button" onClick={this.gotoHomePage}>
|
||||
<InlineSVG src={exitUrl} alt="Close NewPassword Page" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="form-container__content">
|
||||
<h2 className="form-container__title">Set a New Password</h2>
|
||||
<NewPasswordForm {...this.props} />
|
||||
<p className="new-password__invalid">
|
||||
The password reset token is invalid or has expired.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -30,33 +30,36 @@ class ResetPasswordView extends React.Component {
|
|||
const resetPasswordClass = classNames({
|
||||
'reset-password': true,
|
||||
'reset-password--submitted': this.props.user.resetPasswordInitiate,
|
||||
'form-container': true
|
||||
'form-container': true,
|
||||
'user': true
|
||||
});
|
||||
return (
|
||||
<div className={resetPasswordClass}>
|
||||
<Helmet>
|
||||
<title>p5.js Web Editor | Reset Password</title>
|
||||
</Helmet>
|
||||
<div className="form-container__header">
|
||||
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
|
||||
<InlineSVG src={logoUrl} alt="p5js Logo" />
|
||||
</button>
|
||||
<button className="form-container__exit-button" onClick={this.gotoHomePage}>
|
||||
<InlineSVG src={exitUrl} alt="Close ResetPassword Page" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="form-container__content">
|
||||
<h2 className="form-container__title">Reset Your Password</h2>
|
||||
<ResetPasswordForm {...this.props} />
|
||||
<p className="reset-password__submitted">
|
||||
Your password reset email should arrive shortly. If you don't see it, check
|
||||
in your spam folder as sometimes it can end up there.
|
||||
</p>
|
||||
<p className="form__navigation-options">
|
||||
<Link className="form__login-button" to="/login">Log In</Link>
|
||||
or
|
||||
<Link className="form__signup-button" to="/signup">Sign Up</Link>
|
||||
</p>
|
||||
<div className="user">
|
||||
<div className={resetPasswordClass}>
|
||||
<Helmet>
|
||||
<title>p5.js Web Editor | Reset Password</title>
|
||||
</Helmet>
|
||||
<div className="form-container__header">
|
||||
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
|
||||
<InlineSVG src={logoUrl} alt="p5js Logo" />
|
||||
</button>
|
||||
<button className="form-container__exit-button" onClick={this.gotoHomePage}>
|
||||
<InlineSVG src={exitUrl} alt="Close ResetPassword Page" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="form-container__content">
|
||||
<h2 className="form-container__title">Reset Your Password</h2>
|
||||
<ResetPasswordForm {...this.props} />
|
||||
<p className="reset-password__submitted">
|
||||
Your password reset email should arrive shortly. If you don't see it, check
|
||||
in your spam folder as sometimes it can end up there.
|
||||
</p>
|
||||
<p className="form__navigation-options">
|
||||
<Link className="form__login-button" to="/login">Log In</Link>
|
||||
or
|
||||
<Link className="form__signup-button" to="/signup">Sign Up</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -34,25 +34,27 @@ class SignupView extends React.Component {
|
|||
return null;
|
||||
}
|
||||
return (
|
||||
<div className="form-container">
|
||||
<Helmet>
|
||||
<title>p5.js Web Editor | Signup</title>
|
||||
</Helmet>
|
||||
<div className="form-container__header">
|
||||
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
|
||||
<InlineSVG src={logoUrl} alt="p5js Logo" />
|
||||
</button>
|
||||
<button className="form-container__exit-button" onClick={this.closeSignupPage}>
|
||||
<InlineSVG src={exitUrl} alt="Close Signup Page" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="form-container__content">
|
||||
<h2 className="form-container__title">Sign Up</h2>
|
||||
<SignupForm {...this.props} />
|
||||
<p className="form__navigation-options">
|
||||
Already have an account?
|
||||
<Link className="form__login-button" to="/login">Log In</Link>
|
||||
</p>
|
||||
<div className="user">
|
||||
<div className="form-container">
|
||||
<Helmet>
|
||||
<title>p5.js Web Editor | Signup</title>
|
||||
</Helmet>
|
||||
<div className="form-container__header">
|
||||
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
|
||||
<InlineSVG src={logoUrl} alt="p5js Logo" />
|
||||
</button>
|
||||
<button className="form-container__exit-button" onClick={this.closeSignupPage}>
|
||||
<InlineSVG src={exitUrl} alt="Close Signup Page" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="form-container__content">
|
||||
<h2 className="form-container__title">Sign Up</h2>
|
||||
<SignupForm {...this.props} />
|
||||
<p className="form__navigation-options">
|
||||
Already have an account?
|
||||
<Link className="form__login-button" to="/login">Log In</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -102,27 +102,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
%forms-button {
|
||||
background-color: $form-button-background-color;
|
||||
color: $form-button-color;
|
||||
cursor: pointer;
|
||||
border: 2px solid $form-button-color;
|
||||
border-radius: 2px;
|
||||
padding: #{8 / $base-font-size}rem #{25 / $base-font-size}rem;
|
||||
line-height: 1;
|
||||
margin: #{39 / $base-font-size}rem 0 #{24 / $base-font-size}rem 0;
|
||||
&:enabled:hover {
|
||||
border-color: $form-button-background-hover-color;
|
||||
background-color: $form-button-background-hover-color;
|
||||
color: $form-button-hover-color;
|
||||
}
|
||||
&:enabled:active {
|
||||
border-color: $form-button-background-active-color;
|
||||
background-color: $form-button-background-active-color;
|
||||
color: $form-button-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
%preferences-button {
|
||||
@extend %toolbar-button;
|
||||
@include themify() {
|
||||
|
|
|
@ -9,15 +9,22 @@ $orange: #ffa500;
|
|||
$red: #ff0000;
|
||||
$lightsteelblue: #B0C4DE;
|
||||
$dodgerblue: #1E90FF;
|
||||
$primary-text-color: #333;
|
||||
$icon-color: #8b8b8b;
|
||||
$icon-hover-color: #333;
|
||||
$p5-contrast-pink: #FFA9D9;
|
||||
|
||||
// Grays
|
||||
$dark: #333;
|
||||
$middleGray: #7d7d7d;
|
||||
$middleLight: #a6a6a6;
|
||||
|
||||
// Abstracts
|
||||
$primary-text-color: $dark;
|
||||
|
||||
$themes: (
|
||||
light: (
|
||||
logo-color: $p5js-pink,
|
||||
primary-text-color: #333,
|
||||
primary-text-color: $primary-text-color,
|
||||
dropzone-text-color: #333,
|
||||
modal-button-color: #333,
|
||||
heading-text-color: #333,
|
||||
|
@ -62,8 +69,22 @@ $themes: (
|
|||
keyboard-shortcut-color: #757575,
|
||||
nav-hover-color: $p5js-pink,
|
||||
error-color: $p5js-pink,
|
||||
table-row-stripe-color: #d6d6d6,
|
||||
codefold-icon-open: url(../images/down-arrow.svg),
|
||||
codefold-icon-closed: url(../images/right-arrow.svg)
|
||||
codefold-icon-closed: url(../images/right-arrow.svg),
|
||||
|
||||
form-title-color: rgba(51, 51, 51, 0.87),
|
||||
form-secondary-title-color: $middleGray,
|
||||
form-input-text-color: $dark,
|
||||
form-input-placeholder-text-color: $middleLight,
|
||||
form-border-color: #b5b5b5,
|
||||
form-button-background-color: $white,
|
||||
form-button-color: #f10046,
|
||||
form-button-background-hover-color: $p5js-pink,
|
||||
form-button-background-active-color: #f10046,
|
||||
form-button-hover-color: $white,
|
||||
form-button-active-color: $white,
|
||||
form-navigation-options-color: #999999
|
||||
),
|
||||
dark: (
|
||||
logo-color: $p5js-pink,
|
||||
|
@ -111,8 +132,20 @@ $themes: (
|
|||
keyboard-shortcut-color: #B5B5B5,
|
||||
nav-hover-color: $p5js-pink,
|
||||
error-color: $p5js-pink,
|
||||
table-row-stripe-color: #3f3f3f,
|
||||
codefold-icon-open: url(../images/down-arrow-white.svg),
|
||||
codefold-icon-closed: url(../images/right-arrow-white.svg)
|
||||
codefold-icon-closed: url(../images/right-arrow-white.svg),
|
||||
|
||||
form-title-color: $white,
|
||||
form-secondary-title-color: #b5b5b5,
|
||||
form-border-color: #b5b5b5,
|
||||
form-button-background-color: $black,
|
||||
form-button-color: #f10046,
|
||||
form-button-background-hover-color: $p5js-pink,
|
||||
form-button-background-active-color: #f10046,
|
||||
form-button-hover-color: $white,
|
||||
form-button-active-color: $white,
|
||||
form-navigation-options-color: #999999
|
||||
),
|
||||
contrast: (
|
||||
logo-color: $yellow,
|
||||
|
@ -159,8 +192,20 @@ $themes: (
|
|||
keyboard-shortcut-color: #e1e1e1,
|
||||
nav-hover-color: $yellow,
|
||||
error-color: $p5-contrast-pink,
|
||||
table-row-stripe-color: #3f3f3f,
|
||||
codefold-icon-open: url(../images/down-arrow-white.svg),
|
||||
codefold-icon-closed: url(../images/right-arrow-white.svg)
|
||||
codefold-icon-closed: url(../images/right-arrow-white.svg),
|
||||
|
||||
form-title-color: $white,
|
||||
form-secondary-title-color: #b5b5b5,
|
||||
form-border-color: #b5b5b5,
|
||||
form-button-background-color: $black,
|
||||
form-button-color: #f10046,
|
||||
form-button-background-hover-color: $p5-contrast-pink,
|
||||
form-button-background-active-color: #f10046,
|
||||
form-button-hover-color: $white,
|
||||
form-button-active-color: $white,
|
||||
form-navigation-options-color: #999999
|
||||
)
|
||||
);
|
||||
|
||||
|
@ -170,15 +215,5 @@ $console-error-color: #ff5f52;
|
|||
$toast-background-color: #4A4A4A;
|
||||
$toast-text-color: $white;
|
||||
|
||||
$form-title-color: rgba(51, 51, 51, 0.87);
|
||||
$secondary-form-title-color: #b5b5b5;
|
||||
$form-button-background-color: $white;
|
||||
$form-button-color: #f10046;
|
||||
$form-button-background-hover-color: $p5js-pink;
|
||||
$form-button-background-active-color: #f10046;
|
||||
$form-button-hover-color: $white;
|
||||
$form-button-active-color: $white;
|
||||
$form-navigation-options-color: #999999;
|
||||
|
||||
$about-play-background-color: rgba(255, 255, 255, 0.7);
|
||||
$about-button-border-color: rgba(151, 151, 151, 0.7);
|
||||
|
|
|
@ -42,12 +42,18 @@ input {
|
|||
}
|
||||
}
|
||||
|
||||
button[type="submit"],
|
||||
input[type="submit"] {
|
||||
@include themify() {
|
||||
@extend %button;
|
||||
}
|
||||
}
|
||||
|
||||
button[type="submit"]:disabled,
|
||||
input[type="submit"]:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
button {
|
||||
@include themify() {
|
||||
@extend %link;
|
||||
|
|
|
@ -46,7 +46,9 @@
|
|||
padding-left: #{20 / $base-font-size}rem;
|
||||
width: #{720 / $base-font-size}rem;
|
||||
& a {
|
||||
color: $form-navigation-options-color;
|
||||
@include themify() {
|
||||
color: getThemifyVariable('form-navigation-options-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,8 +1,7 @@
|
|||
.account__tabs {
|
||||
width: 500px;
|
||||
padding-top: #{20 / $base-font-size}rem;
|
||||
}
|
||||
|
||||
.account__social__context {
|
||||
.account__social-text {
|
||||
padding-bottom: #{15 / $base-font-size}rem;
|
||||
}
|
||||
|
|
|
@ -50,7 +50,9 @@
|
|||
}
|
||||
|
||||
tbody tr:nth-child(odd) {
|
||||
background-color: #f2f2f2;
|
||||
@include themify() {
|
||||
background: getThemifyVariable('table-row-stripe-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -35,7 +35,7 @@
|
|||
|
||||
&:nth-child(odd) {
|
||||
@include themify() {
|
||||
background: getThemifyVariable('console-header-background-color');
|
||||
background: getThemifyVariable('table-row-stripe-color');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -35,7 +35,9 @@
|
|||
|
||||
.form-container__title {
|
||||
font-weight: normal;
|
||||
color: $form-title-color;
|
||||
@include themify() {
|
||||
color: getThemifyVariable('form-title-color')
|
||||
}
|
||||
}
|
||||
|
||||
.form-container__context {
|
||||
|
@ -49,9 +51,9 @@
|
|||
}
|
||||
|
||||
.form-container__logo-button {
|
||||
@extend %none-themify-icon;
|
||||
@include icon();
|
||||
}
|
||||
|
||||
.form-container__exit-button {
|
||||
@extend %none-themify-icon-with-hover;
|
||||
@include icon();
|
||||
}
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
font-size: #{9 / $base-font-size}rem;
|
||||
text-align: left;
|
||||
@include themify() {
|
||||
color: getThemifyVariable('error-color')
|
||||
color: getThemifyVariable('error-color');
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -22,7 +22,9 @@
|
|||
.form__navigation-options {
|
||||
margin-top: #{16 / $base-font-size}rem;
|
||||
font-size: #{12 / $base-font-size}rem;
|
||||
color: $form-navigation-options-color;
|
||||
@include themify() {
|
||||
color: getThemifyVariable('form-navigation-options-color');
|
||||
}
|
||||
}
|
||||
|
||||
.form__legend{
|
||||
|
@ -31,11 +33,13 @@
|
|||
}
|
||||
|
||||
.form__label {
|
||||
color: $secondary-form-title-color;
|
||||
font-size: #{12 / $base-font-size}rem;
|
||||
margin-top: #{25 / $base-font-size}rem;
|
||||
margin-bottom: #{7 / $base-font-size}rem;
|
||||
display: block;
|
||||
@include themify() {
|
||||
color: getThemifyVariable('form-secondary-title-color');
|
||||
}
|
||||
}
|
||||
|
||||
.form__label--hidden {
|
||||
|
@ -43,10 +47,19 @@
|
|||
}
|
||||
|
||||
.form__input {
|
||||
width: #{360 / $base-font-size}rem;
|
||||
width: 100%;
|
||||
min-width: #{360 / $base-font-size}rem;
|
||||
height: #{40 / $base-font-size}rem;
|
||||
color: $icon-hover-color;
|
||||
border-color: $secondary-form-title-color;
|
||||
font-size: #{16 / $base-font-size}rem;
|
||||
@include themify() {
|
||||
color: getThemifyVariable('form-input-text-color');
|
||||
}
|
||||
}
|
||||
|
||||
.form__input::placeholder {
|
||||
@include themify() {
|
||||
color: getThemifyVariable('form-input-placeholder-text-color');
|
||||
}
|
||||
}
|
||||
|
||||
.form__context {
|
||||
|
@ -55,13 +68,17 @@
|
|||
}
|
||||
|
||||
.form__status {
|
||||
color: $form-navigation-options-color;
|
||||
@include themify() {
|
||||
color: getThemifyVariable('form-navigation-options-color');
|
||||
}
|
||||
}
|
||||
|
||||
.form input[type="submit"] {
|
||||
@extend %forms-button;
|
||||
.form [type="submit"] {
|
||||
@extend %button;
|
||||
padding: #{8 / $base-font-size}rem #{25 / $base-font-size}rem;
|
||||
margin: #{39 / $base-font-size}rem 0 #{24 / $base-font-size}rem 0;
|
||||
}
|
||||
|
||||
.form input[type="submit"]:disabled {
|
||||
cursor: not-allowed;
|
||||
.form--inline [type="submit"] {
|
||||
margin: 0 0 0 #{24 / $base-font-size}rem;
|
||||
}
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
.modal-content {
|
||||
@extend %modal;
|
||||
min-height: #{150 / $base-font-size}rem;
|
||||
width: #{400 / $base-font-size}rem;
|
||||
width: #{700 / $base-font-size}rem;
|
||||
padding: #{20 / $base-font-size}rem;
|
||||
.modal--reduced & {
|
||||
//min-height: #{150 / $base-font-size}rem;
|
||||
|
|
|
@ -51,10 +51,6 @@
|
|||
padding-right: #{15 / $base-font-size}rem;
|
||||
}
|
||||
|
||||
.nav__item-header {
|
||||
margin-right: #{5 / $base-font-size}rem;
|
||||
}
|
||||
|
||||
.nav__item:hover {
|
||||
.nav__item-header {
|
||||
@include themify() {
|
||||
|
@ -69,6 +65,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
.nav__item-header:hover {
|
||||
@include themify() {
|
||||
color: getThemifyVariable('nav-hover-color');
|
||||
}
|
||||
}
|
||||
|
||||
.nav__item-header-triangle {
|
||||
margin-left: #{5 / $base-font-size}rem;
|
||||
}
|
||||
|
||||
.nav__dropdown {
|
||||
@include themify() {
|
||||
background-color: map-get($theme-map, 'modal-background-color');
|
||||
|
|
|
@ -10,6 +10,8 @@
|
|||
display: block;
|
||||
margin-top: #{40 / $base-font-size}rem;
|
||||
margin-bottom: #{80 / $base-font-size}rem;
|
||||
color: $form-navigation-options-color;
|
||||
@include themify() {
|
||||
color: getThemifyVariable('form-navigation-options-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -60,15 +60,6 @@
|
|||
text-align: left;
|
||||
}
|
||||
|
||||
.preference__subheadings {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: #{0.1 / $base-font-size}rem;
|
||||
@include themify() {
|
||||
border-bottom: 1px solid getThemifyVariable('button-border-color');
|
||||
}
|
||||
}
|
||||
|
||||
.preference {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
@ -129,48 +120,6 @@
|
|||
width: #{44 / $base-font-size}rem;
|
||||
}
|
||||
|
||||
.react-tabs__tab--selected {
|
||||
@include themify() {
|
||||
border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color');
|
||||
}
|
||||
}
|
||||
|
||||
.react-tabs__tab--selected .preference__subheading {
|
||||
@include themify() {
|
||||
color: getThemifyVariable('primary-text-color');
|
||||
}
|
||||
}
|
||||
|
||||
.react-tabs__tab {
|
||||
text-align: center;
|
||||
color: black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: #{4 / $base-font-size}rem solid transparent;
|
||||
& + & {
|
||||
margin-left: #{45 / $base-font-size}rem;
|
||||
}
|
||||
}
|
||||
|
||||
.preference__subheading {
|
||||
@include themify() {
|
||||
color: getThemifyVariable('inactive-text-color');
|
||||
&:hover, &:focus{
|
||||
color: getThemifyVariable('primary-text-color');
|
||||
cursor: pointer;
|
||||
}
|
||||
&:focus {
|
||||
color: getThemifyVariable('primary-text-color');
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
font-size: #{12 / $base-font-size}rem;
|
||||
height: #{20 / $base-font-size}rem;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0 #{5 /$base-font-size}rem;
|
||||
}
|
||||
|
||||
.preference__vertical-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
@ -4,7 +4,9 @@
|
|||
text-align: left;
|
||||
font-size: #{12 / $base-font-size}rem;
|
||||
margin-top: #{10 / $base-font-size}rem;
|
||||
color: $form-navigation-options-color;
|
||||
@include themify() {
|
||||
color: getThemifyVariable('form-navigation-options-color');
|
||||
}
|
||||
padding-right: #{30 / $base-font-size}rem;
|
||||
padding-left: #{39 / $base-font-size}rem;
|
||||
.reset-password--submitted & {
|
||||
|
|
|
@ -53,7 +53,7 @@
|
|||
|
||||
.sketches-table__row:nth-child(odd) {
|
||||
@include themify() {
|
||||
background: getThemifyVariable('console-header-background-color');
|
||||
background: getThemifyVariable('table-row-stripe-color');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
69
client/styles/components/_tabs.scss
Normal file
69
client/styles/components/_tabs.scss
Normal file
|
@ -0,0 +1,69 @@
|
|||
.tabs__titles {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: #{0.1 / $base-font-size}rem;
|
||||
@include themify() {
|
||||
border-bottom: 1px solid getThemifyVariable('button-border-color');
|
||||
}
|
||||
}
|
||||
|
||||
.tabs__title {
|
||||
@include themify() {
|
||||
color: getThemifyVariable('inactive-text-color');
|
||||
&:hover, &:focus{
|
||||
color: getThemifyVariable('primary-text-color');
|
||||
cursor: pointer;
|
||||
}
|
||||
&:focus {
|
||||
color: getThemifyVariable('primary-text-color');
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
font-size: #{12 / $base-font-size}rem;
|
||||
height: #{20 / $base-font-size}rem;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0 #{5 /$base-font-size}rem;
|
||||
}
|
||||
|
||||
.react-tabs__tab--selected {
|
||||
@include themify() {
|
||||
border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color');
|
||||
}
|
||||
}
|
||||
|
||||
.react-tabs__tab--selected .tabs__title {
|
||||
@include themify() {
|
||||
color: getThemifyVariable('primary-text-color');
|
||||
}
|
||||
}
|
||||
|
||||
.react-tabs__tab {
|
||||
text-align: center;
|
||||
color: black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: #{4 / $base-font-size}rem solid transparent;
|
||||
& + & {
|
||||
margin-left: #{45 / $base-font-size}rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs__title {
|
||||
@include themify() {
|
||||
color: getThemifyVariable('inactive-text-color');
|
||||
&:hover, &:focus{
|
||||
color: getThemifyVariable('primary-text-color');
|
||||
cursor: pointer;
|
||||
}
|
||||
&:focus {
|
||||
color: getThemifyVariable('primary-text-color');
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
font-size: #{12 / $base-font-size}rem;
|
||||
height: #{20 / $base-font-size}rem;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0 #{5 /$base-font-size}rem;
|
||||
}
|
10
client/styles/layout/_user.scss
Normal file
10
client/styles/layout/_user.scss
Normal file
|
@ -0,0 +1,10 @@
|
|||
.user {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
flex-wrap: wrap;
|
||||
@include themify() {
|
||||
color: getThemifyVariable('primary-text-color');
|
||||
background-color: getThemifyVariable('background-color');
|
||||
}
|
||||
}
|
|
@ -45,6 +45,8 @@
|
|||
@import 'components/feedback';
|
||||
@import 'components/loader';
|
||||
@import 'components/uploader';
|
||||
@import 'components/tabs';
|
||||
|
||||
@import 'layout/ide';
|
||||
@import 'layout/fullscreen';
|
||||
@import 'layout/user';
|
||||
|
|
Loading…
Reference in a new issue