diff --git a/ihatemoney/static/css/main.css b/ihatemoney/static/css/main.css index e0d8e86e..1700fecf 100644 --- a/ihatemoney/static/css/main.css +++ b/ihatemoney/static/css/main.css @@ -291,6 +291,11 @@ footer .footer-left { .bill-actions { padding-top: 10px; text-align: center; + column-gap: 8px; + min-height: 56px; + + /* To be able to set absolute element positionning for confirm deletion */ + position: relative; } .bill-actions > form > .delete, @@ -300,21 +305,21 @@ footer .footer-left { display: block; width: 16px; height: 16px; - margin: 2px; - margin-left: 5px; - float: left; border: none; } +.bill-actions .confirm { + position: absolute; + top: 4px; + left: 4px; + width: calc(100% - 8px); + height: calc(100% - 8px); +} + .bill-actions > form > .delete { background: url("../images/delete.png") no-repeat right; } -.bill-actions > form > .confirm.btn-danger { - outline-color: #c82333; - box-shadow: none; -} - .bill-actions > .edit { background: url("../images/edit.png") no-repeat right; } diff --git a/ihatemoney/templates/edit_project.html b/ihatemoney/templates/edit_project.html index 7ea47d9f..1834b375 100644 --- a/ihatemoney/templates/edit_project.html +++ b/ihatemoney/templates/edit_project.html @@ -1,22 +1,8 @@ {% extends "layout.html" %} {% block js %} - - let link = $('#delete-project').find('button'); - let deleteOriginalHTML = link.html(); - link.click(function() { - if (link.hasClass("confirm")){ - return true; - } - link.html("{{_("Are you sure?")}}"); - link.addClass("confirm btn-danger"); - return false; - }); - - $('#delete-project').focusout(function() { - link.removeClass("confirm btn-danger"); - link.html(deleteOriginalHTML); - }); + {% include "helpers.js" %} + confirm_action("#delete-project") $('.custom-file-input').on('change', function(event) { var filename = [].slice.call(this.files).map(function (file) { return file.name}).join(',') diff --git a/ihatemoney/templates/helpers.js b/ihatemoney/templates/helpers.js new file mode 100644 index 00000000..83dceeed --- /dev/null +++ b/ihatemoney/templates/helpers.js @@ -0,0 +1,23 @@ +function confirm_action(selector, { exclude_classes, add_classes } = { exclude_classes: "", add_classes: "" }) { + const elements = $(selector) + elements.each(function () { + const element = $(this) + let link = element.find('button') + let deleteOriginalHTML = link.html() + link.click(function () { + if (link.hasClass("confirm")) { + return true + } + link.html("{{_('Are you sure?')}}") + link.removeClass(exclude_classes) + link.addClass(`confirm btn-danger ${add_classes}`) + return false + }) + + element.focusout(function () { + link.removeClass(`confirm btn-danger ${add_classes}`) + link.html(deleteOriginalHTML) + link.addClass(exclude_classes) + }) + }) +} \ No newline at end of file diff --git a/ihatemoney/templates/list_bills.html b/ihatemoney/templates/list_bills.html index 27c0e291..947e9778 100644 --- a/ihatemoney/templates/list_bills.html +++ b/ihatemoney/templates/list_bills.html @@ -39,25 +39,8 @@ $('#bill_table tbody tr').hover(highlight_owers, unhighlight_owers); - - - let link = $('#delete-bill').find('button'); - let deleteOriginalHTML = link.html(); - link.click(function() { - if (link.hasClass("confirm")){ - return true; - } - link.html("{{_("Are you sure?")}}"); - link.removeClass("action delete"); - link.addClass("confirm btn-danger"); - return false; - }); - - $('#delete-bill').focusout(function() { - link.removeClass("confirm btn-danger"); - link.html(deleteOriginalHTML); - link.addClass("action delete"); - }); + {% include "helpers.js" %} + confirm_action(".delete-bill", { exclude_classes: "action delete", add_classes: "btn btn-sm" }); {% endblock %} @@ -156,9 +139,9 @@ {{ weighted_bill_amount(bill, weights) }} -