From 7b408841940468025dbbec1c57ebc6e420265a98 Mon Sep 17 00:00:00 2001 From: elias couppe Date: Fri, 3 May 2024 18:26:59 +0200 Subject: [PATCH 1/7] =?UTF-8?q?fix(header):=20nettoyage=20des=20entr=C3=A9?= =?UTF-8?q?es=20du=20Header?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 24 ++++++------------------ 1 file changed, 6 insertions(+), 18 deletions(-) diff --git a/src/App.vue b/src/App.vue index 236bf3e8..e8cd40ab 100644 --- a/src/App.vue +++ b/src/App.vue @@ -12,16 +12,10 @@ import LogoECOLO from "./assets/logo-transition-ecologique.png" import LogoCNIG from "./assets/logo-cnig.png" // Paramètres pour le Header -const serviceTitle = 'Carte.gouv.fr' +const serviceTitle = 'cartes.gouv.fr' const serviceDescription = 'Portail Cartographique' const logoText = ['RÉPUBLIQUE', 'FRANÇAISE'] const quickLinks = [ - { - label: serviceDescription, - to: '/', - icon: 'ri-arrow-right-line', - iconRight: true - }, { label: 'Accueil', to: '/accueil', @@ -33,11 +27,6 @@ const quickLinks = [ to: '/catalogue', icon: 'ri-arrow-right-line', iconRight: true, - }, - { - label: 'Se Connecter', - to: '/login', - icon: 'fa-user-circle', } ] @@ -118,19 +107,19 @@ const navItems: DsfrNavigationProps['navItems'] = [ { title: 'Commencer avec cartes.gouv', get active () { - return ['Documentation Géoplateforme', 'Questions fréquanetes', 'Nous écrire'].includes(route.name as string) + return ['Documentation Géoplateforme', 'Questions fréquentes', 'Nous écrire'].includes(route.name as string) }, links: [ { - href: '', + href: 'https://cartes.gouv.fr/documentation', text: 'Documentation Géoplateforme', }, { - href: '', - text: 'Questions fréquanetes', + href: 'https://cartes.gouv.fr/faq', + text: 'Questions fréquentes', }, { - href: '', + href: 'https://cartes.gouv.fr/nous-ecrire', text: 'Nous écrire', }, ], @@ -153,7 +142,6 @@ const navItems: DsfrNavigationProps['navItems'] = [ :service-description="serviceDescription" :logo-text="logoText" :quick-links="quickLinks" - show-search > Date: Mon, 6 May 2024 15:46:11 +0200 Subject: [PATCH 2/7] fix(header): correction des liens du menu navigation --- package-lock.json | 2 +- src/App.vue | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index c9344fc2..5c4a85ad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4594,7 +4594,7 @@ "node_modules/geoportal-extensions-openlayers": { "version": "1.0.0-beta.15", "resolved": "file:geoportal-extensions-openlayers-1.0.0-beta.15.tgz", - "integrity": "sha512-3x/ykVaumnOMkbWNrGGEveLMIhUKBKZ+2JiSny8ENg3DGu9vnzW0tSxuDQwspBR7vHuuYGg5XokmSAMJMwU4Yw==", + "integrity": "sha512-bgoD2i5TjfC83dM+Q8FYhalbGzsr65bXJyOtbT5EZGk/zg6NWNYRRwi7EUo3bXA+KOURQxKZ0PXdvwD1J27/jw==", "license": "CECILL-B", "dependencies": { "@gouvfr/dsfr": "^1.11.0", diff --git a/src/App.vue b/src/App.vue index e8cd40ab..02606fc2 100644 --- a/src/App.vue +++ b/src/App.vue @@ -18,7 +18,7 @@ const logoText = ['RÉPUBLIQUE', 'FRANÇAISE'] const quickLinks = [ { label: 'Accueil', - to: '/accueil', + to: '/', icon: 'ri-arrow-right-line', iconRight: true }, @@ -111,26 +111,26 @@ const navItems: DsfrNavigationProps['navItems'] = [ }, links: [ { - href: 'https://cartes.gouv.fr/documentation', + to: '/documentation', text: 'Documentation Géoplateforme', }, { - href: 'https://cartes.gouv.fr/faq', + to: '/faq', text: 'Questions fréquentes', }, { - href: 'https://cartes.gouv.fr/nous-ecrire', + to: '/nous-ecrire', text: 'Nous écrire', }, ], }, { - to: { href: '' }, + to: '/actualites', text: 'Actualités', }, { - to: { href: '' }, - text: 'A propos', + to: '/a-propos', + text: '\u00c0 propos', } ] From bcb8b8391f74e5aed09f16423cc40977566c2214 Mon Sep 17 00:00:00 2001 From: elias couppe Date: Mon, 6 May 2024 18:06:56 +0200 Subject: [PATCH 3/7] feat(header): ajout d'un composable screenSize + masquage navigation --- src/App.vue | 9 +++++++-- src/composables/matchMedia.js | 19 +++++++++++++++++++ 2 files changed, 26 insertions(+), 2 deletions(-) create mode 100644 src/composables/matchMedia.js diff --git a/src/App.vue b/src/App.vue index 02606fc2..d5f77a94 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,6 +1,7 @@ \ No newline at end of file From c69c5b31744b937fe2d2b9a3898b14b63748c7e6 Mon Sep 17 00:00:00 2001 From: elias couppe Date: Tue, 7 May 2024 17:08:47 +0200 Subject: [PATCH 6/7] =?UTF-8?q?refacto(app):=20ajout=20de=20composables=20?= =?UTF-8?q?pour=20le=20param=C3=A9trage=20header/footer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 156 ++++++-------------------------- src/components.d.ts | 4 + src/composables/footerParams.js | 96 ++++++++++++++++++++ src/composables/headerParams.js | 29 ++++++ 4 files changed, 157 insertions(+), 128 deletions(-) create mode 100644 src/composables/footerParams.js create mode 100644 src/composables/headerParams.js diff --git a/src/App.vue b/src/App.vue index c50d5ef8..1f8eb181 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,15 +2,13 @@ import { type DsfrNavigationProps } from '@gouvminint/vue-dsfr'; import { useRoute } from 'vue-router'; import { useMatchMedia } from '@/composables/matchMedia'; +import { useHeaderParams } from '@/composables/headerParams'; +import { useFooterParams } from '@/composables/footerParams'; import StoreDataLoading from './components/StoreDataLoading.vue'; useScheme() -import LogoIGN from "./assets/logo-ign.png" -import LogoTRANSFO from "./assets/logo-transformation-fonction-publiques.png" -import LogoECOLO from "./assets/logo-transition-ecologique.png" -import LogoCNIG from "./assets/logo-cnig.png" import { useModel } from 'vue'; // Paramètres de mediaQuery pour affichage HEADER et FOOTER @@ -18,70 +16,29 @@ const largeScreen = useMatchMedia("LG"); const { setScheme, theme } = useScheme() -const openModalTheme = () => { - opened.value = true; - // setScheme(theme.value === 'light' ? 'dark' : 'light') -} -const onModalClose = () => { - opened.value = false; - // setScheme(theme.value === 'light' ? 'dark' : 'light') -} -const modelValue = ref() +// Paramètres pour le Header +const headerParams = useHeaderParams(); + +// Paramètres pour le Footer +var footerParams = useFooterParams(); + +// gestion de la modale de changement de thème d'affichage +const modelValue = ref(); const changeTheme = () => { setScheme(modelValue.value); } -// Parametres Modale Theme -const opened = ref(false); -const title = "Params" -const size = "md" - -const legend = "Groupe de cases à cocher simple" -const themeOptions = [ - { - label: 'Thème clair', - value: 'light', - id: 'theme-1', - name: 'radio-set', - }, - { - label: 'Thème Sombre', - id: 'theme-2', - value: 'dark', - name: 'radio-set', - }, - { - label: 'Système', - id: 'theme-3', - value: 'system', - name: 'radio-set', - hint: 'Utilise les paramètres sytème.', - } -] - -// Paramètres pour le Header -const serviceTitle = 'cartes.gouv.fr' -const serviceDescription = 'Portail Cartographique' -const logoText = ['RÉPUBLIQUE', 'FRANÇAISE'] -const quickLinks = [ - { - label: 'Accueil', - to: '/', - icon: 'ri-arrow-right-line', - iconRight: true - }, - { - label: 'Catalogue', - to: '/catalogue', - icon: 'ri-arrow-right-line', - iconRight: true, - } -] +const themeModalOpened = ref(false) -const searchQuery = ref('') +const openModalTheme = () => { + console.log(themeModalOpened); + themeModalOpened.value = true; +} -// Paramètres pour le Footer +const onModalClose = () => { + themeModalOpened.value = false; +} const afterMandatoryLinks = [ { label: 'Paramètres d’affichage', @@ -90,64 +47,7 @@ const afterMandatoryLinks = [ to: '/settings', onclick: openModalTheme }, -] -const beforeMandatoryLinks = [{ label: 'Plan du site', to: '/plan-du-site' }] -const a11yCompliance = 'partiellement conforme' -const legalLink = '/mentions-legales' -const personalDataLink = '/donnees-personnelles' -const cookiesLink = '/cookies' -const a11yComplianceLink = '/accessibilite' -const descText = 'Cartes.gouv.fr est développé par l’Institut national de l’information géographique et forestière (IGN) et ses partenaires. Le site s’appuie sur la Géoplateforme, la nouvelle infrastructure publique, ouverte et collaborative des données géographiques.' -const homeLink = '/' -const licenceText = undefined -const licenceTo = undefined -const licenceName = undefined -const licenceLinkProps = undefined -const ecosystemLinks = [ - { - label: 'legifrance.gouv.fr', - href: 'https://legifrance.gouv.fr', - }, - { - label: 'gouvernement.fr', - href: 'https://gouvernement.fr', - }, - { - label: 'service-public.fr', - href: 'https://service-public.fr', - }, - { - label: 'data.gouv.fr', - href: 'https://data.gouv.fr', - }, -] - -// Paramètre pour les partenaires -const partners = { - title: "Nos partenaires", - mainPartner: { - href: "https://www.ign.fr/", - logo: LogoIGN, - name: "IGN" - }, - subPartners: [ - { - href: "https://www.transformation.gouv.fr/", - logo: LogoTRANSFO, - name: "Ministère de la transformation et de la fonction publiques" - }, - { - href: "https://www.ecologie.gouv.fr/", - logo: LogoECOLO, - name: "Ministère de la Transition Écologique et de la Cohésion des Territoires" - }, - { - href: "https://cnig.gouv.fr/", - logo: LogoCNIG, - name: "Conseil national de l’information géolocalisée" - }, - ] -} +]; // Paramètre pour la barre de navigations const route = useRoute() @@ -185,8 +85,8 @@ const navItems: DsfrNavigationProps['navItems'] = [