From 7a0e1daec2f447f21838f9616135ad5baac0a4b2 Mon Sep 17 00:00:00 2001 From: Jake Dexheimer Date: Mon, 19 Jun 2017 00:22:15 -0700 Subject: [PATCH] Finish theme select, add theme svgs --- components/Meta.js | 5 +++ components/ThemeSelect.js | 65 +++++++++++++++++++++++++++++++++++++++ components/svg/Themes.js | 64 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 134 insertions(+) create mode 100644 components/ThemeSelect.js create mode 100644 components/svg/Themes.js diff --git a/components/Meta.js b/components/Meta.js index 8dec2b4..497ee7d 100644 --- a/components/Meta.js +++ b/components/Meta.js @@ -48,6 +48,11 @@ export default () => ( margin-right: 0px; } + .selected svg { + border-radius: 3px; + border: solid 2px #fff; + } + .CodeMirrorContainer .CodeMirror { height: auto; min-width: 680px; diff --git a/components/ThemeSelect.js b/components/ThemeSelect.js new file mode 100644 index 0000000..5a4b054 --- /dev/null +++ b/components/ThemeSelect.js @@ -0,0 +1,65 @@ +import React from 'react' +import { Hyper, BW, None } from './svg/Themes' + +const THEME_IMGS = [None, Hyper, BW] + +export default class extends React.Component { + constructor(props) { + super() + this.state = { selected: props.selected || THEME_IMGS[0] } + this.select = this.select.bind(this) + } + + select(theme) { + if (this.state.selected !== theme) { + this.props.onChange(theme) + this.setState({ selected: theme }) + } + } + + renderThemes() { + return THEME_IMGS.map((Img, i) => ( +
+ + +
+ )) + } + + render() { + return ( +
+ Theme +
+ { this.renderThemes() } +
+ +
+ ) + } +} diff --git a/components/svg/Themes.js b/components/svg/Themes.js new file mode 100644 index 0000000..27bd8b3 --- /dev/null +++ b/components/svg/Themes.js @@ -0,0 +1,64 @@ +import React from 'react' + +export const Hyper = () => ( + + + + + + + + + + + + + + + + + + +) + +export const BW = () => ( + + + + + + + + + + + + + + + + + + +) + +export const None = () => ( + + + + + + + + + + + + + + + + + + +)