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