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

Prefs (#238)

Browse source 
* removing avenir font, using montserrat instead due to licensing issues

* removing old import statement for typeography scss file

* formating prefs pane

* updating capitalization
This commit is contained in:
Lauren McCarthy 2016-12-19 20:48:36 -08:00 committed by Cassie Tarakajian
parent cb41b3296d
commit 5de2a6761f
3 changed files with 61 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/components/Nav.jsx
View file

@ -111,7 +111,7 @@ function Nav(props) {
return ( return (
<li className="nav__item"> <li className="nav__item">
<p> <p>
<Link to="/login">Login</Link> <span className="nav__item-spacer">or</span> <Link to="/signup">Sign Up</Link> <Link to="/login">Login</Link> <span className="nav__item-spacer">or</span> <Link to="/signup">Sign up</Link>
</p> </p>
</li> </li>
); );

26
client/modules/IDE/components/Preferences.jsx
View file

@ -68,7 +68,7 @@ class Preferences extends React.Component {
</div> </div>
<div className="preference"> <div className="preference">
<h4 className="preference__title">Text Size</h4> <h4 className="preference__title">Text size</h4>
<button <button
className="preference__minus-button" className="preference__minus-button"
onClick={() => this.props.setFontSize(this.props.fontSize - 2)} onClick={() => this.props.setFontSize(this.props.fontSize - 2)}
@ -102,7 +102,7 @@ class Preferences extends React.Component {
</div> </div>
<div className="preference"> <div className="preference">
<h4 className="preference__title">Indentation Amount</h4> <h4 className="preference__title">Indentation amount</h4>
<button <button
className="preference__minus-button" className="preference__minus-button"
onClick={() => this.props.setIndentation(this.props.indentationAmount - 2)} onClick={() => this.props.setIndentation(this.props.indentationAmount - 2)}
@ -220,11 +220,11 @@ class Preferences extends React.Component {
value="contrast" value="contrast"
checked={this.props.theme === 'contrast'} checked={this.props.theme === 'contrast'}
/> />
<label htmlFor="contrast-theme-on" className="preference__option">High Contrast</label> <label htmlFor="contrast-theme-on" className="preference__option">High contrast</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">
<input <input
type="radio" type="radio"
@ -248,17 +248,17 @@ class Preferences extends React.Component {
checked={!this.props.lintWarning} checked={!this.props.lintWarning}
/> />
<label htmlFor="lint-warning-off" className="preference__option">Off</label> <label htmlFor="lint-warning-off" className="preference__option">Off</label>
</div> <div
<button
className="preference__preview-button" className="preference__preview-button"
onClick={() => beep.play()} onClick={() => beep.play()}
aria-label="preview sound" aria-label="preview sound"
> >
Preview Sound Preview sound
</button> </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">
@ -272,7 +272,7 @@ class Preferences extends React.Component {
value="On" value="On"
checked={Boolean(this.props.textOutput === 1)} checked={Boolean(this.props.textOutput === 1)}
/> />
<label htmlFor="text-output-on" className="preference__option">Plain-Text</label> <label htmlFor="text-output-on" className="preference__option preference__canvas">Plain-text</label>
<input <input
type="radio" type="radio"
onChange={() => this.props.setTextOutput(2)} onChange={() => this.props.setTextOutput(2)}
@ -283,7 +283,7 @@ class Preferences extends React.Component {
value="Grid On" value="Grid On"
checked={Boolean(this.props.textOutput === 2)} checked={Boolean(this.props.textOutput === 2)}
/> />
<label htmlFor="grid-output-on" className="preference__option">Table-Text</label> <label htmlFor="grid-output-on" className="preference__option preference__canvas">Table-text</label>
<input <input
type="radio" type="radio"
onChange={() => this.props.setTextOutput(3)} onChange={() => this.props.setTextOutput(3)}
@ -294,7 +294,7 @@ class Preferences extends React.Component {
value="On" value="On"
checked={Boolean(this.props.textOutput === 3)} checked={Boolean(this.props.textOutput === 3)}
/> />
<label htmlFor="sound-output-on" className="preference__option">Sound</label> <label htmlFor="sound-output-on" className="preference__option preference__canvas">Sound</label>
<input <input
type="radio" type="radio"
onChange={() => this.props.setTextOutput(0)} onChange={() => this.props.setTextOutput(0)}
@ -305,7 +305,7 @@ class Preferences extends React.Component {
value="Off" value="Off"
checked={!Boolean(this.props.textOutput)} checked={!Boolean(this.props.textOutput)}
/> />
<label htmlFor="text-output-off" className="preference__option">Off</label> <label htmlFor="text-output-off" className="preference__option preference__canvas">Off</label>
</div> </div>
</div> </div>

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

@ -1,15 +1,19 @@
.preferences { .preferences {
@extend %modal; @extend %modal;
position: absolute; position: absolute;
top: #{60 / $base-font-size}rem; top: #{51 / $base-font-size}rem;
right: #{40 / $base-font-size}rem; right: #{29 / $base-font-size}rem;
width: #{336 / $base-font-size}rem; width: #{288 / $base-font-size}rem;
display: none; display: none;
padding: #{16 / $base-font-size}rem #{26 / $base-font-size}rem; padding: #{14 / $base-font-size}rem #{20 / $base-font-size}rem #{2 / $base-font-size}rem #{20 / $base-font-size}rem ;
&--selected { &--selected {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@include themify() {
background-color: getThemifyVariable('editor-gutter-color');
}
outline: none;
} }
.preferences__exit-button { .preferences__exit-button {
@ -17,14 +21,20 @@
@extend %icon; @extend %icon;
} }
padding-top: #{5 / $base-font-size}rem; padding-top: #{5 / $base-font-size}rem;
margin-right: #{-6 / $base-font-size}rem;
} }
.preference__plus-button { .preference button {
@extend %preferences-button; @include themify() {
}
.preference__minus-button {
@extend %preferences-button; @extend %preferences-button;
width: #{32 / $base-font-size}rem;
height: #{32 / $base-font-size}rem;
margin-left: #{6 / $base-font-size}rem;
line-height: #{40 / $base-font-size}rem;
& svg {
width: #{10 / $base-font-size}rem;
}
}
} }
.preferences__heading { .preferences__heading {
@ -43,14 +53,16 @@
padding-bottom: #{12 / $base-font-size}rem; padding-bottom: #{12 / $base-font-size}rem;
& + & { & + & {
@include themify() { @include themify() {
border-top: 2px dashed getThemifyVariable('button-border-color'); border-top: 1px dashed getThemifyVariable('button-border-color');
} }
} }
} }
.preference__title { .preference__title {
width: 100%; width: 100%;
margin-bottom: #{10 / $base-font-size}rem; font-size: #{16 / $base-font-size}rem;
margin-top: #{13 / $base-font-size}rem;
margin-bottom: #{7 / $base-font-size}rem;
@include themify() { @include themify() {
color: getThemifyVariable('heading-text-color'); color: getThemifyVariable('heading-text-color');
} }
@ -67,16 +79,19 @@
.preference__value { .preference__value {
@include themify() { @include themify() {
border: 2px solid getThemifyVariable('button-border-color'); border: #{1 / $base-font-size}rem solid getThemifyVariable('button-border-color');
background-color: getThemifyVariable('button-background-color'); background-color: getThemifyVariable('button-background-color');
color: getThemifyVariable('input-text-color'); color: getThemifyVariable('input-text-color');
} }
text-align: center; text-align: center;
border-radius: 0%; border-radius: 0%;
width: #{48 / $base-font-size}rem; outline: none;
height: #{44 / $base-font-size}rem; width: #{44 / $base-font-size}rem;
margin: 0 #{28 / $base-font-size}rem; height: #{40 / $base-font-size}rem;
margin: 0 #{26 / $base-font-size}rem;
padding: 0; padding: 0;
font-size: #{16 / $base-font-size}rem;
font-family: Inconsolata;
} }
.preference__label { .preference__label {
@ -86,16 +101,16 @@
color: getThemifyVariable('primary-text-color'); color: getThemifyVariable('primary-text-color');
} }
} }
margin: 0; margin: #{-15 / $base-font-size}rem 0 0 #{-5 / $base-font-size}rem;
line-height: #{20 / $base-font-size}rem;
font-size: #{9 / $base-font-size}rem; font-size: #{9 / $base-font-size}rem;
width: #{44 / $base-font-size}rem;
} }
.preference__vertical-list { .preference__vertical-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: #{90 / $base-font-size}rem; width: #{44 / $base-font-size}rem;
padding-left: #{28 / $base-font-size}rem; padding-left: #{25 / $base-font-size}rem;
} }
.preference__radio-button { .preference__radio-button {
@ -105,14 +120,17 @@
.preference__option { .preference__option {
@include themify() { @include themify() {
@extend %preference-option; @extend %preference-option;
padding-right: #{20 / $base-font-size}rem; padding-right: #{44 / $base-font-size}rem;
} }
} }
.preference__option:last-child {
padding-right: 0;
}
.preference__preview-button { .preference__preview-button {
@include themify() { @include themify() {
@extend %preference-option; @extend %preference-option;
padding-left: #{110 / $base-font-size}rem;
} }
} }
@ -130,3 +148,7 @@
.preference--hidden { .preference--hidden {
@extend %hidden-element; @extend %hidden-element;
} }
.preference__option.preference__canvas:not(:last-child) {
padding-right: #{20 / $base-font-size}rem;
}