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

fixes #443

Browse source
This commit is contained in:
Cassie Tarakajian 2017-10-11 12:56:44 -04:00
parent 20bc8633d7
commit 48cbd79ca8
4 changed files with 102 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
client/components/Nav.jsx
View file

@ -95,7 +95,7 @@ class Nav extends React.PureComponent {
onFocus={this.clearHideTimeout} onFocus={this.clearHideTimeout}
> >
<span className="nav__item-header">File</span> <span className="nav__item-header">File</span>
<InlineSVG src={triangleUrl} /> <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
</button> </button>
<ul className="nav__dropdown"> <ul className="nav__dropdown">
<li className="nav__dropdown-heading"> <li className="nav__dropdown-heading">
@ -110,6 +110,7 @@ class Nav extends React.PureComponent {
} else if (this.props.warnIfUnsavedChanges()) { } else if (this.props.warnIfUnsavedChanges()) {
this.props.newProject(); this.props.newProject();
} }
this.setDropdown('none');
}} }}
onFocus={this.handleFocus.bind(this, 'file')} onFocus={this.handleFocus.bind(this, 'file')}
onBlur={this.handleBlur} onBlur={this.handleBlur}
@ -126,6 +127,7 @@ class Nav extends React.PureComponent {
} else { } else {
this.props.showErrorModal('forceAuthentication'); this.props.showErrorModal('forceAuthentication');
} }
this.setDropdown('none');
}} }}
onFocus={this.handleFocus.bind(this, 'file')} onFocus={this.handleFocus.bind(this, 'file')}
onBlur={this.handleBlur} onBlur={this.handleBlur}
@ -137,7 +139,10 @@ class Nav extends React.PureComponent {
{ this.props.project.id && this.props.user.authenticated && { this.props.project.id && this.props.user.authenticated &&
<li className="nav__dropdown-item"> <li className="nav__dropdown-item">
<button <button
onClick={this.props.cloneProject} onClick={() => {
this.props.cloneProject();
this.setDropdown('none');
}}
onFocus={this.handleFocus.bind(this, 'file')} onFocus={this.handleFocus.bind(this, 'file')}
onBlur={this.handleBlur} onBlur={this.handleBlur}
> >
@ -147,7 +152,10 @@ class Nav extends React.PureComponent {
{ this.props.project.id && { this.props.project.id &&
<li className="nav__dropdown-item"> <li className="nav__dropdown-item">
<button <button
onClick={this.props.showShareModal} onClick={() => {
this.props.showShareModal();
this.setDropdown('none');
}}
onFocus={this.handleFocus.bind(this, 'file')} onFocus={this.handleFocus.bind(this, 'file')}
onBlur={this.handleBlur} onBlur={this.handleBlur}
> >
@ -157,7 +165,10 @@ class Nav extends React.PureComponent {
{ this.props.project.id && { this.props.project.id &&
<li className="nav__dropdown-item"> <li className="nav__dropdown-item">
<button <button
onClick={() => this.props.exportProjectAsZip(this.props.project.id)} onClick={() => {
this.props.exportProjectAsZip(this.props.project.id);
this.setDropdown('none');
}}
onFocus={this.handleFocus.bind(this, 'file')} onFocus={this.handleFocus.bind(this, 'file')}
onBlur={this.handleBlur} onBlur={this.handleBlur}
> >
@ -170,6 +181,7 @@ class Nav extends React.PureComponent {
to={`/${this.props.user.username}/sketches`} to={`/${this.props.user.username}/sketches`}
onFocus={this.handleFocus.bind(this, 'file')} onFocus={this.handleFocus.bind(this, 'file')}
onBlur={this.handleBlur} onBlur={this.handleBlur}
onClick={this.setDropdown.bind(this, 'none')}
> >
Open Open
</Link> </Link>
@ -179,6 +191,7 @@ class Nav extends React.PureComponent {
to="/p5/sketches" to="/p5/sketches"
onFocus={this.handleFocus.bind(this, 'file')} onFocus={this.handleFocus.bind(this, 'file')}
onBlur={this.handleBlur} onBlur={this.handleBlur}
onClick={this.setDropdown.bind(this, 'none')}
> >
Examples Examples
</Link> </Link>
@ -192,7 +205,7 @@ class Nav extends React.PureComponent {
onFocus={this.clearHideTimeout} onFocus={this.clearHideTimeout}
> >
<span className="nav__item-header">Edit</span> <span className="nav__item-header">Edit</span>
<InlineSVG src={triangleUrl} /> <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
</button> </button>
<ul className="nav__dropdown"> <ul className="nav__dropdown">
<li className="nav__dropdown-heading"> <li className="nav__dropdown-heading">
@ -201,7 +214,10 @@ class Nav extends React.PureComponent {
</li> </li>
<li className="nav__dropdown-item"> <li className="nav__dropdown-item">
<button <button
onClick={() => this.props.cmController.tidyCode()} onClick={() => {
this.props.cmController.tidyCode();
this.setDropdown('none');
}}
onFocus={this.handleFocus.bind(this, 'edit')} onFocus={this.handleFocus.bind(this, 'edit')}
onBlur={this.handleBlur} onBlur={this.handleBlur}
> >
@ -211,7 +227,10 @@ class Nav extends React.PureComponent {
</li> </li>
<li className="nav__dropdown-item"> <li className="nav__dropdown-item">
<button <button
onClick={() => this.props.cmController.showFind()} onClick={() => {
this.props.cmController.showFind();
this.setDropdown('none');
}}
onFocus={this.handleFocus.bind(this, 'edit')} onFocus={this.handleFocus.bind(this, 'edit')}
onBlur={this.handleBlur} onBlur={this.handleBlur}
> >
@ -221,7 +240,10 @@ class Nav extends React.PureComponent {
</li> </li>
<li className="nav__dropdown-item"> <li className="nav__dropdown-item">
<button <button
onClick={() => this.props.cmController.findNext()} onClick={() => {
this.props.cmController.findNext();
this.setDropdown('none');
}}
onFocus={this.handleFocus.bind(this, 'edit')} onFocus={this.handleFocus.bind(this, 'edit')}
onBlur={this.handleBlur} onBlur={this.handleBlur}
> >
@ -231,7 +253,10 @@ class Nav extends React.PureComponent {
</li> </li>
<li className="nav__dropdown-item"> <li className="nav__dropdown-item">
<button <button
onClick={() => this.props.cmController.findPrev()} onClick={() => {
this.props.cmController.findPrev();
this.setDropdown('none');
}}
onFocus={this.handleFocus.bind(this, 'edit')} onFocus={this.handleFocus.bind(this, 'edit')}
onBlur={this.handleBlur} onBlur={this.handleBlur}
> >
@ -248,7 +273,7 @@ class Nav extends React.PureComponent {
onFocus={this.clearHideTimeout} onFocus={this.clearHideTimeout}
> >
<span className="nav__item-header">Sketch</span> <span className="nav__item-header">Sketch</span>
<InlineSVG src={triangleUrl} /> <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
</button> </button>
<ul className="nav__dropdown"> <ul className="nav__dropdown">
<li className="nav__dropdown-heading"> <li className="nav__dropdown-heading">
@ -257,7 +282,10 @@ class Nav extends React.PureComponent {
</li> </li>
<li className="nav__dropdown-item"> <li className="nav__dropdown-item">
<button <button
onClick={this.props.startSketch} onClick={() => {
this.props.startSketch();
this.setDropdown('none');
}}
onFocus={this.handleFocus.bind(this, 'sketch')} onFocus={this.handleFocus.bind(this, 'sketch')}
onBlur={this.handleBlur} onBlur={this.handleBlur}
> >
@ -267,7 +295,10 @@ class Nav extends React.PureComponent {
</li> </li>
<li className="nav__dropdown-item"> <li className="nav__dropdown-item">
<button <button
onClick={this.props.stopSketch} onClick={() => {
this.props.stopSketch();
this.setDropdown('none');
}}
onFocus={this.handleFocus.bind(this, 'sketch')} onFocus={this.handleFocus.bind(this, 'sketch')}
onBlur={this.handleBlur} onBlur={this.handleBlur}
> >
@ -277,7 +308,10 @@ class Nav extends React.PureComponent {
</li> </li>
<li className="nav__dropdown-item"> <li className="nav__dropdown-item">
<button <button
onClick={this.props.setAllAccessibleOutput.bind(this, true)} onClick={() => {
this.props.setAllAccessibleOutput(true);
this.setDropdown('none');
}}
onFocus={this.handleFocus.bind(this, 'sketch')} onFocus={this.handleFocus.bind(this, 'sketch')}
onBlur={this.handleBlur} onBlur={this.handleBlur}
> >
@ -287,7 +321,10 @@ class Nav extends React.PureComponent {
</li> </li>
<li className="nav__dropdown-item"> <li className="nav__dropdown-item">
<button <button
onClick={this.props.setAllAccessibleOutput.bind(this, false)} onClick={() => {
this.props.setAllAccessibleOutput(false);
this.setDropdown('none');
}}
onFocus={this.handleFocus.bind(this, 'sketch')} onFocus={this.handleFocus.bind(this, 'sketch')}
onBlur={this.handleBlur} onBlur={this.handleBlur}
> >
@ -304,7 +341,7 @@ class Nav extends React.PureComponent {
onFocus={this.clearHideTimeout} onFocus={this.clearHideTimeout}
> >
<span className="nav__item-header">Help</span> <span className="nav__item-header">Help</span>
<InlineSVG src={triangleUrl} /> <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
</button> </button>
<ul className="nav__dropdown"> <ul className="nav__dropdown">
<li className="nav__dropdown-heading"> <li className="nav__dropdown-heading">
@ -312,7 +349,12 @@ class Nav extends React.PureComponent {
<InlineSVG src={triangleUrl} /> <InlineSVG src={triangleUrl} />
</li> </li>
<li className="nav__dropdown-item"> <li className="nav__dropdown-item">
<button onClick={this.props.showKeyboardShortcutModal}> <button
onClick={() => {
this.props.showKeyboardShortcutModal();
this.setDropdown('none');
}}
>
Keyboard Shortcuts Keyboard Shortcuts
</button> </button>
</li> </li>
@ -323,6 +365,7 @@ class Nav extends React.PureComponent {
rel="noopener noreferrer" rel="noopener noreferrer"
onFocus={this.handleFocus.bind(this, 'help')} onFocus={this.handleFocus.bind(this, 'help')}
onBlur={this.handleBlur} onBlur={this.handleBlur}
onClick={this.setDropdown.bind(this, 'none')}
>Reference</a> >Reference</a>
</li> </li>
<li className="nav__dropdown-item"> <li className="nav__dropdown-item">
@ -330,6 +373,7 @@ class Nav extends React.PureComponent {
to="/about" to="/about"
onFocus={this.handleFocus.bind(this, 'help')} onFocus={this.handleFocus.bind(this, 'help')}
onBlur={this.handleBlur} onBlur={this.handleBlur}
onClick={this.setDropdown.bind(this, 'none')}
> >
About About
</Link> </Link>
@ -362,7 +406,7 @@ class Nav extends React.PureComponent {
> >
My Account My Account
</button> </button>
<InlineSVG src={triangleUrl} /> <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
<ul className="nav__dropdown"> <ul className="nav__dropdown">
<li className="nav__dropdown-heading"> <li className="nav__dropdown-heading">
<span>My Account</span> <span>My Account</span>
@ -373,6 +417,7 @@ class Nav extends React.PureComponent {
to={`/${this.props.user.username}/sketches`} to={`/${this.props.user.username}/sketches`}
onFocus={this.handleFocus.bind(this, 'account')} onFocus={this.handleFocus.bind(this, 'account')}
onBlur={this.handleBlur} onBlur={this.handleBlur}
onClick={this.setDropdown.bind(this, 'none')}
> >
My sketches My sketches
</Link> </Link>
@ -382,6 +427,7 @@ class Nav extends React.PureComponent {
to={`/${this.props.user.username}/assets`} to={`/${this.props.user.username}/assets`}
onFocus={this.handleFocus.bind(this, 'account')} onFocus={this.handleFocus.bind(this, 'account')}
onBlur={this.handleBlur} onBlur={this.handleBlur}
onClick={this.setDropdown.bind(this, 'none')}
> >
My assets My assets
</Link> </Link>
@ -391,13 +437,17 @@ class Nav extends React.PureComponent {
to={`/${this.props.user.username}/account`} to={`/${this.props.user.username}/account`}
onFocus={this.handleFocus.bind(this, 'account')} onFocus={this.handleFocus.bind(this, 'account')}
onBlur={this.handleBlur} onBlur={this.handleBlur}
onClick={this.setDropdown.bind(this, 'none')}
> >
Settings Settings
</Link> </Link>
</li> </li>
<li className="nav__dropdown-item"> <li className="nav__dropdown-item">
<button <button
onClick={this.props.logoutUser} onClick={() => {
this.props.logoutUser();
this.setDropdown('none');
}}
onFocus={this.handleFocus.bind(this, 'account')} onFocus={this.handleFocus.bind(this, 'account')}
onBlur={this.handleBlur} onBlur={this.handleBlur}
> >

1
client/modules/IDE/components/PreviewFrame.jsx
View file

@ -88,6 +88,7 @@ class PreviewFrame extends React.Component {
} }
window.addEventListener('message', (messageEvent) => { window.addEventListener('message', (messageEvent) => {
console.log(messageEvent);
messageEvent.data.forEach((message) => { messageEvent.data.forEach((message) => {
const args = message.arguments; const args = message.arguments;
Object.keys(args).forEach((key) => { Object.keys(args).forEach((key) => {

9
client/styles/abstracts/_variables.scss
View file

@ -47,7 +47,8 @@ $themes: (
about-list-text-color: #4a4a4a, about-list-text-color: #4a4a4a,
search-background-color: #ebebeb, search-background-color: #ebebeb,
dropdown-color: #414141, dropdown-color: #414141,
keyboard-shortcut-color: #757575 keyboard-shortcut-color: #757575,
nav-hover-color: $p5js-pink,
), ),
dark: ( dark: (
logo-color: $p5js-pink, logo-color: $p5js-pink,
@ -85,7 +86,8 @@ $themes: (
about-list-text-color: #f4f4f4, about-list-text-color: #f4f4f4,
search-background-color: #ebebeb, search-background-color: #ebebeb,
dropdown-color: #dadada, dropdown-color: #dadada,
keyboard-shortcut-color: #B5B5B5 keyboard-shortcut-color: #B5B5B5,
nav-hover-color: $p5js-pink,
), ),
contrast: ( contrast: (
logo-color: $yellow, logo-color: $yellow,
@ -122,7 +124,8 @@ $themes: (
about-list-text-color: #f4f4f4, about-list-text-color: #f4f4f4,
search-background-color: $white, search-background-color: $white,
dropdown-color: #e1e1e1, dropdown-color: #e1e1e1,
keyboard-shortcut-color: #e1e1e1 keyboard-shortcut-color: #e1e1e1,
nav-hover-color: $yellow
) )
); );

28
client/styles/components/_nav.scss
View file

@ -50,6 +50,19 @@
margin-right: #{5 / $base-font-size}rem; margin-right: #{5 / $base-font-size}rem;
} }
.nav__item:hover {
.nav__item-header {
@include themify() {
color: getThemifyVariable('nav-hover-color');
}
}
.nav__item-header-triangle polygon {
@include themify() {
fill: getThemifyVariable('nav-hover-color');
}
}
}
.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');
@ -60,7 +73,7 @@
display: none; display: none;
text-align: left; text-align: left;
width: #{180 / $base-font-size}rem; width: #{180 / $base-font-size}rem;
.nav__item:hover &, .nav__item--open & { .nav__item--open & {
display: flex; display: flex;
position: absolute; position: absolute;
flex-direction: column; flex-direction: column;
@ -111,6 +124,19 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin: 0 #{16 / $base-font-size}rem; margin: 0 #{16 / $base-font-size}rem;
cursor: pointer;
&:hover {
span {
@include themify() {
color: getThemifyVariable('nav-hover-color');
}
}
polygon {
@include themify() {
fill: getThemifyVariable('nav-hover-color');
}
}
}
} }
.nav__dropdown-heading a, .nav__dropdown-heading a:hover { .nav__dropdown-heading a, .nav__dropdown-heading a:hover {