use html5 color input

website/agenda/planung/templates/user_settings.html

@@ -6,61 +6,8 @@
             selectedId = ($(this).attr('id'));
             showColors();
         });
-        //$("#content").append(getColor(8));
     });
 
-    /*
-     function getColor(noOfColors) {
-     var html = "";
-     var frequency = 5 / noOfColors; 
-     for (var i = 0; i < noOfColors;++i) {
-     r = Math.sin(frequency * i + 0) * (127) + 128;
-     g = Math.sin(frequency * i + 1) * (127) + 128;
-     b = Math.sin(frequency * i + 3) * (127) + 128;
-     li = '<li class="color" style="background-color:rgb({r},{g},{b});">  </li>';
-     li = li.replace("{r}", Math.floor(r));
-     li = li.replace("{g}", Math.floor(g));
-     li = li.replace("{b}", Math.floor(b));
-     html = html + li;
-     }
-     return html;
-     }
-
-     function showColors(){
-     var colors=['00','22','44','66','88','aa','cc','ee','ff'];
-     var content='';
-
-     for (var i in colors){
-     for (var j in colors){
-     var r=colors[i];
-     var g=colors[colors.length-j-1];
-     var b   =Math.round((i-j))% colors.length;
-     if(b<0)b=Math.round((j-i))% colors.length;
-     b=colors[b]
-     var value='#'+r+g+b;
-     content+='<div class="col" value="'+value+'" style="background:'+value+';"> </div>';
-     }
-     content+='<br style="clear:both">'
-     }
-
-     for (var i in colors){
-     var gray=colors[colors.length-i-1];
-     var value='#'+gray+gray+gray;
-     content+='<div class="col" value="'+value+'" style="background:'+value+';"> </div>';
-     }
-     content+='<br style="clear:both">'
-
-     $("#colors").html(content);
-     $("#colors div.col").click(
-     function(){
-     var color=$(this).attr("value");
-     $('#'+selectedId).css('background',color);
-     $('#'+selectedId).attr('value',color);
-     }
-     );
-     }
-     */
-
     function showColors() {
         var colors = [ '#ef9a9a', '#f48fb1', '#ce93d8', '#b39ddb', '#9fa8da',
                 '#90caf9', '#81d4fa', '#80deea', '#80cbc4', '#a5d6a7',
@@ -87,8 +34,8 @@
 <style>
 div.col {
     float: left;
-    width: 10px;
+    width: 2rem;
-    height: 10px;
+    height: 2rem;
 }
 </style>
 
@@ -142,9 +89,12 @@ div.col {
             <td><TMPL_VAR .loc.label_color>: <TMPL_VAR
                     title></td>
             <td><input id="<TMPL_VAR name>"
-                style="background: &lt;TMPL_VAR value&gt;"
+                style="padding:0;background: &lt;TMPL_VAR value&gt;"
-                name="<TMPL_VAR name>" class="color"
+                name="<TMPL_VAR name>" 
-                value="<TMPL_VAR value>"></td>
+                class="color"
+                value="<TMPL_VAR value>"
+                type="color"
+                ></td>
         </tr>
         </TMPL_LOOP>
     </table>
@@ -153,10 +103,11 @@ div.col {
 
 </form>
 
-<form method="post" style="margin-top: 2px;float:left">
+<form method="post" style="margin-top: 2px; float: left">
     <input type="hidden" name="project_id" value="<TMPL_VAR project_id>">
     <input type="hidden" name="studio_id" value="<TMPL_VAR studio_id>">
-    <input type="hidden" name="action" value="updateDefaultProjectStudio">
+    <input type="hidden" name="action"
+        value="updateDefaultProjectStudio">
     <button onclick="$(this).submit()">
         <TMPL_VAR loc.setDefaultProjectStudio>
     </button>