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

Add color picker

Browse Source
main
Jake Dexheimer 7 years ago
parent d6da4c7e70
commit 21c3f181e6
4 changed files with 156 additions and 4 deletions
Show Stats Download Patch File Download Diff File

72
components/colorpicker.js
Unescape Escape View File

@ -0,0 +1,72 @@
import React from 'react'
import { BlockPicker } from 'react-color'
export default class extends React.Component {
constructor() {
super()
this.state = { isVisible: false, bgcolor: '#565656' }
this.toggle = this.toggle.bind(this)
this.handlePickColor = this.handlePickColor.bind(this)
}
toggle() {
this.setState({ isVisible: !this.state.isVisible })
}
handlePickColor(color) {
this.setState({ bgcolor: color.hex })
}
render() {
return (
<div className="colorpicker-container">
<div className="colorpicker-display">
<div className="colorpicker-label">
<span>BG</span>
</div>
<div className="bg-color" style={{background: this.state.bgcolor}} onClick={this.toggle}></div>
</div>
<div className="colorpicker-picker" hidden={!this.state.isVisible}>
<BlockPicker color={this.state.bgcolor} onChangeComplete={this.handlePickColor} />
</div>
<style jsx>{`
.colorpicker-container {
height: 37px; // TODO fix
}
.colorpicker-display {
display: flex;
height: 100%;
width: 72px;
background: #000;
border: 0.5px solid #333;
border-radius: 3px;
}
.colorpicker-label {
display: flex;
align-items: center;
justify-content: center;
user-select: none;
cursor: default;
color: #fff;
height: 100%;
width: 36px;
}
.bg-color {
cursor: pointer;
height: 100%;
width: 36px;
border-radius: 0px 2px 2px 0px;
}
.colorpicker-picker {
margin-left: -32px;
margin-top: 9px;
}
`}</style>
</div>
)
}
}

4
components/toolbar.js
Unescape Escape View File

@ -1,5 +1,6 @@
import React from 'react'
import Dropdown from './dropdown'
import ColorPicker from './colorpicker'
const themes = [
{
@ -35,6 +36,9 @@ export default class extends React.Component {
<div id="toolbar">
<Dropdown list={themes} />
<Dropdown list={langauges} />
<ColorPicker />
<div className="settings"></div>
<div className="toolbarbtn"><span>Copy Imgur Link</span></div>
<style jsx>{`
#toolbar {
width: 100%;

1
package.json
Unescape Escape View File

@ -17,6 +17,7 @@
"morgan": "^1.8.2",
"next": "^2.4.3",
"react": "^15.5.4",
"react-color": "^2.12.1",
"react-dnd": "^2.4.0",
"react-dnd-html5-backend": "^2.4.1",
"react-dom": "^15.5.4"

83
yarn.lock
Unescape Escape View File

@ -116,7 +116,7 @@ arrify@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
asap@~2.0.3:
asap@^2.0.3, asap@~2.0.3:
version "2.0.5"
resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f"
@ -1271,6 +1271,19 @@ diffie-hellman@^5.0.0:
miller-rabin "^4.0.0"
randombytes "^2.0.0"
disposables@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/disposables/-/disposables-1.0.1.tgz#064727a25b54f502bd82b89aa2dfb8df9f1b39e3"
dnd-core@^2.4.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-2.4.0.tgz#c4a5bc2aea75164f8a295d769d5f551810e7d411"
dependencies:
asap "^2.0.3"
invariant "^2.0.0"
lodash "^4.2.0"
redux "^3.2.0"
dom-to-image@^2.5.2:
version "2.5.2"
resolved "https://registry.yarnpkg.com/dom-to-image/-/dom-to-image-2.5.2.tgz#6476b9f43c27c00b76ce4f164d20e5eeab032497"
@ -1736,6 +1749,10 @@ hoek@2.x.x:
version "2.16.3"
resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
hoist-non-react-statics@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
home-or-tmp@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
@ -1822,7 +1839,7 @@ interpret@^1.0.0:
version "1.0.3"
resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.3.tgz#cbc35c62eeee73f19ab7b10a801511401afc0f90"
invariant@^2.2.0, invariant@^2.2.2:
invariant@^2.0.0, invariant@^2.1.0, invariant@^2.2.0, invariant@^2.2.2:
version "2.2.2"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
dependencies:
@ -2084,7 +2101,11 @@ locate-path@^2.0.0:
p-locate "^2.0.0"
path-exists "^3.0.0"
lodash@^4.14.0, lodash@^4.2.0, lodash@^4.5.1, lodash@^4.6.1:
lodash-es@^4.2.1:
version "4.17.4"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.4.tgz#dcc1d7552e150a0640073ba9cb31d70f032950e7"
lodash@^4.0.1, lodash@^4.14.0, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.5.1, lodash@^4.6.1:
version "4.17.4"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
@ -2105,6 +2126,10 @@ lru-cache@^4.0.1:
pseudomap "^1.0.2"
yallist "^2.1.2"
material-colors@^1.2.1:
version "1.2.5"
resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.5.tgz#5292593e6754cb1bcc2b98030e4e0d6a3afc9ea1"
md5-file@3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/md5-file/-/md5-file-3.1.1.tgz#db3c92c09bbda5c2de883fa5490dd711fddbbab9"
@ -2628,7 +2653,7 @@ promise@^7.1.1:
dependencies:
asap "~2.0.3"
prop-types@15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@~15.5.7:
prop-types@15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@~15.5.7:
version "15.5.10"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
dependencies:
@ -2714,10 +2739,37 @@ rc@^1.1.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
react-color@^2.12.1:
version "2.12.1"
resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.12.1.tgz#ef5a4dc4260ed7d1642047d5b6693d68939b19f7"
dependencies:
lodash "^4.0.1"
material-colors "^1.2.1"
prop-types "^15.5.4"
reactcss "^1.2.0"
tinycolor2 "^1.1.2"
react-deep-force-update@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-2.0.1.tgz#4f7f6c12c3e7de42f345992a3c518236fa1ecad3"
react-dnd-html5-backend@^2.4.1:
version "2.4.1"
resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-2.4.1.tgz#439d2bcaf8bd8b87a51386beb51c128826182ddd"
dependencies:
lodash "^4.2.0"
react-dnd@^2.4.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-2.4.0.tgz#96f0042cd4cd375b4f0c3413f6ec84d267b7d792"
dependencies:
disposables "^1.0.1"
dnd-core "^2.4.0"
hoist-non-react-statics "^1.2.0"
invariant "^2.1.0"
lodash "^4.2.0"
prop-types "^15.5.8"
react-dom@^15.5.4:
version "15.5.4"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.5.4.tgz#ba0c28786fd52ed7e4f2135fe0288d462aef93da"
@ -2753,6 +2805,12 @@ react@^15.5.4:
object-assign "^4.1.0"
prop-types "^15.5.7"
reactcss@^1.2.0:
version "1.2.2"
resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.2.tgz#41b0ef43e01d54880357c34b11ac1531209350ef"
dependencies:
lodash "^4.0.1"
read-pkg-up@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
@ -2798,6 +2856,15 @@ redbox-react@^1.3.6:
prop-types "^15.5.4"
sourcemapped-stacktrace "^1.1.6"
redux@^3.2.0:
version "3.7.0"
resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.0.tgz#07a623cafd92eee8abe309d13d16538f6707926f"
dependencies:
lodash "^4.2.1"
lodash-es "^4.2.1"
loose-envify "^1.1.0"
symbol-observable "^1.0.3"
regenerate@^1.2.1:
version "1.3.2"
resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.2.tgz#d1941c67bad437e1be76433add5b385f95b19260"
@ -3186,6 +3253,10 @@ supports-color@^3.1.0:
dependencies:
has-flag "^1.0.0"
symbol-observable@^1.0.3:
version "1.0.4"
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.4.tgz#29bf615d4aa7121bdd898b22d4b3f9bc4e2aa03d"
tapable@^0.2.5, tapable@~0.2.5:
version "0.2.6"
resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.6.tgz#206be8e188860b514425375e6f1ae89bfb01fd8d"
@ -3229,6 +3300,10 @@ timers-browserify@^2.0.2:
dependencies:
setimmediate "^1.0.4"
tinycolor2@^1.1.2:
version "1.4.1"
resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
to-arraybuffer@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"

Write Preview
Loading…
Cancel
Save