From bda727fcc8ff1da6a2fb5e945142c3f924d63b15 Mon Sep 17 00:00:00 2001 From: Nicolas KEMPF Date: Tue, 9 May 2023 13:58:05 +0200 Subject: [PATCH 01/27] chore: :arrow_up: update dsfr --- package-lock.json | 18 +++++++++--------- package.json | 2 +- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index e14aa2b2e..3e59fcccb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,18 +1,18 @@ { "name": "udata-front", - "version": "1.0.0", + "version": "3.2.3.dev", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "udata-front", - "version": "1.0.0", + "version": "3.2.3.dev", "license": "MIT", "devDependencies": { "@conciergerie.dev/select-a11y": "^3.1.0", "@conciergerie.dev/vue-toaster": "^2.4.0", "@etalab/udata-front-plugins-helper": "1.1.0", - "@gouvfr/dsfr": "^1.5.1", + "@gouvfr/dsfr": "^1.9.2", "@intlify/unplugin-vue-i18n": "^0.8.0", "@lhci/cli": "^0.10.0", "@sentry/tracing": "^6.10.0", @@ -2187,9 +2187,9 @@ "dev": true }, "node_modules/@gouvfr/dsfr": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/@gouvfr/dsfr/-/dsfr-1.5.1.tgz", - "integrity": "sha512-z0o1zD3zAzF3CTGWev2tSLHPv8yk52xq6QOuEuGulGfIze5N/Y3W+ScT+dKyZG8y/aOyX9T+O9wYnNH5XIGb0g==", + "version": "1.9.2", + "resolved": "https://registry.npmjs.org/@gouvfr/dsfr/-/dsfr-1.9.2.tgz", + "integrity": "sha512-uVo+z3xo2FFANa/cYdP2z21ieEXAeABKKrTE2FdKE8HXjhyh9tIcfsju8ux6nFA+pfBeOeUCwBXfOjPQD0eT5w==", "dev": true, "engines": { "node": ">=14.18.0" @@ -10109,9 +10109,9 @@ "dev": true }, "@gouvfr/dsfr": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/@gouvfr/dsfr/-/dsfr-1.5.1.tgz", - "integrity": "sha512-z0o1zD3zAzF3CTGWev2tSLHPv8yk52xq6QOuEuGulGfIze5N/Y3W+ScT+dKyZG8y/aOyX9T+O9wYnNH5XIGb0g==", + "version": "1.9.2", + "resolved": "https://registry.npmjs.org/@gouvfr/dsfr/-/dsfr-1.9.2.tgz", + "integrity": "sha512-uVo+z3xo2FFANa/cYdP2z21ieEXAeABKKrTE2FdKE8HXjhyh9tIcfsju8ux6nFA+pfBeOeUCwBXfOjPQD0eT5w==", "dev": true }, "@hapi/hoek": { diff --git a/package.json b/package.json index 5ff7cd8b8..6f7f2f588 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@conciergerie.dev/select-a11y": "^3.1.0", "@conciergerie.dev/vue-toaster": "^2.4.0", "@etalab/udata-front-plugins-helper": "1.1.0", - "@gouvfr/dsfr": "^1.5.1", + "@gouvfr/dsfr": "^1.9.2", "@intlify/unplugin-vue-i18n": "^0.8.0", "@lhci/cli": "^0.10.0", "@sentry/tracing": "^6.10.0", From 10dd5fcc1799e58d38a54788c7d66c5632ab19b6 Mon Sep 17 00:00:00 2001 From: Nicolas KEMPF Date: Tue, 9 May 2023 13:59:47 +0200 Subject: [PATCH 02/27] fix: :lipstick: fix DSFR removed style --- theme/less/components/badge.less | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/theme/less/components/badge.less b/theme/less/components/badge.less index 14cbed363..6d2853dd7 100644 --- a/theme/less/components/badge.less +++ b/theme/less/components/badge.less @@ -17,10 +17,13 @@ Additionally, it also allows regular-non-awarded people to quickly identify publ @import (less) "@gouvfr/dsfr/dist/component/badge/badge.css"; .fr-badge { + & > [class^="fr-icon-"]::before, + & > [class*=" fr-icon-"]::before { + display: inline-flex; + &:extend(.fr-icon--sm::before); + } & > [class^="fr-icon-"], & > [class*=" fr-icon-"] { - display: inline-flex; - .fr-icon--sm; .fr-mr-1v; } } From 8d71b1b65f759f627ac847aef19234ec2cf86d74 Mon Sep 17 00:00:00 2001 From: Nicolas KEMPF Date: Tue, 9 May 2023 14:00:04 +0200 Subject: [PATCH 03/27] refactor: :fire: remove code added to dsfr --- theme/less/components/well.less | 40 --------------------------------- 1 file changed, 40 deletions(-) diff --git a/theme/less/components/well.less b/theme/less/components/well.less index ffc37ea06..399ae5e13 100644 --- a/theme/less/components/well.less +++ b/theme/less/components/well.less @@ -50,46 +50,6 @@ html[data-fr-js] [data-show-no-js], html[data-fr-js=true] [data-show-no-js] { } } -/* - TODO : remove when dsfr >= 1.6 -*/ -.fr-notice { - position: relative; - - --title-spacing: 0; - --text-spacing: 0; - padding-top: 1rem; - padding-bottom: 1rem; - background-color: var(--background-contrast-grey); - color: var(--text-title-grey); -} - -.fr-notice__body { - position: relative; - padding: 0 2.5rem 0 2.5rem; -} - -.fr-notice__body::before { - --icon-size: 1.5rem; - flex: 0 0 auto; - display: inline-block; - vertical-align: calc((0.75em - var(--icon-size)) * 0.5); - background-color: currentColor; - width: var(--icon-size); - height: var(--icon-size); - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; - position: absolute; - left: 0; -} - -.fr-notice__title { - position: relative; - font-size: 1rem; - line-height: 1.5rem; - font-weight: 700; -} - .fr-notice--warning .fr-notice__body { &:extend(.fr-icon-warning-line); &:extend([class^="fr-icon-"]); From 453f4f558e402f14450a6f1dfdabafcdb2431b52 Mon Sep 17 00:00:00 2001 From: Nicolas KEMPF Date: Tue, 9 May 2023 14:00:51 +0200 Subject: [PATCH 04/27] refactor: :fire: remove code from fixed dsfr bug --- theme/less/components/tabs.less | 9 --------- 1 file changed, 9 deletions(-) diff --git a/theme/less/components/tabs.less b/theme/less/components/tabs.less index 66c772019..99b50aa04 100644 --- a/theme/less/components/tabs.less +++ b/theme/less/components/tabs.less @@ -101,15 +101,6 @@ You can use tabs from DSFR. It uses DSFR colors and conventions. It allows you t &:not(.fr-transition-none) > .fr-tabs__panel:not(.fr-tabs__panel--selected)[data-fr-js-tab-panel] { display: none; } - & > .fr-tabs__panel--direction-start[data-fr-js-tab-panel] { - transform: translate(-200%); - } - & > .fr-tabs__panel--selected[data-fr-js-tab-panel] { - transform: translate(-100%); - } - & > .fr-tabs__panel--direction-end[data-fr-js-tab-panel] { - transform: translate(0%); - } &::after { box-shadow: none; .border-top; From 07497781c9c78739c33529f6c65fc8c9c2392072 Mon Sep 17 00:00:00 2001 From: Nicolas KEMPF Date: Tue, 9 May 2023 14:15:04 +0200 Subject: [PATCH 05/27] fix: :bug: fix dsfr notice style not imported --- theme/less/components/well.less | 1 + 1 file changed, 1 insertion(+) diff --git a/theme/less/components/well.less b/theme/less/components/well.less index 399ae5e13..a0ea2af1e 100644 --- a/theme/less/components/well.less +++ b/theme/less/components/well.less @@ -22,6 +22,7 @@ They exist in many colors and two versions, primary with a solid background and ``` */ @import (less) "@gouvfr/dsfr/dist/component/alert/alert.css"; +@import (less) "@gouvfr/dsfr/dist/component/notice/notice.css"; .fr-alert p { margin: var(--text-spacing); From 5e3610e5385cc24808d52176090d9a5053fbed13 Mon Sep 17 00:00:00 2001 From: Nicolas KEMPF Date: Tue, 9 May 2023 14:18:34 +0200 Subject: [PATCH 06/27] fix: :bug: fix dsfr tab without js --- theme/less/components/tabs.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme/less/components/tabs.less b/theme/less/components/tabs.less index 99b50aa04..ff63b3eec 100644 --- a/theme/less/components/tabs.less +++ b/theme/less/components/tabs.less @@ -80,7 +80,7 @@ You can use tabs from DSFR. It uses DSFR colors and conventions. It allows you t display: block; } & > .fr-tabs__panel:not([data-fr-js-tab-panel]) { - transform: translate(0%); + left: 0; &:not(.fr-tabs__panel--selected) { visibility: visible; } From 5bbdbb4e5855762005cc4ec2291c8c7ca452c101 Mon Sep 17 00:00:00 2001 From: Nicolas KEMPF Date: Tue, 9 May 2023 14:50:08 +0200 Subject: [PATCH 07/27] fix: :bug: fix list sanitize --- theme/less/override.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/theme/less/override.less b/theme/less/override.less index 1b265b982..401763f64 100644 --- a/theme/less/override.less +++ b/theme/less/override.less @@ -52,3 +52,7 @@ a:not([href]) { Menlo, Monaco, Consolas, monospace; } + +:where(nav li):before { + float: none; +} From d1b42194defc923396a9815188ea838374a753b8 Mon Sep 17 00:00:00 2001 From: Nicolas KEMPF Date: Tue, 9 May 2023 16:00:09 +0200 Subject: [PATCH 08/27] fix(dsfr): :bug: fix not enlarged link --- theme/less/content/links.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/theme/less/content/links.less b/theme/less/content/links.less index 7603f4bca..cc0aa2e56 100644 --- a/theme/less/content/links.less +++ b/theme/less/content/links.less @@ -139,8 +139,9 @@ a { } .fr-enlarge-link .not-enlarged a { + background-image: var(--underline-img),var(--underline-img); &:hover { - background-image: var(--underline-img), var(--underline-img) !important; + &:extend([href]); } &::before { background: none; From 28e4889251b896f7b6035e6fa9c6aa213263ca91 Mon Sep 17 00:00:00 2001 From: Nicolas KEMPF Date: Tue, 9 May 2023 16:00:39 +0200 Subject: [PATCH 09/27] fix(dsfr): :bug: fix selected tag color --- theme/less/components/tags.less | 1 + 1 file changed, 1 insertion(+) diff --git a/theme/less/components/tags.less b/theme/less/components/tags.less index 038bf0bcf..2029f60d2 100644 --- a/theme/less/components/tags.less +++ b/theme/less/components/tags.less @@ -36,6 +36,7 @@ a.fr-tag, button.fr-tag { --background-action-high-blue-france-active: @blue-400-active; &[aria-pressed="true"] { + &:extend(button.fr-tag[aria-pressed=true]:not(:disabled)); --background-action-high-blue-france: @blue-400; --background-action-high-blue-france-hover: @blue-400-hover; &::after { From dad86fcaf5fb78d56ceabfe815dee4343da2abac Mon Sep 17 00:00:00 2001 From: Nicolas KEMPF Date: Tue, 9 May 2023 16:02:54 +0200 Subject: [PATCH 10/27] fix(dsfr): :bug: fix pressed check color --- theme/less/components/tags.less | 1 + 1 file changed, 1 insertion(+) diff --git a/theme/less/components/tags.less b/theme/less/components/tags.less index 2029f60d2..9ddc3562e 100644 --- a/theme/less/components/tags.less +++ b/theme/less/components/tags.less @@ -40,6 +40,7 @@ a.fr-tag, button.fr-tag { --background-action-high-blue-france: @blue-400; --background-action-high-blue-france-hover: @blue-400-hover; &::after { + &:extend(button.fr-tag[aria-pressed=true]::after); --text-action-high-blue-france: @blue-400; } } From 88a467b8529dc6ff19b8aaf10c8457cb622764de Mon Sep 17 00:00:00 2001 From: Nicolas KEMPF Date: Tue, 9 May 2023 17:14:59 +0200 Subject: [PATCH 11/27] fix(dsfr): :bug: fix sanitize li --- theme/less/override.less | 1 + 1 file changed, 1 insertion(+) diff --git a/theme/less/override.less b/theme/less/override.less index 401763f64..aaf2cb14c 100644 --- a/theme/less/override.less +++ b/theme/less/override.less @@ -54,5 +54,6 @@ a:not([href]) { } :where(nav li):before { + content: ""; float: none; } From 1dc88f33eccaa9b4876f92c782ac39e2f643b6d1 Mon Sep 17 00:00:00 2001 From: Nicolas KEMPF Date: Tue, 9 May 2023 17:15:25 +0200 Subject: [PATCH 12/27] feat(dsfr): :sparkles: add button to change lang --- theme/less/specific/translate.less | 8 ++++ theme/less/style.less | 1 + udata_front/frontend/helpers.py | 10 +++- .../theme/gouvfr/templates/footer.html | 46 ++++++++++++------- 4 files changed, 47 insertions(+), 18 deletions(-) create mode 100644 theme/less/specific/translate.less diff --git a/theme/less/specific/translate.less b/theme/less/specific/translate.less new file mode 100644 index 000000000..7bc121d1d --- /dev/null +++ b/theme/less/specific/translate.less @@ -0,0 +1,8 @@ +@import (less) "@gouvfr/dsfr/dist/component/translate/translate.css"; + +.fr-translate .fr-translate__btn[aria-expanded=true] { + --text-active-blue-france: @blue-400; + --background-open-blue-france: @background-action-low-blue-cumulus; + --background-open-blue-france-hover: @background-action-low-blue-cumulus-hover; + --background-open-blue-france-active: @background-action-low-blue-cumulus-active; +} diff --git a/theme/less/style.less b/theme/less/style.less index 6b3cb294d..3872af471 100644 --- a/theme/less/style.less +++ b/theme/less/style.less @@ -67,6 +67,7 @@ @import "./specific/oauth.less"; @import "./specific/oembed.less"; @import "./specific/search.less"; +@import "./specific/translate.less"; // Override some stuff not sanitized or coming from DSFR @import "./override.less"; diff --git a/udata_front/frontend/helpers.py b/udata_front/frontend/helpers.py index feb192eaa..bc2955567 100644 --- a/udata_front/frontend/helpers.py +++ b/udata_front/frontend/helpers.py @@ -17,7 +17,7 @@ from udata.core.dataset.apiv2 import dataset_fields from udata.core.dataset.models import Dataset from udata.models import db -from udata.i18n import format_date, format_timedelta, _, pgettext +from udata.i18n import get_locale, format_date, format_timedelta, _, pgettext from udata.search.result import SearchResult from udata.utils import camel_to_lodash from udata_front.theme import theme_static_with_version @@ -445,3 +445,11 @@ def visibles(value): @front.app_template_global() def selected(current_value, value): return 'selected' if current_value == value else '' + +@front.app_template_global() +def current_language_name(): + '''A locale aware formatter.''' + locale = get_locale() + for code, name in current_app.config['LANGUAGES'].items(): + if locale == code: + return name diff --git a/udata_front/theme/gouvfr/templates/footer.html b/udata_front/theme/gouvfr/templates/footer.html index 89c80942a..fcf8a28ae 100644 --- a/udata_front/theme/gouvfr/templates/footer.html +++ b/udata_front/theme/gouvfr/templates/footer.html @@ -134,23 +134,35 @@

{{ _('Social networks') }}

- +
From aa70cefb73a8e3ebabdecb62c8bc661a61b85ae3 Mon Sep 17 00:00:00 2001 From: Nicolas KEMPF Date: Thu, 11 May 2023 09:53:05 +0200 Subject: [PATCH 13/27] feat(dsfr): :sparkles: use dsfr translate component to select language --- udata_front/frontend/helpers.py | 17 +++++++++++------ udata_front/theme/gouvfr/templates/footer.html | 8 ++++---- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/udata_front/frontend/helpers.py b/udata_front/frontend/helpers.py index bc2955567..908c1e6a2 100644 --- a/udata_front/frontend/helpers.py +++ b/udata_front/frontend/helpers.py @@ -364,14 +364,9 @@ def i18n_alternate_links(): LINK_PATTERN = ( '') links = [] - params = {} - if request.args: - params.update(request.args) - if request.view_args: - params.update(request.view_args) for lang in current_app.config['LANGUAGES']: - url = url_for(request.endpoint, lang_code=lang, **params, _external=True) + url = language_url(lang) links.append(LINK_PATTERN.format(url=url, lang=lang)) return Markup(''.join(links)) except Exception: @@ -453,3 +448,13 @@ def current_language_name(): for code, name in current_app.config['LANGUAGES'].items(): if locale == code: return name + +@front.app_template_global() +def language_url(lang_code): + '''Create an URL for the current endpoint and the given language code''' + params = {} + if request.args: + params.update(request.args) + if request.view_args: + params.update(request.view_args) + return url_for(request.endpoint, lang_code=lang_code, **params, _external=True) diff --git a/udata_front/theme/gouvfr/templates/footer.html b/udata_front/theme/gouvfr/templates/footer.html index fcf8a28ae..73c99599f 100644 --- a/udata_front/theme/gouvfr/templates/footer.html +++ b/udata_front/theme/gouvfr/templates/footer.html @@ -117,8 +117,8 @@

{{ _('Social networks') }}

- - @@ -142,7 +142,7 @@

{{ _('Social networks') }}

aria-expanded="false" title="{{ _('Select a Language') }}" > - {{g.lang_code|upper}} - {{current_language_name()}} + {{g.lang_code|upper}} - {{current_language_name()}}