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"> <div className="preference">
<h4 className="preference__title">Autosave</h4> <h4 className="preference__title">Autosave</h4>
<div className="preference__options"> <div className="preference__options">
<button <input
className={autosaveOnClass} type="radio"
onClick={() => this.props.setAutosave(true)} onClick={() => this.props.setAutosave(true)}
aria-label="autosave on" aria-label="autosave on"
>On</button> name="autosave"
<button id="autosave-on"
className={autosaveOffClass} 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)} onClick={() => this.props.setAutosave(false)}
aria-label="autosave off" 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> </div>
<div className="preference"> <div className="preference">
<h4 className="preference__title">Lint Warning Sound</h4> <h4 className="preference__title">Lint Warning Sound</h4>
<div className="preference__options"> <div className="preference__options">
<button <input
className={lintWarningOnClass} type="radio"
onClick={() => this.props.setLintWarning(true)} onClick={() => this.props.setLintWarning(true)}
aria-label="lint warning on" aria-label="lint warning on"
>On</button> name="lint warning"
<button id="lint-warning-on"
className={lintWarningOffClass} 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)} onClick={() => this.props.setLintWarning(false)}
aria-label="lint warning off" 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> </div>
<div className="preference"> <div className="preference">
<h4 className="preference__title">Accessible Text-based Canvas</h4> <h4 className="preference__title">Accessible Text-based Canvas</h4>
<h6 className="preference__subtitle">Used with screen reader</h6> <h6 className="preference__subtitle">Used with screen reader</h6>
<div className="preference__options"> <div className="preference__options">
<button <input
className={textOutputOnClass} type="radio"
onClick={() => this.props.setTextOutput(true)} onClick={() => this.props.setTextOutput(true)}
aria-label="text output on" aria-label="text output on"
>On</button> name="text output"
<button id="text-output-on"
className={textOutputOffClass} 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)} onClick={() => this.props.setTextOutput(false)}
aria-label="text output off" 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>
</div> </div>
</section> </section>

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

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