show remove icon button when editting an item

cedricss · Jan 16, 2012 · de4f8ec · de4f8ec
1 parent adc33e4
commit de4f8ec
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/resources/style.css b/resources/style.css
@@ -145,6 +145,7 @@ ul#todo_list .icon.icon-remove {
   margin: 4px 0;
   position:relative;
 }
+
 ul#todo_list .display:hover .icon.icon-remove {display:inline-block;}
 
 .todo_content {padding:0 5px;font-size:18px; line-height:22px;color:#6C6B66;}
@@ -230,7 +231,7 @@ ul#todo_list .display:hover .icon.icon-remove {display:inline-block;}
 @media only screen and (min-width: 768px) and (max-width: 959px) {
     html {height:100%;}
     body {width:100%;height:100%;}
-    
+
     /* Todo list */
     ul#todo_list input[type="checkbox"]{font-size:20px;margin: 3px 6px 0 0;-webkit-appearance:checkbox;}
 }
diff --git a/src/todo.opa b/src/todo.opa
@@ -76,8 +76,9 @@ module Todo {
     }
 
     function update_todo(string id, string value) {
-        db_add_todo(id, value)
-        update_todo_on_page(id, value)
+        db_add_todo(id, value);
+        update_todo_on_page(id, value);
+        Dom.void_style(#{id^"_destroy"});
     }
 
     function update_todo_on_page(string id, string value) {
@@ -88,6 +89,7 @@ module Todo {
 
     function make_editable(string id, string value) {
         line = <input id={id^"_input"} class="todo_content" onnewline={function(_){update_todo(id, Dom.get_value(#{id^"_input"}))}} value={ value } />
+        Dom.show(#{id^"_destroy"});
         _ = Dom.put_replace(#{id^"_todo"}, Dom.of_xhtml(line));
         update_counts()
     }
@@ -96,7 +98,7 @@ module Todo {
         line =
           <li><div class="todo {if (is_done) "done" else ""}" id={ id }>
             <div class="display">
-              <span class="todo_destroy icon icon-remove" onclick={function(_){remove_item(id)}}></span>
+              <span id={id^"_destroy"} class="todo_destroy icon icon-remove" onclick={function(_){remove_item(id)}}></span>
               <input class="check" type="checkbox" onclick={function(_){make_done(id)}}/>
               <div id={id^"_todo"} class="todo_content" onclick={function(_){make_editable(id, value)}}>{ value }</div>
             </div>