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

Issue 266: More Design Changes

Browse source
This commit is contained in:
saumya1906 2017-08-17 18:21:00 +05:30 committed by Cassie Tarakajian
parent 67dd614651
commit 147128ed40
2 changed files with 49 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -106,17 +106,6 @@ class Preferences extends React.Component {
checked={this.props.theme === 'dark'} checked={this.props.theme === 'dark'}
/> />
<label htmlFor="dark-theme-on" className="preference__option">Dark</label> <label htmlFor="dark-theme-on" className="preference__option">Dark</label>
<input
type="radio"
onChange={() => this.props.setTheme('contrast')}
aria-label="contrast theme on"
name="contrast theme"
id="contrast-theme-on"
className="preference__radio-button"
value="contrast"
checked={this.props.theme === 'contrast'}
/>
<label htmlFor="contrast-theme-on" className="preference__option">High contrast</label>
</div> </div>
</div> </div>
<div className="preference"> <div className="preference">
@ -182,30 +171,28 @@ class Preferences extends React.Component {
<InlineSVG src={plusUrl} alt="IncreaseIndentation Amount" /> <InlineSVG src={plusUrl} alt="IncreaseIndentation Amount" />
<h6 className="preference__label">Increase</h6> <h6 className="preference__label">Increase</h6>
</button> </button>
<div className="preference__vertical-list"> <input
<input type="radio"
type="radio" onChange={this.props.indentWithSpace}
onChange={this.props.indentWithSpace} aria-label="indentation with space"
aria-label="indentation with space" name="indentation"
name="indentation" id="indentation-space"
id="indentation-space" className="preference__radio-button"
className="preference__radio-button" value="Spaces"
value="Spaces" checked={!this.props.isTabIndent}
checked={!this.props.isTabIndent} />
/> <label htmlFor="indentation-space" className="preference__option">Spaces</label>
<label htmlFor="indentation-space" className="preference__option">Spaces</label> <input
<input type="radio"
type="radio" onChange={this.props.indentWithTab}
onChange={this.props.indentWithTab} aria-label="indentation with tab"
aria-label="indentation with tab" name="indentation"
name="indentation" id="indentation-tab"
id="indentation-tab" className="preference__radio-button"
className="preference__radio-button" value="Tabs"
value="Tabs" checked={this.props.isTabIndent}
checked={this.props.isTabIndent} />
/> <label htmlFor="indentation-tab" className="preference__option">Tabs</label>
<label htmlFor="indentation-tab" className="preference__option">Tabs</label>
</div>
</div> </div>
<div className="preference"> <div className="preference">
<h4 className="preference__title">Autosave</h4> <h4 className="preference__title">Autosave</h4>
@ -250,41 +237,38 @@ class Preferences extends React.Component {
<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">
<input <input
type="checkbox" type="radio"
onChange={(event) => { onChange={(event) => {
this.props.setTextOutput(event.target.checked); this.props.setTextOutput(event.target.checked);
}} }}
aria-label="text output on" aria-label="text output on"
name="text output" name="text output"
id="text-output-on" id="text-output-on"
className="preference__radio-button"
value="On" value="On"
checked={(this.props.textOutput)} checked={(this.props.textOutput)}
/> />
<label htmlFor="text-output-on" className="preference__option preference__canvas">Plain-text</label> <label htmlFor="text-output-on" className="preference__option preference__canvas">On</label>
<input <input
type="checkbox" type="radio"
onChange={(event) => { onChange={(event) => {
this.props.setGridOutput(event.target.checked); this.props.setGridOutput(event.target.checked);
}} }}
aria-label="table output on" aria-label="table output on"
name="table output" name="table output"
id="table-output-on" id="table-output-on"
className="preference__radio-button"
value="On" value="On"
checked={(this.props.gridOutput)} checked={(this.props.gridOutput)}
/> />
<label htmlFor="table-output-on" className="preference__option preference__canvas">Table-text</label> <label htmlFor="table-output-on" className="preference__option preference__canvas">Off</label>
<input <button
type="checkbox" className="preference__preview-button"
onChange={(event) => { onClick={() => beep.play()}
this.props.setSoundOutput(event.target.checked); aria-label="preview sound"
}} >
aria-label="sound output on" Preview sound
name="sound output" </button>
id="sound-output-on"
value="On"
checked={(this.props.soundOutput)}
/>
<label htmlFor="sound-output-on" className="preference__option preference__canvas">Sound</label>
</div> </div>
</div> </div>
<div className="preference"> <div className="preference">
@ -312,13 +296,6 @@ 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>
<button
className="preference__preview-button"
onClick={() => beep.play()}
aria-label="preview sound"
>
Preview sound
</button>
</div> </div>
</div> </div>
</TabPanel> </TabPanel>
@ -342,10 +319,10 @@ Preferences.propTypes = {
setAutosave: PropTypes.func.isRequired, setAutosave: PropTypes.func.isRequired,
textOutput: PropTypes.bool.isRequired, textOutput: PropTypes.bool.isRequired,
gridOutput: PropTypes.bool.isRequired, gridOutput: PropTypes.bool.isRequired,
soundOutput: PropTypes.bool.isRequired, // soundOutput: PropTypes.bool.isRequired,
setTextOutput: PropTypes.func.isRequired, setTextOutput: PropTypes.func.isRequired,
setGridOutput: PropTypes.func.isRequired, setGridOutput: PropTypes.func.isRequired,
setSoundOutput: PropTypes.func.isRequired, // setSoundOutput: PropTypes.func.isRequired,
lintWarning: PropTypes.bool.isRequired, lintWarning: PropTypes.bool.isRequired,
setLintWarning: PropTypes.func.isRequired, setLintWarning: PropTypes.func.isRequired,
// openTab: PropTypes.func.isRequired, // openTab: PropTypes.func.isRequired,

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

@ -34,6 +34,7 @@
width: #{32 / $base-font-size}rem; width: #{32 / $base-font-size}rem;
height: #{32 / $base-font-size}rem; height: #{32 / $base-font-size}rem;
margin-left: #{6 / $base-font-size}rem; margin-left: #{6 / $base-font-size}rem;
margin-right: #{10 / $base-font-size}rem;
line-height: #{40 / $base-font-size}rem; line-height: #{40 / $base-font-size}rem;
& svg { & svg {
width: #{10 / $base-font-size}rem; width: #{10 / $base-font-size}rem;
@ -177,6 +178,12 @@
@extend %preference-option; @extend %preference-option;
padding-right: #{44 / $base-font-size}rem; padding-right: #{44 / $base-font-size}rem;
} }
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin-top: #{10 / $base-font-size}rem;
width: #{50 / $base-font-size}rem;
margin-left: #{5 / $base-font-size}rem;
} }
.preference__option:last-child { .preference__option:last-child {
@ -186,7 +193,12 @@
.preference__preview-button { .preference__preview-button {
@include themify() { @include themify() {
@extend %preference-option; @extend %preference-option;
&:hover {
color: getThemifyVariable('button-background-hover-color');
}
} }
margin-top: #{7 / $base-font-size}rem;
margin-left: #{30 / $base-font-size}rem;
} }
.preference__options { .preference__options {