- factor confirm deletion between project and bill

- better look for bill deletion confirm, using an absolute positionning in the action cell

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

ihatemoney/templates/edit_project.html

@@ -1,22 +1,8 @@
 {% extends "layout.html" %}
 
 {% block js %}
-
+    {% include "helpers.js" %}
-    let link = $('#delete-project').find('button');
+    confirm_action("#delete-project")
-    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);
-    });
 
     $('.custom-file-input').on('change', function(event) {
         var filename = [].slice.call(this.files).map(function (file) { return file.name}).join(',')

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)
+        })
+    })
+}

ihatemoney/templates/list_bills.html

@@ -39,25 +39,8 @@
 
     $('#bill_table tbody tr').hover(highlight_owers, unhighlight_owers);
 
-
+    {% include "helpers.js" %}
-
+    confirm_action(".delete-bill", { exclude_classes: "action delete", add_classes: "btn btn-sm" });
-    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");
-    });
 
 {% endblock %}
 
@@ -156,9 +139,9 @@
                         {{ weighted_bill_amount(bill, weights) }}
                     </span>
                 </td>
-                <td class="bill-actions">
+                <td class="bill-actions d-flex align-items-center">
                     <a class="edit" href="{{ url_for(".edit_bill", bill_id=bill.id) }}" title="{{ _("edit") }}">{{ _('edit') }}</a>
-                    <form id="delete-bill"action="{{ url_for(".delete_bill", bill_id=bill.id) }}" method="POST">
+                    <form class="delete-bill" action="{{ url_for(".delete_bill", bill_id=bill.id) }}" method="POST">
                         {{ csrf_form.csrf_token }}
                         <button class="action delete" type="submit" title="{{ _("delete") }}"></button>
                     </form>