r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

make preferences radio buttons

Browse source
This commit is contained in:
MathuraMG 2016-08-25 17:46:30 -04:00
parent db85dcc04b
commit b825096640
2 changed files with 60 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
client/modules/IDE/components/Preferences.js
View file

@ -150,47 +150,85 @@ class Preferences extends React.Component {
<div className="preference">
<h4 className="preference__title">Autosave</h4>
<div className="preference__options">
<button
className={autosaveOnClass}
<input
type="radio"
onClick={() => this.props.setAutosave(true)}
aria-label="autosave on"
>On</button>
<button
className={autosaveOffClass}
name="autosave"
id="autosave-on"
className="preference__radio-button"
value="On"
checked={this.props.autosave}
/>
<label htmlFor="autosave-on" className={autosaveOnClass}>On</label>
<input
type="radio"
onClick={() => this.props.setAutosave(false)}
aria-label="autosave off"
>Off</button>
name="autosave"
id="autosave-off"
className="preference__radio-button"
value="Off"
checked={!this.props.autosave}
/>
<label htmlFor="autosave-off" className={autosaveOffClass}>Off</label>
</div>
</div>
<div className="preference">
<h4 className="preference__title">Lint Warning Sound</h4>
<div className="preference__options">
<button
className={lintWarningOnClass}
<input
type="radio"
onClick={() => this.props.setLintWarning(true)}
aria-label="lint warning on"
>On</button>
<button
className={lintWarningOffClass}
name="lint warning"
id="lint-warning-on"
className="preference__radio-button"
value="On"
checked={this.props.lintWarning}
/>
<label htmlFor="lint-warning-on" className={lintWarningOnClass}>On</label>
<input
type="radio"
onClick={() => this.props.setLintWarning(false)}
aria-label="lint warning off"
>Off</button>
name="lint warning"
id="lint-warning-off"
className="preference__radio-button"
value="Off"
checked={!this.props.lintWarning}
/>
<label htmlFor="lint-warning-off" className={lintWarningOffClass}>Off</label>
</div>
</div>
<div className="preference">
<h4 className="preference__title">Accessible Text-based Canvas</h4>
<h6 className="preference__subtitle">Used with screen reader</h6>
<div className="preference__options">
<button
className={textOutputOnClass}
<input
type="radio"
onClick={() => this.props.setTextOutput(true)}
aria-label="text output on"
>On</button>
<button
className={textOutputOffClass}
name="text output"
id="text-output-on"
className="preference__radio-button"
value="On"
checked={this.props.textOutput}
/>
<label htmlFor="text-output-on" className={textOutputOnClass}>On</label>
<input
type="radio"
onClick={() => this.props.setTextOutput(false)}
aria-label="text output off"
>Off</button>
name="text output"
id="text-output-off"
className="preference__radio-button"
value="Off"
checked={!this.props.textOutput}
/>
<label htmlFor="text-output-off" className={textOutputOffClass}>Off</label>
</div>
</div>
</section>

4
client/styles/components/_preferences.scss
View file

@ -81,6 +81,10 @@
padding-left: #{28 / $base-font-size}rem;
}
.preference__radio-button {
@extend %hidden-element;
}
.preference__option {
@extend %preference-option;
list-style-type: none;