Skip to content

Commit 3492c14

Browse files
dmt0dmt0
authored
Merge pull request #642 from plotly/colorpicker-nopopover
color picker inline
2 parents 13cfa03 + f8a7cad commit 3492c14

File tree

8 files changed

+65
-133
lines changed

8 files changed

+65
-133
lines changed

‎src/components/fields/MarkerColor.js‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -110,23 +110,21 @@ class UnconnectedMarkerColor extends Component {
110110
renderConstantControls() {
111111
const _ = this.context.localize;
112112
return (
113-
<div className="markercolor-constantcontrols__container">
114-
<MultiColorPicker
115-
attr="marker.color"
116-
multiColorMessage={_(
117-
'Each trace will be colored according to the selected colorscale.'
118-
)}
119-
singleColorMessage={_(
120-
'All traces will be colored in the the same color.'
121-
)}
122-
setColor={this.setColor}
123-
setColorScale={this.setColorScale}
124-
onConstantColorOptionChange={this.onConstantColorOptionChange}
125-
parentSelectedConstantColorOption={
126-
this.state.selectedConstantColorOption
127-
}
128-
/>
129-
</div>
113+
<MultiColorPicker
114+
attr="marker.color"
115+
multiColorMessage={_(
116+
'Each trace will be colored according to the selected colorscale.'
117+
)}
118+
singleColorMessage={_(
119+
'All traces will be colored in the the same color.'
120+
)}
121+
setColor={this.setColor}
122+
setColorScale={this.setColorScale}
123+
onConstantColorOptionChange={this.onConstantColorOptionChange}
124+
parentSelectedConstantColorOption={
125+
this.state.selectedConstantColorOption
126+
}
127+
/>
130128
);
131129
}
132130

‎src/components/widgets/ColorPicker.js‎

Lines changed: 32 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,9 @@
11
import Fields from 'react-color/lib/components/sketch/SketchFields';
2-
import PresetColors from 'react-color/lib/components/sketch/SketchPresetColors';
3-
import React, {Component} from 'react';
2+
import React, {Component, Fragment} from 'react';
43
import PropTypes from 'prop-types';
54
import tinycolor from 'tinycolor2';
6-
import {
7-
Alpha,
8-
Hue,
9-
Saturation,
10-
Checkboard,
11-
} from 'react-color/lib/components/common';
5+
import {Hue, Saturation} from 'react-color/lib/components/common';
126
import {CustomPicker as customPicker} from 'react-color';
13-
import {DEFAULT_COLORS} from 'lib/constants';
147

158
// Utility functions for converting ColorPicker color objects or raw strings
169
// into TinyColor objects.
@@ -20,55 +13,28 @@ const toTinyColor = c => tinycolor(getColorSource(c));
2013

2114
class Custom extends Component {
2215
render() {
23-
const {rgb, onChangeComplete} = this.props;
24-
const {r, g, b, a} = rgb;
25-
26-
const activeColor = {
27-
backgroundColor: `rgba(${r}, ${g}, ${b}, ${a})`,
28-
};
29-
30-
const _ = this.context.localize;
16+
const {onChangeComplete} = this.props;
3117

3218
return (
33-
<div>
34-
<div>
35-
<p className="colorpicker__title">{_('Custom Color')}</p>
36-
<div className="colorpicker__saturation">
37-
<Saturation {...this.props} />
38-
</div>
39-
<div className="colorpicker__controls +flex">
40-
<div className="colorpicker__sliders">
41-
<div className="colorpicker__slider">
42-
<Hue {...this.props} />
43-
</div>
44-
<div className="colorpicker__slider">
45-
<Alpha {...this.props} />
46-
</div>
47-
</div>
48-
<div className="colorpicker__active">
49-
<Checkboard />
50-
<div style={activeColor} className="colorpicker__active-swatch" />
19+
<div className="colorpicker__outer">
20+
<div className="colorpicker__controls +flex">
21+
<div className="colorpicker__sliders">
22+
<div className="colorpicker__slider">
23+
<Hue {...this.props} />
5124
</div>
5225
</div>
53-
<div className="colorpicker__custom-input">
54-
<Fields {...this.props} onChange={onChangeComplete} />
55-
</div>
5626
</div>
57-
<div>
58-
<p className="colorpicker__title">{_('Default Colors')}</p>
59-
<div className="colorpicker__preset-colors">
60-
<PresetColors colors={DEFAULT_COLORS} onClick={onChangeComplete} />
61-
</div>
27+
<div className="colorpicker__saturation">
28+
<Saturation {...this.props} />
29+
</div>
30+
<div className="colorpicker__custom-input">
31+
<Fields {...this.props} onChange={onChangeComplete} />
6232
</div>
6333
</div>
6434
);
6535
}
6636
}
6737

68-
Custom.contextTypes = {
69-
localize: PropTypes.func,
70-
};
71-
7238
Custom.propTypes = {
7339
rgb: PropTypes.object,
7440
onChangeComplete: PropTypes.func,
@@ -120,32 +86,31 @@ class ColorPicker extends Component {
12086
const swatchStyle = {backgroundColor: rgbString};
12187

12288
return (
123-
<div className="colorpicker__container">
124-
<div className="colorpicker">
89+
<Fragment>
90+
<div className="colorpicker__container">
91+
<div className="colorpicker">
92+
<div
93+
className="colorpicker__swatch +cursor-clickable"
94+
style={swatchStyle}
95+
onClick={this.toggleVisible}
96+
/>
97+
</div>
98+
12599
<div
126-
className="colorpicker__swatch +cursor-clickable"
127-
style={swatchStyle}
100+
className="colorpicker__selected-color +hover-grey"
128101
onClick={this.toggleVisible}
129-
/>
130-
</div>
131-
132-
<div
133-
className="colorpicker__selected-color +hover-grey"
134-
onClick={this.toggleVisible}
135-
>
136-
{colorText}
102+
>
103+
{colorText}
104+
</div>
137105
</div>
138106

139107
{this.state.isVisible && (
140-
<div className="colorpicker__popover">
141-
<div className="colorpicker__cover" onClick={this.toggleVisible} />
142-
<CustomColorPicker
143-
color={rgbString}
144-
onChangeComplete={this.onSelectedColorChange}
145-
/>
146-
</div>
108+
<CustomColorPicker
109+
color={rgbString}
110+
onChangeComplete={this.onSelectedColorChange}
111+
/>
147112
)}
148-
</div>
113+
</Fragment>
149114
);
150115
}
151116
}

‎src/components/widgets/ColorscalePicker.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ class Scale extends Component {
4444
const _ = this.context.localize;
4545

4646
return (
47-
<Fragment>
47+
<div className="customPickerContainer__outer">
4848
<Colorscale colorscale={selected} onClick={this.onClick} />
4949

5050
{showColorscalePicker ? (
@@ -73,7 +73,7 @@ class Scale extends Component {
7373
) : null}
7474
</div>
7575
) : null}
76-
</Fragment>
76+
</div>
7777
);
7878
}
7979
}

‎src/styles/components/fields/_field.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
&__widget {
2424
display: flex;
2525
flex-wrap: wrap;
26+
flex-basis: 0;
2627
padding-right: var(--spacing-half-unit);
2728
padding-left: var(--spacing-half-unit);
2829
align-self: center;

‎src/styles/components/fields/_main.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,2 @@
11
@import 'field';
22
@import 'symbolselector';
3-
@import 'markercolor';

‎src/styles/components/fields/_markercolor.scss‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎src/styles/components/widgets/_colorpicker.scss‎

Lines changed: 7 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
$swatch-size: 20px;
2-
$colorpicker-width: 250px;
3-
$saturation-picker-height: 160px;
2+
$saturation-picker-height: 100px;
43
$slider-picker-height: 10px;
4+
$colorpicker-width: 185px;
55

66
%colorpicker__component {
77
position: relative;
88
overflow: hidden;
9-
margin: 0 var(--spacing-half-unit);
109
border: var(--border-default);
1110
border-radius: var(--border-radius-small);
1211
cursor: pointer;
@@ -21,32 +20,15 @@ $slider-picker-height: 10px;
2120
border: var(--border-default);
2221
padding: var(--spacing-eighth-unit);
2322

24-
&__popover {
25-
left: -60px;
26-
position: absolute;
27-
top: 100%;
28-
margin: var(--spacing-quarter-unit) 0 var(--spacing-base-unit);
23+
&__outer {
2924
width: $colorpicker-width;
30-
background-color: var(--color-background-top);
31-
border-radius: var(--border-radius);
32-
box-shadow: var(--box-shadow-base);
33-
border: var(--border-default);
34-
@include z-index('cloud');
3525
}
36-
&__cover {
37-
position: fixed;
38-
top: 0;
39-
right: 0;
40-
bottom: 0;
41-
left: 0;
42-
@include z-index('underground');
43-
}
44-
4526
&__container {
4627
display: flex;
4728
align-items: center;
4829
line-height: 2;
4930
position: relative;
31+
width: $colorpicker-width;
5032
}
5133
&__selected-color {
5234
margin-left: var(--spacing-half-unit);
@@ -70,7 +52,7 @@ $slider-picker-height: 10px;
7052
height: $saturation-picker-height;
7153
}
7254
&__custom-input {
73-
padding: var(--spacing-quarter-unit) var(--spacing-half-unit);
55+
padding-top: var(--spacing-eighth-unit);
7456
input {
7557
border: var(--border-default) !important;
7658
box-shadow: none !important;
@@ -84,16 +66,14 @@ $slider-picker-height: 10px;
8466

8567
/* Wrapper style for Hue and Alpha sliders and swatch */
8668
&__controls {
87-
margin: 0 var(--spacing-half-unit);
88-
8969
.colorpicker__sliders {
90-
width: 200px;
70+
width: 100%;
9171

9272
.colorpicker__slider {
9373
@extend %colorpicker__component;
9474
margin: auto 0;
9575
height: $slider-picker-height;
96-
margin-top: var(--spacing-eighth-unit);
76+
margin: var(--spacing-eighth-unit) 0;
9777
}
9878
}
9979

@@ -114,19 +94,4 @@ $slider-picker-height: 10px;
11494
}
11595
}
11696
}
117-
118-
&__preset-colors {
119-
margin: 0 var(--spacing-half-unit);
120-
& > div {
121-
border-top: var(--border-light) !important; // inline style override
122-
padding: var(--spacing-half-unit) !important;
123-
padding-bottom: var(--spacing-quarter-unit) !important;
124-
}
125-
}
126-
&__title {
127-
margin: var(--spacing-eighth-unit) var(--spacing-half-unit);
128-
font-size: var(--font-size-medium);
129-
font-weight: var(--font-weight-semibold);
130-
color: var(--color-text-section-header);
131-
}
13297
}

‎src/styles/components/widgets/_colorscalepicker.scss‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
$colorscalepicker-width: 215px;
2+
13
.colorscalePickerContainer {
2-
min-width: 215px;
4+
min-width: $colorscalepicker-width;
35
position: relative;
46
padding: 0;
57
resize: none;
@@ -25,4 +27,9 @@
2527

2628
.customPickerContainer {
2729
margin-top: var(--spacing-quarter-unit);
30+
31+
&__outer {
32+
width: $colorscalepicker-width;
33+
text-align: center;
34+
}
2835
}

0 commit comments

Comments
 (0)