From 77c9b21fab33e18dd36e6c892e3ac7e1c0d46b30 Mon Sep 17 00:00:00 2001
From: Saurabh Kumar <theskumar@users.noreply.github.com>
Date: Thu, 23 Nov 2023 14:30:16 +0530
Subject: [PATCH 1/2] Fix the layout of the action buttons on the invoice
listing table
---
.../includes/invoices.html | 126 +++++++++---------
.../sass/apply/components/_data-block.scss | 14 +-
2 files changed, 76 insertions(+), 64 deletions(-)
diff --git a/hypha/apply/projects/templates/application_projects/includes/invoices.html b/hypha/apply/projects/templates/application_projects/includes/invoices.html
index fd2747916a..7860a119ef 100644
--- a/hypha/apply/projects/templates/application_projects/includes/invoices.html
+++ b/hypha/apply/projects/templates/application_projects/includes/invoices.html
@@ -1,4 +1,4 @@
-{% load i18n invoice_tools humanize %}
+{% load i18n invoice_tools humanize heroicons %}
<div id="invoices" class="data-block">
<div class="data-block__header">
@@ -12,71 +12,71 @@
{% endif %}
</div>
<div class="data-block__body">
- <table class="data-block__table">
- <thead>
- <tr>
- <th class="data-block__table-date">{% trans "Date submitted" %}</th>
- <th class="data-block__table-amount">{% trans "Invoice number" %}</th>
- <th class="data-block__table-status">{% trans "Status" %}</th>
- <th class="data-block__table-update"></th>
- </tr>
- </thead>
- <tbody>
- {% for invoice in object.invoices.not_rejected %}
- {% display_invoice_status_for_user user invoice as invoice_status %}
+ {% if object.invoices.not_rejected %}
+ <table class="data-block__table">
+ <thead>
<tr>
- <td class="py-4 px-2.5"><span class="data-block__mobile-label">{% trans "Date submitted" %}: </span>{{ invoice.requested_at.date }}</td>
- <td class="py-4 px-2.5"><span class="data-block__mobile-label">{% trans "Invoice number" %}: </span>{{ invoice.invoice_number }}</td>
- <td class="py-4 px-2.5"><span class="data-block__mobile-label">{% trans "Status" %}: </span>{{ invoice_status }}</td>
- <td class="flex flex-wrap justify-end py-4 px-0">
- <a class="data-block__action-icon-link" href="{{ invoice.get_absolute_url }}" target="_blank">
- <svg class="icon icon--project-eye"><use xlink:href="#eye"></use></svg>
- {% trans "View" %}
- </a>
- {% can_edit invoice user as user_can_edit_request %}
- {% if user_can_edit_request %}
- <a class="data-block__action-icon-link" target="_blank" href="{% url "apply:projects:invoice-edit" pk=invoice.project.pk invoice_pk=invoice.pk %}">
- <svg class="icon icon--project-pen"><use xlink:href="#pen"></use></svg>
- {% trans "Edit" %}
+ <th class="data-block__table-date">{% trans "Date submitted" %}</th>
+ <th class="data-block__table-amount">{% trans "Invoice number" %}</th>
+ <th class="data-block__table-status">{% trans "Status" %}</th>
+ <th class="data-block__table-update"></th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for invoice in object.invoices.not_rejected %}
+ {% display_invoice_status_for_user user invoice as invoice_status %}
+ <tr>
+ <td class="py-4 px-2.5"><span class="data-block__mobile-label">{% trans "Date submitted" %}: </span>{{ invoice.requested_at.date }}</td>
+ <td class="py-4 px-2.5"><span class="data-block__mobile-label">{% trans "Invoice number" %}: </span>{{ invoice.invoice_number }}</td>
+ <td class="py-4 px-2.5"><span class="data-block__mobile-label">{% trans "Status" %}: </span>{{ invoice_status }}</td>
+ <td class="flex flex-wrap justify-center py-4 px-0 gap-2 xl:flex-nowrap">
+ <a class="data-block__action-icon-link " href="{{ invoice.get_absolute_url }}" target="_blank">
+ {% heroicon_mini "eye" size=16 aria_hidden=true class="mr-1" %}
+ {% trans "View" %}
</a>
- {% endif %}
+ {% can_edit invoice user as user_can_edit_request %}
+ {% if user_can_edit_request %}
+ <a class="data-block__action-icon-link" target="_blank" href="{% url "apply:projects:invoice-edit" pk=invoice.project.pk invoice_pk=invoice.pk %}">
+ {% heroicon_mini "pencil-square" size=16 aria_hidden=true class="mr-1" %}
+ {% trans "Edit" %}
+ </a>
+ {% endif %}
- {% can_delete invoice user as user_can_delete_request %}
- {% if user.is_applicant and user_can_delete_request %}
- <a class="data-block__action-icon-link data-block__action-icon-link--remove" target="_blank" href="{% url 'apply:projects:invoice-delete' pk=invoice.project.pk invoice_pk=invoice.pk %}">
- <svg class="icon icon--delete" style="margin-left:0; margin-right:2px"><use xlink:href="#delete"></use></svg>
- {% trans "Delete" %}
- </a>
- {% endif %}
- {% can_change_status invoice user as can_change_invoice_status %}
- {% if can_change_invoice_status %}
- <a
- data-fancybox
- data-src="#change-invoice-status-{{ invoice.id }}"
- id="update_invoice_status-{{ invoice.id }}"
- class="data-block__button button button--primary"
- href="#"
- >
- {% trans "Update Status" %}
- </a>
- <div class="modal" id="change-invoice-status-{{ invoice.id }}">
- {% get_invoice_form invoice user as invoice_form %}
- {% get_invoice_form_id invoice_form invoice as invoice_form_id %}
- <h4 class="modal__project-header-bar">{% trans "Update Invoice status" %}</h4>
- <p>{% trans "Current status" %}: {{ invoice_status }}</p>
- {% trans "Update Status" as update %}
- {% include 'funds/includes/delegated_form_base.html' with form=invoice_form value=update action=invoice.get_absolute_url form_id=invoice_form_id %}
- </div>
- {% endif %}
- </td>
- </tr>
- {% empty %}
- <tr>
- <td colspan="5">{% trans "No active Invoices." %}</td>
- </tr>
- {% endfor %}
- </tbody>
- </table>
+ {% can_delete invoice user as user_can_delete_request %}
+ {% if user.is_applicant and user_can_delete_request %}
+ <a class="data-block__action-icon-link text-red-600" target="_blank" href="{% url 'apply:projects:invoice-delete' pk=invoice.project.pk invoice_pk=invoice.pk %}">
+ {% heroicon_mini "trash" size=16 aria_hidden=true class="mr-1" %}
+ {% trans "Delete" %}
+ </a>
+ {% endif %}
+ {% can_change_status invoice user as can_change_invoice_status %}
+ {% if can_change_invoice_status %}
+ <a
+ data-fancybox
+ data-src="#change-invoice-status-{{ invoice.id }}"
+ id="update_invoice_status-{{ invoice.id }}"
+ class="data-block__button button button--primary"
+ href="#"
+ >
+ {% trans "Update Status" %}
+ </a>
+ <div class="modal" id="change-invoice-status-{{ invoice.id }}">
+ {% get_invoice_form invoice user as invoice_form %}
+ {% get_invoice_form_id invoice_form invoice as invoice_form_id %}
+ <h4 class="modal__project-header-bar">{% trans "Update Invoice status" %}</h4>
+ <p>{% trans "Current status" %}: {{ invoice_status }}</p>
+ {% trans "Update Status" as update %}
+ {% include 'funds/includes/delegated_form_base.html' with form=invoice_form value=update action=invoice.get_absolute_url form_id=invoice_form_id %}
+ </div>
+ {% endif %}
+ </td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
+ {% else %}
+ <p>{% trans "No active invoices yet." %}</p>
+ {% endif %}
{% if object.invoices.rejected %}
<p class="data-block__rejected">
diff --git a/hypha/static_src/src/sass/apply/components/_data-block.scss b/hypha/static_src/src/sass/apply/components/_data-block.scss
index 4525092609..a639f39d8d 100644
--- a/hypha/static_src/src/sass/apply/components/_data-block.scss
+++ b/hypha/static_src/src/sass/apply/components/_data-block.scss
@@ -156,6 +156,12 @@
text-decoration: underline;
color: $color--primary;
word-break: normal;
+ transition-property: opacity;
+ transition-duration: 150ms;
+
+ &:hover {
+ opacity: 0.75;
+ }
&:last-child {
margin: 0;
@@ -168,9 +174,15 @@
display: flex;
align-items: center;
margin-right: 1rem;
- color: $color--primary;
word-break: normal;
+ transition-property: opacity;
+ transition-duration: 150ms;
+
+ &:hover {
+ opacity: 0.75;
+ }
+
&:last-child {
margin: 0;
}
From 5e5794e633cd82ef9e3df182bc868d99f584fe3a Mon Sep 17 00:00:00 2001
From: Saurabh Kumar <theskumar@users.noreply.github.com>
Date: Thu, 23 Nov 2023 15:03:20 +0530
Subject: [PATCH 2/2] =?UTF-8?q?Remove=20target=3D=E2=80=9C=5Fblank?=
=?UTF-8?q?=E2=80=9D=20to=20the=20view,=20edit=20and=20delete=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../application_projects/includes/invoices.html | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/hypha/apply/projects/templates/application_projects/includes/invoices.html b/hypha/apply/projects/templates/application_projects/includes/invoices.html
index 7860a119ef..4e825a2912 100644
--- a/hypha/apply/projects/templates/application_projects/includes/invoices.html
+++ b/hypha/apply/projects/templates/application_projects/includes/invoices.html
@@ -17,7 +17,7 @@
<thead>
<tr>
<th class="data-block__table-date">{% trans "Date submitted" %}</th>
- <th class="data-block__table-amount">{% trans "Invoice number" %}</th>
+ <th class="data-block__table-amount">{% trans "Invoice No." %}</th>
<th class="data-block__table-status">{% trans "Status" %}</th>
<th class="data-block__table-update"></th>
</tr>
@@ -30,13 +30,13 @@
<td class="py-4 px-2.5"><span class="data-block__mobile-label">{% trans "Invoice number" %}: </span>{{ invoice.invoice_number }}</td>
<td class="py-4 px-2.5"><span class="data-block__mobile-label">{% trans "Status" %}: </span>{{ invoice_status }}</td>
<td class="flex flex-wrap justify-center py-4 px-0 gap-2 xl:flex-nowrap">
- <a class="data-block__action-icon-link " href="{{ invoice.get_absolute_url }}" target="_blank">
+ <a class="data-block__action-icon-link " href="{{ invoice.get_absolute_url }}" >
{% heroicon_mini "eye" size=16 aria_hidden=true class="mr-1" %}
{% trans "View" %}
</a>
{% can_edit invoice user as user_can_edit_request %}
{% if user_can_edit_request %}
- <a class="data-block__action-icon-link" target="_blank" href="{% url "apply:projects:invoice-edit" pk=invoice.project.pk invoice_pk=invoice.pk %}">
+ <a class="data-block__action-icon-link" href="{% url "apply:projects:invoice-edit" pk=invoice.project.pk invoice_pk=invoice.pk %}">
{% heroicon_mini "pencil-square" size=16 aria_hidden=true class="mr-1" %}
{% trans "Edit" %}
</a>
@@ -44,7 +44,7 @@
{% can_delete invoice user as user_can_delete_request %}
{% if user.is_applicant and user_can_delete_request %}
- <a class="data-block__action-icon-link text-red-600" target="_blank" href="{% url 'apply:projects:invoice-delete' pk=invoice.project.pk invoice_pk=invoice.pk %}">
+ <a class="data-block__action-icon-link text-red-500" href="{% url 'apply:projects:invoice-delete' pk=invoice.project.pk invoice_pk=invoice.pk %}">
{% heroicon_mini "trash" size=16 aria_hidden=true class="mr-1" %}
{% trans "Delete" %}
</a>
@@ -100,8 +100,8 @@ <h4 class="modal__project-header-bar">{% trans "Update Invoice status" %}</h4>
<td class="py-4 px-2.5"><span class="data-block__mobile-label">{% trans "Invoice number" %}: </span>{{ invoice.invoice_number }}</td>
<td class="py-4 px-2.5"><span class="data-block__mobile-label">{% trans "Status" %}: </span>{{ invoice_status }}</td>
<td class="flex justify-end py-4 px-0">
- <a class="data-block__action-icon-link" href="{{ invoice.get_absolute_url }}" target="_blank">
- <svg class="icon icon--project-eye"><use xlink:href="#eye"></use></svg>
+ <a class="data-block__action-icon-link" href="{{ invoice.get_absolute_url }}" >
+ {% heroicon_mini "eye" size=16 aria_hidden=true class="mr-1" %}
{% trans "View" %}
</a>
</td>