mirror of https://github.com/sgoudham/carbon.git
Finish theme select, add theme svgs
Jake Dexheimer
8 years ago
parent
77b1a722d8
commit
7a0e1daec2
@ -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) => (
|
||||||
|
<div className={`theme ${this.state.selected === Img ? "selected" : ""}`}
|
||||||
|
key={i} onClick={this.select.bind(null, Img)}>
|
||||||
|
<Img/>
|
||||||
|
<style jsx>{`
|
||||||
|
.theme {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme:last-of-type {
|
||||||
|
margin-right: 0px;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="window-theme">
|
||||||
|
<span className="label">Theme</span>
|
||||||
|
<div className="themes">
|
||||||
|
{ this.renderThemes() }
|
||||||
|
</div>
|
||||||
|
<style jsx>{`
|
||||||
|
.window-theme {
|
||||||
|
padding: 8px;
|
||||||
|
border-bottom: solid 1px #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-theme span {
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.themes {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,64 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
export const Hyper = () => (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 81 81" xmlnsXlink="http://www.w3.org/1999/xlink">
|
||||||
|
<defs>
|
||||||
|
<rect id="a" width="81" height="81" rx="3"/>
|
||||||
|
</defs>
|
||||||
|
<g fill="none" fill-rule="evenodd">
|
||||||
|
<mask id="b" fill="white">
|
||||||
|
<use xlinkHref="#a"/>
|
||||||
|
</mask>
|
||||||
|
<use fill="#616161" xlinkHref="#a"/>
|
||||||
|
<g transform="translate(17 33)" mask="url(#b)">
|
||||||
|
<path fill="#000000" stroke="#393939" stroke-width="2" d="M65.0458013,49.1077029 C66.0458013,49.1077029 0.174089069,49.1077029 0.174089069,49.1077029 L0.174089069,5.16868499 C0.174089069,2.41055979 2.40986586,0.174657534 5.17268563,0.174657534 L65.0458013,0.174657534 L65.0458013,49.1077029 Z"/>
|
||||||
|
<g fill-rule="nonzero" stroke-width=".5" transform="translate(18.96 14.27)">
|
||||||
|
<ellipse cx="7.045" cy="7.048" fill="#FF5E55" stroke="#E0443E" rx="7.045" ry="7.048"/>
|
||||||
|
<ellipse cx="30.526" cy="7.048" fill="#FFC02C" stroke="#DEA123" rx="7.045" ry="7.048"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
export const BW = () => (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 81 81" xmlnsXlink="http://www.w3.org/1999/xlink">
|
||||||
|
<defs>
|
||||||
|
<rect id="a" width="81" height="81" rx="3"/>
|
||||||
|
</defs>
|
||||||
|
<g fill="none" fill-rule="evenodd">
|
||||||
|
<mask id="b" fill="white">
|
||||||
|
<use xlinkHref="#a"/>
|
||||||
|
</mask>
|
||||||
|
<use fill="#616161" xlinkHref="#a"/>
|
||||||
|
<g transform="translate(17 33)" mask="url(#b)">
|
||||||
|
<path fill="#000000" stroke="#FFFFFF" stroke-width="2" d="M65.0458013,49.1077029 C66.0458013,49.1077029 0.174089069,49.1077029 0.174089069,49.1077029 L0.174089069,5.16868499 C0.174089069,2.41055979 2.40986586,0.174657534 5.17268563,0.174657534 L65.0458013,0.174657534 L65.0458013,49.1077029 Z"/>
|
||||||
|
<g fill-rule="nonzero" stroke="#878787" transform="translate(18.96 14.27)">
|
||||||
|
<ellipse cx="7.045" cy="7.048" rx="7.045" ry="7.048"/>
|
||||||
|
<ellipse cx="30.526" cy="7.048" rx="7.045" ry="7.048"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
export const None = () => (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 81 81" xmlnsXlink="http://www.w3.org/1999/xlink">
|
||||||
|
<defs>
|
||||||
|
<rect id="a" width="81" height="81" rx="3"/>
|
||||||
|
</defs>
|
||||||
|
<g fill="none" fill-rule="evenodd">
|
||||||
|
<mask id="b" fill="white">
|
||||||
|
<use xlinkHref="#a"/>
|
||||||
|
</mask>
|
||||||
|
<use fill="#616161" xlinkHref="#a"/>
|
||||||
|
<g transform="translate(16 32)" mask="url(#b)">
|
||||||
|
<path fill="#000000" fill-rule="nonzero" d="M66.0458013,46.1092762 C66.0458013,48.3193105 64.2622787,50.1077029 62.050805,50.1077029 L0.174089069,50.1077029 L0.174089069,6.16868499 C0.174089069,2.85738806 2.85846845,0.174657534 6.17268563,0.174657534 L66.0458013,0.174657534 L66.0458013,46.1092762 Z"/>
|
||||||
|
<g fill-rule="nonzero" stroke-width=".5" transform="translate(19.96 15.27)">
|
||||||
|
<ellipse cx="7.045" cy="7.048" fill="#FF5E55" stroke="#E0443E" rx="7.045" ry="7.048"/>
|
||||||
|
<ellipse cx="30.526" cy="7.048" fill="#FFC02C" stroke="#DEA123" rx="7.045" ry="7.048"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
Loading…
Reference in New Issue