ソースを参照

Added a background linear gradient to color control parameters

luna215 6 年 前
コミット
a069a74511
1 ファイル変更4 行追加1 行削除
  1. 4 1
      src/mol-plugin/ui/controls/parameters.tsx

+ 4 - 1
src/mol-plugin/ui/controls/parameters.tsx

@@ -248,7 +248,10 @@ export class ColorControl extends SimpleParam<PD.Color> {
     }
 
     renderControl() {
-        return <select value={this.props.value} onChange={this.onChange} style={{ borderLeft: `16px solid ${Color.toStyle(this.props.value)}` }}>
+        let rgb: any[] = Color.toStyle(this.props.value).replace('rgb(', '').split(', ');
+        rgb = rgb.map(c => parseInt(c)); 
+        let secondArg = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.0)`;
+        return <select value={this.props.value} onChange={this.onChange} style={{background: `linear-gradient(90deg, ${Color.toStyle(this.props.value)}, ${secondArg})`}}>
             {ColorValueOption(this.props.value)}
             {ColorOptions()}
         </select>;