p5.js-web-editor/shared/components/Preferences/Preferences.jsx

39 lines
1.3 KiB
React
Raw Normal View History

2016-06-17 17:37:29 +00:00
import React from 'react';
var Isvg = require('react-inlinesvg');
var exitUrl = require('../../../images/exit.svg');
2016-06-20 18:58:15 +00:00
var plusUrl = require('../../../images/plus.svg');
var minusUrl = require('../../../images/minus.svg');
2016-06-17 17:37:29 +00:00
var classNames = require('classnames');
class Preferences extends React.Component {
render() {
2016-06-17 18:31:33 +00:00
let preferencesContainerClass = classNames({
2016-06-17 17:37:29 +00:00
"preferences": true,
"preferences--selected": this.props.isPreferencesShowing
});
return (
<div className={preferencesContainerClass} tabindex="0">
2016-06-20 18:58:15 +00:00
<div className="preferences__heading">
2016-06-20 19:23:42 +00:00
<h2 className="preferences__title">Preferences</h2>
2016-06-20 18:58:15 +00:00
<button className="preferences__exit-button" onClick={this.props.closePreferences}>
<Isvg src={exitUrl} alt="Exit Preferences" />
</button>
</div>
<div className="preference">
2016-06-20 19:23:42 +00:00
<h3 className="preference__title">Font Size</h3>
<button className="preference__plus-button" onClick={this.props.decreaseFont}>
2016-06-20 18:58:15 +00:00
<Isvg src={minusUrl} alt="Decrease Font Size" />
</button>
<p className="preference__value">{this.props.fontSize}</p>
2016-06-20 19:23:42 +00:00
<button className="preference__minus-button" onClick={this.props.increaseFont}>
2016-06-20 18:58:15 +00:00
<Isvg src={plusUrl} alt="Increase Font Size" />
</button>
</div>
2016-06-17 17:37:29 +00:00
</div>
);
}
}
export default Preferences;