Merge pull request #2 from MathuraMG/toolbar

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

View file

@ -2,7 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom';
class PreviewFrame extends React.Component {
componentDidMount() {
if (this.props.isPlaying) {
this.renderFrameContents();
@ -57,8 +57,8 @@ class PreviewFrame extends React.Component {
}
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;

View file

@ -10,23 +10,25 @@ class Toolbar extends React.Component {
render() {
let playButtonClass = classNames({
"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 (
<div className="toolbar">
<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" />
</div>
{ this.props.isPlaying ?
<div className="toolbar__stop-button" onClick={this.props.stopSketch}>
<Isvg src={stopUrl} alt="Stop Sketch" />
</div>
: null }
</button>
<button className={stopButtonClass} onClick={this.props.stopSketch}>
<Isvg src={stopUrl} alt="Stop Sketch" />
</button>
</div>
);
}
}
export default Toolbar;
export default Toolbar;

View file

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

View file

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