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

almost finished with preferences styling

Browse source
This commit is contained in:
Cassie Tarakajian 2017-11-14 16:27:42 -05:00
parent ca80308bc2
commit c99c867021
2 changed files with 60 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -175,7 +175,7 @@ class Preferences extends React.Component {
value="Spaces"
checked={!this.props.isTabIndent}
/>
<label htmlFor="indentation-space" className="preference__option">Spaces</label>
<label htmlFor="indentation-space" className="preference__option preference__whitespace-button">Spaces</label>
<input
type="radio"
onChange={this.props.indentWithTab}
@ -186,7 +186,7 @@ class Preferences extends React.Component {
value="Tabs"
checked={this.props.isTabIndent}
/>
<label htmlFor="indentation-tab" className="preference__option">Tabs</label>
<label htmlFor="indentation-tab" className="preference__option preference__whitespace-button">Tabs</label>
</div>
<div className="preference">
<h4 className="preference__title">Autosave</h4>
@ -245,45 +245,6 @@ class Preferences extends React.Component {
</div>
</TabPanel>
<TabPanel>
<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">
<input
type="radio"
onChange={(event) => {
this.props.setTextOutput(event.target.checked);
}}
aria-label="text output on"
name="text output"
id="text-output-on"
className="preference__radio-button"
value="On"
checked={(this.props.textOutput)}
/>
<label htmlFor="text-output-on" className="preference__option preference__canvas">On</label>
<input
type="radio"
onChange={(event) => {
this.props.setGridOutput(event.target.checked);
}}
aria-label="table output on"
name="table output"
id="table-output-on"
className="preference__radio-button"
value="On"
checked={(this.props.gridOutput)}
/>
<label htmlFor="table-output-on" className="preference__option preference__canvas">Off</label>
<button
className="preference__preview-button"
onClick={() => beep.play()}
aria-label="preview sound"
>
Preview sound
</button>
</div>
</div>
<div className="preference">
<h4 className="preference__title">Lint warning sound</h4>
<div className="preference__options">
@ -309,6 +270,56 @@ class Preferences extends React.Component {
checked={!this.props.lintWarning}
/>
<label htmlFor="lint-warning-off" className="preference__option">Off</label>
<button
className="preference__preview-button"
onClick={() => beep.play()}
aria-label="preview sound"
>
Preview sound
</button>
</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">
<input
type="checkbox"
onChange={(event) => {
this.props.setTextOutput(event.target.checked);
}}
aria-label="text output on"
name="text output"
id="text-output-on"
value="On"
checked={(this.props.textOutput)}
/>
<label htmlFor="text-output-on" className="preference__option preference__canvas">Plain-text</label>
<input
type="checkbox"
onChange={(event) => {
this.props.setGridOutput(event.target.checked);
}}
aria-label="table output on"
name="table output"
id="table-output-on"
value="On"
checked={(this.props.gridOutput)}
/>
<label htmlFor="table-output-on" className="preference__option preference__canvas">Table-text</label>
<input
type="checkbox"
onChange={(event) => {
this.props.setSoundOutput(event.target.checked);
}}
aria-label="sound output on"
name="sound output"
id="sound-output-on"
value="On"
checked={(this.props.soundOutput)}
/>
<label htmlFor="sound-output-on" className="preference__option preference__canvas">Sound</label>
</div>
</div>
</TabPanel>
@ -330,13 +341,12 @@ Preferences.propTypes = {
setAutosave: PropTypes.func.isRequired,
textOutput: PropTypes.bool.isRequired,
gridOutput: PropTypes.bool.isRequired,
// soundOutput: PropTypes.bool.isRequired,
soundOutput: PropTypes.bool.isRequired,
setTextOutput: PropTypes.func.isRequired,
setGridOutput: PropTypes.func.isRequired,
// setSoundOutput: PropTypes.func.isRequired,
setSoundOutput: PropTypes.func.isRequired,
lintWarning: PropTypes.bool.isRequired,
setLintWarning: PropTypes.func.isRequired,
// openTab: PropTypes.func.isRequired,
theme: PropTypes.string.isRequired,
serveSecure: PropTypes.bool.isRequired,
setServeSecure: PropTypes.func.isRequired,

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

@ -1,6 +1,6 @@
.preferences {
width: 100%;
min-width: #{640 / $base-font-size}rem;
width: #{640 / $base-font-size}rem;
max-width: 100%;
min-height: #{460 / $base-font-size}rem;
max-height: 100%;
@ -166,7 +166,6 @@
}
font-size: #{12 / $base-font-size}rem;
height: #{20 / $base-font-size}rem;
font-family: Montserrat;
width: 100%;
margin: 0;
padding: 0 #{5 /$base-font-size}rem;
@ -180,7 +179,6 @@
}
.preference__add__resource {
font-family: Montserrat;
font-size: #{14 / $base-font-size}rem;
line-height: 1.43;
text-align: left;
@ -205,8 +203,6 @@
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin-top: #{10 / $base-font-size}rem;
margin-left: #{5 / $base-font-size}rem;
}
.preference__option:last-child {
@ -220,12 +216,16 @@
color: getThemifyVariable('button-background-hover-color');
}
}
margin-top: #{7 / $base-font-size}rem;
margin-left: #{30 / $base-font-size}rem;
}
.preference__option.preference__whitespace-button {
padding-top: #{8 / $base-font-size}rem;
}
.preference__options {
display: flex;
justify-content: center;
}
.preference__radio-button:checked + .preference__option {
@ -260,6 +260,3 @@
text-align: left;
font-size: #{12 / $base-font-size}rem;
}