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

add autosave preference styling

Browse source
This commit is contained in:
catarak 2016-08-09 17:29:17 -04:00
parent 42b15d06de
commit 18c2fe9e85
3 changed files with 48 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -41,6 +41,14 @@ class Preferences extends React.Component {
preference__option: true, preference__option: true,
'preference__option--selected': !this.props.isTabIndent 'preference__option--selected': !this.props.isTabIndent
}); });
let autosaveOnClass = classNames({
preference__option: true,
'preference__option--selected': this.props.autosave
});
let autosaveOffClass = classNames({
preference__option: true,
'preference__option--selected': !this.props.autosave
});
return ( return (
<section className={preferencesContainerClass} tabIndex="0" title="preference-menu"> <section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
<div className="preferences__heading"> <div className="preferences__heading">
@ -118,10 +126,18 @@ class Preferences extends React.Component {
</div> </div>
<div className="preference"> <div className="preference">
<h4 className="preference__title">Autosave</h4> <h4 className="preference__title">Autosave</h4>
<label htmlFor="autosave-on">On</label> <div className="preference__options">
<input type="radio" id="autosave-on" name="autosave" value="true" checked={this.props.autosave} onChange={this.handleUpdateAutosave} /> <button
<label htmlFor="autosave-off">Off</label> className={autosaveOnClass}
<input type="radio" id="autosave-off" name="autosave" value="false" checked={!this.props.autosave} onChange={this.handleUpdateAutosave} /> onClick={() => this.props.setAutosave(true)}
aria-label="autosave on"
>On</button>
<button
className={autosaveOffClass}
onClick={() => this.props.setAutosave(false)}
aria-label="autosave off"
>Off</button>
</div>
</div> </div>
</section> </section>
); );

2
client/styles/abstracts/_placeholders.scss
View file

@ -95,7 +95,7 @@
%preference-option { %preference-option {
background-color: $light-button-background-color; background-color: $light-button-background-color;
color: $light-inactive-text-color; color: $light-inactive-text-color;
font-size: #{14 / $base-font-size}rem; font-size: #{12 / $base-font-size}rem;
cursor: pointer; cursor: pointer;
text-align: left; text-align: left;
margin-bottom: #{5 / $base-font-size}rem; margin-bottom: #{5 / $base-font-size}rem;

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

@ -61,6 +61,7 @@
margin: 0; margin: 0;
line-height: #{20 / $base-font-size}rem; line-height: #{20 / $base-font-size}rem;
color: $light-inactive-text-color; color: $light-inactive-text-color;
font-size: #{9 / $base-font-size}rem;
&:hover { &:hover {
color: $light-inactive-text-color; color: $light-inactive-text-color;
} }
@ -70,13 +71,38 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: #{90 / $base-font-size}rem; width: #{90 / $base-font-size}rem;
padding-left: #{28 / $base-font-size}rem;
} }
.preference__option { .preference__option {
@extend %preference-option; @extend %preference-option;
list-style-type: none; list-style-type: none;
padding-left: #{28 / $base-font-size}rem; padding: 0;
&--selected { &--selected {
@extend %preference-option--selected; @extend %preference-option--selected;
} }
} }
.preference__autosave-input {
// display: none;
}
.preference__autosave-label {
font-size: #{12 / $base-font-size}rem;
color: $light-inactive-text-color;
cursor: pointer;
&:hover {
color: $light-primary-text-color;
}
}
.preference__autosave-input:checked + .preference__autosave-label {
color: $light-primary-text-color;
}
.preference__options {
display: flex;
justify-content: space-between;
width: #{70 / $base-font-size}rem;
}