From d99ea801be27e899b7fa3bdfe1ccd405038f045b Mon Sep 17 00:00:00 2001 From: Jake Dexheimer Date: Sat, 17 Jun 2017 14:59:30 -0700 Subject: [PATCH 01/24] Add meta component --- components/meta.js | 24 ++++++++++++++++++++++++ static/favicon.ico | Bin 0 -> 15086 bytes 2 files changed, 24 insertions(+) create mode 100644 components/meta.js create mode 100644 static/favicon.ico diff --git a/components/meta.js b/components/meta.js new file mode 100644 index 0000000..b7e0738 --- /dev/null +++ b/components/meta.js @@ -0,0 +1,24 @@ +import Head from 'next/head' + +export default () => ( +
+ + + + + + + +
+) diff --git a/static/favicon.ico b/static/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..1986d6fce97ef57038642082a188c18ed8c33e69 GIT binary patch literal 15086 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 Date: Sat, 17 Jun 2017 14:59:47 -0700 Subject: [PATCH 02/24] Add WIP dropdown component --- components/dropdown.js | 113 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 113 insertions(+) create mode 100644 components/dropdown.js diff --git a/components/dropdown.js b/components/dropdown.js new file mode 100644 index 0000000..1b70bad --- /dev/null +++ b/components/dropdown.js @@ -0,0 +1,113 @@ +import React from 'react' +import ArrowDown from './arrowdown' + +export default class extends React.Component { + constructor(props) { + super() + this.state = { + listVisible: 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({ listVisible: !this.state.listVisible }) + } + + renderListItems() { + return this.props.list.map((item, i) => ( +
+ { item.name } + +
+ )) + } + + render() { + return ( +
+
+ { this.state.selected.name } +
+
+
+ { this.renderListItems() } +
+ +
+ ) + } +} From 8ee603249193a1768f71aff95542428e7554b558 Mon Sep 17 00:00:00 2001 From: Jake Dexheimer Date: Sat, 17 Jun 2017 14:59:57 -0700 Subject: [PATCH 03/24] Add arrowdown svg --- components/arrowdown.js | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 components/arrowdown.js diff --git a/components/arrowdown.js b/components/arrowdown.js new file mode 100644 index 0000000..75f3ef0 --- /dev/null +++ b/components/arrowdown.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default () => ( + + + +) From cc9f68d0f5917e93e590e32095e112a96e6f3136 Mon Sep 17 00:00:00 2001 From: Jake Dexheimer Date: Sat, 17 Jun 2017 15:00:05 -0700 Subject: [PATCH 04/24] Add toolbar component --- components/toolbar.js | 51 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 components/toolbar.js diff --git a/components/toolbar.js b/components/toolbar.js new file mode 100644 index 0000000..5c81504 --- /dev/null +++ b/components/toolbar.js @@ -0,0 +1,51 @@ +import React from 'react' +import Dropdown from './dropdown' + +const themes = [ + { + name: 'dracula' + }, + { + name: 'solarized' + } +] + +const langauges = [ + { + name: 'javascript' + }, + { + name: 'python' + }, + { + name: 'c' + }, + { + name: 'shitty ass java' + } +] + +export default class extends React.Component { + constructor() { + super() + } + + render() { + return ( +
+ + + +
+ ) + } +} From 90cbe0827c36bbc16ec029a82e52245ef925497d Mon Sep 17 00:00:00 2001 From: Jake Dexheimer Date: Sat, 17 Jun 2017 15:00:17 -0700 Subject: [PATCH 05/24] codeimage styling changes --- components/codeImage.js | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/components/codeImage.js b/components/codeImage.js index 9574f34..f83f925 100644 --- a/components/codeImage.js +++ b/components/codeImage.js @@ -4,7 +4,7 @@ import { NativeTypes } from 'react-dnd-html5-backend' import { DropTarget } from 'react-dnd' import domtoimage from 'dom-to-image' -const padding = '50px 50px' +const margin = '45px 54px' const DEFAULT_CODE = ` const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj) @@ -47,7 +47,7 @@ class CodeImage extends React.Component { return this.props.connectDropTarget(
{ this.container = container }}> - 
+          
             
               {code}
             
@@ -55,23 +55,30 @@ class CodeImage extends React.Component {
) From d6da4c7e7077874be4bd6a43d494f1fea5087aca Mon Sep 17 00:00:00 2001 From: Jake Dexheimer Date: Sat, 17 Jun 2017 15:00:28 -0700 Subject: [PATCH 06/24] Home -> Index, styles --- pages/index.js | 49 ++++++++++++++++++++++++++++++++----------------- 1 file changed, 32 insertions(+), 17 deletions(-) diff --git a/pages/index.js b/pages/index.js index 08b387c..cf25112 100644 --- a/pages/index.js +++ b/pages/index.js @@ -3,10 +3,12 @@ import HTML5Backend from 'react-dnd-html5-backend' import { DragDropContext } from 'react-dnd' import Axios from 'axios' +import Meta from '../components/meta' +import Toolbar from '../components/toolbar' import CodeImage from '../components/codeImage' import api from '../lib/api' -class Home extends React.Component { +class Index extends React.Component { /* pathname, asPath, err, req, res */ static async getInitialProps ({ asPath }) { try { @@ -19,23 +21,36 @@ class Home extends React.Component { } render () { return ( -
- -

Welcome to Code Image

- - {this.props.content} - -
+
+ +

Welcome to Code Image

+
+ + + {this.props.content} + +
+ +
) } } -export default DragDropContext(HTML5Backend)(Home) +export default DragDropContext(HTML5Backend)(Index) From 21c3f181e6c28a136bc403612a57dda248860d27 Mon Sep 17 00:00:00 2001 From: Jake Dexheimer Date: Sat, 17 Jun 2017 16:04:36 -0700 Subject: [PATCH 07/24] Add color picker --- components/colorpicker.js | 72 +++++++++++++++++++++++++++++++++ components/toolbar.js | 4 ++ package.json | 1 + yarn.lock | 83 +++++++++++++++++++++++++++++++++++++-- 4 files changed, 156 insertions(+), 4 deletions(-) create mode 100644 components/colorpicker.js diff --git a/components/colorpicker.js b/components/colorpicker.js new file mode 100644 index 0000000..1f27ba6 --- /dev/null +++ b/components/colorpicker.js @@ -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 ( +
+
+
+ BG +
+
+
+ + +
+ ) + } +} diff --git a/components/toolbar.js b/components/toolbar.js index 5c81504..536580e 100644 --- a/components/toolbar.js +++ b/components/toolbar.js @@ -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 {
+ +
+
Copy Imgur Link
+
+) diff --git a/components/arrowdown.js b/components/svg/arrowdown.js similarity index 100% rename from components/arrowdown.js rename to components/svg/arrowdown.js diff --git a/components/svg/settings.js b/components/svg/settings.js new file mode 100644 index 0000000..bd2d790 --- /dev/null +++ b/components/svg/settings.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default () => ( + + + +) diff --git a/components/toolbar.js b/components/toolbar.js index 536580e..b5d11d7 100644 --- a/components/toolbar.js +++ b/components/toolbar.js @@ -1,6 +1,7 @@ import React from 'react' import Dropdown from './dropdown' import ColorPicker from './colorpicker' +import Settings from './settings' const themes = [ { @@ -37,8 +38,9 @@ export default class extends React.Component { -
-
Copy Imgur Link
+ +
Copy Imgur Link
+
Save Image
diff --git a/components/toolbar.js b/components/toolbar.js index 5c81504..f1dc18e 100644 --- a/components/toolbar.js +++ b/components/toolbar.js @@ -11,19 +11,68 @@ const themes = [ ] const langauges = [ - { - name: 'javascript' - }, - { - name: 'python' - }, - { - name: 'c' - }, - { - name: 'shitty ass java' - } -] + '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', + 'Markdown (raw)', + '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 })) export default class extends React.Component { constructor() { From 900bbcb75d2758b2046c9625261867d74156ca7e Mon Sep 17 00:00:00 2001 From: Mike Fix Date: Sat, 17 Jun 2017 16:19:57 -0700 Subject: [PATCH 10/24] Add click outside --- components/dropdown.js | 9 ++++++++- package.json | 1 + 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/components/dropdown.js b/components/dropdown.js index e60bb75..374a953 100644 --- a/components/dropdown.js +++ b/components/dropdown.js @@ -1,7 +1,8 @@ import React from 'react' +import enhanceWithClickOutside from 'react-click-outside' import ArrowDown from './arrowdown' -export default class extends React.Component { +class Dropdown extends React.Component { constructor(props) { super() this.state = { @@ -20,6 +21,10 @@ export default class extends React.Component { this.setState({ listVisible: !this.state.listVisible }) } + handleClickOutside() { + this.setState({ listVisible: false }); + } + renderListItems() { return this.props.list.map((item, i) => (
@@ -118,3 +123,5 @@ export default class extends React.Component { ) } } + +export default enhanceWithClickOutside(Dropdown) diff --git a/package.json b/package.json index 58a458f..3fe8620 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "morgan": "^1.8.2", "next": "^2.4.3", "react": "^15.5.4", + "react-click-outside": "^2.3.1", "react-dnd": "^2.4.0", "react-dnd-html5-backend": "^2.4.1", "react-dom": "^15.5.4" From 0f97acbe5e285a377eecc9f502699cd9a327f033 Mon Sep 17 00:00:00 2001 From: Jake Dexheimer Date: Sat, 17 Jun 2017 16:20:08 -0700 Subject: [PATCH 11/24] Start copy/save butons --- components/button.js | 5 +++++ components/toolbar.js | 26 ++++++++++++++++++++++++-- 2 files changed, 29 insertions(+), 2 deletions(-) create mode 100644 components/button.js diff --git a/components/button.js b/components/button.js new file mode 100644 index 0000000..4692443 --- /dev/null +++ b/components/button.js @@ -0,0 +1,5 @@ +import React from 'react' + +export default (props) => ( +
+) diff --git a/components/toolbar.js b/components/toolbar.js index b5d11d7..f32e363 100644 --- a/components/toolbar.js +++ b/components/toolbar.js @@ -39,8 +39,8 @@ export default class extends React.Component { -
Copy Imgur Link
-
Save Image
+
Copy Imgur Link
+
Save Image
) From c11206b338f32460fdaa2c59c1f70324862c7c90 Mon Sep 17 00:00:00 2001 From: Jake Dexheimer Date: Sat, 17 Jun 2017 16:30:46 -0700 Subject: [PATCH 12/24] Fix settings svg fillRule --- components/svg/settings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/svg/settings.js b/components/svg/settings.js index bd2d790..49d7ee4 100644 --- a/components/svg/settings.js +++ b/components/svg/settings.js @@ -2,6 +2,6 @@ import React from 'react' export default () => ( - + ) From aab6bad5e63b25eb311a887e8b9e7df27dba0f22 Mon Sep 17 00:00:00 2001 From: Jake Dexheimer Date: Sat, 17 Jun 2017 16:33:14 -0700 Subject: [PATCH 13/24] Fix colorpicker positioning --- components/colorpicker.js | 1 + 1 file changed, 1 insertion(+) diff --git a/components/colorpicker.js b/components/colorpicker.js index 1f27ba6..b1cbdf0 100644 --- a/components/colorpicker.js +++ b/components/colorpicker.js @@ -62,6 +62,7 @@ export default class extends React.Component { } .colorpicker-picker { + position: absolute; margin-left: -32px; margin-top: 9px; } From 565b209a351133bd2bfee034f2c3da273181f712 Mon Sep 17 00:00:00 2001 From: Mike Fix Date: Sat, 17 Jun 2017 16:39:14 -0700 Subject: [PATCH 14/24] Add click outside to colorpicker --- components/colorpicker.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/components/colorpicker.js b/components/colorpicker.js index b1cbdf0..ae83f18 100644 --- a/components/colorpicker.js +++ b/components/colorpicker.js @@ -1,7 +1,8 @@ import React from 'react' +import enhanceWithClickOutside from 'react-click-outside' import { BlockPicker } from 'react-color' -export default class extends React.Component { +class ColorPicker extends React.Component { constructor() { super() this.state = { isVisible: false, bgcolor: '#565656' } @@ -13,6 +14,10 @@ export default class extends React.Component { this.setState({ isVisible: !this.state.isVisible }) } + handleClickOutside() { + this.setState({ isVisible: false }); + } + handlePickColor(color) { this.setState({ bgcolor: color.hex }) } @@ -71,3 +76,5 @@ export default class extends React.Component { ) } } + +export default enhanceWithClickOutside(ColorPicker) From 93ec8dc95298ebd8f6d4946549bc7cab942faff9 Mon Sep 17 00:00:00 2001 From: Mike Fix Date: Sat, 17 Jun 2017 17:35:51 -0700 Subject: [PATCH 15/24] isolate button style --- components/button.js | 22 +++++++++++++++++++++- components/toolbar.js | 27 +++------------------------ 2 files changed, 24 insertions(+), 25 deletions(-) diff --git a/components/button.js b/components/button.js index 4692443..298900a 100644 --- a/components/button.js +++ b/components/button.js @@ -1,5 +1,25 @@ import React from 'react' export default (props) => ( -
+
+ {props.title} + +
) diff --git a/components/toolbar.js b/components/toolbar.js index ff078d8..91e2ad1 100644 --- a/components/toolbar.js +++ b/components/toolbar.js @@ -2,6 +2,7 @@ import React from 'react' import Dropdown from './dropdown' import ColorPicker from './colorpicker' import Settings from './settings' +import Button from './button' const themes = [ { @@ -88,8 +89,8 @@ export default class extends React.Component { -
Copy Imgur Link
-
Save Image
+