This commit is contained in:
Cassie Tarakajian 2019-06-18 16:54:16 -04:00 committed by GitHub
parent 81cc10de97
commit 4bd081b307
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -16,12 +16,27 @@ class Preferences extends React.Component {
super(props);
this.handleUpdateAutosave = this.handleUpdateAutosave.bind(this);
this.handleUpdateLinewrap = this.handleUpdateLinewrap.bind(this);
this.handleUpdateFont = this.handleUpdateFont.bind(this);
this.handleLintWarning = this.handleLintWarning.bind(this);
this.onFontInputChange = this.onFontInputChange.bind(this);
this.onFontInputSubmit = this.onFontInputSubmit.bind(this);
this.increaseFontSize = this.increaseFontSize.bind(this);
this.decreaseFontSize = this.decreaseFontSize.bind(this);
this.setFontSize = this.setFontSize.bind(this);
this.state = {
fontSize: props.fontSize
};
}
handleUpdateFont(event) {
let value = parseInt(event.target.value, 10);
onFontInputChange(event) {
this.setState({
fontSize: event.target.value
});
}
onFontInputSubmit(event) {
event.preventDefault();
let value = parseInt(this.state.fontSize, 10);
if (Number.isNaN(value)) {
value = 16;
}
@ -31,9 +46,24 @@ class Preferences extends React.Component {
if (value < 8) {
value = 8;
}
this.setFontSize(value);
}
setFontSize(value) {
this.setState({ fontSize: value });
this.props.setFontSize(value);
}
decreaseFontSize() {
const newValue = this.state.fontSize - 2;
this.setFontSize(newValue);
}
increaseFontSize() {
const newValue = this.state.fontSize + 2;
this.setFontSize(newValue);
}
handleUpdateAutosave(event) {
const value = event.target.value === 'true';
this.props.setAutosave(value);
@ -107,29 +137,31 @@ class Preferences extends React.Component {
<h4 className="preference__title">Text size</h4>
<button
className="preference__minus-button"
onClick={() => this.props.setFontSize(this.props.fontSize - 2)}
onClick={this.decreaseFontSize}
aria-label="decrease font size"
disabled={this.props.fontSize <= 8}
disabled={this.state.fontSize <= 8}
>
<InlineSVG src={minusUrl} alt="Decrease Font Size" />
<h6 className="preference__label">Decrease</h6>
</button>
<input
className="preference__value"
aria-live="polite"
aria-atomic="true"
value={this.props.fontSize}
onChange={this.handleUpdateFont}
ref={(element) => { this.fontSizeInput = element; }}
onClick={() => {
this.fontSizeInput.select();
}}
/>
<form onSubmit={this.onFontInputSubmit}>
<input
className="preference__value"
aria-live="polite"
aria-atomic="true"
value={this.state.fontSize}
onChange={this.onFontInputChange}
ref={(element) => { this.fontSizeInput = element; }}
onClick={() => {
this.fontSizeInput.select();
}}
/>
</form>
<button
className="preference__plus-button"
onClick={() => this.props.setFontSize(this.props.fontSize + 2)}
onClick={this.increaseFontSize}
aria-label="increase font size"
disabled={this.props.fontSize >= 36}
disabled={this.state.fontSize >= 36}
>
<InlineSVG src={plusUrl} alt="Increase Font Size" />
<h6 className="preference__label">Increase</h6>