diff options
| -rw-r--r-- | budget/static/main.css | 23 | ||||
| -rw-r--r-- | budget/templates/list_bills.html | 355 |
2 files changed, 203 insertions, 175 deletions
diff --git a/budget/static/main.css b/budget/static/main.css index 94ac842..c14e0b7 100644 --- a/budget/static/main.css +++ b/budget/static/main.css @@ -1,4 +1,4 @@ - @import "bootstrap-1.0.0.min.css"; + @import "bootstrap-1.0.0.min.css"; @import url(http://fonts.googleapis.com/css?family=Lobster|Comfortaa); @import "jquery/jquery-ui.css"; @@ -156,3 +156,24 @@ div.topbar ul.secondary-nav { padding-right: 75px; } cursor:pointer; display:none; } + +.balance-value{ + text-align:right; +} + +tr.ower_line { + /* Fallback for web browsers that doesn't support RGBa */ + background: rgb(255, 255, 255) transparent; + /* RGBa with 0.6 opacity */ + background: rgba(255, 255, 255, 0.4); + /* For IE 5.5 - 7*/ + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FFFFFF, endColorstr=#66FFFFFF); + /* For IE 8*/ + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FFFFFF, endColorstr=#66FFFFFF)"; +} + +tr.payer_line .balance-name{ + color:green; + text-indent:5px; +} + diff --git a/budget/templates/list_bills.html b/budget/templates/list_bills.html index b6fd991..95349ae 100644 --- a/budget/templates/list_bills.html +++ b/budget/templates/list_bills.html @@ -2,195 +2,202 @@ {% block title %}- {{ g.project.name }}{% endblock %} {% block head %} - <script src="{{ url_for("static", filename="jquery/js/jquery-ui.js") }}"></script> - {% if g.lang != "en" %} - <script src="{{ url_for("static", filename="jquery/i18n/jquery.ui.datepicker-%s.js" % g.lang ) }}"></script> - {% endif %} - <script src="{{ url_for("static", filename="ihatemoney/custom.js") }}"></script> + <script src="{{ url_for("static", filename="jquery/js/jquery-ui.js") }}"></script> + {% if g.lang != "en" %} + <script src="{{ url_for("static", filename="jquery/i18n/jquery.ui.datepicker-%s.js" % g.lang ) }}"></script> + {% endif %} + <script src="{{ url_for("static", filename="ihatemoney/custom.js") }}"></script> {% endblock %} {% block js %} - $(window).resize(function() { - $("#sidebar").height( window.innerHeight-40 ); - $("#table_overflow").height( $("#sidebar").height()-120 ); - }); - - // display the form when clicking on the "add bill" button - var show_form = function(){ - $('#bill-form').slideDown(100); - $("#hide-bill-form").show(); - $("#new-bill").hide(); - return false; - } - - // and provide a mechanism to hide it back - var hide_form = function(){ - $("#bill-form").slideUp(100); - $("#new-bill").show(); - $("#hide-bill-form").hide(); - return false; - } - - - auto_hide_default_text('#name'); - - $('#new-bill').click(show_form); - $('#empty-new-bill').click(show_form); - $('#hide-bill-form').click(hide_form); - $('#cancel-form').click(hide_form); - - - 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(); - } - 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>"); - } - }); - - // 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'}); - $(".datepicker").datepicker($.datepicker.regional['{{ g.lang }}']); - + + // specifies that the text in #name text field has to be hidden on user typing + auto_hide_default_text('#name'); + + $(window).resize(function() { + $("#sidebar").height( window.innerHeight-40 ); + $("#table_overflow").height( $("#sidebar").height()-120 ); + }); + + // display the form when clicking on the "add bill" button + var show_form = function(){ + $('#bill-form').slideDown(100); + $("#hide-bill-form").show(); + $("#new-bill").hide(); + return false; + } + + // and provide a mechanism to hide it back + var hide_form = function(){ + $("#bill-form").slideUp(100); + $("#new-bill").show(); + $("#hide-bill-form").hide(); + return false; + } + + $('#new-bill').click(show_form); + $('#empty-new-bill').click(show_form); + $('#hide-bill-form').click(hide_form); + $('#cancel-form').click(hide_form); + + + 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.lastIndexOf("-"); + id = tr_id.substring(index+1); + var action = $(this).attr('action'); + + 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(); + } + 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>"); + } + }); + + // 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'}); + $(".datepicker").datepicker($.datepicker.regional['{{ g.lang }}']); + + + var highlight_owers = function(){ + var ower_ids = $(this).attr("owers").split(','); + var payer_id = $(this).attr("payer"); + $.each(ower_ids, function(i, val){ + $('#bal-member-'+val).addClass("ower_line"); + }); + $("#bal-member-"+payer_id).addClass("payer_line"); + }; + + var unhighlight_owers = function(){ + $('[id^="bal-member-"]').removeClass("ower_line payer_line"); + }; + + $("#bill_table tr").hover(highlight_owers,unhighlight_owers); + {% endblock %} {% block sidebar %} <div id="sidebar" class="sidebar"> - <h2>{{ _("Balance") }}</h2> - - <form action="{{ url_for(".add_member") }}" method="post"> - {{ forms.add_member(member_form) }} - </form> - - <div id="table_overflow"> - <table class="balance"> - {% set balance = g.project.balance %} - {% for member in g.project.members %} - {% if member.activated or balance[member.id] != 0 %} - <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> - </tr> - {% endif %} - {% endfor %} - </table> - </div> + <h2>{{ _("Balance") }}</h2> + + <form action="{{ url_for(".add_member") }}" method="post"> + {{ forms.add_member(member_form) }} + </form> + + <div id="table_overflow"> + <table class="balance"> + {% set balance = g.project.balance %} + {% for member in g.project.members %} + {% if member.activated or balance[member.id] != 0 %} + <tr id="bal-member-{{ member.id }}" action={% if member.activated %}delete{% else %}reactivate{% endif %}> + <td class="balance-name">{{ member.name }}</td> + <td class="balance-value {% if balance[member.id] > 0 %}positive{% elif balance[member.id] < 0 %}negative{% endif %}"> + {% if balance[member.id] > 0 %}+{% endif %}{{ balance[member.id] }} + </td> + </tr> + {% endif %} + {% endfor %} + </table> + </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") }}"> + <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 %} <div class="identifier">{{ _("The project identifier is") }} <a href="{{ url_for(".list_bills") }}">{{ g.project.id }}</a>, {{ _("remember it!") }}</div> - <a id="new-bill" href="{{ url_for(".add_bill") }}" class="btn primary">{{ _("Add a new bill") }}</a> - - <form id="bill-form" action="{{ url_for(".add_bill") }}" method="post" style="display: none"> - <a class="btn primary" id="hide-bill-form" href="#">{{ _("hide this form") }}</a> - {{ forms.add_bill(bill_form) }} - </form> - - {% if bills.count() > 0 %} - <table class="list_bills common-table zebra-striped"> - <thead><tr><th>{{ _("When?") }}</th><th>{{ _("Who paid?") }}</th><th>{{ _("For what?") }}</th><th>{{ _("For whom?") }}</th><th>{{ _("How much?") }}</th><th>{{ _("Actions") }}</th></tr></thead> - <tbody> - {% for bill in bills %} - <tr class="{{ loop.cycle("odd", "even") }}"> - <td>{{ bill.date }}</td> - <td>{{ bill.payer }}</td> - <td>{{ bill.what }}</td> - <td>{{ bill.owers|join(', ', 'name') }} </td> - <td>{{ "%0.2f"|format(bill.amount) }} ({{ "%0.2f"|format(bill.pay_each()) }} {{ _("each") }})</td> - <td class="bill-actions"> - <a class="edit" href="{{ url_for(".edit_bill", bill_id=bill.id) }}" title="{{ _("edit") }}"> - <img src="{{ url_for("static", filename="pen.png") }}" /> - </a> - <a class="delete" href="{{ url_for(".delete_bill", bill_id=bill.id) }}" title="{{ _("delete") }}"> - <img src="{{ url_for("static", filename="delete.png") }}" /> - </a> - </td> - </tr> - {% endfor %} - </tbody> - </table> - - {% 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 %} - - - - - - - - - - + <a id="new-bill" href="{{ url_for(".add_bill") }}" class="btn primary">{{ _("Add a new bill") }}</a> + + <form id="bill-form" action="{{ url_for(".add_bill") }}" method="post" style="display: none"> + <a class="btn primary" id="hide-bill-form" href="#">{{ _("hide this form") }}</a> + {{ forms.add_bill(bill_form) }} + </form> + + {% if bills.count() > 0 %} + <table id="bill_table" class="list_bills common-table zebra-striped"> + <thead><tr><th>{{ _("When?") }}</th><th>{{ _("Who paid?") }}</th><th>{{ _("For what?") }}</th><th>{{ _("For whom?") }}</th><th>{{ _("How much?") }}</th><th>{{ _("Actions") }}</th></tr></thead> + <tbody> + {% for bill in bills %} + <tr class="{{ loop.cycle("odd", "even") }}" owers={{bill.owers|join(',','id')}} payer={{bill.payer.id}}> + <td>{{ bill.date }}</td> + <td>{{ bill.payer }}</td> + <td>{{ bill.what }}</td> + <td>{{ bill.owers|join(', ', 'name') }} </td> + <td>{{ "%0.2f"|format(bill.amount) }} ({{ "%0.2f"|format(bill.pay_each()) }} {{ _("each") }})</td> + <td class="bill-actions"> + <a class="edit" href="{{ url_for(".edit_bill", bill_id=bill.id) }}" title="{{ _("edit") }}"> + <img src="{{ url_for("static", filename="pen.png") }}" /> + </a> + <a class="delete" href="{{ url_for(".delete_bill", bill_id=bill.id) }}" title="{{ _("delete") }}"> + <img src="{{ url_for("static", filename="delete.png") }}" /> + </a> + </td> + </tr> + {% endfor %} + </tbody> + </table> + + {% 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 ); - $("#table_overflow").height( $("#sidebar").height()-120 ); + $("#sidebar").height( window.innerHeight-40 ); + $("#table_overflow").height( $("#sidebar").height()-120 ); + </script> {% endblock %} |