mirror of https://github.com/sgoudham/carbon.git
Custom themes (#632)
* Custom themes * Fix theme selection * fixes and add more theme highlights * Fix remove bug * change create button hoverBackground * change id format * fixes * remove default highlights, style tweaks * move consturctor to componentDidMount, create constants * simplify color picker style api' * replace notAllowed with disabled * remove itemWrapperProps from Dropdown * create itemWrapper class prop * remove onClose from Dropdown * fix ColorPicker and font sizes * increase specificity of selectormain
Sean
6 years ago
committed by
Michael Fix
parent
f45d133d3c
commit
a1e05af5c0
@ -0,0 +1,402 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
import Dropdown from './Dropdown'
|
||||||
|
import Input from './Input'
|
||||||
|
import Button from './Button'
|
||||||
|
import ListSetting from './ListSetting'
|
||||||
|
import Popout, { managePopout } from './Popout'
|
||||||
|
import ColorPicker from './ColorPicker'
|
||||||
|
import ThemeIcon from './svg/Theme'
|
||||||
|
import RemoveIcon from './svg/Remove'
|
||||||
|
import { THEMES, HIGHLIGHT_KEYS, COLORS, DEFAULT_THEME } from '../lib/constants'
|
||||||
|
import { getThemes, saveThemes, capitalize, stringifyRGBA, generateId } from '../lib/util'
|
||||||
|
|
||||||
|
const colorPickerStyle = {
|
||||||
|
backgroundColor: COLORS.BLACK,
|
||||||
|
padding: 0,
|
||||||
|
margin: '4px'
|
||||||
|
}
|
||||||
|
const colorPresets = []
|
||||||
|
|
||||||
|
const HighlightPicker = ({ title, onChange, color }) => (
|
||||||
|
<div className="color-picker-container">
|
||||||
|
<div className="color-picker-header">
|
||||||
|
<span>{title}</span>
|
||||||
|
</div>
|
||||||
|
<ColorPicker
|
||||||
|
color={color}
|
||||||
|
onChange={onChange}
|
||||||
|
presets={colorPresets}
|
||||||
|
style={colorPickerStyle}
|
||||||
|
/>
|
||||||
|
<style jsx>
|
||||||
|
{`
|
||||||
|
.color-picker-container {
|
||||||
|
width: 218px;
|
||||||
|
border-left: 2px solid ${COLORS.SECONDARY};
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-picker-header {
|
||||||
|
background-color: ${COLORS.BLACK};
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
</style>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
const ThemeCreate = ({
|
||||||
|
theme,
|
||||||
|
themes,
|
||||||
|
highlights,
|
||||||
|
name,
|
||||||
|
preset,
|
||||||
|
selected,
|
||||||
|
createTheme,
|
||||||
|
applyPreset,
|
||||||
|
updateName,
|
||||||
|
selectHighlight,
|
||||||
|
updateHighlight
|
||||||
|
}) => (
|
||||||
|
<Popout pointerLeft="15px" style={{ display: 'flex' }}>
|
||||||
|
<div className="theme-settings">
|
||||||
|
<div className="field name-field">
|
||||||
|
<span>Name</span>
|
||||||
|
<Input
|
||||||
|
title="name"
|
||||||
|
name="name"
|
||||||
|
placeholder="Custom Theme"
|
||||||
|
value={name}
|
||||||
|
onChange={updateName}
|
||||||
|
maxLength="32"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="theme-select">
|
||||||
|
<ListSetting
|
||||||
|
title="Preset"
|
||||||
|
items={themes}
|
||||||
|
selected={preset || theme}
|
||||||
|
onOpen={selectHighlight(null)}
|
||||||
|
onChange={applyPreset}
|
||||||
|
>
|
||||||
|
{({ name }) => <span>{name}</span>}
|
||||||
|
</ListSetting>
|
||||||
|
</div>
|
||||||
|
<div className="theme-colors">
|
||||||
|
{HIGHLIGHT_KEYS.map(key => (
|
||||||
|
<div className="field" key={key}>
|
||||||
|
<Button
|
||||||
|
padding="4px 4px 4px 8px"
|
||||||
|
onClick={selectHighlight(key)}
|
||||||
|
background={selected === key ? COLORS.HOVER : COLORS.BLACK}
|
||||||
|
>
|
||||||
|
<div className="row">
|
||||||
|
<span>{capitalize(key)}</span>
|
||||||
|
<span
|
||||||
|
className="color-square"
|
||||||
|
style={{
|
||||||
|
backgroundColor: highlights[key],
|
||||||
|
boxShadow: `inset 0px 0px 0px ${selected === key ? 2 : 1}px ${COLORS.SECONDARY}`
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
center
|
||||||
|
disabled={!name}
|
||||||
|
className="create-button"
|
||||||
|
padding="8px 0"
|
||||||
|
background={COLORS.SECONDARY}
|
||||||
|
hoverBackground={COLORS.SECONDARY}
|
||||||
|
color={COLORS.BLACK}
|
||||||
|
onClick={createTheme}
|
||||||
|
>
|
||||||
|
Create +
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
{selected && (
|
||||||
|
<HighlightPicker
|
||||||
|
title={capitalize(selected)}
|
||||||
|
color={highlights[selected]}
|
||||||
|
onChange={updateHighlight}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<style jsx>
|
||||||
|
{`
|
||||||
|
.field {
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: solid 1px ${COLORS.SECONDARY};
|
||||||
|
display: flex;
|
||||||
|
height: 35px;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field:nth-last-child(-n + 2) {
|
||||||
|
border-width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name-field {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-select {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-settings {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 224px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-colors {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
border-top: 2px solid ${COLORS.SECONDARY};
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-colors .field {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-colors .field:nth-child(odd) {
|
||||||
|
border-right: 1px solid ${COLORS.SECONDARY};
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-square {
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
</style>
|
||||||
|
</Popout>
|
||||||
|
)
|
||||||
|
|
||||||
|
const ThemeItem = ({ children, item, isSelected, onClick }) => (
|
||||||
|
<div className="theme-item">
|
||||||
|
{children}
|
||||||
|
{item.custom && !isSelected && (
|
||||||
|
<div className="icon" onClick={onClick(item.id)}>
|
||||||
|
<RemoveIcon color={COLORS.SECONDARY} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<style jsx>
|
||||||
|
{`
|
||||||
|
.theme-item {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
justify-content: ${item.id === 'create' ? 'center' : 'space-between'};
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
display: flex;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
</style>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
const themeIcon = <ThemeIcon />
|
||||||
|
|
||||||
|
class Themes extends React.PureComponent {
|
||||||
|
selectedTheme = DEFAULT_THEME
|
||||||
|
|
||||||
|
state = {
|
||||||
|
themes: THEMES,
|
||||||
|
preset: this.props.theme,
|
||||||
|
highlights: {},
|
||||||
|
name: 'Custom Theme',
|
||||||
|
selected: null
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
const storedThemes = getThemes(localStorage) || []
|
||||||
|
|
||||||
|
this.setState(({ themes }) => {
|
||||||
|
const newThemes = [...storedThemes, ...themes]
|
||||||
|
|
||||||
|
const name = `Custom Theme ${newThemes.filter(({ name }) => name.startsWith('Custom Theme'))
|
||||||
|
.length + 1}`
|
||||||
|
|
||||||
|
this.selectedTheme = newThemes.find(({ id }) => id === this.props.theme) || DEFAULT_THEME
|
||||||
|
|
||||||
|
return {
|
||||||
|
themes: newThemes,
|
||||||
|
highlights: this.selectedTheme.highlights,
|
||||||
|
name
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
applyPreset = preset =>
|
||||||
|
this.setState(({ themes }) => ({
|
||||||
|
preset,
|
||||||
|
highlights: themes.find(({ id }) => id === preset).highlights
|
||||||
|
}))
|
||||||
|
|
||||||
|
handleDropdown = ({ id }) => {
|
||||||
|
if (id === 'create') {
|
||||||
|
this.props.toggleVisibility()
|
||||||
|
} else {
|
||||||
|
this.props.updateTheme(id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateName = ({ target: { value: name } }) => this.setState({ name })
|
||||||
|
|
||||||
|
selectHighlight = highlight => () =>
|
||||||
|
this.setState(({ selected }) => ({
|
||||||
|
selected: selected === highlight ? null : highlight
|
||||||
|
}))
|
||||||
|
|
||||||
|
updateHighlight = ({ rgb }) =>
|
||||||
|
this.setState({
|
||||||
|
highlights: {
|
||||||
|
...this.state.highlights,
|
||||||
|
[this.state.selected]: stringifyRGBA(rgb)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
removeTheme = id => event => {
|
||||||
|
event.stopPropagation()
|
||||||
|
|
||||||
|
const { themes } = this.state
|
||||||
|
|
||||||
|
const newThemes = themes.filter(t => t.id !== id)
|
||||||
|
|
||||||
|
saveThemes(localStorage, newThemes.filter(({ custom }) => custom))
|
||||||
|
|
||||||
|
if (this.props.theme === id) {
|
||||||
|
this.props.updateTheme(DEFAULT_THEME.id)
|
||||||
|
} else {
|
||||||
|
this.setState({ themes: newThemes })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
createTheme = () => {
|
||||||
|
const { themes, name, highlights } = this.state
|
||||||
|
|
||||||
|
const id = `theme:${generateId()}`
|
||||||
|
|
||||||
|
const newTheme = {
|
||||||
|
id,
|
||||||
|
name,
|
||||||
|
highlights,
|
||||||
|
custom: true
|
||||||
|
}
|
||||||
|
|
||||||
|
const customThemes = [newTheme, ...themes.filter(({ custom }) => custom)]
|
||||||
|
|
||||||
|
saveThemes(localStorage, customThemes)
|
||||||
|
|
||||||
|
this.props.updateTheme(id)
|
||||||
|
}
|
||||||
|
|
||||||
|
itemWrapper = props => <ThemeItem {...props} onClick={this.removeTheme} />
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { theme, isVisible, toggleVisibility } = this.props
|
||||||
|
const { name, themes, highlights, selected, preset } = this.state
|
||||||
|
|
||||||
|
const dropdownValue = isVisible ? { name } : { id: theme, name: this.selectedTheme.name }
|
||||||
|
|
||||||
|
const dropdownList = [
|
||||||
|
{
|
||||||
|
id: 'create',
|
||||||
|
name: 'Create +'
|
||||||
|
},
|
||||||
|
...themes
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="themes">
|
||||||
|
<Dropdown
|
||||||
|
icon={themeIcon}
|
||||||
|
disableInput={isVisible}
|
||||||
|
inputValue={dropdownValue}
|
||||||
|
selected={dropdownValue}
|
||||||
|
list={dropdownList}
|
||||||
|
itemWrapper={this.itemWrapper}
|
||||||
|
onChange={this.handleDropdown}
|
||||||
|
onOpen={isVisible && toggleVisibility}
|
||||||
|
/>
|
||||||
|
{isVisible && (
|
||||||
|
<ThemeCreate
|
||||||
|
key={theme}
|
||||||
|
preset={preset}
|
||||||
|
name={name}
|
||||||
|
theme={theme}
|
||||||
|
themes={themes}
|
||||||
|
highlights={highlights}
|
||||||
|
selected={selected}
|
||||||
|
applyPreset={this.applyPreset}
|
||||||
|
createTheme={this.createTheme}
|
||||||
|
updateName={this.updateName}
|
||||||
|
selectHighlight={this.selectHighlight}
|
||||||
|
updateHighlight={this.updateHighlight}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<style jsx>
|
||||||
|
{`
|
||||||
|
.themes {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.react-codemirror2 .CodeMirror) {
|
||||||
|
color: ${highlights.text} !important;
|
||||||
|
background-color: ${highlights.background} !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.cm-string),
|
||||||
|
:global(.cm-string-2) {
|
||||||
|
color: ${highlights.string} !important;
|
||||||
|
}
|
||||||
|
:global(.cm-comment) {
|
||||||
|
color: ${highlights.comment} !important;
|
||||||
|
}
|
||||||
|
:global(.cm-variable),
|
||||||
|
:global(.cm-variable-2),
|
||||||
|
:global(.cm-variable-3) {
|
||||||
|
color: ${highlights.variable} !important;
|
||||||
|
}
|
||||||
|
:global(.cm-number) {
|
||||||
|
color: ${highlights.number} !important;
|
||||||
|
}
|
||||||
|
:global(.cm-keyword) {
|
||||||
|
color: ${highlights.keyword} !important;
|
||||||
|
}
|
||||||
|
:global(.cm-property) {
|
||||||
|
color: ${highlights.property} !important;
|
||||||
|
}
|
||||||
|
:global(.cm-def) {
|
||||||
|
color: ${highlights.definition} !important;
|
||||||
|
}
|
||||||
|
:global(.cm-meta) {
|
||||||
|
color: ${highlights.meta} !important;
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
</style>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default managePopout(Themes)
|
||||||
Loading…
Reference in New Issue