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 (
<li className="nav__item">
<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>
</li>
);

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

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

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

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