hammy
/
carbon
mirror of https://github.com/sgoudham/carbon.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Collapsible "Advanced" settings (#148)

Browse Source 
* Collapsible "Advanced" settings

* Address comments

* Just center Advanced
main
Michael Fix 7 years ago committed by GitHub
parent 02efeee8b1
commit ac28311429
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 6720 additions and 86 deletions
Show Stats Download Patch File Download Diff File

27
components/Collapse.js
Unescape Escape View File

@ -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 <Toggle enabled={false} center={true} label={this.props.label} onChange={this.toggle} />
}
}
export default Collapse

43
components/Settings.js
Unescape Escape View File

@ -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,36 +40,22 @@ class Settings extends React.Component {
selected={this.props.enabled.windowTheme || 'none'}
onChange={this.props.onChange.bind(null, 'windowTheme')}
/>
<Toggle
label="Drop shadow"
enabled={this.props.enabled.dropShadow}
onChange={this.props.onChange.bind(null, 'dropShadow')}
/>
<Slider
label="Drop shadow (offset-y)"
value={this.props.enabled.dropShadowOffsetY || 20}
onChange={this.props.onChange.bind(null, 'dropShadowOffsetY')}
/>
<Slider
label="Drop shadow (blur-radius)"
value={this.props.enabled.dropShadowBlurRadius || 68}
onChange={this.props.onChange.bind(null, 'dropShadowBlurRadius')}
/>
<Toggle
label="Window controls"
enabled={this.props.enabled.windowControls}
onChange={this.props.onChange.bind(null, 'windowControls')}
/>
<Toggle
label="Width adjustment"
enabled={this.props.enabled.widthAdjustment}
onChange={this.props.onChange.bind(null, 'widthAdjustment')}
/>
<Toggle
label="Line numbers"
enabled={this.props.enabled.lineNumbers}
onChange={this.props.onChange.bind(null, 'lineNumbers')}
/>
<Toggle
label="Auto-adjust width"
enabled={this.props.enabled.widthAdjustment}
onChange={this.props.onChange.bind(null, 'widthAdjustment')}
/>
<Collapse label="Advanced">
<Slider
label="Padding (vertical)"
value={this.props.enabled.paddingVertical || 16}
@ -79,6 +66,22 @@ class Settings extends React.Component {
value={this.props.enabled.paddingHorizontal || 32}
onChange={this.props.onChange.bind(null, 'paddingHorizontal')}
/>
<Toggle
label="Drop shadow"
enabled={this.props.enabled.dropShadow}
onChange={this.props.onChange.bind(null, 'dropShadow')}
/>
<Slider
label="Drop shadow (offset-y)"
value={this.props.enabled.dropShadowOffsetY || 20}
onChange={this.props.onChange.bind(null, 'dropShadowOffsetY')}
/>
<Slider
label="Drop shadow (blur-radius)"
value={this.props.enabled.dropShadowBlurRadius || 68}
onChange={this.props.onChange.bind(null, 'dropShadowBlurRadius')}
/>
</Collapse>
</div>
<style jsx>{`
.settings-container {

2
components/Toggle.js
Unescape Escape View File

@ -20,7 +20,7 @@ export default class extends React.Component {
.toggle {
display: flex;
align-items: center;
justify-content: space-between;
justify-content: ${this.props.center ? 'center' : 'space-between'}
cursor: pointer;
user-select: none;
padding: 8px;

6604
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
Unescape Escape View File

@ -29,14 +29,14 @@
"morgan": "^1.8.2",
"morphmorph": "^0.0.2",
"ms": "^2.0.0",
"next": "^4.1.4",
"react": "^16.0.0",
"next": "^4.2.1",
"react": "^16.2.0",
"react-click-outside": "^3.0.0",
"react-codemirror2": "^3.0.7",
"react-color": "^2.13.8",
"react-dnd": "^2.4.0",
"react-dnd-html5-backend": "^2.4.1",
"react-dom": "^16.0.0",
"react-dom": "^16.2.0",
"react-spinkit": "^3.0.0",
"react-spinner": "^0.2.7",
"react-syntax-highlight": "^15.3.1",

106
yarn.lock
Unescape Escape View File

@ -889,16 +889,7 @@ babel-traverse@^6.24.1, babel-traverse@^6.25.0, babel-traverse@^6.26.0:
invariant "^2.2.2"
lodash "^4.17.4"
babel-types@6.23.0:
version "6.23.0"
resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.23.0.tgz#bb17179d7538bad38cd0c9e115d340f77e7e9acf"
dependencies:
babel-runtime "^6.22.0"
esutils "^2.0.2"
lodash "^4.2.0"
to-fast-properties "^1.0.1"
babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
babel-types@6.26.0, babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
dependencies:
@ -1452,9 +1443,9 @@ conventional-commits-parser@^2.0.0:
through2 "^2.0.0"
trim-off-newlines "^1.0.0"
convert-source-map@1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.3.0.tgz#e9f3e9c6e2728efc2676696a70eb382f73106a67"
convert-source-map@1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
convert-source-map@^1.5.0:
version "1.5.0"
@ -3616,9 +3607,9 @@ netrc@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/netrc/-/netrc-0.1.4.tgz#6be94fcaca8d77ade0a9670dc460914c94472444"
next@^4.1.4:
version "4.1.4"
resolved "https://registry.yarnpkg.com/next/-/next-4.1.4.tgz#75ab0dd17e843bae0bdcdc9da8f1b3edb5ef5437"
next@^4.2.1:
version "4.2.1"
resolved "https://registry.yarnpkg.com/next/-/next-4.2.1.tgz#37b5637050235b92a487ca484e20088ace7e37fe"
dependencies:
ansi-html "0.0.7"
babel-core "6.26.0"
@ -3663,8 +3654,8 @@ next@^4.1.4:
recursive-copy "2.0.6"
send "0.16.1"
source-map-support "0.4.18"
strip-ansi "4.0.0"
styled-jsx "2.1.1"
strip-ansi "3.0.1"
styled-jsx "2.2.1"
touch "3.1.0"
unfetch "3.0.0"
url "0.11.0"
@ -4366,9 +4357,9 @@ react-dnd@>=2, react-dnd@^2.4.0:
lodash "^4.2.0"
prop-types "^15.5.10"
react-dom@^16.0.0:
version "16.0.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.0.0.tgz#9cc3079c3dcd70d4c6e01b84aab2a7e34c303f58"
react-dom@^16.2.0:
version "16.2.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044"
dependencies:
fbjs "^0.8.16"
loose-envify "^1.1.0"
@ -4411,7 +4402,7 @@ react-syntax-highlight@^15.3.1:
highlight.js "^9.12.0"
prop-types "^15.5.10"
react@>=15, react@^16.0.0:
react@>=15:
version "16.0.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.0.0.tgz#ce7df8f1941b036f02b2cca9dbd0cb1f0e855e2d"
dependencies:
@ -4420,6 +4411,15 @@ react@>=15, react@^16.0.0:
object-assign "^4.1.1"
prop-types "^15.6.0"
react@^16.2.0:
version "16.2.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
dependencies:
fbjs "^0.8.16"
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.0"
reactcss@^1.2.0:
version "1.2.3"
resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
@ -4944,6 +4944,10 @@ source-map@0.5.6:
version "0.5.6"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
source-map@0.6.1, source-map@^0.6.1, source-map@~0.6.1:
version "0.6.1"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
source-map@^0.4.4:
version "0.4.4"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
@ -4954,10 +4958,6 @@ source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1, source-map@~0.5.3:
version "0.5.7"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
source-map@^0.6.1, source-map@~0.6.1:
version "0.6.1"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
sourcemapped-stacktrace@^1.1.6:
version "1.1.7"
resolved "https://registry.yarnpkg.com/sourcemapped-stacktrace/-/sourcemapped-stacktrace-1.1.7.tgz#17e05374ff78b71a9d89ad3975a49f22725ba935"
@ -5074,9 +5074,9 @@ stream-to-observable@^0.2.0:
dependencies:
any-observable "^0.2.0"
string-hash@1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.1.tgz#8e85bed291e0763b8f6809d9c3368fea048db3dc"
string-hash@1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
string-length@^1.0.1:
version "1.0.1"
@ -5121,18 +5121,18 @@ stringstream@~0.0.4, stringstream@~0.0.5:
version "0.0.5"
resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
strip-ansi@4.0.0, strip-ansi@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
dependencies:
ansi-regex "^3.0.0"
strip-ansi@^3.0.0, strip-ansi@^3.0.1:
strip-ansi@3.0.1, strip-ansi@^3.0.0, strip-ansi@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
dependencies:
ansi-regex "^2.0.0"
strip-ansi@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
dependencies:
ansi-regex "^3.0.0"
strip-bom@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
@ -5161,25 +5161,25 @@ strip-json-comments@~2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
styled-jsx@2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-2.1.1.tgz#e7481c7554df50d605cdc84a4e53c58fec3449b5"
styled-jsx@2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-2.2.1.tgz#8b38b9e53e5d9767e392595ab1afdc8426b3ba5d"
dependencies:
babel-plugin-syntax-jsx "6.18.0"
babel-types "6.23.0"
convert-source-map "1.3.0"
source-map "0.5.6"
string-hash "1.1.1"
stylis "3.3.2"
stylis-rule-sheet "0.0.6"
stylis-rule-sheet@0.0.6:
version "0.0.6"
resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.6.tgz#059f89125a8e8db546e8adb0e07c4b4bcb81911b"
babel-types "6.26.0"
convert-source-map "1.5.1"
source-map "0.6.1"
string-hash "1.1.3"
stylis "3.4.5"
stylis-rule-sheet "0.0.7"
stylis-rule-sheet@0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.7.tgz#5c51dc879141a61821c2094ba91d2cbcf2469c6c"
stylis@3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.3.2.tgz#95ef285836e98243f8b8f64a9a72706ea6c893ea"
stylis@3.4.5:
version "3.4.5"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.5.tgz#d7b9595fc18e7b9c8775eca8270a9a1d3e59806e"
supports-color@^2.0.0:
version "2.0.0"
@ -5279,7 +5279,7 @@ to-arraybuffer@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
to-fast-properties@^1.0.1, to-fast-properties@^1.0.3:
to-fast-properties@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"

Write Preview
Loading…
Cancel
Save