From f3b841473f18089f2828267dee15b446f8fd02ec Mon Sep 17 00:00:00 2001 From: jordi fita mas Date: Wed, 8 Mar 2023 11:54:06 +0100 Subject: [PATCH] Add the context menu with the duplicate option As per the design document. --- po/ca.po | 19 ++++--- po/es.po | 19 ++++--- web/static/numerus.css | 84 ++++++++++++++++-------------- web/template/app.gohtml | 2 +- web/template/invoices/index.gohtml | 22 ++++++-- 5 files changed, 90 insertions(+), 56 deletions(-) diff --git a/po/ca.po b/po/ca.po index 352f856..12021e4 100644 --- a/po/ca.po +++ b/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 \n" "Language-Team: Catalan \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" diff --git a/po/es.po b/po/es.po index 53c9e5e..27b4c5d 100644 --- a/po/es.po +++ b/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 \n" "Language-Team: Spanish \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" diff --git a/web/static/numerus.css b/web/static/numerus.css index bbbfe23..f13b666 100644 --- a/web/static/numerus.css +++ b/web/static/numerus.css @@ -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 { diff --git a/web/template/app.gohtml b/web/template/app.gohtml index 7ecc425..a7e7e42 100644 --- a/web/template/app.gohtml +++ b/web/template/app.gohtml @@ -13,7 +13,7 @@ -