added color picker

public/css/app.css

@@ -7,6 +7,7 @@ ul, ol, form                  { margin: 0; padding: 0; }
 ul, ol                        { list-style-type: none; }
 h1                            { margin: 0; padding: 0; }
 h2                            { margin: 0; margin-bottom: 10px; padding: 0; font-weight: normal; font-size: 30px; color: rgba(0, 0, 0, 0.4); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); }
+input                         { border: 1px solid #777; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(255, 255, 255, 0.3); border-radius: 4px; padding: 3px; -webkit-background-clip: padding-box; }
 
 /* =LAYOUT
 ====================================================== */
@@ -45,10 +46,9 @@ h2                            { margin: 0; margin-bottom: 10px; padding: 0; font
 .configuration .size,
 .configuration .border_width  { width: 25px; text-align: right; }
 
-.configuration .color,
-.configuration .border_color  { width: 60px; }
+.configuration .color         { width: 60px; }
 
-.configuration .unit          { font-size: 14px; }
+.configuration .unit          { font-size: 14px; color: rgba(0, 0, 0, 0.4); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);  }
 
 /* result_code */
 .result_code                  { white-space: pre; padding: 10px; float: right; width: 380px; height: 370px; font-size: 12px; font-family: 'Courier new'; font-weight: bold; background: rgba(0, 0, 0, 0.15); border-radius: 4px; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 1px 5px rgba(0, 0, 0, 0.1); }

public/index.html

@@ -38,7 +38,7 @@ <h2>Arrow configuration</h2>
               </li>
               <li>
                 <label>Color</label>
-                <input class='color' />
+                <input class='base_color color {hash:true,caps:false}' />
               </li>
             </ol>
             <ol class='section'>
@@ -49,7 +49,7 @@ <h2>Arrow configuration</h2>
               </li>
               <li>
                 <label>Border color</label>
-                <input class='border_color' />
+                <input class='border_color color {hash:true,caps:false}' />
               </li>
             </ol>
           </div>
@@ -67,6 +67,8 @@ <h2>Arrow configuration</h2>
     </footer>
 
     <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
+    <script type="text/javascript" src="js/vendor/jscolor/jscolor.js"></script>
+
     <script src='js/lib/models/arrow.js'></script>
     <script src='js/lib/views/arrow_configuration_view.js'></script>
     <script src='js/lib/views/arrow_preview_view.js'></script>

public/js/lib/views/arrow_configuration_view.js

@@ -39,7 +39,7 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
 
       container.find('.position').val( model.get('position') );
       container.find('.size').val( model.get('size') );
-      container.find('.color').val( model.get('color') );
+      container.find('.base_color').val( model.get('color') );
       container.find('.border_width').val( model.get('borderWidth') );
       container.find('.border_color').val( model.get('borderColor') );
     },
@@ -54,7 +54,7 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
           container         = this.container,
           selectors         = [ '.position',
                                 '.size',
-                                '.color',
+                                '.base_color',
                                 '.border_width',
                                 '.border_color'
                               ];
@@ -76,6 +76,9 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
       else if (target.hasClass('border_color')) {
         attr = 'borderColor';
       }
+      else if (target.hasClass('base_color')) {
+        attr = 'color';
+      }
       else {
         attr = target.attr('class');
       }

public/js/spec/views/arrow_configuration_view_spec.js

@@ -9,7 +9,7 @@ describe("CSSArrowPlease.ArrowConfigurationView", function () {
                       <option value='left'>left</option>\
                     </select>\
                     <input class='size'>\
-                    <input class='color'>\
+                    <input class='base_color'>\
                     <input class='border_width'>\
                     <input class='border_color'>\
                   </div>";
@@ -36,7 +36,7 @@ describe("CSSArrowPlease.ArrowConfigurationView", function () {
 
       expect( $container.find('.position').val() ).toBe(arrow.get('position'));
       expect( parseInt($container.find('.size').val(), 10) ).toBe(arrow.get('size'));
-      expect( $container.find('.color').val() ).toBe(arrow.get('color'));
+      expect( $container.find('.base_color').val() ).toBe(arrow.get('color'));
       expect( parseInt($container.find('.border_width').val(), 10) ).toBe(arrow.get('borderWidth'));
       expect( $container.find('.border_color').val() ).toBe(arrow.get('borderColor'));
 
@@ -55,7 +55,7 @@ describe("CSSArrowPlease.ArrowConfigurationView", function () {
       });
 
       it('syncs when color is changed', function () {
-        $container.find('.color').val('#0f0').trigger('change');
+        $container.find('.base_color').val('#0f0').trigger('change');
         expect( arrow.get('color') ).toEqual('#0f0');
       });