Refactor settings. Add switches and tabs. fixes #339

src/components/Settings.jsx

@@ -1,6 +1,7 @@
 import { h, Component } from 'preact';
 import { editorThemes } from '../editorThemes';
 import Switch from './Switch';
+import Tabs, { TabPanel } from './Tabs';
 
 function CheckboxSetting({
 	title,
@@ -40,7 +41,8 @@ export default class Settings extends Component {
 			<div>
 				<h1>Settings</h1>
 
-				<h3>Indentation</h3>
+				<Tabs>
+					<TabPanel label="Indentation">
 						<div
 							class="line"
 							title="I know this is tough, but you have to decide one!"
@@ -91,11 +93,9 @@ export default class Settings extends Component {
 								<option>7</option>
 							</datalist>
 						</label>
-
-				<hr />
-
-				<h3>Editor</h3>
-				<div class="flex block--mobile">
+					</TabPanel>
+					<TabPanel label="Editor">
+						<div class="fle block--mobile">
 							<div>
 								<label class="line">Default Preprocessors</label>
 								<div class="flex line">
@@ -210,7 +210,7 @@ export default class Settings extends Component {
 									</label>
 								</div>
 							</div>
-					<div class="flex-grow ml-2 ml-0--mobile">
+							<div class="flex-grow">
 								<CheckboxSetting
 									name="lineWrap"
 									title="Toggle wrapping of long sentences onto new line"
@@ -277,10 +277,8 @@ export default class Settings extends Component {
 								/>
 							</div>
 						</div>
-
-				<hr />
-
-				<h3>Fun</h3>
+					</TabPanel>
+					<TabPanel label="Fun">
 						<p>
 							<CheckboxSetting
 								title="Enjoy wonderful particle blasts while you type"
@@ -298,10 +296,8 @@ export default class Settings extends Component {
 								onChange={this.updateSetting.bind(this)}
 							/>
 						</p>
-
-				<hr />
-
-				<h3>Advanced</h3>
+					</TabPanel>
+					<TabPanel label="Advanced">
 						<p>
 							<label
 								class="line"
@@ -338,6 +334,8 @@ export default class Settings extends Component {
 								</select>
 							</label>
 						</p>
+					</TabPanel>
+				</Tabs>
 			</div>
 		);
 	}

src/components/Switch.jsx

@@ -0,0 +1,16 @@
+import { h, Component } from 'preact';
+
+export default class Switch extends Component {
+	render() {
+		return (
+			<label class="check-switch">
+				{this.props.children}
+				<input role="switch" type="checkbox" checked={this.props.checked} />
+				<span aria-hidden="true" class="check-switch__toggle" />
+				<span aria-hidden="true" class="check-switch__status">
+					{this.props.checked ? 'on' : 'off'}
+				</span>
+			</label>
+		);
+	}
+}

src/components/Tabs.jsx

@@ -0,0 +1,79 @@
+import { h, Component } from 'preact';
+
+function hyphenate(text) {
+	return text.replace(/\s/g, '-');
+}
+const ID_PREFIX = 'tab-panel-';
+export function TabPanel({ label }) {
+	return (
+		<div
+			class="tabs__tabpanel"
+			role="tabpanel"
+			id={`${ID_PREFIX}${hyphenate(label)}`}
+		>
+			{this.props.children}
+		</div>
+	);
+}
+function Tab({ label, isSelected, onKeyUp, onClick }) {
+	return (
+		<button
+			class={`tabs__tab ${isSelected ? 'tabs__tab--selected' : ''}`}
+			role="tab"
+			tabindex={isSelected ? null : -1}
+			aria-selected={isSelected}
+			aria-controls={`${ID_PREFIX}${hyphenate(label)}`}
+			onKeyUp={onKeyUp}
+			onClick={onClick}
+		>
+			{label}
+		</button>
+	);
+}
+export default class Tabs extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			selectedTab: 0
+		};
+	}
+	isSelected(index) {
+		return this.state.selectedTab === index;
+	}
+	keyUpHandler(e) {
+		let { selectedTab } = this.state;
+		if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+			selectedTab--;
+			selectedTab = selectedTab < 0 ? this.props.length - 1 : selectedTab;
+			this.setState({ selectedTab: selectedTab });
+			e.preventDefault();
+		} else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+			selectedTab++;
+			selectedTab %= this.props.children.length;
+			this.setState({ selectedTab: selectedTab });
+			e.preventDefault();
+		}
+	}
+	render() {
+		const tabs = this.props.children;
+		return (
+			<div class="tabs">
+				<div class="tabs__tablist" role="tablist">
+					{tabs.map((child, index) => (
+						<Tab
+							isSelected={this.isSelected(index)}
+							label={child.props.label}
+							onKeyUp={this.keyUpHandler.bind(this)}
+							onClick={() => this.setState({ selectedTab: index })}
+						/>
+					))}
+				</div>
+				<div class="tabs__tabpanel-wrap">
+					{tabs.map(
+						(child, index) => (this.state.selectedTab === index ? child : null)
+					)}
+				</div>
+			</div>
+		);
+	}
+}

src/style.css

@@ -976,10 +976,9 @@ body > #demo-frame {
 
 /* Make settings modal smaller */
 
-@media screen and (min-width: 600px) {
-	.modal--settings {
-		/* width: 600px; */
-		/* margin-lef.t: -300px; */
+@media screen and (min-width: 850px) {
+	.modal--settings > .modal__content {
+		width: 850px;
 	}
 }
 
@@ -1891,6 +1890,29 @@ while the theme CSS file is loading */
 	padding: 5px;
 	z-index: 1;
 }
+.tabs {
+	display: flex;
+}
+.tabs__tablist {
+	margin-right: 40px;
+	flex-shrink: 0;
+}
+.tabs__tab {
+	display: block;
+	margin-bottom: 10px;
+	background: transparent;
+	border: 0;
+	text-align: left;
+	width: 100%;
+	color: inherit;
+}
+.tabs__tab--selected {
+	background-color: rgba(0, 0, 0, 0.3);
+}
+.tabs__tabpanel-wrap {
+	flex: 1;
+}
+
 @media screen and (max-width: 600px) {
 	body {
 		font-size: 70%;