diff options
| -rw-r--r-- | budget/static/delete.png | bin | 0 -> 4355 bytes | |||
| -rw-r--r-- | budget/static/main.css | 14 | ||||
| -rw-r--r-- | budget/static/refresh.png | bin | 0 -> 3846 bytes | |||
| -rw-r--r-- | budget/templates/list_bills.html | 94 |
4 files changed, 91 insertions, 17 deletions
diff --git a/budget/static/delete.png b/budget/static/delete.png Binary files differnew file mode 100644 index 0000000..a910d5a --- /dev/null +++ b/budget/static/delete.png diff --git a/budget/static/main.css b/budget/static/main.css index f156fa8..3d3236f 100644 --- a/budget/static/main.css +++ b/budget/static/main.css @@ -139,3 +139,17 @@ div.topbar ul.secondary-nav { padding-right: 75px; } .delete img { height: 24px; } + +#overlay { + position:absolute; + background-color:#000000; + opacity:0.7; + display:none; + text-align: center; +} + +#overlay-delete, #overlay-reactivate { + position:absolute; + cursor:pointer; + display:none; +} diff --git a/budget/static/refresh.png b/budget/static/refresh.png Binary files differnew file mode 100644 index 0000000..3b815bf --- /dev/null +++ b/budget/static/refresh.png diff --git a/budget/templates/list_bills.html b/budget/templates/list_bills.html index b1d1c68..18b3637 100644 --- a/budget/templates/list_bills.html +++ b/budget/templates/list_bills.html @@ -33,24 +33,70 @@ $('#hide-bill-form').click(hide_form); $('#cancel-form').click(hide_form); - // ask for confirmation before removing an user - $('a.remove').each(function(){ - $(this).hide(); - $(this).click(function(){ - if ($(this).hasClass("confirm")){ - return true; + var tr_id; + var id; + + // display the remove button on mouse over (and hide them per default) + $('.balance tr').hover(function() + { + tr_id = $(this).attr('id'); + + var index = tr_id.indexOf("-"); + var action = tr_id.substring(0, index); + id = tr_id.substring(index+1); + + var x = $(this).offset().left; + var y = $(this).offset().top; + var width = $(this).width(); + var height = $(this).height(); + + $('#overlay').css({ "left":x+"px", "top":y+"px", "width":width+"px", "height":height+"px", "line-height":height+"px" }).show(); + + if(!$(this).hasClass("confirm")) + { + $('#overlay').html(""); + if (action == 'delete') + { + $('#overlay-delete').css({ "left":(x+width/2-16)+"px", "top":(y+height/2-16)+"px" }).show(); } - $(this).html("{{_("you sure?")}}"); - $(this).addClass("confirm"); - return false; - }); + else if (action == 'reactivate') + { + $('#overlay-reactivate').css({ "left":(x+width/2-16)+"px", "top":(y+height/2-16)+"px" }).show(); + } + } + else + { + var url = "{{ url_for('.remove_member', member_id=id) }}"; + url = url.substring(0, url.lastIndexOf('/'))+id+url.substring(url.lastIndexOf('/')); + $('#overlay').html("<a href='"+url+"' >{{_("you sure?")}}</a>"); + } }); - // display the remove button on mouse over (and hide them per default) - $('.balance tr').hover(function(){ - $(this).find('.remove').show(); - }, function(){ - $(this).find('.remove').hide(); + // show confirm message before actually removing the member + $('#overlay-delete').click(function () + { + $('#'+tr_id).addClass("confirm"); + var url = "{{ url_for('.remove_member', member_id=id) }}"; + url = url.substring(0, url.lastIndexOf('/'))+id+url.substring(url.lastIndexOf('/')); + $('#overlay').html("<a href='"+url+"' >{{_("you sure?")}}</a>"); + $(this).hide(); + }); + + // re-create reactivation url from hover-ed item and call it + $('#overlay-reactivate').click(function () + { + var url = "{{ url_for('.reactivate', member_id=id) }}"; + url = url.substring(0, url.lastIndexOf('/'))+id+url.substring(url.lastIndexOf('/')); + $(location).attr('href', url); + }); + + $('#overlay').hover(function() + { + }, function() + { + $('#overlay').hide(); + $('#overlay-delete').hide(); + $('#overlay-reactivate').hide(); }); $.datepicker.setDefaults({'dateFormat': 'yy-mm-dd'}); @@ -70,12 +116,11 @@ {% set balance = g.project.balance %} {% for member in g.project.members %} {% if member.activated or balance[member.id] != 0 %} - <tr> + <tr id="{% if member.activated %}delete{% else %}reactivate{% endif %}-{{ member.id }}"> <td>{{ member.name }}</td> <td class="{% if balance[member.id] > 0 %}positive{% elif balance[member.id] < 0 %}negative{% endif %}"> {% if balance[member.id] > 0 %}+{% endif %}{{ balance[member.id] }} </td> - <td> {% if member.activated %}<a class="remove" href="{{ url_for(".remove_member", member_id=member.id) }}">{{ _("delete") }}</a>{% else %}<a href="{{ url_for(".reactivate", member_id=member.id) }}">{{ _("reactivate") }}</a>{% endif %}</td> </tr> {% endif %} {% endfor %} @@ -83,6 +128,9 @@ </div> </div> + <div id="overlay"></div> + <img id="overlay-delete" title="{{ _("delete") }}" src="{{ url_for("static", filename="delete.png") }}"> + <img id="overlay-reactivate" title="{{ _("reactivate") }}" src="{{ url_for("static", filename="refresh.png") }}"> {% endblock %} {% block content %} @@ -121,6 +169,18 @@ {% else %} <p>{{ _("Nothing to list yet. You probably want to") }} <a id="empty-new-bill" href="{{ url_for(".add_bill") }}">{{ _("add a bill") }}</a> ?</p> {% endif %} + + + + + + + + + + + + </div> <script> $("#sidebar").height( window.innerHeight-40 ); |
