Add the context menu with the duplicate option
As per the design document.
This commit is contained in:
parent
0c8edb9cae
commit
f3b841473f
19
po/ca.po
19
po/ca.po
|
@ -8,7 +8,7 @@ msgid ""
|
|||
msgstr ""
|
||||
"Project-Id-Version: numerus\n"
|
||||
"Report-Msgid-Bugs-To: jordi@tandem.blog\n"
|
||||
"POT-Creation-Date: 2023-03-08 11:23+0100\n"
|
||||
"POT-Creation-Date: 2023-03-08 11:51+0100\n"
|
||||
"PO-Revision-Date: 2023-01-18 17:08+0100\n"
|
||||
"Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
|
||||
"Language-Team: Catalan <ca@dodds.net>\n"
|
||||
|
@ -135,7 +135,17 @@ msgctxt "title"
|
|||
msgid "Download"
|
||||
msgstr "Descàrrega"
|
||||
|
||||
#: web/template/invoices/index.gohtml:69
|
||||
#: web/template/invoices/index.gohtml:29
|
||||
msgctxt "title"
|
||||
msgid "Actions"
|
||||
msgstr "Accions"
|
||||
|
||||
#: web/template/invoices/index.gohtml:75 web/template/invoices/view.gohtml:14
|
||||
msgctxt "action"
|
||||
msgid "Duplicate"
|
||||
msgstr "Duplica"
|
||||
|
||||
#: web/template/invoices/index.gohtml:85
|
||||
msgid "No invoices added yet."
|
||||
msgstr "No hi ha cap factura."
|
||||
|
||||
|
@ -144,11 +154,6 @@ msgctxt "title"
|
|||
msgid "Invoice %s"
|
||||
msgstr "Factura %s"
|
||||
|
||||
#: web/template/invoices/view.gohtml:14
|
||||
msgctxt "action"
|
||||
msgid "Duplicate"
|
||||
msgstr "Duplica"
|
||||
|
||||
#: web/template/invoices/view.gohtml:17
|
||||
msgctxt "action"
|
||||
msgid "Download invoice"
|
||||
|
|
19
po/es.po
19
po/es.po
|
@ -7,7 +7,7 @@ msgid ""
|
|||
msgstr ""
|
||||
"Project-Id-Version: numerus\n"
|
||||
"Report-Msgid-Bugs-To: jordi@tandem.blog\n"
|
||||
"POT-Creation-Date: 2023-03-08 11:23+0100\n"
|
||||
"POT-Creation-Date: 2023-03-08 11:51+0100\n"
|
||||
"PO-Revision-Date: 2023-01-18 17:45+0100\n"
|
||||
"Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
|
||||
"Language-Team: Spanish <es@tp.org.es>\n"
|
||||
|
@ -135,7 +135,17 @@ msgctxt "title"
|
|||
msgid "Download"
|
||||
msgstr "Descargar"
|
||||
|
||||
#: web/template/invoices/index.gohtml:69
|
||||
#: web/template/invoices/index.gohtml:29
|
||||
msgctxt "title"
|
||||
msgid "Actions"
|
||||
msgstr "Acciones"
|
||||
|
||||
#: web/template/invoices/index.gohtml:75 web/template/invoices/view.gohtml:14
|
||||
msgctxt "action"
|
||||
msgid "Duplicate"
|
||||
msgstr "Duplicar"
|
||||
|
||||
#: web/template/invoices/index.gohtml:85
|
||||
msgid "No invoices added yet."
|
||||
msgstr "No hay facturas."
|
||||
|
||||
|
@ -144,11 +154,6 @@ msgctxt "title"
|
|||
msgid "Invoice %s"
|
||||
msgstr "Factura %s"
|
||||
|
||||
#: web/template/invoices/view.gohtml:14
|
||||
msgctxt "action"
|
||||
msgid "Duplicate"
|
||||
msgstr "Duplicar"
|
||||
|
||||
#: web/template/invoices/view.gohtml:17
|
||||
msgctxt "action"
|
||||
msgid "Download invoice"
|
||||
|
|
|
@ -418,34 +418,17 @@ fieldset {
|
|||
}
|
||||
|
||||
/* Profile Menu */
|
||||
|
||||
#profile-menu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#profile-menu summary {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
margin: 1rem 0;
|
||||
details.menu summary {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#profile-menu summary::-webkit-details-marker {
|
||||
details.menu summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#profile-menu summary, #profile-menu button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#profile-menu summary, #profile-menu ul {
|
||||
background-color: var(--numerus--background-color);
|
||||
}
|
||||
|
||||
details.menu[open] summary::before {
|
||||
background-color: var(--numerus--header--background-color);
|
||||
position: fixed;
|
||||
|
@ -460,23 +443,22 @@ details.menu[open] summary::before {
|
|||
}
|
||||
|
||||
ul[role="menu"] {
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#profile-menu ul {
|
||||
position: absolute;
|
||||
right: -1.875em;
|
||||
top: 100%;
|
||||
padding: 1rem 2rem;
|
||||
background-color: var(--numerus--background-color);
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
#profile-menu li + li {
|
||||
ul[role="menu"].action-menu {
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
ul[role="menu"].action-menu li + li {
|
||||
border-top: 1px solid var(--numerus--color--black);
|
||||
}
|
||||
|
||||
#profile-menu button, #profile-menu a {
|
||||
ul[role="menu"].action-menu button, ul[role="menu"].action-menu a {
|
||||
font-size: 2rem;
|
||||
font-style: italic;
|
||||
height: 8rem;
|
||||
|
@ -490,12 +472,37 @@ ul[role="menu"] {
|
|||
text-transform: initial;
|
||||
}
|
||||
|
||||
#profile-menu li i[class^='ri-'] {
|
||||
ul[role="menu"].action-menu li i[class^='ri-'] {
|
||||
margin-right: 2rem;
|
||||
color: var(--numerus--color--dark-gray);
|
||||
}
|
||||
|
||||
#profile-menu summary:hover, #profile-menu summary:focus, #profile-menu button:hover, #profile-menu a:hover, body > nav a:hover {
|
||||
#profile-menu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#profile-menu summary {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
margin: 1rem 0;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#profile-menu button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#profile-menu summary {
|
||||
background-color: var(--numerus--background-color);
|
||||
}
|
||||
|
||||
#profile-menu ul {
|
||||
right: -1.875em;
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
#profile-menu summary:hover, #profile-menu summary:focus, ul[role="menu"].action-menu button:hover, ul[role="menu"].action-menu a:hover, body > nav a:hover {
|
||||
background-color: var(--numerus--color--light-gray);
|
||||
}
|
||||
|
||||
|
@ -534,20 +541,13 @@ main > nav {
|
|||
|
||||
.invoice-status summary {
|
||||
height: 3rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.invoice-status summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.invoice-status ul {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
z-index: 20;
|
||||
padding: 2rem;
|
||||
background: var(--numerus--color--white);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
|
@ -580,6 +580,14 @@ main > nav {
|
|||
background-color: var(--numerus--color--rosy);
|
||||
}
|
||||
|
||||
.actions details {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.actions .action-menu {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* Remix Icon */
|
||||
|
||||
@font-face {
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
<summary>
|
||||
<i class="ri-eye-close-line ri-3x"></i>
|
||||
</summary>
|
||||
<ul role="menu">
|
||||
<ul role="menu" class="action-menu">
|
||||
<li role="presentation">
|
||||
<a role="menuitem" href="{{ companyURI "/profile" }}">
|
||||
<i class="ri-account-circle-line"></i>
|
||||
|
|
|
@ -26,6 +26,7 @@
|
|||
<th>{{( pgettext "Label" "title" )}}</th>
|
||||
<th>{{( pgettext "Amount" "title" )}}</th>
|
||||
<th>{{( pgettext "Download" "title" )}}</th>
|
||||
<th>{{( pgettext "Actions" "title" )}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
@ -45,9 +46,11 @@
|
|||
<ul role="menu">
|
||||
{{- range $status, $name := $.InvoiceStatuses }}
|
||||
{{- if ne $status $invoice.Status }}
|
||||
<li>
|
||||
<button type="submit" name="status" class="invoice-status-{{ $status }}"
|
||||
value="{{ $status }}">{{ $name }}</button>
|
||||
<li role="presentation">
|
||||
<button role="menuitem" type="submit"
|
||||
name="status" value="{{ $status }}"
|
||||
class="invoice-status-{{ $status }}"
|
||||
>{{ $name }}</button>
|
||||
</li>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
|
@ -62,6 +65,19 @@
|
|||
title="{{( pgettext "Download invoice" "action" )}}"
|
||||
aria-label="{{( pgettext "Download invoice %s" "action" )}}"><i
|
||||
class="ri-download-line"></i></a></td>
|
||||
<td class="actions">
|
||||
<details class="menu">
|
||||
<summary><i class="ri-more-line"></i></summary>
|
||||
<ul role="menu" class="action-menu">
|
||||
<li role="presentation">
|
||||
<a role="menuitem" href="{{ companyURI "/invoices/new"}}?duplicate={{ .Slug }}">
|
||||
<i class="ri-file-copy-line"></i>
|
||||
{{( pgettext "Duplicate" "action" )}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
</td>
|
||||
</tr>
|
||||
{{- end }}
|
||||
{{ else }}
|
||||
|
|
Loading…
Reference in New Issue