From e70bc8b18166188a5e0c3bfef5b754d3c0e81eac Mon Sep 17 00:00:00 2001 From: dmt0 Date: Tue, 7 Aug 2018 10:56:15 -0400 Subject: [PATCH 1/3] color picker to slide out instead of popover --- src/components/fields/MarkerColor.js | 32 +++--- src/components/widgets/ColorPicker.js | 99 ++++++------------- src/components/widgets/ColorscalePicker.js | 4 +- src/styles/components/fields/_main.scss | 1 - .../components/fields/_markercolor.scss | 3 - .../components/widgets/_colorpicker.scss | 49 ++------- .../components/widgets/_colorscalepicker.scss | 8 +- 7 files changed, 63 insertions(+), 133 deletions(-) delete mode 100644 src/styles/components/fields/_markercolor.scss diff --git a/src/components/fields/MarkerColor.js b/src/components/fields/MarkerColor.js index 77a84c744..b1e2018a4 100644 --- a/src/components/fields/MarkerColor.js +++ b/src/components/fields/MarkerColor.js @@ -110,23 +110,21 @@ class UnconnectedMarkerColor extends Component { renderConstantControls() { const _ = this.context.localize; return ( -
- -
+ ); } diff --git a/src/components/widgets/ColorPicker.js b/src/components/widgets/ColorPicker.js index b4d175bb7..84b41d40e 100644 --- a/src/components/widgets/ColorPicker.js +++ b/src/components/widgets/ColorPicker.js @@ -1,16 +1,9 @@ import Fields from 'react-color/lib/components/sketch/SketchFields'; -import PresetColors from 'react-color/lib/components/sketch/SketchPresetColors'; -import React, {Component} from 'react'; +import React, {Component, Fragment} from 'react'; import PropTypes from 'prop-types'; import tinycolor from 'tinycolor2'; -import { - Alpha, - Hue, - Saturation, - Checkboard, -} from 'react-color/lib/components/common'; +import {Hue, Saturation} from 'react-color/lib/components/common'; import {CustomPicker as customPicker} from 'react-color'; -import {DEFAULT_COLORS} from 'lib/constants'; // Utility functions for converting ColorPicker color objects or raw strings // into TinyColor objects. @@ -20,55 +13,28 @@ const toTinyColor = c => tinycolor(getColorSource(c)); class Custom extends Component { render() { - const {rgb, onChangeComplete} = this.props; - const {r, g, b, a} = rgb; - - const activeColor = { - backgroundColor: `rgba(${r}, ${g}, ${b}, ${a})`, - }; - - const _ = this.context.localize; + const {onChangeComplete} = this.props; return ( -
-
-

{_('Custom Color')}

-
- -
-
-
-
- -
-
- -
-
-
- -
+
+
+
+
+
-
- -
-
-

{_('Default Colors')}

-
- -
+
+ +
+
+
); } } -Custom.contextTypes = { - localize: PropTypes.func, -}; - Custom.propTypes = { rgb: PropTypes.object, onChangeComplete: PropTypes.func, @@ -120,32 +86,31 @@ class ColorPicker extends Component { const swatchStyle = {backgroundColor: rgbString}; return ( -
-
+ +
+
+
+
+
-
- -
- {colorText} + > + {colorText} +
{this.state.isVisible && ( -
-
- -
+ )} -
+ ); } } diff --git a/src/components/widgets/ColorscalePicker.js b/src/components/widgets/ColorscalePicker.js index 429a8f500..f95256e15 100644 --- a/src/components/widgets/ColorscalePicker.js +++ b/src/components/widgets/ColorscalePicker.js @@ -44,7 +44,7 @@ class Scale extends Component { const _ = this.context.localize; return ( - +
{showColorscalePicker ? ( @@ -73,7 +73,7 @@ class Scale extends Component { ) : null}
) : null} - +
); } } diff --git a/src/styles/components/fields/_main.scss b/src/styles/components/fields/_main.scss index 2abaf1e4c..3c7187a9b 100644 --- a/src/styles/components/fields/_main.scss +++ b/src/styles/components/fields/_main.scss @@ -1,3 +1,2 @@ @import 'field'; @import 'symbolselector'; -@import 'markercolor'; diff --git a/src/styles/components/fields/_markercolor.scss b/src/styles/components/fields/_markercolor.scss deleted file mode 100644 index 0ab02f03f..000000000 --- a/src/styles/components/fields/_markercolor.scss +++ /dev/null @@ -1,3 +0,0 @@ -.markercolor-constantcontrols__container { - margin-top: var(--spacing-quarter-unit); -} diff --git a/src/styles/components/widgets/_colorpicker.scss b/src/styles/components/widgets/_colorpicker.scss index 522168bfa..6e522ad40 100644 --- a/src/styles/components/widgets/_colorpicker.scss +++ b/src/styles/components/widgets/_colorpicker.scss @@ -1,12 +1,11 @@ $swatch-size: 20px; -$colorpicker-width: 250px; -$saturation-picker-height: 160px; +$saturation-picker-height: 100px; $slider-picker-height: 10px; +$colorpicker-width: 185px; %colorpicker__component { position: relative; overflow: hidden; - margin: 0 var(--spacing-half-unit); border: var(--border-default); border-radius: var(--border-radius-small); cursor: pointer; @@ -21,32 +20,15 @@ $slider-picker-height: 10px; border: var(--border-default); padding: var(--spacing-eighth-unit); - &__popover { - left: -60px; - position: absolute; - top: 100%; - margin: var(--spacing-quarter-unit) 0 var(--spacing-base-unit); + &__outer { width: $colorpicker-width; - background-color: var(--color-background-top); - border-radius: var(--border-radius); - box-shadow: var(--box-shadow-base); - border: var(--border-default); - @include z-index('cloud'); } - &__cover { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - @include z-index('underground'); - } - &__container { display: flex; align-items: center; line-height: 2; position: relative; + width: $colorpicker-width; } &__selected-color { margin-left: var(--spacing-half-unit); @@ -70,7 +52,7 @@ $slider-picker-height: 10px; height: $saturation-picker-height; } &__custom-input { - padding: var(--spacing-quarter-unit) var(--spacing-half-unit); + padding-top: var(--spacing-eighth-unit); input { border: var(--border-default) !important; box-shadow: none !important; @@ -84,16 +66,14 @@ $slider-picker-height: 10px; /* Wrapper style for Hue and Alpha sliders and swatch */ &__controls { - margin: 0 var(--spacing-half-unit); - .colorpicker__sliders { - width: 200px; + width: 100%; .colorpicker__slider { @extend %colorpicker__component; margin: auto 0; height: $slider-picker-height; - margin-top: var(--spacing-eighth-unit); + margin: var(--spacing-eighth-unit) 0; } } @@ -114,19 +94,4 @@ $slider-picker-height: 10px; } } } - - &__preset-colors { - margin: 0 var(--spacing-half-unit); - & > div { - border-top: var(--border-light) !important; // inline style override - padding: var(--spacing-half-unit) !important; - padding-bottom: var(--spacing-quarter-unit) !important; - } - } - &__title { - margin: var(--spacing-eighth-unit) var(--spacing-half-unit); - font-size: var(--font-size-medium); - font-weight: var(--font-weight-semibold); - color: var(--color-text-section-header); - } } diff --git a/src/styles/components/widgets/_colorscalepicker.scss b/src/styles/components/widgets/_colorscalepicker.scss index f931114cc..7822d8b4e 100644 --- a/src/styles/components/widgets/_colorscalepicker.scss +++ b/src/styles/components/widgets/_colorscalepicker.scss @@ -1,5 +1,7 @@ +$colorscalepicker-width: 215px; + .colorscalePickerContainer { - min-width: 215px; + min-width: $colorscalepicker-width; position: relative; padding: 0; resize: none; @@ -25,4 +27,8 @@ .customPickerContainer { margin-top: var(--spacing-quarter-unit); + + &__outer { + width: $colorscalepicker-width; + } } From 4a6ee832d05b777bcbde03f93b15e10757272c4b Mon Sep 17 00:00:00 2001 From: dmt0 Date: Tue, 7 Aug 2018 16:20:40 -0400 Subject: [PATCH 2/3] align all fields with flex-basis --- src/styles/components/fields/_field.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/components/fields/_field.scss b/src/styles/components/fields/_field.scss index 85299f62e..664d38209 100644 --- a/src/styles/components/fields/_field.scss +++ b/src/styles/components/fields/_field.scss @@ -23,6 +23,7 @@ &__widget { display: flex; flex-wrap: wrap; + flex-basis: 0; padding-right: var(--spacing-half-unit); padding-left: var(--spacing-half-unit); align-self: center; From f8a7cad6c454ad04d8682183aaaa30541907684e Mon Sep 17 00:00:00 2001 From: dmt0 Date: Tue, 7 Aug 2018 17:06:58 -0400 Subject: [PATCH 3/3] center coloscalepicker --- src/styles/components/widgets/_colorscalepicker.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/components/widgets/_colorscalepicker.scss b/src/styles/components/widgets/_colorscalepicker.scss index 7822d8b4e..0bfb639c1 100644 --- a/src/styles/components/widgets/_colorscalepicker.scss +++ b/src/styles/components/widgets/_colorscalepicker.scss @@ -30,5 +30,6 @@ $colorscalepicker-width: 215px; &__outer { width: $colorscalepicker-width; + text-align: center; } }