Commit a706d3dacf92c9dc5f8696a9e3c8598de0db7b7c

Authored by Thiago Kenji Okada
Committed by Rafael Manzo
1 parent 18110577

Change colorpicker to use a input button instead of image

Visually is much better and less hacky
app/assets/images/colorpicker.png

1.39 KB

app/views/readings/_form.html.erb
@@ -12,10 +12,9 @@ @@ -12,10 +12,9 @@
12 12
13 <div class="form-group"> 13 <div class="form-group">
14 <%= f.label :color, class: 'control-label' %><br> 14 <%= f.label :color, class: 'control-label' %><br>
15 - <div id="color_div">  
16 - <%= f.text_field :color, class: 'form-control' %>  
17 - <!-- We should use the glyph from bootstrap instead of loading a custom img -->  
18 - <input type="image" id="colorpicker_button" src="/assets/colorpicker.png"</input> 15 + <div class="input-append">
  16 + <%= f.text_field :color, :id => "color-form", class: 'form-control' %>
  17 + <input type="button" class="btn btn-info" value="Pick color" id="pickcolor-button"></input>
19 </div> 18 </div>
20 <script> 19 <script>
21 options = { 20 options = {
@@ -26,10 +25,10 @@ @@ -26,10 +25,10 @@
26 b: 0 25 b: 0
27 }, 26 },
28 onChange: function(colorHSB) { 27 onChange: function(colorHSB) {
29 - $("#color_div").children().val(colorHSB.toHex()); 28 + $("#color-form").val(colorHSB.toHex());
30 } 29 }
31 } 30 }
32 - new ColorPicker($("#colorpicker_button"), options); 31 + new ColorPicker($("#pickcolor-button"), options);
33 </script> 32 </script>
34 </div> 33 </div>
35 34