Merge pull request #249 from fsih/widthWidth

Set a width on stroke width, brush and eraser width inputs

src/components/forms/input.css

@@ -2,6 +2,10 @@
 @todo This file is copied from GUI and should be pulled out into a shared library.
 See https://github.com/LLK/scratch-paint/issues/13 */
 
+/* NOTE:
+Edited to add input-range-small
+*/
+
 @import "../../css/units.css";
 @import "../../css/colors.css";
 
@@ -44,3 +48,8 @@ See https://github.com/LLK/scratch-paint/issues/13 */
     width: 3rem; 
     text-align: center;
 }
+
+.input-small-range {
+    width: 3.75rem;
+    text-align: center;
+}

src/components/forms/input.jsx

@@ -2,6 +2,10 @@
 @todo This file is copied from GUI and should be pulled out into a shared library.
 See https://github.com/LLK/scratch-paint/issues/13 */
 
+/* NOTE:
+Edited to add range prop
+*/
+
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
@@ -9,7 +13,7 @@ import classNames from 'classnames';
 import styles from './input.css';
 
 const Input = props => {
-    const {small, ...componentProps} = props;
+    const {small, range, ...componentProps} = props;
     return (
         <input
             {...componentProps}
@@ -17,7 +21,8 @@ const Input = props => {
                 styles.inputForm,
                 props.className,
                 {
-                    [styles.inputSmall]: small
+                    [styles.inputSmall]: small && !range,
+                    [styles.inputSmallRange]: small && range
                 }
             )}
         />
@@ -26,10 +31,12 @@ const Input = props => {
 
 Input.propTypes = {
     className: PropTypes.string,
+    range: PropTypes.bool,
     small: PropTypes.bool
 };
 
 Input.defaultProps = {
+    range: false,
     small: false
 };
 

src/components/mode-tools/mode-tools.jsx

@@ -84,6 +84,8 @@ const ModeToolsComponent = props => {
                     />
                 </div>
                 <LiveInput
+                    range
+                    small
                     max={MAX_STROKE_WIDTH}
                     min="1"
                     type="number"
@@ -103,6 +105,8 @@ const ModeToolsComponent = props => {
                     />
                 </div>
                 <LiveInput
+                    range
+                    small
                     max={MAX_STROKE_WIDTH}
                     min="1"
                     type="number"

src/components/stroke-width-indicator.jsx

@@ -11,6 +11,8 @@ const LiveInput = LiveInputHOC(Input);
 const StrokeWidthIndicatorComponent = props => (
     <InputGroup disabled={props.disabled}>
         <LiveInput
+            range
+            small
             disabled={props.disabled}
             max={MAX_STROKE_WIDTH}
             min="0"