mirror of https://github.com/sgoudham/carbon.git
Merge branch 'toolbar'
Mike Fix
8 years ago
commit
1a911ce776
@ -0,0 +1,19 @@
|
||||
import React from 'react'
|
||||
import { DropTarget } from 'react-dnd'
|
||||
import { NativeTypes } from 'react-dnd-html5-backend'
|
||||
|
||||
const spec = {
|
||||
drop (props, monitor) {
|
||||
const bundle = monitor.getItem()
|
||||
const file = bundle.files[0]
|
||||
const reader = new FileReader()
|
||||
reader.onload = event => props.onDrop(event.target.result)
|
||||
reader.readAsText(file, 'UTF-8');
|
||||
}
|
||||
}
|
||||
|
||||
const collect = connect => ({ connectDropTarget: connect.dropTarget() })
|
||||
|
||||
const ReadFileDropContainer = props => props.connectDropTarget(props.children)
|
||||
|
||||
export default DropTarget(NativeTypes.FILE, spec, collect)(ReadFileDropContainer)
|
||||
@ -0,0 +1,26 @@
|
||||
import React from 'react'
|
||||
|
||||
export default (props) => (
|
||||
<div onClick={props.onClick} className="toolbar-btn" style={Object.assign({
|
||||
background: props.bg
|
||||
}, props.style)}>
|
||||
<span>{props.title}</span>
|
||||
<style jsx>{`
|
||||
div {
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 16px;
|
||||
color: #000;
|
||||
border: 0.5px solid #000;
|
||||
border-radius: 3px;
|
||||
}
|
||||
div:last-of-type {
|
||||
border-radius: 0px 3px 3px 0px;
|
||||
border-left: 0px;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
@ -0,0 +1,79 @@
|
||||
import React from 'react'
|
||||
import enhanceWithClickOutside from 'react-click-outside'
|
||||
import { BlockPicker } from 'react-color'
|
||||
|
||||
class ColorPicker extends React.Component {
|
||||
constructor() {
|
||||
super()
|
||||
this.state = { isVisible: false }
|
||||
this.toggle = this.toggle.bind(this)
|
||||
this.handlePickColor = this.handlePickColor.bind(this)
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.setState({ isVisible: !this.state.isVisible })
|
||||
}
|
||||
|
||||
handleClickOutside() {
|
||||
this.setState({ isVisible: false })
|
||||
}
|
||||
|
||||
handlePickColor(color) {
|
||||
this.setState({ isVisible: false })
|
||||
this.props.onChange(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.props.bg}} onClick={this.toggle}></div>
|
||||
</div>
|
||||
<div className="colorpicker-picker" hidden={!this.state.isVisible}>
|
||||
<BlockPicker color={this.props.bg} onChangeComplete={this.handlePickColor} />
|
||||
</div>
|
||||
<style jsx>{`
|
||||
.colorpicker-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.colorpicker-display {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 72px;
|
||||
border: 0.5px solid #000;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.colorpicker-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
height: 100%;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.bg-color {
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
width: 36px;
|
||||
border-radius: 0px 2px 2px 0px;
|
||||
}
|
||||
|
||||
.colorpicker-picker {
|
||||
position: absolute;
|
||||
margin-left: -32px;
|
||||
margin-top: 9px;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default enhanceWithClickOutside(ColorPicker)
|
||||
@ -0,0 +1,130 @@
|
||||
import React from 'react'
|
||||
import enhanceWithClickOutside from 'react-click-outside'
|
||||
import ArrowDown from './svg/arrowdown'
|
||||
|
||||
class Dropdown extends React.Component {
|
||||
constructor(props) {
|
||||
super()
|
||||
this.state = {
|
||||
isVisible: false,
|
||||
selected: props.selected || props.list[0]
|
||||
}
|
||||
this.select = this.select.bind(this)
|
||||
this.toggle = this.toggle.bind(this)
|
||||
}
|
||||
|
||||
select(item) {
|
||||
this.setState({ selected: item })
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.setState({ isVisible: !this.state.isVisible })
|
||||
}
|
||||
|
||||
handleClickOutside() {
|
||||
this.setState({ isVisible: false });
|
||||
}
|
||||
|
||||
renderListItems() {
|
||||
return this.props.list.map((item, i) => (
|
||||
<div className={`dropdown-list-item ${this.state.selected === item ? "selected" : ""}`} key={i} onClick={this.select.bind(null, item)}>
|
||||
<span>{ item.name }</span>
|
||||
<style jsx>{`
|
||||
.dropdown-list-item {
|
||||
background: #131313;
|
||||
user-select: none;
|
||||
padding: 8px 16px;
|
||||
border-bottom: 0.5px solid #000;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background: #506874;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.selected:hover {
|
||||
background: #506874 !important;
|
||||
}
|
||||
|
||||
.dropdown-list-item:hover {
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.dropdown-list-item:last-of-type {
|
||||
border-bottom: none;
|
||||
border-radius: 0px 0px 2px 2px;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
|
||||
render() {
|
||||
// find longest list value in number of characters
|
||||
const MIN_WIDTH = this.props.list.reduce((max, { name }) =>
|
||||
(name.length > max ? name.length : max), 0)
|
||||
|
||||
return (
|
||||
<div className="dropdown-container" style={{ minWidth: MIN_WIDTH * 16 }} onClick={this.toggle}>
|
||||
<div className={`dropdown-display ${this.state.isVisible ? 'is-visible' : ''}`}>
|
||||
<span>{ this.state.selected.name }</span>
|
||||
<div className="arrow-down"><ArrowDown /></div>
|
||||
</div>
|
||||
<div className="dropdown-list">
|
||||
{ this.renderListItems() }
|
||||
</div>
|
||||
<style jsx>{`
|
||||
.arrow-down {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
.is-visible > .arrow-down {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.is-visible {
|
||||
border-radius: 3px 3px 0px 0px !important;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropdown-display {
|
||||
height: 100%;
|
||||
border: 1px solid #000;
|
||||
border-radius: 3px;
|
||||
user-select: none;
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown-display:hover {
|
||||
background: #131313;
|
||||
}
|
||||
|
||||
.is-visible + .dropdown-list {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-list {
|
||||
display: none;
|
||||
margin-top: -2px;
|
||||
border: 0.5px solid #000;
|
||||
border-radius: 0px 0px 3px 3px;
|
||||
max-height: 350px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default enhanceWithClickOutside(Dropdown)
|
||||
@ -0,0 +1,32 @@
|
||||
import Head from 'next/head'
|
||||
|
||||
export default () => (
|
||||
<div>
|
||||
<Head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta charSet="utf-8" />
|
||||
<link rel="shortcut icon" href="/static/favicon.ico" />
|
||||
<link rel="stylesheet" href="//cdn.jsdelivr.net/font-hack/2.020/css/hack-extended.min.css" />
|
||||
</Head>
|
||||
<style jsx global>{`
|
||||
body {
|
||||
font-family: Hack, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#toolbar > div {
|
||||
margin-right: 8px; // TODO fix hack
|
||||
}
|
||||
|
||||
#toolbar>div:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
@ -0,0 +1,78 @@
|
||||
import React from 'react'
|
||||
import enhanceWithClickOutside from 'react-click-outside'
|
||||
import SettingsIcon from './svg/settings'
|
||||
|
||||
class Settings extends React.Component {
|
||||
constructor(props) {
|
||||
super()
|
||||
this.state = {
|
||||
isVisible: false
|
||||
}
|
||||
this.toggle = this.toggle.bind(this)
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.setState({ isVisible: !this.state.isVisible })
|
||||
}
|
||||
|
||||
handleClickOutside() {
|
||||
this.setState({ isVisible: false });
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="settings-container" onClick={this.toggle}>
|
||||
<div className={`settings-display ${this.state.isVisible ? 'is-visible' : ''}`}>
|
||||
<SettingsIcon />
|
||||
</div>
|
||||
<div className="settings-settings">
|
||||
</div>
|
||||
<style jsx>{`
|
||||
.settings-container {
|
||||
height: 100%;
|
||||
width: 37px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.settings-display {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 0.5px solid #000;
|
||||
border-radius: 3px;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.settings-display:hover {
|
||||
background: #131313;
|
||||
}
|
||||
|
||||
.is-visible + .settings-settings {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.settings-settings {
|
||||
display: none;
|
||||
border: 0.5px solid #333;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
margin-top: 120px;
|
||||
background: #000;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default enhanceWithClickOutside(Settings)
|
||||
@ -0,0 +1,7 @@
|
||||
import React from 'react'
|
||||
|
||||
export default () => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6">
|
||||
<path fill="#506874" fillRule="evenodd" d="M93.7890633,17.6396882 L97.4926052,14.0851393 C97.6061243,13.9716202 97.7196417,13.9716202 97.8331608,14.0851393 L98.4929872,14.723681 C98.6065063,14.8372001 98.6065063,14.9507175 98.4929872,15.0642366 L93.9593411,19.4063203 C93.9167714,19.4488899 93.8600127,19.4701744 93.7890633,19.4701744 C93.7181138,19.4701744 93.6613552,19.4488899 93.6187855,19.4063203 L89.0851393,15.0642366 C88.9716202,14.9507175 88.9716202,14.8372001 89.0851393,14.723681 L89.7449658,14.0851393 C89.8584849,13.9716202 89.9720022,13.9716202 90.0855213,14.0851393 L93.7890633,17.6396882 Z" transform="translate(-89 -14)"/>
|
||||
</svg>
|
||||
)
|
||||
@ -0,0 +1,11 @@
|
||||
import React from 'react'
|
||||
|
||||
export default () => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14">
|
||||
<g fill="none" fillRule="evenodd" transform="translate(1 1)">
|
||||
<circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" strokeWidth=".5"/>
|
||||
<circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" strokeWidth=".5"/>
|
||||
<circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" strokeWidth=".5"/>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
@ -0,0 +1,7 @@
|
||||
import React from 'react'
|
||||
|
||||
export default () => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
|
||||
<path fill="#4F6875" fillRule="evenodd" d="M206.532032,366.702224 L208.523318,368.142728 C208.69279,368.3122 208.721035,368.509915 208.608053,368.735877 L206.786238,371.74399 C206.673257,371.969953 206.503788,372.040565 206.277825,371.955829 L203.989964,371.066106 C203.283831,371.546276 202.775423,371.842848 202.464724,371.955829 L202.125782,374.286058 C202.069291,374.51202 201.913944,374.625 201.659736,374.625 L198.058474,374.625 C197.804266,374.625 197.648919,374.51202 197.592428,374.286058 L197.253486,371.955829 C196.829806,371.786357 196.321398,371.489786 195.728246,371.066106 L193.440385,371.955829 C193.214422,372.068811 193.044953,371.998198 192.931972,371.74399 L191.110157,368.735877 C190.96893,368.481669 190.997175,368.283955 191.194892,368.142728 L193.101443,366.702224 C193.101443,366.617488 193.094382,366.476263 193.080259,366.278546 C193.066136,366.080828 193.059075,365.925481 193.059075,365.8125 C193.059075,365.699519 193.066136,365.544172 193.080259,365.346454 C193.094382,365.148737 193.101443,365.007512 193.101443,364.922776 L191.152525,363.482272 C190.983053,363.3128 190.954808,363.115085 191.067789,362.889123 L192.889604,359.88101 C193.002585,359.655047 193.172055,359.584435 193.398017,359.669171 L195.685878,360.558894 C196.392011,360.078724 196.90042,359.782152 197.211118,359.669171 L197.550061,357.338942 C197.606551,357.11298 197.761898,357 198.016106,357 L201.617368,357 C201.871576,357 202.026923,357.11298 202.083414,357.338942 L202.379988,359.669171 C202.803668,359.838643 203.312077,360.135214 203.905229,360.558894 L206.150722,359.669171 C206.376684,359.556189 206.560276,359.626802 206.701503,359.88101 L208.523318,362.889123 C208.664544,363.143331 208.6363,363.341045 208.438582,363.482272 L206.532032,364.922776 C206.532032,365.007512 206.539093,365.148737 206.553216,365.346454 C206.567338,365.544172 206.5744,365.699519 206.5744,365.8125 C206.5744,366.23618 206.560277,366.532752 206.532032,366.702224 Z M199.795553,368.905349 C200.671159,368.905349 201.419649,368.608777 202.041046,368.015625 C202.662443,367.422473 202.973138,366.688105 202.973138,365.8125 C202.973138,364.936895 202.662443,364.202527 202.041046,363.609375 C201.419649,363.016223 200.671159,362.719651 199.795553,362.719651 C198.919948,362.719651 198.178519,363.016223 197.571244,363.609375 C196.96397,364.202527 196.660337,364.936895 196.660337,365.8125 C196.660337,366.688105 196.96397,367.422473 197.571244,368.015625 C198.178519,368.608777 198.919948,368.905349 199.795553,368.905349 Z" transform="translate(-191 -357)"/>
|
||||
</svg>
|
||||
)
|
||||
@ -0,0 +1,117 @@
|
||||
import React from 'react'
|
||||
import Dropdown from './dropdown'
|
||||
import ColorPicker from './colorpicker'
|
||||
import Settings from './settings'
|
||||
import Button from './button'
|
||||
|
||||
const themes = [
|
||||
{
|
||||
name: 'dracula'
|
||||
},
|
||||
{
|
||||
name: 'solarized'
|
||||
}
|
||||
]
|
||||
|
||||
const langauges = [
|
||||
'Auto Detect',
|
||||
'Plain Text',
|
||||
'AppleScript',
|
||||
'BoxNote',
|
||||
'C',
|
||||
'C#',
|
||||
'CSS',
|
||||
'CSV',
|
||||
'Closure',
|
||||
'CoffeeScript',
|
||||
'Cold Fusion',
|
||||
'Crystal',
|
||||
'Cypher',
|
||||
'D',
|
||||
'Dart',
|
||||
'Diff',
|
||||
'Docker',
|
||||
'Erlang',
|
||||
'F#',
|
||||
'Fortran',
|
||||
'Gherkin',
|
||||
'Go',
|
||||
'Groovy',
|
||||
'HTML',
|
||||
'Haskell',
|
||||
'Haxe',
|
||||
'Java',
|
||||
'JavaScript',
|
||||
'JSON',
|
||||
'Julia',
|
||||
'Kotlin',
|
||||
'LaTex',
|
||||
'Lisp',
|
||||
'Lua',
|
||||
'MATLAB',
|
||||
'MUMPS',
|
||||
'OCaml',
|
||||
'Objective-C',
|
||||
'PHP',
|
||||
'Pascal',
|
||||
'Perl',
|
||||
'Pig',
|
||||
'Post',
|
||||
'Puppet',
|
||||
'Python',
|
||||
'R',
|
||||
'Ruby',
|
||||
'Rust',
|
||||
'SQL',
|
||||
'Sass',
|
||||
'Scheme',
|
||||
'Smalltalk',
|
||||
'Swift',
|
||||
'TSV',
|
||||
'VB.NET',
|
||||
'VBScript',
|
||||
'Velocity',
|
||||
'Verilog',
|
||||
'XML',
|
||||
'YAML'
|
||||
].map(name => ({ name }))
|
||||
|
||||
const Toolbar = (props) => (
|
||||
<div id="toolbar">
|
||||
<Dropdown list={themes} />
|
||||
<Dropdown list={langauges} />
|
||||
<ColorPicker
|
||||
onChange={props.onBGChange}
|
||||
bg={props.bg}
|
||||
/>
|
||||
<Settings />
|
||||
<div className="buttons">
|
||||
<Button
|
||||
onClick={props.upload}
|
||||
title="Copy Imgur Link"
|
||||
bg="#84ACFC"
|
||||
style={{ borderRadius: '3px 0px 0px 3px' }}
|
||||
/>
|
||||
<Button onClick={props.save} title="Save Image" bg="#C3E98D" />
|
||||
</div>
|
||||
<style jsx>{`
|
||||
#toolbar {
|
||||
width: 100%;
|
||||
height: 40px; // TODO fix
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-size: 14px;
|
||||
color: #4F6875;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default Toolbar
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Loading…
Reference in New Issue