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

make toolbar accessible

Browse source
This commit is contained in:
mathuramg 2016-06-08 16:35:59 -04:00
parent 172e374312
commit 4dac30d4ca
4 changed files with 22 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -57,7 +57,7 @@ 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>;
} }
} }

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

@ -12,18 +12,20 @@ class Toolbar extends React.Component {
"toolbar__play-button": true, "toolbar__play-button": true,
"playing": this.props.isPlaying "playing": this.props.isPlaying
}); });
let stopButtonClass = classNames({
"toolbar__stop-button": true,
"stopped": !this.props.isPlaying
});
return ( return (
<div className="toolbar"> <div className="toolbar">
<img className="toolbar__logo" src={logoUrl}/> <img className="toolbar__logo" src={logoUrl}/>
<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" />
</div> </button>
: null }
</div> </div>
); );
} }

2
styles/abstracts/_placeholders.scss
View file

@ -6,9 +6,9 @@
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;
& g { & g {
fill: $light-toolbar-button-color; fill: $light-toolbar-button-color;

6
styles/components/_toolbar.scss
View file

@ -11,6 +11,12 @@
.toolbar__stop-button { .toolbar__stop-button {
@extend %toolbar-button; @extend %toolbar-button;
&.stopped {
background-color: $light-button-background-hover-color;
& g {
fill: $light-button-hover-color;
}
}
} }
.toolbar__logo { .toolbar__logo {