From 1bba205853f0f58196b8f23f565ebeeabe8a514b Mon Sep 17 00:00:00 2001 From: Jake Dexheimer Date: Sun, 16 Jul 2017 16:20:37 -0700 Subject: [PATCH 1/7] Wire-up window theme functionality --- components/CodeImage.js | 5 +-- components/Meta.js | 8 ++++ components/Settings.js | 2 +- components/ThemeSelect.js | 44 +++++++++++-------- components/svg/{Themes.js => WindowThemes.js} | 12 ++--- pages/index.js | 3 +- 6 files changed, 45 insertions(+), 29 deletions(-) rename components/svg/{Themes.js => WindowThemes.js} (77%) diff --git a/components/CodeImage.js b/components/CodeImage.js index db1fd71..6c0fa61 100644 --- a/components/CodeImage.js +++ b/components/CodeImage.js @@ -15,8 +15,7 @@ const DEFAULT_SETTINGS = { language: 'javascript' } - class CodeImage extends React.Component { - +class CodeImage extends React.Component { constructor (props) { super(props) @@ -66,7 +65,7 @@ const DEFAULT_SETTINGS = {
{ config.windowControls ? : null } diff --git a/components/Meta.js b/components/Meta.js index 3345280..90e2406 100644 --- a/components/Meta.js +++ b/components/Meta.js @@ -71,6 +71,14 @@ export default () => ( font-size: 0.7rem; } + .window-theme__sharp > .CodeMirror { + border-radius: 0px; + } + + .window-theme__bw > .CodeMirror { + border: 2px solid #fff; + } + .window-controls + .CodeMirror__container > .CodeMirror { padding-top: 40px; } diff --git a/components/Settings.js b/components/Settings.js index a038883..27dac7e 100644 --- a/components/Settings.js +++ b/components/Settings.js @@ -30,7 +30,7 @@ class Settings extends React.Component {
- + ( -
- - -
- )) + .theme:last-of-type { + margin-right: 0px; + } + `} +
+ ) + }) } render() { return (
- Theme + Window Theme
{ this.renderThemes() }
diff --git a/components/svg/Themes.js b/components/svg/WindowThemes.js similarity index 77% rename from components/svg/Themes.js rename to components/svg/WindowThemes.js index 97f0267..208d38e 100644 --- a/components/svg/Themes.js +++ b/components/svg/WindowThemes.js @@ -1,6 +1,6 @@ import React from 'react' -export const Hyper = () => ( +export const Sharp = () => ( @@ -10,11 +10,11 @@ export const Hyper = () => ( - - - - - + + + + + diff --git a/pages/index.js b/pages/index.js index 4851193..09bd1c2 100644 --- a/pages/index.js +++ b/pages/index.js @@ -7,6 +7,7 @@ import domtoimage from 'dom-to-image' import ReadFileDropContainer from '../components/ReadFileDropContainer' import Meta from '../components/Meta' import Toolbar from '../components/Toolbar' +import { WINDOW_THEMES } from '../components/ThemeSelect' import CodeImage from '../components/CodeImage' import Header from '../components/Header' import Footer from '../components/Footer' @@ -33,6 +34,7 @@ class Index extends React.Component { background: '#111111', theme: THEMES[0].id, language: 'javascript', // TODO LANGUAGES[0] + windowTheme: WINDOW_THEMES[0], dropShadow: false, windowControls: true, paddingVertical: '48px', @@ -41,7 +43,6 @@ class Index extends React.Component { } save () { - // domtoimage.toPng(document.getElementById('container')) domtoimage.toPng(document.getElementById('container')) .then((dataUrl) => { const link = document.createElement('a') From c82779f2dffc286c770897de463feab9ff0a3374 Mon Sep 17 00:00:00 2001 From: Jake Dexheimer Date: Sun, 16 Jul 2017 16:23:27 -0700 Subject: [PATCH 2/7] Rename colorpicker --- components/{Colorpicker.js => ColorPicker.js} | 0 components/Toolbar.js | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename components/{Colorpicker.js => ColorPicker.js} (100%) diff --git a/components/Colorpicker.js b/components/ColorPicker.js similarity index 100% rename from components/Colorpicker.js rename to components/ColorPicker.js diff --git a/components/Toolbar.js b/components/Toolbar.js index f66416e..39ffe35 100644 --- a/components/Toolbar.js +++ b/components/Toolbar.js @@ -1,6 +1,6 @@ import React from 'react' import Dropdown from './Dropdown' -import ColorPicker from './Colorpicker' +import ColorPicker from './ColorPicker' import Settings from './Settings' import Button from './Button' import CopyButton from './CopyButton' From d4096d7e163722ca964d72a5b2667d37e3725e49 Mon Sep 17 00:00:00 2001 From: Jake Dexheimer Date: Sun, 16 Jul 2017 16:36:40 -0700 Subject: [PATCH 3/7] Add window control themes --- components/CodeImage.js | 4 ++-- components/WindowControls.js | 18 +++++++++++++++++ components/svg/Controls.js | 38 +++++++++++++++++------------------- 3 files changed, 38 insertions(+), 22 deletions(-) create mode 100644 components/WindowControls.js diff --git a/components/CodeImage.js b/components/CodeImage.js index 6c0fa61..309edae 100644 --- a/components/CodeImage.js +++ b/components/CodeImage.js @@ -2,7 +2,7 @@ import { EOL } from 'os' import React from 'react' import domtoimage from 'dom-to-image' import CodeMirror from 'react-codemirror' -import WindowControls from '../components/svg/Controls' +import WindowControls from '../components/WindowControls' import Spinner from 'react-spinner' const DEFAULT_SETTINGS = { @@ -63,7 +63,7 @@ class CodeImage extends React.Component { if (this.state.loading === false) { content = (
- { config.windowControls ? : null } + { config.windowControls ? : null } ( +
+ { theme === 'bw' ? : } + +
+) diff --git a/components/svg/Controls.js b/components/svg/Controls.js index be5ba31..afc4993 100644 --- a/components/svg/Controls.js +++ b/components/svg/Controls.js @@ -1,23 +1,21 @@ import React from 'react' -export default () => ( -
- - - - - - - - -
+export const Controls = () => ( + + + + + + + +) + +export const ControlsBW = () => ( + + + + + + + ) From 9b1187a9aea4dde22ff2db7aea8393fd2e450d60 Mon Sep 17 00:00:00 2001 From: Jake Dexheimer Date: Sun, 16 Jul 2017 16:40:02 -0700 Subject: [PATCH 4/7] Better theme defaults --- pages/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/index.js b/pages/index.js index 09bd1c2..0768df7 100644 --- a/pages/index.js +++ b/pages/index.js @@ -31,11 +31,11 @@ class Index extends React.Component { constructor() { super() this.state = { - background: '#111111', + background: '#ABB8C3', theme: THEMES[0].id, language: 'javascript', // TODO LANGUAGES[0] windowTheme: WINDOW_THEMES[0], - dropShadow: false, + dropShadow: true, windowControls: true, paddingVertical: '48px', paddingHorizontal: '32px' From a60655b7959614bedb1ab2f50c469453fccf2386 Mon Sep 17 00:00:00 2001 From: Jake Dexheimer Date: Sun, 16 Jul 2017 18:38:18 -0700 Subject: [PATCH 5/7] Add winow pointer thing --- components/Meta.js | 4 ++++ components/Settings.js | 4 +++- components/WindowPointer.js | 19 +++++++++++++++++++ components/svg/Controls.js | 2 +- 4 files changed, 27 insertions(+), 2 deletions(-) create mode 100644 components/WindowPointer.js diff --git a/components/Meta.js b/components/Meta.js index 90e2406..df4d038 100644 --- a/components/Meta.js +++ b/components/Meta.js @@ -52,6 +52,10 @@ export default () => ( border-bottom: solid 1px ${PALETTE.SECONDARY}; } + .settings-settings > div:first-child { + border-bottom: none; + } + .selected svg { border-radius: 3px; border: solid 2px #fff; diff --git a/components/Settings.js b/components/Settings.js index 27dac7e..2660928 100644 --- a/components/Settings.js +++ b/components/Settings.js @@ -4,6 +4,7 @@ import SettingsIcon from './svg/Settings' import ThemeSelect from './ThemeSelect' import Slider from './Slider' import Toggle from './Toggle' +import WindowPointer from './WindowPointer'; import { PALETTE } from '../lib/constants' class Settings extends React.Component { @@ -30,6 +31,7 @@ class Settings extends React.Component {
+ ( +
+
+ +
+) diff --git a/components/svg/Controls.js b/components/svg/Controls.js index afc4993..0dc7809 100644 --- a/components/svg/Controls.js +++ b/components/svg/Controls.js @@ -11,7 +11,7 @@ export const Controls = () => ( ) export const ControlsBW = () => ( - + From 483b456f0874dfa97aa9bfa2de9fa382bcc6a456 Mon Sep 17 00:00:00 2001 From: Jake Dexheimer Date: Sun, 16 Jul 2017 20:12:49 -0700 Subject: [PATCH 6/7] Add color picker style overrides --- components/ColorPicker.js | 9 +++++---- components/Meta.js | 31 +++++++++++++++++++++++++++++-- 2 files changed, 34 insertions(+), 6 deletions(-) diff --git a/components/ColorPicker.js b/components/ColorPicker.js index 23d3006..4aef88f 100644 --- a/components/ColorPicker.js +++ b/components/ColorPicker.js @@ -1,6 +1,7 @@ import React from 'react' import enhanceWithClickOutside from 'react-click-outside' import { TwitterPicker } from 'react-color' +import WindowPointer from './WindowPointer' import { PALETTE } from '../lib/constants' class ColorPicker extends React.Component { @@ -20,7 +21,6 @@ class ColorPicker extends React.Component { } handlePickColor(color) { - this.setState({ isVisible: false }) this.props.onChange(color.hex) } @@ -34,7 +34,8 @@ class ColorPicker extends React.Component {
diff --git a/components/Meta.js b/components/Meta.js index df4d038..15e23ec 100644 --- a/components/Meta.js +++ b/components/Meta.js @@ -58,7 +58,7 @@ export default () => ( .selected svg { border-radius: 3px; - border: solid 2px #fff; + border: solid 2px ${PALETTE.SECONDARY}; } .CodeMirror__container.dropshadow { @@ -80,7 +80,7 @@ export default () => ( } .window-theme__bw > .CodeMirror { - border: 2px solid #fff; + border: 2px solid ${PALETTE.SECONDARY}; } .window-controls + .CodeMirror__container > .CodeMirror { @@ -90,6 +90,33 @@ export default () => ( .cm-s-dracula .CodeMirror-cursor { border-left: solid 2px #159588; } + + /* Colorpicker overrides */ + .twitter-picker { + width: 278px !important; + border: 0.5px solid ${PALETTE.SECONDARY} !important; + border-radius: 3px !important; + background: #1A1A1A !important; + } + + .colorpicker-picker > div > div:nth-child(3) > div:nth-child(11) { + background: #1A1A1A !important; + border: 0.5px solid ${PALETTE.SECONDARY} !important; + border-right: none !important; + border-radius: 3px 0 0 3px !important; + color: ${PALETTE.SECONDARY} !important; + } + + #toolbar > div.colorpicker-container > div.colorpicker-picker > div > div:nth-child(3) > div:nth-child(12) > input { + background: rgba(255, 255, 255, 0.165) !important; + height: 30px !important; + width: 108px !important; + color: #fff !important; + } + + #toolbar > div.colorpicker-container > div.colorpicker-picker > div > div:nth-child(3) > span > div { + border-radius: 2px !important; + } `}
) From 902688ae820e68c7c7d55db4c3fa0c4134581e20 Mon Sep 17 00:00:00 2001 From: Jake Dexheimer Date: Sun, 16 Jul 2017 20:13:00 -0700 Subject: [PATCH 7/7] Remove hover styles --- components/Dropdown.js | 4 ---- components/Settings.js | 4 ---- 2 files changed, 8 deletions(-) diff --git a/components/Dropdown.js b/components/Dropdown.js index d3233c9..504f80f 100644 --- a/components/Dropdown.js +++ b/components/Dropdown.js @@ -101,10 +101,6 @@ class Dropdown extends React.Component { z-index: 1; } - .dropdown-display:hover { - background: #131313; - } - .is-visible + .dropdown-list { display: block; } diff --git a/components/Settings.js b/components/Settings.js index 2660928..7995875 100644 --- a/components/Settings.js +++ b/components/Settings.js @@ -71,10 +71,6 @@ class Settings extends React.Component { cursor: pointer; } - .settings-display:hover { - background: #131313; - } - .is-visible + .settings-settings { display: block; }