polish the clear date buttons in edit form

* placed them besides the text field
* replaces red x with grey x. the red x draws to much attention. also adds tool tip to x

app/views/todos/_edit_form.rhtml

@@ -49,16 +49,16 @@ Event.observe($('<%= dom_id(@todo, 'context_name') %>'), "click", <%= dom_id(@to
 <div class="due_input">
 <label for="<%= dom_id(@todo, 'due_label') %>">Due</label>
 <%= date_field_tag("todo[due]", dom_id(@todo, 'due'), format_date(@todo.due), "tabindex" => 13) %>
-<a href="#" id="<%= dom_id(@todo, 'due_x') %>" class="date_clear">
+<a href="#" id="<%= dom_id(@todo, 'due_x') %>" class="date_clear" title="Clear due date">
-	<%= image_tag("cancel.png", :alt => "") %>
+	<%= image_tag("delete_off.png", :alt => "Clear due date") %>
 </a>
 </div>
 
 <div class="show_from_input">
 <label for="<%= dom_id(@todo, 'show_from') %>">Show from</label>
 <%= date_field_tag("todo[show_from]", dom_id(@todo, 'show_from'), format_date(@todo.show_from), "tabindex" => 14) %>
-<a href="#" id="<%= dom_id(@todo, 'show_from_x') %>" class="date_clear">
+<a href="#" id="<%= dom_id(@todo, 'show_from_x') %>" class="date_clear" title="Clear show from date">
-	<%= image_tag("cancel.png", :alt => "") %>
+	<%= image_tag("delete_off.png", :alt => "Clear show from date") %>
 </a>
 </div>
 

public/javascripts/tracks_1219672692.js

@@ -407,7 +407,7 @@ if(event.keyCode==Event.KEY_TAB||event.keyCode==Event.KEY_RETURN||(Prototype.Bro
 {this.index=element.autocompleteIndex;this.render();}
 Event.stop(event);},onClick:function(event){var element=Event.findElement(event,'LI');this.index=element.autocompleteIndex;this.selectEntry();this.hide();},onBlur:function(event){setTimeout(this.hide.bind(this),250);this.hasFocus=false;this.active=false;},render:function(){if(this.entryCount>0){for(var i=0;i<this.entryCount;i++)
 this.index==i?Element.addClassName(this.getEntry(i),"selected"):Element.removeClassName(this.getEntry(i),"selected");if(this.hasFocus){this.show();this.active=true;}}else{this.active=false;this.hide();}},markPrevious:function(){if(this.index>0)this.index--
-else this.index=this.entryCount-1;this.getEntry(this.index).scrollIntoView(true);},markNext:function(){if(this.index<this.entryCount-1)this.index++
+else this.index=this.entryCount-1;this.getEntry(this.index).scrollIntoView(false);},markNext:function(){if(this.index<this.entryCount-1)this.index++
 else this.index=0;this.getEntry(this.index).scrollIntoView(false);},getEntry:function(index){return this.update.firstChild.childNodes[index];},getCurrentEntry:function(){return this.getEntry(this.index);},selectEntry:function(){this.active=false;this.updateElement(this.getCurrentEntry());},updateElement:function(selectedElement){if(this.options.updateElement){this.options.updateElement(selectedElement);return;}
 var value='';if(this.options.select){var nodes=$(selectedElement).select('.'+this.options.select)||[];if(nodes.length>0)value=Element.collectTextNodes(nodes[0],this.options.select);}else
 value=Element.collectTextNodesIgnoreClass(selectedElement,'informal');var bounds=this.getTokenBounds();if(bounds[0]!=-1){var newValue=this.element.value.substr(0,bounds[0]);var whitespace=this.element.value.substr(bounds[0]).match(/^\s+/);if(whitespace)

public/stylesheets/standard.css

@@ -808,6 +808,14 @@ input#go_to_project, input#context_hide {
     width:100%;
 }
 
+.edit_todo_form .Date {
+    width:89%;
+}
+
+.edit_todo_form a.date_clear:hover {
+    background: #CCCCCC;
+}
+
 .edit_todo_form .tag_list_label {
     clear:both;
 }
@@ -1192,9 +1200,4 @@ body.integrations textarea {
     padding:3px;
     width:80%;
     background-color:#ddd;
-}
-
-.date_clear
-{
-	float: right;
 }

public/stylesheets/tracks_1219763287.css

@@ -149,6 +149,8 @@ input#go_to_project, input#context_hide {width: 5%}
 #todo-form-new-action .submit_box, #project_form .submit_box, #context_form .submit_box {height: 25px; padding: 5px 0; text-align: center; clear: right}
 .edit_todo_form .submit_box {height: 25px; padding: 5px 0; text-align: center; clear: right}
 .edit_todo_form input, .edit_todo_form textarea {width:100%}
+.edit_todo_form .Date {width:89%}
+.edit_todo_form a.date_clear:hover {background: #CCCCCC}
 .edit_todo_form .tag_list_label {clear:both}
 .edit_todo_form .due_input, .edit_todo_form .show_from_input, .edit_todo_form .project_input, .edit_todo_form .context_input {width:48%}
 .edit_todo_form .show_from_input, .edit_todo_form .context_input {float: right}
@@ -218,7 +220,6 @@ body.integrations h2 {margin-top:40px; padding-top:20px; margin-bottom:10px; bor
 body.integrations p, body.integrations li {font-size:1.0em}
 body.integrations li {list-style-type: disc; list-style-position: inside; margin-left:30px}
 body.integrations textarea {margin:10px; padding:3px; width:80%; background-color:#ddd}
-.date_clear {float: right}
 div.calendar {position: relative}
 .calendar, .calendar table {border: 1px solid #556; font-size: 11px; color: #000; cursor: default; background: #eef; z-index: 110; font-family: tahoma,verdana,sans-serif}
 .calendar .button {text-align: center; padding: 2px}