Add the context menu with the duplicate option

As per the design document.
This commit is contained in:
jordi fita mas 2023-03-08 11:54:06 +01:00
parent 0c8edb9cae
commit f3b841473f
5 changed files with 90 additions and 56 deletions

View File

@ -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"

View File

@ -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"

View File

@ -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 {

View File

@ -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>

View File

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