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

Merge branch 'feature/public-api' of https://github.com/processing/p5.js-web-editor into feature/public-api

This commit is contained in:
Andrew Nicolaou 2019-06-12 11:30:20 +02:00
parent f8d6cb4940 1ef07ed7a6
commit a7b465d446
29 changed files with 409 additions and 286 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
client/components/Nav.jsx
View File

@ -530,12 +530,16 @@ class Nav extends React.PureComponent {
</ul> </ul>
{ __process.env.LOGIN_ENABLED && !this.props.user.authenticated && { __process.env.LOGIN_ENABLED && !this.props.user.authenticated &&
<ul className="nav__items-right" title="user-menu"> <ul className="nav__items-right" title="user-menu">
<li className="nav__item"> <li>
<p> <Link to="/login">
<Link to="/login">Log in</Link> <span className="nav__item-header">Log in</span>
<span className="nav__item-spacer">or</span> </Link>
<Link to="/signup">Sign up</Link> </li>
</p> <span className="nav__item-spacer">or</span>
<li>
<Link to="/signup">
<span className="nav__item-header">Sign up</span>
</Link>
</li> </li>
</ul>} </ul>}
{ __process.env.LOGIN_ENABLED && this.props.user.authenticated && { __process.env.LOGIN_ENABLED && this.props.user.authenticated &&

40
client/components/NavBasic.jsx Normal file
View 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
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 665 B

26
client/modules/IDE/actions/project.js
View File

@ -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) { export function exportProjectAsZip(projectId) {
const win = window.open(`${ROOT_URL}/projects/${projectId}/zip`, '_blank'); const win = window.open(`${ROOT_URL}/projects/${projectId}/zip`, '_blank');
win.focus(); win.focus();

6
client/modules/IDE/components/Preferences.jsx
View File

@ -59,9 +59,9 @@ class Preferences extends React.Component {
</Helmet> </Helmet>
<Tabs> <Tabs>
<TabList> <TabList>
<div className="preference__subheadings"> <div className="tabs__titles">
<Tab><h4 className="preference__subheading">General Settings</h4></Tab> <Tab><h4 className="tabs__title">General Settings</h4></Tab>
<Tab><h4 className="preference__subheading">Accessibility</h4></Tab> <Tab><h4 className="tabs__title">Accessibility</h4></Tab>
</div> </div>
</TabList> </TabList>
<TabPanel> <TabPanel>

61
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,40 @@ class AccountView extends React.Component {
render() { render() {
return ( return (
<section className="form-container form-container--align-top form-container--align-left account-container"> <div className="user">
<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 onBack={this.closeAccountPage} />
<InlineSVG src={logoUrl} alt="p5js Logo" />
</button> <section className="modal">
<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> </div>
<div className="form-container__content"> <Tabs className="account__tabs">
<h2 className="form-container__title">My Account</h2> <TabList>
<Tabs className="account__tabs"> <div className="tabs__titles">
<TabList> <Tab><h4 className="tabs__title">Account</h4></Tab>
<div className="preference__subheadings"> <Tab><h4 className="tabs__title">Access Tokens</h4></Tab>
<Tab><h4 className="preference__subheading">Account</h4></Tab> </div>
<Tab><h4 className="preference__subheading">Access Tokens</h4></Tab> </TabList>
</div> <TabPanel>
</TabList> <AccountForm {...this.props} />
<TabPanel>
<AccountForm {...this.props} />
<div className="account__social">
<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> </div>
); );
} }
} }

32
client/modules/User/pages/EmailVerificationView.jsx
View File

@ -65,21 +65,23 @@ class EmailVerificationView extends React.Component {
} }
return ( return (
<div className="form-container"> <div className="user">
<Helmet> <div className="form-container">
<title>p5.js Web Editor | Email Verification</title> <Helmet>
</Helmet> <title>p5.js Web Editor | Email Verification</title>
<div className="form-container__header"> </Helmet>
<button className="form-container__logo-button" onClick={this.gotoHomePage}> <div className="form-container__header">
<InlineSVG src={logoUrl} alt="p5js Logo" /> <button className="form-container__logo-button" onClick={this.gotoHomePage}>
</button> <InlineSVG src={logoUrl} alt="p5js Logo" />
<button className="form-container__exit-button" onClick={this.closeLoginPage}> </button>
<InlineSVG src={exitUrl} alt="Close Login Page" /> <button className="form-container__exit-button" onClick={this.closeLoginPage}>
</button> <InlineSVG src={exitUrl} alt="Close Login Page" />
</div> </button>
<div className="form-container__content"> </div>
<h2 className="form-container__title">Verify your email</h2> <div className="form-container__content">
{status} <h2 className="form-container__title">Verify your email</h2>
{status}
</div>
</div> </div>
</div> </div>
); );

54
client/modules/User/pages/LoginView.jsx
View File

@ -34,32 +34,34 @@ class LoginView extends React.Component {
return null; return null;
} }
return ( return (
<div className="form-container"> <div className="user">
<Helmet> <div className="form-container">
<title>p5.js Web Editor | Login</title> <Helmet>
</Helmet> <title>p5.js Web Editor | Login</title>
<div className="form-container__header"> </Helmet>
<button className="form-container__logo-button" onClick={this.gotoHomePage}> <div className="form-container__header">
<InlineSVG src={logoUrl} alt="p5js Logo" /> <button className="form-container__logo-button" onClick={this.gotoHomePage}>
</button> <InlineSVG src={logoUrl} alt="p5js Logo" />
<button className="form-container__exit-button" onClick={this.closeLoginPage}> </button>
<InlineSVG src={exitUrl} alt="Close Login Page" /> <button className="form-container__exit-button" onClick={this.closeLoginPage}>
</button> <InlineSVG src={exitUrl} alt="Close Login Page" />
</div> </button>
<div className="form-container__content"> </div>
<h2 className="form-container__title">Log In</h2> <div className="form-container__content">
<LoginForm {...this.props} /> <h2 className="form-container__title">Log In</h2>
<h2 className="form-container__divider">Or</h2> <LoginForm {...this.props} />
<GithubButton buttonText="Login with Github" /> <h2 className="form-container__divider">Or</h2>
<GoogleButton buttonText="Login with Google" /> <GithubButton buttonText="Login with Github" />
<p className="form__navigation-options"> <GoogleButton buttonText="Login with Google" />
Don&apos;t have an account?&nbsp; <p className="form__navigation-options">
<Link className="form__signup-button" to="/signup">Sign Up</Link> Don&apos;t have an account?&nbsp;
</p> <Link className="form__signup-button" to="/signup">Sign Up</Link>
<p className="form__navigation-options"> </p>
Forgot your password?&nbsp; <p className="form__navigation-options">
<Link className="form__reset-password-button" to="/reset-password">Reset your password</Link> Forgot your password?&nbsp;
</p> <Link className="form__reset-password-button" to="/reset-password">Reset your password</Link>
</p>
</div>
</div> </div>
</div> </div>
); );

41
client/modules/User/pages/NewPasswordView.jsx
View File

@ -31,27 +31,30 @@ class NewPasswordView extends React.Component {
const newPasswordClass = classNames({ const newPasswordClass = classNames({
'new-password': true, 'new-password': true,
'new-password--invalid': this.props.user.resetPasswordInvalid, 'new-password--invalid': this.props.user.resetPasswordInvalid,
'form-container': true 'form-container': true,
'user': true
}); });
return ( return (
<div className={newPasswordClass}> <div className="user">
<Helmet> <div className={newPasswordClass}>
<title>p5.js Web Editor | New Password</title> <Helmet>
</Helmet> <title>p5.js Web Editor | New Password</title>
<div className="form-container__header"> </Helmet>
<button className="form-container__logo-button" onClick={this.gotoHomePage}> <div className="form-container__header">
<InlineSVG src={logoUrl} alt="p5js Logo" /> <button className="form-container__logo-button" onClick={this.gotoHomePage}>
</button> <InlineSVG src={logoUrl} alt="p5js Logo" />
<button className="form-container__exit-button" onClick={this.gotoHomePage}> </button>
<InlineSVG src={exitUrl} alt="Close NewPassword Page" /> <button className="form-container__exit-button" onClick={this.gotoHomePage}>
</button> <InlineSVG src={exitUrl} alt="Close NewPassword Page" />
</div> </button>
<div className="form-container__content"> </div>
<h2 className="form-container__title">Set a New Password</h2> <div className="form-container__content">
<NewPasswordForm {...this.props} /> <h2 className="form-container__title">Set a New Password</h2>
<p className="new-password__invalid"> <NewPasswordForm {...this.props} />
The password reset token is invalid or has expired. <p className="new-password__invalid">
</p> The password reset token is invalid or has expired.
</p>
</div>
</div> </div>
</div> </div>
); );

53
client/modules/User/pages/ResetPasswordView.jsx
View File

@ -30,33 +30,36 @@ class ResetPasswordView extends React.Component {
const resetPasswordClass = classNames({ const resetPasswordClass = classNames({
'reset-password': true, 'reset-password': true,
'reset-password--submitted': this.props.user.resetPasswordInitiate, 'reset-password--submitted': this.props.user.resetPasswordInitiate,
'form-container': true 'form-container': true,
'user': true
}); });
return ( return (
<div className={resetPasswordClass}> <div className="user">
<Helmet> <div className={resetPasswordClass}>
<title>p5.js Web Editor | Reset Password</title> <Helmet>
</Helmet> <title>p5.js Web Editor | Reset Password</title>
<div className="form-container__header"> </Helmet>
<button className="form-container__logo-button" onClick={this.gotoHomePage}> <div className="form-container__header">
<InlineSVG src={logoUrl} alt="p5js Logo" /> <button className="form-container__logo-button" onClick={this.gotoHomePage}>
</button> <InlineSVG src={logoUrl} alt="p5js Logo" />
<button className="form-container__exit-button" onClick={this.gotoHomePage}> </button>
<InlineSVG src={exitUrl} alt="Close ResetPassword Page" /> <button className="form-container__exit-button" onClick={this.gotoHomePage}>
</button> <InlineSVG src={exitUrl} alt="Close ResetPassword Page" />
</div> </button>
<div className="form-container__content"> </div>
<h2 className="form-container__title">Reset Your Password</h2> <div className="form-container__content">
<ResetPasswordForm {...this.props} /> <h2 className="form-container__title">Reset Your Password</h2>
<p className="reset-password__submitted"> <ResetPasswordForm {...this.props} />
Your password reset email should arrive shortly. If you don&apos;t see it, check <p className="reset-password__submitted">
in your spam folder as sometimes it can end up there. Your password reset email should arrive shortly. If you don&apos;t see it, check
</p> in your spam folder as sometimes it can end up there.
<p className="form__navigation-options"> </p>
<Link className="form__login-button" to="/login">Log In</Link> <p className="form__navigation-options">
&nbsp;or&nbsp; <Link className="form__login-button" to="/login">Log In</Link>
<Link className="form__signup-button" to="/signup">Sign Up</Link> &nbsp;or&nbsp;
</p> <Link className="form__signup-button" to="/signup">Sign Up</Link>
</p>
</div>
</div> </div>
</div> </div>
); );

40
client/modules/User/pages/SignupView.jsx
View File

@ -34,25 +34,27 @@ class SignupView extends React.Component {
return null; return null;
} }
return ( return (
<div className="form-container"> <div className="user">
<Helmet> <div className="form-container">
<title>p5.js Web Editor | Signup</title> <Helmet>
</Helmet> <title>p5.js Web Editor | Signup</title>
<div className="form-container__header"> </Helmet>
<button className="form-container__logo-button" onClick={this.gotoHomePage}> <div className="form-container__header">
<InlineSVG src={logoUrl} alt="p5js Logo" /> <button className="form-container__logo-button" onClick={this.gotoHomePage}>
</button> <InlineSVG src={logoUrl} alt="p5js Logo" />
<button className="form-container__exit-button" onClick={this.closeSignupPage}> </button>
<InlineSVG src={exitUrl} alt="Close Signup Page" /> <button className="form-container__exit-button" onClick={this.closeSignupPage}>
</button> <InlineSVG src={exitUrl} alt="Close Signup Page" />
</div> </button>
<div className="form-container__content"> </div>
<h2 className="form-container__title">Sign Up</h2> <div className="form-container__content">
<SignupForm {...this.props} /> <h2 className="form-container__title">Sign Up</h2>
<p className="form__navigation-options"> <SignupForm {...this.props} />
Already have an account?&nbsp; <p className="form__navigation-options">
<Link className="form__login-button" to="/login">Log In</Link> Already have an account?&nbsp;
</p> <Link className="form__login-button" to="/login">Log In</Link>
</p>
</div>
</div> </div>
</div> </div>
); );

21
client/styles/abstracts/_placeholders.scss
View File

@ -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 { %preferences-button {
@extend %toolbar-button; @extend %toolbar-button;
@include themify() { @include themify() {

65
client/styles/abstracts/_variables.scss
View File

@ -9,15 +9,22 @@ $orange: #ffa500;
$red: #ff0000; $red: #ff0000;
$lightsteelblue: #B0C4DE; $lightsteelblue: #B0C4DE;
$dodgerblue: #1E90FF; $dodgerblue: #1E90FF;
$primary-text-color: #333;
$icon-color: #8b8b8b; $icon-color: #8b8b8b;
$icon-hover-color: #333; $icon-hover-color: #333;
$p5-contrast-pink: #FFA9D9; $p5-contrast-pink: #FFA9D9;
// Grays
$dark: #333;
$middleGray: #7d7d7d;
$middleLight: #a6a6a6;
// Abstracts
$primary-text-color: $dark;
$themes: ( $themes: (
light: ( light: (
logo-color: $p5js-pink, logo-color: $p5js-pink,
primary-text-color: #333, primary-text-color: $primary-text-color,
dropzone-text-color: #333, dropzone-text-color: #333,
modal-button-color: #333, modal-button-color: #333,
heading-text-color: #333, heading-text-color: #333,
@ -62,8 +69,22 @@ $themes: (
keyboard-shortcut-color: #757575, keyboard-shortcut-color: #757575,
nav-hover-color: $p5js-pink, nav-hover-color: $p5js-pink,
error-color: $p5js-pink, error-color: $p5js-pink,
table-row-stripe-color: #d6d6d6,
codefold-icon-open: url(../images/down-arrow.svg), 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: ( dark: (
logo-color: $p5js-pink, logo-color: $p5js-pink,
@ -111,8 +132,20 @@ $themes: (
keyboard-shortcut-color: #B5B5B5, keyboard-shortcut-color: #B5B5B5,
nav-hover-color: $p5js-pink, nav-hover-color: $p5js-pink,
error-color: $p5js-pink, error-color: $p5js-pink,
table-row-stripe-color: #3f3f3f,
codefold-icon-open: url(../images/down-arrow-white.svg), 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: ( contrast: (
logo-color: $yellow, logo-color: $yellow,
@ -159,8 +192,20 @@ $themes: (
keyboard-shortcut-color: #e1e1e1, keyboard-shortcut-color: #e1e1e1,
nav-hover-color: $yellow, nav-hover-color: $yellow,
error-color: $p5-contrast-pink, error-color: $p5-contrast-pink,
table-row-stripe-color: #3f3f3f,
codefold-icon-open: url(../images/down-arrow-white.svg), 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-background-color: #4A4A4A;
$toast-text-color: $white; $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-play-background-color: rgba(255, 255, 255, 0.7);
$about-button-border-color: rgba(151, 151, 151, 0.7); $about-button-border-color: rgba(151, 151, 151, 0.7);

6
client/styles/base/_base.scss
View File

@ -42,12 +42,18 @@ input {
} }
} }
button[type="submit"],
input[type="submit"] { input[type="submit"] {
@include themify() { @include themify() {
@extend %button; @extend %button;
} }
} }
button[type="submit"]:disabled,
input[type="submit"]:disabled {
cursor: not-allowed;
}
button { button {
@include themify() { @include themify() {
@extend %link; @extend %link;

4
client/styles/components/_about.scss
View File

@ -46,7 +46,9 @@
padding-left: #{20 / $base-font-size}rem; padding-left: #{20 / $base-font-size}rem;
width: #{720 / $base-font-size}rem; width: #{720 / $base-font-size}rem;
& a { & a {
color: $form-navigation-options-color; @include themify() {
color: getThemifyVariable('form-navigation-options-color');
}
} }
} }

3
client/styles/components/_account.scss
View File

@ -1,8 +1,7 @@
.account__tabs { .account__tabs {
width: 500px;
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;
} }

4
client/styles/components/_api-key.scss
View File

@ -50,7 +50,9 @@
} }
tbody tr:nth-child(odd) { tbody tr:nth-child(odd) {
background-color: #f2f2f2; @include themify() {
background: getThemifyVariable('table-row-stripe-color');
}
} }
} }

2
client/styles/components/_asset-list.scss
View File

@ -35,7 +35,7 @@
&:nth-child(odd) { &:nth-child(odd) {
@include themify() { @include themify() {
background: getThemifyVariable('console-header-background-color'); background: getThemifyVariable('table-row-stripe-color');
} }
} }

8
client/styles/components/_form-container.scss
View File

@ -35,7 +35,9 @@
.form-container__title { .form-container__title {
font-weight: normal; font-weight: normal;
color: $form-title-color; @include themify() {
color: getThemifyVariable('form-title-color')
}
} }
.form-container__context { .form-container__context {
@ -49,9 +51,9 @@
} }
.form-container__logo-button { .form-container__logo-button {
@extend %none-themify-icon; @include icon();
} }
.form-container__exit-button { .form-container__exit-button {
@extend %none-themify-icon-with-hover; @include icon();
} }

39
client/styles/components/_forms.scss
View File

@ -5,7 +5,7 @@
font-size: #{9 / $base-font-size}rem; font-size: #{9 / $base-font-size}rem;
text-align: left; text-align: left;
@include themify() { @include themify() {
color: getThemifyVariable('error-color') color: getThemifyVariable('error-color');
} }
} }
@ -22,7 +22,9 @@
.form__navigation-options { .form__navigation-options {
margin-top: #{16 / $base-font-size}rem; margin-top: #{16 / $base-font-size}rem;
font-size: #{12 / $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{ .form__legend{
@ -31,11 +33,13 @@
} }
.form__label { .form__label {
color: $secondary-form-title-color;
font-size: #{12 / $base-font-size}rem; font-size: #{12 / $base-font-size}rem;
margin-top: #{25 / $base-font-size}rem; margin-top: #{25 / $base-font-size}rem;
margin-bottom: #{7 / $base-font-size}rem; margin-bottom: #{7 / $base-font-size}rem;
display: block; display: block;
@include themify() {
color: getThemifyVariable('form-secondary-title-color');
}
} }
.form__label--hidden { .form__label--hidden {
@ -43,10 +47,19 @@
} }
.form__input { .form__input {
width: #{360 / $base-font-size}rem; width: 100%;
min-width: #{360 / $base-font-size}rem;
height: #{40 / $base-font-size}rem; height: #{40 / $base-font-size}rem;
color: $icon-hover-color; font-size: #{16 / $base-font-size}rem;
border-color: $secondary-form-title-color; @include themify() {
color: getThemifyVariable('form-input-text-color');
}
}
.form__input::placeholder {
@include themify() {
color: getThemifyVariable('form-input-placeholder-text-color');
}
} }
.form__context { .form__context {
@ -55,13 +68,17 @@
} }
.form__status { .form__status {
color: $form-navigation-options-color; @include themify() {
color: getThemifyVariable('form-navigation-options-color');
}
} }
.form input[type="submit"] { .form [type="submit"] {
@extend %forms-button; @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 { .form--inline [type="submit"] {
cursor: not-allowed; margin: 0 0 0 #{24 / $base-font-size}rem;
} }

2
client/styles/components/_modal.scss
View File

@ -10,7 +10,7 @@
.modal-content { .modal-content {
@extend %modal; @extend %modal;
min-height: #{150 / $base-font-size}rem; 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; padding: #{20 / $base-font-size}rem;
.modal--reduced & { .modal--reduced & {
//min-height: #{150 / $base-font-size}rem; //min-height: #{150 / $base-font-size}rem;

14
client/styles/components/_nav.scss
View File

@ -51,10 +51,6 @@
padding-right: #{15 / $base-font-size}rem; padding-right: #{15 / $base-font-size}rem;
} }
.nav__item-header {
margin-right: #{5 / $base-font-size}rem;
}
.nav__item:hover { .nav__item:hover {
.nav__item-header { .nav__item-header {
@include themify() { @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 { .nav__dropdown {
@include themify() { @include themify() {
background-color: map-get($theme-map, 'modal-background-color'); background-color: map-get($theme-map, 'modal-background-color');

6
client/styles/components/_new-password.scss
View File

@ -10,6 +10,8 @@
display: block; display: block;
margin-top: #{40 / $base-font-size}rem; margin-top: #{40 / $base-font-size}rem;
margin-bottom: #{80 / $base-font-size}rem; margin-bottom: #{80 / $base-font-size}rem;
color: $form-navigation-options-color; @include themify() {
color: getThemifyVariable('form-navigation-options-color');
}
} }
} }

51
client/styles/components/_preferences.scss
View File

@ -60,15 +60,6 @@
text-align: left; 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 { .preference {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -129,48 +120,6 @@
width: #{44 / $base-font-size}rem; 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 { .preference__vertical-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

4
client/styles/components/_reset-password.scss
View File

@ -4,7 +4,9 @@
text-align: left; text-align: left;
font-size: #{12 / $base-font-size}rem; font-size: #{12 / $base-font-size}rem;
margin-top: #{10 / $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-right: #{30 / $base-font-size}rem;
padding-left: #{39 / $base-font-size}rem; padding-left: #{39 / $base-font-size}rem;
.reset-password--submitted & { .reset-password--submitted & {

2
client/styles/components/_sketch-list.scss
View File

@ -53,7 +53,7 @@
.sketches-table__row:nth-child(odd) { .sketches-table__row:nth-child(odd) {
@include themify() { @include themify() {
background: getThemifyVariable('console-header-background-color'); background: getThemifyVariable('table-row-stripe-color');
} }
} }

69
client/styles/components/_tabs.scss Normal file
View 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
View 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');
}
}

2
client/styles/main.scss
View File

@ -45,6 +45,8 @@
@import 'components/feedback'; @import 'components/feedback';
@import 'components/loader'; @import 'components/loader';
@import 'components/uploader'; @import 'components/uploader';
@import 'components/tabs';
@import 'layout/ide'; @import 'layout/ide';
@import 'layout/fullscreen'; @import 'layout/fullscreen';
@import 'layout/user';