52 lines
1.8 KiB
JavaScript
52 lines
1.8 KiB
JavaScript
import React from 'react';
|
|
|
|
const Isvg = require('react-inlinesvg');
|
|
const playUrl = require('../../../images/play.svg');
|
|
const logoUrl = require('../../../images/p5js-logo.svg');
|
|
const stopUrl = require('../../../images/stop.svg');
|
|
const preferencesUrl = require('../../../images/preferences.svg');
|
|
const classNames = require('classnames');
|
|
|
|
class Toolbar extends React.Component {
|
|
render() {
|
|
let playButtonClass = classNames({
|
|
'toolbar__play-button': true,
|
|
'toolbar__play-button--selected': this.props.isPlaying
|
|
});
|
|
let stopButtonClass = classNames({
|
|
'toolbar__stop-button': true,
|
|
'toolbar__stop-button--selected': !this.props.isPlaying
|
|
});
|
|
let preferencesButtonClass = classNames({
|
|
'toolbar__preferences-button': true,
|
|
'toolbar__preferences-button--selected': this.props.isPreferencesVisible
|
|
});
|
|
|
|
return (
|
|
<div className="toolbar">
|
|
<img className="toolbar__logo" src={logoUrl} alt="p5js Logo" />
|
|
<button className={playButtonClass} onClick={this.props.startSketch}>
|
|
<Isvg src={playUrl} alt="Play Sketch" />
|
|
</button>
|
|
<button className={stopButtonClass} onClick={this.props.stopSketch}>
|
|
<Isvg src={stopUrl} alt="Stop Sketch" />
|
|
</button>
|
|
<div className="toolbar__project-name-container">
|
|
<span
|
|
className="toolbar__project-name"
|
|
onBlur={this.props.setProjectName.bind(this)}
|
|
contentEditable
|
|
suppressContentEditableWarning
|
|
>
|
|
{this.props.projectName}
|
|
</span>
|
|
</div>
|
|
<button className={preferencesButtonClass} onClick={this.props.openPreferences}>
|
|
<Isvg src={preferencesUrl} alt="Show Preferences" />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Toolbar;
|