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

Merge pull request #2 from MathuraMG/toolbar

Browse source 
Make toolbar accessible
This commit is contained in:
Cassie Tarakajian 2016-06-13 16:03:29 -04:00 committed by GitHub
commit 45399461e5
4 changed files with 29 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
shared/components/Preview/PreviewFrame.jsx
View file

@ -2,7 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
class PreviewFrame extends React.Component { class PreviewFrame extends React.Component {
componentDidMount() { componentDidMount() {
if (this.props.isPlaying) { if (this.props.isPlaying) {
this.renderFrameContents(); this.renderFrameContents();
@ -57,8 +57,8 @@ class PreviewFrame extends React.Component {
} }
render() { render() {
return <iframe className="preview-frame" frameBorder="0" sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"></iframe>; return <iframe className="preview-frame" frameBorder="0" sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms" title="sketch output"></iframe>;
} }
} }
export default PreviewFrame; export default PreviewFrame;

20
shared/components/Toolbar/Toolbar.jsx
View file

@ -10,23 +10,25 @@ class Toolbar extends React.Component {
render() { render() {
let playButtonClass = classNames({ let playButtonClass = classNames({
"toolbar__play-button": true, "toolbar__play-button": true,
"playing": this.props.isPlaying "toolbar__play-button--selected": this.props.isPlaying
});
let stopButtonClass = classNames({
"toolbar__stop-button": true,
"toolbar__stop-button--selected": !this.props.isPlaying
}); });
return ( return (
<div className="toolbar"> <div className="toolbar">
<img className="toolbar__logo" src={logoUrl} alt="p5js Logo"/> <img className="toolbar__logo" src={logoUrl} alt="p5js Logo"/>
<div className={playButtonClass} onClick={this.props.startSketch}> <button className={playButtonClass} onClick={this.props.startSketch}>
<Isvg src={playUrl} alt="Play Sketch" /> <Isvg src={playUrl} alt="Play Sketch" />
</div> </button>
{ this.props.isPlaying ? <button className={stopButtonClass} onClick={this.props.stopSketch}>
<div className="toolbar__stop-button" onClick={this.props.stopSketch}> <Isvg src={stopUrl} alt="Stop Sketch" />
<Isvg src={stopUrl} alt="Stop Sketch" /> </button>
</div>
: null }
</div> </div>
); );
} }
} }
export default Toolbar; export default Toolbar;

11
styles/abstracts/_placeholders.scss
View file

@ -6,9 +6,10 @@
width: #{44 / $base-font-size}rem; width: #{44 / $base-font-size}rem;
text-align: center; text-align: center;
border-radius: 100%; border-radius: 100%;
line-height: #{50 / $base-font-size}rem; line-height: #{50 / $base-font-size}rem;
cursor: pointer; cursor: pointer;
border: none;
outline: none;
& g { & g {
fill: $light-toolbar-button-color; fill: $light-toolbar-button-color;
@ -22,4 +23,10 @@
fill: $light-button-hover-color; fill: $light-button-hover-color;
} }
} }
} &--selected {
background-color: $light-button-background-hover-color;
& g {
fill: $light-button-hover-color;
}
}
}

12
styles/components/_toolbar.scss
View file

@ -1,16 +1,16 @@
.toolbar__play-button { .toolbar__play-button {
@extend %toolbar-button; @extend %toolbar-button;
margin-right: #{15 / $base-font-size}rem; margin-right: #{15 / $base-font-size}rem;
&.playing { &--selected {
background-color: $light-button-background-hover-color; @extend %toolbar-button--selected;
& g {
fill: $light-button-hover-color;
}
} }
} }
.toolbar__stop-button { .toolbar__stop-button {
@extend %toolbar-button; @extend %toolbar-button;
&--selected {
@extend %toolbar-button--selected;
}
} }
.toolbar__logo { .toolbar__logo {
@ -20,4 +20,4 @@
.toolbar { .toolbar {
padding: #{20 / $base-font-size}rem #{60 / $base-font-size}rem; padding: #{20 / $base-font-size}rem #{60 / $base-font-size}rem;
display: flex; display: flex;
} }