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

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;

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

@ -12,21 +12,23 @@ 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" /> </button>
</div>
: null }
</div> </div>
); );
} }
} }
export default Toolbar; export default Toolbar;

4
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;
@ -22,4 +22,4 @@
fill: $light-button-hover-color; fill: $light-button-hover-color;
} }
} }
} }

8
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 {
@ -20,4 +26,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;
} }