more sliders (#390)

Author: nicolaskruchten

src/components/widgets/EditableText.js

@@ -57,6 +57,7 @@ class EditableText extends Component {
       autoFocus,
       onKeyDown,
       placeholder,
+      onWheel,
       readOnly,
       size,
     } = this.props;
@@ -73,6 +74,7 @@ class EditableText extends Component {
         autoFocus={autoFocus}
         onKeyPress={this.handleKeyPress}
         onKeyDown={onKeyDown}
+        onWheel={onWheel}
         placeholder={placeholder}
         readOnly={readOnly}
         size={size}
@@ -91,6 +93,7 @@ EditableText.propTypes = {
   // Called on input keyDown events
   onKeyDown: PropTypes.func,
 
+  onWheel: PropTypes.func,
   // Input value property ...
   text: PropTypes.any,
 

src/components/widgets/NumericInput.js

@@ -16,6 +16,7 @@ export default class NumericInput extends Component {
     this.onChange = this.onChange.bind(this);
     this.updateValue = this.updateValue.bind(this);
     this.onKeyDown = this.onKeyDown.bind(this);
+    this.onWheel = this.onWheel.bind(this);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -37,6 +38,15 @@ export default class NumericInput extends Component {
     }
   }
 
+  onWheel(e) {
+    if (e.deltaY > 0) {
+      this.incrementValue('increase');
+    } else {
+      this.incrementValue('decrease');
+    }
+    e.stopPropagation();
+  }
+
   onChange(value) {
     this.setState({value});
   }
@@ -145,6 +155,7 @@ export default class NumericInput extends Component {
           onChange={this.onChange}
           onUpdate={this.updateValue}
           onKeyDown={this.onKeyDown}
+          onWheel={this.onWheel}
         />
         {this.renderArrows()}
         {this.renderSlider()}

src/default_panels/StyleColorbarsPanel.js

@@ -70,7 +70,12 @@ const StyleColorBarsPanel = ({localize: _}) => (
           />
         </Section>
         <Section name={_('Horizontal Positioning')} attr="colorbar.x">
-          <Numeric label={_('Horizontal Position')} attr="colorbar.x" />
+          <Numeric
+            label={_('Horizontal Position')}
+            attr="colorbar.x"
+            showSlider
+            step={0.02}
+          />
 
           <Dropdown
             label={_('Positioning Anchor')}
@@ -83,7 +88,12 @@ const StyleColorBarsPanel = ({localize: _}) => (
           />
         </Section>
         <Section name={_('Vertical Positioning')} attr="colorbar.y">
-          <Numeric label={_('Vertical Position')} attr="colorbar.y" />
+          <Numeric
+            label={_('Vertical Position')}
+            attr="colorbar.y"
+            showSlider
+            step={0.02}
+          />
 
           <Dropdown
             label={_('Positioning Anchor')}

src/default_panels/StyleLegendPanel.js

@@ -69,15 +69,15 @@ const StyleLegendPanel = ({localize: _}) => (
         </MenuPanel>
         <Numeric
           label={_('X Position')}
-          step={0.01}
+          showSlider
+          step={0.02}
           attr="legend.x"
-          units="px"
         />
         <Numeric
           label={_('Y Position')}
-          step={0.01}
+          showSlider
+          step={0.02}
           attr="legend.y"
-          units="px"
         />
       </Section>
       <Section name={_('Orientation')}>

src/default_panels/StyleShapesPanel.js

@@ -7,6 +7,7 @@ import {
   PositioningRef,
   PositioningNumeric,
   Numeric,
+  NumericFraction,
   ColorPicker,
   LineDashSelector,
 } from '../components';
@@ -49,7 +50,7 @@ const StyleShapesPanel = ({localize: _}) => (
     </Section>
     <Section name={_('Fill')}>
       <ColorPicker label={_('Color')} attr="fillcolor" />
-      <Numeric label={_('Opacity')} step={0.1} attr="opacity" />
+      <NumericFraction label={_('Opacity')} attr="opacity" />
     </Section>
   </ShapeAccordion>
 );

src/default_panels/StyleTracesPanel.js

@@ -40,7 +40,7 @@ const StyleTracesPanel = ({localize: _}) => (
       ]}
     />
 
-    <Numeric label={_('Opacity')} step={0.1} attr="opacity" />
+    <NumericFraction label={_('Opacity')} attr="opacity" />
     <ColorPicker label={_('Color')} attr="color" />
 
     <Section name={_('Text Attributes')}>
@@ -135,7 +135,7 @@ const StyleTracesPanel = ({localize: _}) => (
       />
       <ColorscalePicker label={_('Colorscale')} attr="marker.colorscale" />
       <ColorPicker label={_('Color')} attr="marker.color" />
-      <Numeric label={_('Opacity')} step={0.1} attr="marker.opacity" />
+      <NumericFraction label={_('Opacity')} attr="marker.opacity" />
       <Numeric label={_('Size')} attr="marker.size" />
       <SymbolSelector label={_('Symbol')} attr="marker.symbol" />
       <Numeric label={_('Border Width')} attr="marker.line.width" />