Skip to content
Snippets Groups Projects
Commit 65b52fae authored by Kyle Doherty's avatar Kyle Doherty Committed by GitHub
Browse files

more generic color picker and collection colors (#4051) 

* more generic color picker and collection colors

* use color picker for chart settings colors
parent 832cdb87
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/metabase/components/ColorPicker.jsx
+ 50
− 38
View file @ 65b52fae
import React, { Component } from "react";
import React, { Component, PropTypes } from "react";
import Icon from "metabase/components/Icon";
import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
import { normal, saturated, desaturated } from "metabase/lib/colors";
import { normal } from "metabase/lib/colors";
const COLORS = [
...Object.values(normal),
...Object.values(saturated),
...Object.values(desaturated),
];
const DEFAULT_COLOR_SQUARE_SIZE = 32;
const COLOR_SQUARE_SIZE = 32;
const COLOR_SQUARE = {
width: COLOR_SQUARE_SIZE,
height: COLOR_SQUARE_SIZE
};
const ColorSquare = ({ color }) =>
const ColorSquare = ({ color, size }) =>
<div style={{
...COLOR_SQUARE,
width: size,
height: size,
backgroundColor: color,
borderRadius: 4
borderRadius: size / 8
}}></div>
class ColorPicker extends Component {
static defaultProps = {
colors: [...Object.values(normal)],
size: DEFAULT_COLOR_SQUARE_SIZE,
triggerSize: DEFAULT_COLOR_SQUARE_SIZE,
padding: 4
}
static propTypes = {
colors: PropTypes.array,
onChange: PropTypes.func.isRequired,
size: PropTypes.number,
triggerSize: PropTypes.number,
value: PropTypes.string
}
render () {
const { value, onChange } = this.props;
const { colors, onChange, padding, size, triggerSize, value } = this.props;
return (
<div className="inline-block">
<PopoverWithTrigger
ref="colorPopover"
triggerElement={
<div className="bordered p1 rounded flex align-center">
<ColorSquare color={value} />
<Icon
className="ml1"
name="chevrondown"
/>
<div
className="bordered rounded flex align-center"
style={{ padding: triggerSize / 4 }}
>
<ColorSquare color={value} size={triggerSize} />
</div>
}
>
<ol className="flex p1">
{ COLORS.map((color, index) =>
<li
className="cursor-pointer mr1 mb1"
key={index}
onClick={() => {
onChange(color);
this.refs.colorPopover.close();
}}
>
<ColorSquare color={color} />
</li>
)}
</ol>
<div className="p1">
<ol
className="flex flex-wrap"
style={{
maxWidth: 120
}}
>
{ colors.map((color, index) =>
<li
className="cursor-pointer"
style={{ padding }}
key={index}
onClick={() => {
onChange(color);
this.refs.colorPopover.close();
}}
>
<ColorSquare color={color} size={size} />
</li>
)}
</ol>
</div>
</PopoverWithTrigger>
</div>
);
......
frontend/src/metabase/questions/containers/CollectionEditorForm.jsx
+ 17
− 1
View file @ 65b52fae
......@@ -8,6 +8,16 @@ import Modal from "metabase/components/Modal";
import { reduxForm } from "redux-form";
import { normal } from "metabase/lib/colors";
const COLLECTION_COLORS = [
...Object.values(normal),
'#F1B556',
'#A6E7F3',
'#7172AD',
'#7B8797',
];
@reduxForm({
form: 'collection',
fields: ['id', 'name', 'description', 'color'],
......@@ -23,7 +33,12 @@ import { reduxForm } from "redux-form";
}
return errors;
},
initialValues: { name: "", description: "", color: "#509EE3" }
initialValues: {
name: "",
description: "",
// pick a random color to start so everything isn't blue all the time
color: COLLECTION_COLORS[Math.floor(Math.random() * COLLECTION_COLORS.length)]
}
})
export default class CollectionEditorForm extends Component {
render() {
......@@ -71,6 +86,7 @@ export default class CollectionEditorForm extends Component {
>
<ColorPicker
{...fields.color}
colors={COLLECTION_COLORS}
/>
</FormField>
</div>
......
frontend/src/metabase/visualizations/components/settings/ChartSettingColorPicker.jsx
+ 4
− 37
View file @ 65b52fae
import React, { Component, PropTypes } from "react";
import { normal } from 'metabase/lib/colors'
const DEFAULT_COLOR_HARMONY = Object.values(normal);
import PopoverWithTrigger from "metabase/components/PopoverWithTrigger.jsx";
import ColorPicker from "metabase/components/ColorPicker";
export default class ChartSettingColorPicker extends Component {
render() {
const { value, onChange, title } = this.props;
return (
<div className="flex align-center">
<PopoverWithTrigger
ref="colorPopover"
hasArrow={false}
tetherOptions={{
attachment: 'middle left',
targetAttachment: 'middle right',
targetOffset: '0 0',
constraints: [{ to: 'window', attachment: 'together', pin: ['left', 'right']}]
}}
triggerElement={
<span className="ml1 mr2 bordered inline-block cursor-pointer" style={{ padding: 4, borderRadius: 3 }}>
<div style={{ width: 15, height: 15, backgroundColor: value }} />
</span>
}
>
<ol className="p1">
{DEFAULT_COLOR_HARMONY.map((color, colorIndex) =>
<li
key={colorIndex}
className="CardSettings-colorBlock"
style={{ backgroundColor: color }}
onClick={() => {
onChange(color);
this.refs.colorPopover.close();
}}
></li>
)}
</ol>
</PopoverWithTrigger>
<span className="text-bold">{title}</span>
<div className="flex align-center mb1">
<ColorPicker {...this.props} triggerSize={12} />
{this.props.title && <h4 className="ml1">{this.props.title}</h4>}
</div>
);
}
......
frontend/src/metabase/visualizations/components/settings/ChartSettingColorsPicker.jsx
+ 8
− 2
View file @ 65b52fae
......@@ -10,9 +10,15 @@ export default class ChartSettingColorsPicker extends Component {
{ seriesTitles.map((title, index) =>
<ChartSettingColorPicker
key={index}
value={value[index]}
onChange={(color) => onChange([...value.slice(0, index), color, ...value.slice(index + 1)])}
onChange={color =>
onChange([
...value.slice(0, index),
color,
...value.slice(index + 1)
])
}
title={title}
value={value[index]}
/>
)}
</div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment