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

Issue 266

This commit is contained in:
saumya1906 2017-08-09 21:58:28 +05:30 committed by Cassie Tarakajian
parent 20f789033f
commit 6f068b5503
2 changed files with 165 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
client/modules/IDE/components/Preferences.jsx
View File

@ -18,6 +18,7 @@ class Preferences extends React.Component {
this.handleUpdateFont = this.handleUpdateFont.bind(this);
this.handleUpdateIndentation = this.handleUpdateIndentation.bind(this);
this.handleLintWarning = this.handleLintWarning.bind(this);
// this.handleTab = this.handleTab.bind(this);
}
handleUpdateFont(event) {
@ -46,6 +47,10 @@ class Preferences extends React.Component {
this.props.setLintWarning(value);
}
// handleTab(event, TabName) {
// this.props.openTab(event, TabName);
// }
render() {
const beep = new Audio(beepUrl);
const preferencesContainerClass = classNames({
@ -56,7 +61,7 @@ class Preferences extends React.Component {
return (
<section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
<div className="preferences__heading">
<h2 className="preferences__title">Preferences</h2>
<h2 className="preferences__title">Settings</h2>
<button
className="preferences__exit-button"
onClick={this.props.closePreferences}
@ -66,7 +71,49 @@ class Preferences extends React.Component {
<InlineSVG src={exitUrl} alt="Exit Preferences" />
</button>
</div>
<div className="preference__subheadings">
<h4 className="preference__subheading1">General Settings</h4>
<h4 className="preference__subheading2">Sketch Settings</h4>
<h4 className="preference__subheading2">Accessibility</h4>
</div>
<div className="preference">
<h4 className="preference__title">Theme</h4>
<div className="preference__options">
<input
type="radio"
onChange={() => this.props.setTheme('light')}
aria-label="light theme on"
name="light theme"
id="light-theme-on"
className="preference__radio-button"
value="light"
checked={this.props.theme === 'light'}
/>
<label htmlFor="light-theme-on" className="preference__option">Light</label>
<input
type="radio"
onChange={() => this.props.setTheme('dark')}
aria-label="dark theme on"
name="dark theme"
id="dark-theme-on"
className="preference__radio-button"
value="dark"
checked={this.props.theme === 'dark'}
/>
<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 className="preference">
<h4 className="preference__title">Text size</h4>
<button
@ -99,7 +146,6 @@ class Preferences extends React.Component {
<h6 className="preference__label">Increase</h6>
</button>
</div>
<div className="preference">
<h4 className="preference__title">Indentation amount</h4>
<button
@ -183,82 +229,9 @@ class Preferences extends React.Component {
<label htmlFor="autosave-off" className="preference__option">Off</label>
</div>
</div>
<div className="preference">
<h4 className="preference__title">Theme</h4>
<div className="preference__options">
<input
type="radio"
onChange={() => this.props.setTheme('light')}
aria-label="light theme on"
name="light theme"
id="light-theme-on"
className="preference__radio-button"
value="light"
checked={this.props.theme === 'light'}
/>
<label htmlFor="light-theme-on" className="preference__option">Light</label>
<input
type="radio"
onChange={() => this.props.setTheme('dark')}
aria-label="dark theme on"
name="dark theme"
id="dark-theme-on"
className="preference__radio-button"
value="dark"
checked={this.props.theme === 'dark'}
/>
<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 className="preference">
<h4 className="preference__title">Lint warning sound</h4>
<div className="preference__options">
<input
type="radio"
onChange={() => this.props.setLintWarning(true)}
aria-label="lint warning on"
name="lint warning"
id="lint-warning-on"
className="preference__radio-button"
value="On"
checked={this.props.lintWarning}
/>
<label htmlFor="lint-warning-on" className="preference__option">On</label>
<input
type="radio"
onChange={() => this.props.setLintWarning(false)}
aria-label="lint warning off"
name="lint warning"
id="lint-warning-off"
className="preference__radio-button"
value="Off"
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"
@ -298,6 +271,40 @@ class Preferences extends React.Component {
<label htmlFor="sound-output-on" className="preference__option preference__canvas">Sound</label>
</div>
</div>
<div className="preference">
<h4 className="preference__title">Lint warning sound</h4>
<div className="preference__options">
<input
type="radio"
onChange={() => this.props.setLintWarning(true)}
aria-label="lint warning on"
name="lint warning"
id="lint-warning-on"
className="preference__radio-button"
value="On"
checked={this.props.lintWarning}
/>
<label htmlFor="lint-warning-on" className="preference__option">On</label>
<input
type="radio"
onChange={() => this.props.setLintWarning(false)}
aria-label="lint warning off"
name="lint warning"
id="lint-warning-off"
className="preference__radio-button"
value="Off"
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>
</section>
);
}
@ -323,6 +330,7 @@ Preferences.propTypes = {
setSoundOutput: PropTypes.func.isRequired,
lintWarning: PropTypes.bool.isRequired,
setLintWarning: PropTypes.func.isRequired,
// openTab: PropTypes.func.isRequired,
theme: PropTypes.string.isRequired,
setTheme: PropTypes.func.isRequired
};

85
client/styles/components/_preferences.scss
View File

@ -1,10 +1,15 @@
.preferences {
@extend %modal;
position: absolute;
top: #{51 / $base-font-size}rem;
right: #{29 / $base-font-size}rem;
width: #{288 / $base-font-size}rem;
top: #{113 / $base-font-size}rem;
right: #{192 / $base-font-size}rem;
width: #{640 / $base-font-size}rem;
height: #{540 / $base-font-size}rem;
bottom: #{371 / $base-font-size}rem;
margin-bottom: #{100 / $base-font-size}rem;
margin-right: #{100 / $base-font-size}rem;
display: none;
z-index: 9999;
padding: #{14 / $base-font-size}rem #{20 / $base-font-size}rem #{2 / $base-font-size}rem #{20 / $base-font-size}rem ;
&--selected {
display: flex;
@ -40,12 +45,31 @@
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: #{20 / $base-font-size}rem;
marhin-left: #{19 / $base-font-size}rem;
@include themify() {
color: getThemifyVariable('heading-text-color');
}
}
.preferences__title{
width: #{90 / $base-font-size}rem;
height: #{25 / $base-font-size}rem;
font-family: Montserrat;
font-size: #{21 / $base-font-size}rem;
font-weight: bold;
text-align: left;
}
.preference__subheadings {
display: flex;
flex-wrap: wrap;
padding-bottom: #{7 / $base-font-size}rem;
@include themify() {
border-bottom: 1px solid getThemifyVariable('button-border-color');
}
}
.preference {
display: flex;
flex-wrap: wrap;
@ -105,6 +129,59 @@
width: #{44 / $base-font-size}rem;
}
.preference__subheading1 {
@include themify() {
color: getThemifyVariable('inactive-text-color');
&:hover {
color: getThemifyVariable('primary-text-color');
border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color');
}
}
font-size: #{12 / $base-font-size}rem;
height: #{25 / $base-font-size}rem;
text-align: left;
margin-top: #{30 / $base-font-size}rem;
margin-left: #{5 / $base-font-size}rem;
margin-bottom: #{0.1 / $base-font-size}rem;
font-family: Montserrat;
width: #{100 / $base-font-size}rem;
}
.preference__subheading2 {
@include themify() {
color: getThemifyVariable('inactive-text-color');
&:hover {
color: getThemifyVariable('primary-text-color');
border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color');
}
}
font-size: #{12 / $base-font-size}rem;
height: #{25 / $base-font-size}rem;
text-align: left;
margin-top: #{30 / $base-font-size}rem;
margin-left: #{46 / $base-font-size}rem;
margin-bottom: #{0.1 / $base-font-size}rem;
font-family: Montserrat;
}
.preference__subheading3 {
@include themify() {
color: getThemifyVariable('inactive-text-color');
&:hover {
color: getThemifyVariable('primary-text-color');
border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color');
}
}
font-size: #{12 / $base-font-size}rem;
height: #{25 / $base-font-size}rem;
text-align: left;
margin-top: #{30 / $base-font-size}rem;
margin-left: #{48 / $base-font-size}rem;
margin-bottom: #{0.1 / $base-font-size}rem;
width: #{78 / $base-font-size}rem;
font-family: Montserrat;
}
.preference__vertical-list {
display: flex;
flex-direction: column;