Chrome Pointers + Hue Custom Pointer!

casesandberg · Aug 12, 2015 · 0d26cb6 · 0d26cb6
1 parent ee8294b
commit 0d26cb6
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 22 deletions.
diff --git a/src/components/chrome/Chrome.jsx b/src/components/chrome/Chrome.jsx
@@ -9,6 +9,8 @@ var Hue = require('../common/Hue');
 var Alpha = require('../common/Alpha');
 var Checkboard = require('../common/Checkboard');
 var ChromeFields = require('./ChromeFields');
+var ChromePointer = require('./ChromePointer');
+var ChromePointerCircle = require('./ChromePointerCircle');
 
 class Chrome extends ReactCSS.Component {
 
@@ -35,9 +37,10 @@ class Chrome extends ReactCSS.Component {
           paddingBottom: '55%',
           position: 'relative',
           borderRadius: '2px 2px 0 0',
-          overflow: 'hidden',
         },
-
+        Saturation: {
+          radius: '2px 2px 0 0',
+        },
         body: {
           padding: '16px 16px 12px',
         },
@@ -76,7 +79,6 @@ class Chrome extends ReactCSS.Component {
         alpha: {
           height: '10px',
           position: 'relative',
-          overflow: 'hidden',
         },
         Alpha: {
           radius: '2px',
@@ -93,7 +95,7 @@ class Chrome extends ReactCSS.Component {
     return (
       <div is="picker">
         <div is="saturation">
-          <Saturation is="Saturation" {...this.props} onChange={ this.handleChange }/>
+          <Saturation is="Saturation" {...this.props} pointer={ ChromePointerCircle } onChange={ this.handleChange }/>
         </div>
         <div is="body">
           <div is="controls">
@@ -105,10 +107,10 @@ class Chrome extends ReactCSS.Component {
             </div>
             <div is="toggles">
               <div is="hue">
-                <Hue is="Hue" value={ this.props.h } onChange={ this.handleChange } />
+                <Hue is="Hue" value={ this.props.h } pointer={ ChromePointer } onChange={ this.handleChange } />
               </div>
               <div is="alpha">
-                <Alpha is="Alpha" {...this.props} onChange={ this.handleChange } />
+                <Alpha is="Alpha" {...this.props} pointer={ ChromePointer } onChange={ this.handleChange } />
               </div>
             </div>
           </div>

diff --git a/src/components/chrome/ChromeFields.jsx b/src/components/chrome/ChromeFields.jsx
@@ -92,11 +92,11 @@ class ChromeFields extends ReactCSS.Component {
   }
 
   componentDidMount() {
-    // if (this.props.a === 100 && this.state.view !== 'hex') {
-    //   this.setState({ view: 'hex' });
-    // } else if (this.state.view !== 'rgb' && this.state.view !== 'hsl') {
-    //   this.setState({ view: 'rgb' });
-    // }
+    if (this.props.a === 100 && this.state.view !== 'hex') {
+      this.setState({ view: 'hex' });
+    } else if (this.state.view !== 'rgb' && this.state.view !== 'hsl') {
+      this.setState({ view: 'rgb' });
+    }
   }
 
   toggleViews() {
@@ -105,7 +105,11 @@ class ChromeFields extends ReactCSS.Component {
     } else if (this.state.view === 'rgb') {
       this.setState({ view: 'hsl' });
     } else if (this.state.view === 'hsl') {
-      this.setState({ view: 'hex' });
+      if (this.props.a === 100) {
+        this.setState({ view: 'hex' });
+      } else {
+        this.setState({ view: 'rgb' });
+      }
     }
   }
 
@@ -179,16 +183,16 @@ class ChromeFields extends ReactCSS.Component {
     } else if (this.state.view === 'hsl') {
       fields = <div is="fields">
         <div is="field">
-          <EditableInput is="Input" label="h" value={ this.props.h } onChange={ this.handleChange } />
+          <EditableInput is="Input" label="h" value={ Math.round(this.props.h) } onChange={ this.handleChange } />
         </div>
         <div is="field">
-          <EditableInput is="Input" label="s" value={ this.props.s + '%' } onChange={ this.handleChange } />
+          <EditableInput is="Input" label="s" value={ Math.round(this.props.s) + '%' } onChange={ this.handleChange } />
         </div>
         <div is="field">
-          <EditableInput is="Input" label="l" value={ this.props.l + '%' } onChange={ this.handleChange } />
+          <EditableInput is="Input" label="l" value={ Math.round(this.props.l) + '%' } onChange={ this.handleChange } />
         </div>
         <div is="field">
-          <EditableInput is="Input" label="a" value={ this.props.a / 100 } />
+          <EditableInput is="Input" label="a" value={ this.props.a / 100 } onChange={ this.handleChange } />
         </div>
       </div>;
     }

diff --git a/src/components/chrome/ChromePointer.jsx b/src/components/chrome/ChromePointer.jsx
@@ -0,0 +1,31 @@
+'use strict';
+
+var React = require('react');
+var ReactCSS = require('reactcss');
+
+class ChromePointer extends ReactCSS.Component {
+
+  classes() {
+    return {
+      'default': {
+        picker: {
+          width: '12px',
+          height: '12px',
+          borderRadius: '6px',
+          transform: 'translate(-6px, -1px)',
+          backgroundColor: 'rgb(248, 248, 248)',
+          boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',
+        },
+      },
+    };
+  }
+
+  render() {
+    return (
+      <div is="picker"></div>
+    );
+  }
+
+}
+
+module.exports = ChromePointer;
diff --git a/src/components/chrome/ChromePointerCircle.jsx b/src/components/chrome/ChromePointerCircle.jsx
@@ -0,0 +1,30 @@
+'use strict';
+
+var React = require('react');
+var ReactCSS = require('reactcss');
+
+class ChromePointerCircle extends ReactCSS.Component {
+
+  classes() {
+    return {
+      'default': {
+        picker: {
+          width: '12px',
+          height: '12px',
+          borderRadius: '6px',
+          boxShadow: 'inset 0 0 0 1px #fff',
+          transform: 'translate(-6px, -6px)',
+        },
+      },
+    };
+  }
+
+  render() {
+    return (
+      <div is="picker"></div>
+    );
+  }
+
+}
+
+module.exports = ChromePointerCircle;
diff --git a/src/components/common/Alpha.jsx b/src/components/common/Alpha.jsx
@@ -22,6 +22,10 @@ class Alpha extends ReactCSS.Component {
           Absolute: '0 0 0 0',
           borderRadius: this.props.radius,
         },
+        checkboard: {
+          Absolute: '0 0 0 0',
+          overflow: 'hidden',
+        },
         gradient: {
           Absolute: '0 0 0 0',
           background: 'linear-gradient(to right, rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', 0) 0%, rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', 1) 100%)',
@@ -34,15 +38,17 @@ class Alpha extends ReactCSS.Component {
           height: '100%',
           margin: '0 3px',
         },
+        pointer: {
+          zIndex: '2',
+          position: 'absolute',
+          left: this.props.a + '%',
+        },
         slider: {
           width: '4px',
           borderRadius: '1px',
           height: '8px',
           boxShadow: '0 0 2px rgba(0, 0, 0, .6)',
           background: '#fff',
-          zIndex: '2',
-          position: 'absolute',
-          left: this.props.a + '%',
           top: '1px',
           transform: 'translateX(-2px)',
         },
@@ -63,12 +69,22 @@ class Alpha extends ReactCSS.Component {
   }
 
   render() {
+    var pointer = <div is="slider" />;
+
+    if (this.props.pointer) {
+      pointer = <this.props.pointer {...this.props} />;
+    }
+
     return (
       <div is="alpha">
-        <Checkboard />
+        <div is="checkboard">
+          <Checkboard />
+        </div>
         <div is="gradient" />
         <div is="container" ref="container" onMouseDown={ this.handleChange }>
-          <div is="slider" draggable onDrag={ this.handleChange }/>
+          <div is="pointer" draggable onDrag={ this.handleChange }>
+            { pointer }
+          </div>
         </div>
       </div>
     );

diff --git a/src/components/common/Hue.jsx b/src/components/common/Hue.jsx
@@ -29,9 +29,9 @@ class Hue extends ReactCSS.Component {
           zIndex: '2',
           position: 'absolute',
           left: (this.props.value * 100) / 360 + '%',
-          top: '1px',
         },
         slider: {
+          top: '1px',
           width: '4px',
           borderRadius: '1px',
           height: '8px',