From ac28311429af8145cc97d4bee3e74965be96a954 Mon Sep 17 00:00:00 2001 From: Michael Fix Date: Sat, 16 Dec 2017 12:12:00 -0800 Subject: [PATCH] Collapsible "Advanced" settings (#148) * Collapsible "Advanced" settings * Address comments * Just center Advanced --- components/Collapse.js | 27 + components/Settings.js | 61 +- components/Toggle.js | 2 +- package-lock.json | 6604 ++++++++++++++++++++++++++++++++++++++++ package.json | 6 +- yarn.lock | 106 +- 6 files changed, 6720 insertions(+), 86 deletions(-) create mode 100644 components/Collapse.js create mode 100644 package-lock.json diff --git a/components/Collapse.js b/components/Collapse.js new file mode 100644 index 0000000..1fadde6 --- /dev/null +++ b/components/Collapse.js @@ -0,0 +1,27 @@ +import React from 'react' +import Toggle from './Toggle' +import Arrowdown from './svg/Arrowdown' + +class Collapse extends React.Component { + constructor(props) { + super(props) + this.state = { + open: false + } + } + + toggle = () => { + this.setState(state => ({ + open: !state.open + })) + } + + render() { + if (this.state.open) { + return this.props.children + } + return + } +} + +export default Collapse diff --git a/components/Settings.js b/components/Settings.js index bf901c5..a28ebc3 100644 --- a/components/Settings.js +++ b/components/Settings.js @@ -5,6 +5,7 @@ import ThemeSelect from './ThemeSelect' import Slider from './Slider' import Toggle from './Toggle' import WindowPointer from './WindowPointer' +import Collapse from './Collapse' import { COLORS } from '../lib/constants' class Settings extends React.Component { @@ -39,46 +40,48 @@ class Settings extends React.Component { selected={this.props.enabled.windowTheme || 'none'} onChange={this.props.onChange.bind(null, 'windowTheme')} /> - - - - - - + + + + + + +