Skip to content
Snippets Groups Projects
Commit e2b540e2 authored by David Sehnal's avatar David Sehnal
Browse files

mol-plugin: better color picker

parent b658d2a1
No related branches found
No related tags found
No related merge requests found
......@@ -83,14 +83,14 @@
width: 100%;
background: $msp-form-control-background;
color: $font-color;
border: none !important;
border: none; // !important;
padding: 0 $control-spacing;
line-height: $row-height - 2px;
height: $row-height;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none !important;
box-shadow: none; // !important;
&:hover {
color: $hover-font-color;
......
......@@ -161,16 +161,25 @@ export class BoundedIntervalControl extends SimpleParam<PD.Interval> {
}
}
let _colors: React.ReactFragment | undefined = void 0;
function ColorOptions() {
if (_colors) return _colors;
_colors = <>{Object.keys(ColorNames).map(name =>
<option key={name} value={(ColorNames as { [k: string]: Color})[name]} style={{ background: `${Color.toStyle((ColorNames as { [k: string]: Color})[name])}` }} >
{name}
</option>
)}</>;
return _colors;
}
export class ColorControl extends SimpleParam<PD.Color> {
onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
this.update(Color(parseInt(e.target.value)));
}
renderControl() {
return <select value={this.props.value} onChange={this.onChange}>
{Object.keys(ColorNames).map(name => {
return <option key={name} value={(ColorNames as { [k: string]: Color})[name]}>{name}</option>
})}
return <select value={this.props.value} onChange={this.onChange} style={{ borderLeft: `16px solid ${Color.toStyle(this.props.value)}` }}>
{ColorOptions()}
</select>;
}
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment