Bill's members highlights in the balance in accordance with #69.

I'm not satisfied with the payer display but I have better in mind.

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 %}