From 3dc437b5e0b62f52618d21fab2b8196d18ed90a5 Mon Sep 17 00:00:00 2001
From: David Sehnal <david.sehnal@gmail.com>
Date: Fri, 30 Nov 2018 22:54:30 +0100
Subject: [PATCH] mol-plugin: ColorControl
---
src/mol-plugin/ui/controls/parameters.tsx | 27 ++++++++++++++++-------
1 file changed, 19 insertions(+), 8 deletions(-)
diff --git a/src/mol-plugin/ui/controls/parameters.tsx b/src/mol-plugin/ui/controls/parameters.tsx
index 0d2d836a3..f7399b0bb 100644
--- a/src/mol-plugin/ui/controls/parameters.tsx
+++ b/src/mol-plugin/ui/controls/parameters.tsx
@@ -246,11 +246,25 @@ export class ColorControl extends SimpleParam<PD.Color> {
this.update(Color(parseInt(e.target.value)));
}
+ stripStyle(): React.CSSProperties {
+ return {
+ background: Color.toStyle(this.props.value),
+ position: 'absolute',
+ bottom: '0',
+ height: '4px',
+ right: '0',
+ left: '0'
+ };
+ }
+
renderControl() {
- return <select value={this.props.value} onChange={this.onChange} style={{ borderLeft: `16px solid ${Color.toStyle(this.props.value)}` }}>
- {ColorValueOption(this.props.value)}
- {ColorOptions()}
- </select>;
+ return <div style={{ position: 'relative' }}>
+ <select value={this.props.value} onChange={this.onChange}>
+ {ColorValueOption(this.props.value)}
+ {ColorOptions()}
+ </select>
+ <div style={this.stripStyle()} />
+ </div>;
}
}
@@ -273,10 +287,7 @@ export class ColorScaleControl extends SimpleParam<PD.ColorScale<any>> {
renderControl() {
return <div style={{ position: 'relative' }}>
<select value={this.props.value || ''} onChange={this.onChange} disabled={this.props.isDisabled}>
- {this.props.param.options.map(([value, label]) =>
- <option key={value} value={value}>
- {label}
- </option>)}
+ {this.props.param.options.map(([value, label]) => <option key={value} value={value}>{label}</option>)}
</select>
<div style={this.stripStyle()} />
</div>;
--
GitLab