Issue 266: Tabs added
This commit is contained in:
saumya1906
Cassie Tarakajian
parent
6f068b5503
commit
6b6ff7ca22
3 changed files with 245 additions and 235 deletions
|
|
@ -1,6 +1,7 @@
|
|||
import React, { PropTypes } from 'react';
|
||||
import InlineSVG from 'react-inlinesvg';
|
||||
import classNames from 'classnames';
|
||||
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
|
||||
// import { bindActionCreators } from 'redux';
|
||||
// import { connect } from 'react-redux';
|
||||
// import * as PreferencesActions from '../actions/preferences';
|
||||
|
|
@ -71,240 +72,248 @@ 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
|
||||
className="preference__minus-button"
|
||||
onClick={() => this.props.setFontSize(this.props.fontSize - 2)}
|
||||
aria-label="decrease font size"
|
||||
>
|
||||
<InlineSVG src={minusUrl} alt="Decrease Font Size" />
|
||||
<h6 className="preference__label">Decrease</h6>
|
||||
</button>
|
||||
<input
|
||||
className="preference__value"
|
||||
aria-live="polite"
|
||||
aria-atomic="true"
|
||||
role="status"
|
||||
value={this.props.fontSize}
|
||||
onChange={this.handleUpdateFont}
|
||||
ref={(element) => { this.fontSizeInput = element; }}
|
||||
onClick={() => {
|
||||
this.fontSizeInput.select();
|
||||
}}
|
||||
>
|
||||
</input>
|
||||
<button
|
||||
className="preference__plus-button"
|
||||
onClick={() => this.props.setFontSize(this.props.fontSize + 2)}
|
||||
aria-label="increase font size"
|
||||
>
|
||||
<InlineSVG src={plusUrl} alt="Increase Font Size" />
|
||||
<h6 className="preference__label">Increase</h6>
|
||||
</button>
|
||||
</div>
|
||||
<div className="preference">
|
||||
<h4 className="preference__title">Indentation amount</h4>
|
||||
<button
|
||||
className="preference__minus-button"
|
||||
onClick={() => this.props.setIndentation(this.props.indentationAmount - 2)}
|
||||
aria-label="decrease indentation amount"
|
||||
>
|
||||
<InlineSVG src={minusUrl} alt="DecreaseIndentation Amount" />
|
||||
<h6 className="preference__label">Decrease</h6>
|
||||
</button>
|
||||
<input
|
||||
className="preference__value"
|
||||
aria-live="polite"
|
||||
aria-atomic="true"
|
||||
role="status"
|
||||
value={this.props.indentationAmount}
|
||||
onChange={this.handleUpdateIndentation}
|
||||
ref={(element) => { this.indentationInput = element; }}
|
||||
onClick={() => {
|
||||
this.indentationInput.select();
|
||||
}}
|
||||
>
|
||||
</input>
|
||||
<button
|
||||
className="preference__plus-button"
|
||||
onClick={() => this.props.setIndentation(this.props.indentationAmount + 2)}
|
||||
aria-label="increase indentation amount"
|
||||
>
|
||||
<InlineSVG src={plusUrl} alt="IncreaseIndentation Amount" />
|
||||
<h6 className="preference__label">Increase</h6>
|
||||
</button>
|
||||
<div className="preference__vertical-list">
|
||||
<input
|
||||
type="radio"
|
||||
onChange={this.props.indentWithSpace}
|
||||
aria-label="indentation with space"
|
||||
name="indentation"
|
||||
id="indentation-space"
|
||||
className="preference__radio-button"
|
||||
value="Spaces"
|
||||
checked={!this.props.isTabIndent}
|
||||
/>
|
||||
<label htmlFor="indentation-space" className="preference__option">Spaces</label>
|
||||
<input
|
||||
type="radio"
|
||||
onChange={this.props.indentWithTab}
|
||||
aria-label="indentation with tab"
|
||||
name="indentation"
|
||||
id="indentation-tab"
|
||||
className="preference__radio-button"
|
||||
value="Tabs"
|
||||
checked={this.props.isTabIndent}
|
||||
/>
|
||||
<label htmlFor="indentation-tab" className="preference__option">Tabs</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="preference">
|
||||
<h4 className="preference__title">Autosave</h4>
|
||||
<div className="preference__options">
|
||||
<input
|
||||
type="radio"
|
||||
onChange={() => this.props.setAutosave(true)}
|
||||
aria-label="autosave on"
|
||||
name="autosave"
|
||||
id="autosave-on"
|
||||
className="preference__radio-button"
|
||||
value="On"
|
||||
checked={this.props.autosave}
|
||||
/>
|
||||
<label htmlFor="autosave-on" className="preference__option">On</label>
|
||||
<input
|
||||
type="radio"
|
||||
onChange={() => this.props.setAutosave(false)}
|
||||
aria-label="autosave off"
|
||||
name="autosave"
|
||||
id="autosave-off"
|
||||
className="preference__radio-button"
|
||||
value="Off"
|
||||
checked={!this.props.autosave}
|
||||
/>
|
||||
<label htmlFor="autosave-off" className="preference__option">Off</label>
|
||||
</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>
|
||||
<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>
|
||||
<Tabs>
|
||||
<TabList>
|
||||
<div className="preference__subheadings">
|
||||
<Tab><h4 className="preference__subheading1">General Settings</h4></Tab>
|
||||
<h4 className="preference__subheading2">Sketch Settings</h4>
|
||||
<Tab><h4 className="preference__subheading2">Accessibility</h4></Tab>
|
||||
</div>
|
||||
</TabList>
|
||||
<TabPanel>
|
||||
<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
|
||||
className="preference__minus-button"
|
||||
onClick={() => this.props.setFontSize(this.props.fontSize - 2)}
|
||||
aria-label="decrease font size"
|
||||
>
|
||||
<InlineSVG src={minusUrl} alt="Decrease Font Size" />
|
||||
<h6 className="preference__label">Decrease</h6>
|
||||
</button>
|
||||
<input
|
||||
className="preference__value"
|
||||
aria-live="polite"
|
||||
aria-atomic="true"
|
||||
role="status"
|
||||
value={this.props.fontSize}
|
||||
onChange={this.handleUpdateFont}
|
||||
ref={(element) => { this.fontSizeInput = element; }}
|
||||
onClick={() => {
|
||||
this.fontSizeInput.select();
|
||||
}}
|
||||
>
|
||||
</input>
|
||||
<button
|
||||
className="preference__plus-button"
|
||||
onClick={() => this.props.setFontSize(this.props.fontSize + 2)}
|
||||
aria-label="increase font size"
|
||||
>
|
||||
<InlineSVG src={plusUrl} alt="Increase Font Size" />
|
||||
<h6 className="preference__label">Increase</h6>
|
||||
</button>
|
||||
</div>
|
||||
<div className="preference">
|
||||
<h4 className="preference__title">Indentation amount</h4>
|
||||
<button
|
||||
className="preference__minus-button"
|
||||
onClick={() => this.props.setIndentation(this.props.indentationAmount - 2)}
|
||||
aria-label="decrease indentation amount"
|
||||
>
|
||||
<InlineSVG src={minusUrl} alt="DecreaseIndentation Amount" />
|
||||
<h6 className="preference__label">Decrease</h6>
|
||||
</button>
|
||||
<input
|
||||
className="preference__value"
|
||||
aria-live="polite"
|
||||
aria-atomic="true"
|
||||
role="status"
|
||||
value={this.props.indentationAmount}
|
||||
onChange={this.handleUpdateIndentation}
|
||||
ref={(element) => { this.indentationInput = element; }}
|
||||
onClick={() => {
|
||||
this.indentationInput.select();
|
||||
}}
|
||||
>
|
||||
</input>
|
||||
<button
|
||||
className="preference__plus-button"
|
||||
onClick={() => this.props.setIndentation(this.props.indentationAmount + 2)}
|
||||
aria-label="increase indentation amount"
|
||||
>
|
||||
<InlineSVG src={plusUrl} alt="IncreaseIndentation Amount" />
|
||||
<h6 className="preference__label">Increase</h6>
|
||||
</button>
|
||||
<div className="preference__vertical-list">
|
||||
<input
|
||||
type="radio"
|
||||
onChange={this.props.indentWithSpace}
|
||||
aria-label="indentation with space"
|
||||
name="indentation"
|
||||
id="indentation-space"
|
||||
className="preference__radio-button"
|
||||
value="Spaces"
|
||||
checked={!this.props.isTabIndent}
|
||||
/>
|
||||
<label htmlFor="indentation-space" className="preference__option">Spaces</label>
|
||||
<input
|
||||
type="radio"
|
||||
onChange={this.props.indentWithTab}
|
||||
aria-label="indentation with tab"
|
||||
name="indentation"
|
||||
id="indentation-tab"
|
||||
className="preference__radio-button"
|
||||
value="Tabs"
|
||||
checked={this.props.isTabIndent}
|
||||
/>
|
||||
<label htmlFor="indentation-tab" className="preference__option">Tabs</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="preference">
|
||||
<h4 className="preference__title">Autosave</h4>
|
||||
<div className="preference__options">
|
||||
<input
|
||||
type="radio"
|
||||
onChange={() => this.props.setAutosave(true)}
|
||||
aria-label="autosave on"
|
||||
name="autosave"
|
||||
id="autosave-on"
|
||||
className="preference__radio-button"
|
||||
value="On"
|
||||
checked={this.props.autosave}
|
||||
/>
|
||||
<label htmlFor="autosave-on" className="preference__option">On</label>
|
||||
<input
|
||||
type="radio"
|
||||
onChange={() => this.props.setAutosave(false)}
|
||||
aria-label="autosave off"
|
||||
name="autosave"
|
||||
id="autosave-off"
|
||||
className="preference__radio-button"
|
||||
value="Off"
|
||||
checked={!this.props.autosave}
|
||||
/>
|
||||
<label htmlFor="autosave-off" className="preference__option">Off</label>
|
||||
</div>
|
||||
</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="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>
|
||||
<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>
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { bindActionCreators } from 'redux';
|
|||
import { connect } from 'react-redux';
|
||||
import { withRouter } from 'react-router';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
|
||||
import SplitPane from 'react-split-pane';
|
||||
import Editor from '../components/Editor';
|
||||
import Sidebar from '../components/Sidebar';
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
.preference__subheadings {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: #{7 / $base-font-size}rem;
|
||||
padding-bottom: #{0.1 / $base-font-size}rem;
|
||||
@include themify() {
|
||||
border-bottom: 1px solid getThemifyVariable('button-border-color');
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue