From 928993390c7c28abe49b6925a2973298d1521b43 Mon Sep 17 00:00:00 2001
From: Dorine Lambinet <dorine.lambinet@gmail.com>
Date: Sun, 11 Dec 2022 19:00:01 +0100
Subject: [PATCH] Ajoute flowbite svelte et popover sur bouton impact budget
indisponible
---
package.json | 4 ++++
src/routes/+page.svelte | 42 ++++++++++++++++++++++++++++++++---------
tailwind.config.cjs | 6 +++++-
3 files changed, 42 insertions(+), 10 deletions(-)
diff --git a/package.json b/package.json
index 0b8f1ae75..0f56f18e1 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
"@leximpact/socio-fiscal-openfisca-json": "^0.0.85",
"@openfisca/json-model": "^3.0.2",
"@playwright/test": "^1.28.1",
+ "@popperjs/core": "^2.11.6",
"@rgossiaux/svelte-headlessui": "^1.0.0-beta.12",
"@rollup/plugin-yaml": "^4.0.1",
"@sveltejs/adapter-node": "^1.0.0-next.102",
@@ -37,12 +38,15 @@
"@typescript-eslint/eslint-plugin": "^5.0.0",
"@typescript-eslint/parser": "^5.0.0",
"autoprefixer": "^10.2.5",
+ "classnames": "^2.3.2",
"d3-scale": "^4.0.0",
"dedent-js": "^1.0.1",
"dotenv": "^16.0.0",
"eslint": "^8.0.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-svelte3": "^4.0.0",
+ "flowbite": "^1.5.5",
+ "flowbite-svelte": "^0.28.11",
"fs-extra": "^11.1.0",
"fuse.js": "^6.4.6",
"iconify-icon": "^1.0.2",
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 88e64d50e..b7052042f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -17,6 +17,8 @@
import { openModal } from "svelte-modals"
import type { Writable } from "svelte/store"
+ import { Popover } from "flowbite-svelte"
+
import { browser } from "$app/environment"
import { goto } from "$app/navigation"
import { page } from "$app/stores"
@@ -64,6 +66,8 @@
export let data: PageData
+ let placement
+
const billName = getContext("billName") as Writable<string | undefined>
const budgetSimulation = getContext("budgetSimulation") as Writable<
BudgetSimulation | undefined
@@ -1079,22 +1083,42 @@
<div>
<h2 class="flex">
<div
- class="flex h-14 items-center px-3 text-2xl text-black sm:text-3xl md:px-1 md:text-xl lg:px-2 lg:text-2xl xl:px-3 xl:text-3xl"
+ class="flex h-14 items-center border-b-4 border-black px-3 text-2xl text-black sm:text-3xl md:px-1 md:text-xl lg:px-2 lg:text-2xl xl:px-3 xl:text-3xl"
>
<span class="pb-2 font-bold tracking-wide text-black">
Impact cas type
</span>
</div>
+
<div
- class="flex h-14 items-center px-3 text-2xl text-black sm:text-3xl md:px-1 md:text-xl lg:px-2 lg:text-2xl xl:px-3 xl:text-3xl"
+ id="placement-bottom"
+ on:mouseenter={() => (placement = "bottom")}
+ class="flex h-14 items-center px-3 text-2xl text-black sm:text-3xl md:px-1 md:text-xl lg:px-2 lg:text-2xl xl:px-3 xl:text-3xl"
>
- <span
- title="Le calcul budgétaire n'est pas disponible pour ce dispositif"
- class="pb-2 tracking-wide text-gray-300"
- >
+ <span class="pb-2 tracking-wide text-gray-300">
Impact budgétaires
</span>
</div>
+
+ <Popover
+ triggeredBy="[id^='placement-']"
+ {placement}
+ class="m-10 w-80 text-sm font-light shadow-2xl"
+ title="Impact budgétaire indisponible"
+ >
+ <span class="text-black">
+ Le calcul des impacts budgétaires du dispositif « {displayMode.parametersVariableName} »
+ n'est pas encore disponible.
+ <span class="font-normal"
+ >Ce sujet vous intéresse ? Écrivez-nous à
+ <a
+ class="link"
+ href="mailto:leximpact@assemblee-nationale.fr"
+ >leximpact@assemblee-nationale.fr</a
+ ></span
+ >
+ </span>
+ </Popover>
</h2>
</div>
{/if}
@@ -1111,7 +1135,7 @@
</h3>
<div class="my-5 flex justify-center">
<div
- class="mx-6 grow-0 items-center rounded-lg bg-le-bleu py-2 text-lg uppercase text-white shadow-md hover:bg-gray-300 hover:text-black focus:outline-none md:mx-0"
+ class="mx-6 grow-0 items-center rounded-lg bg-le-bleu py-2 px-4 text-lg uppercase text-white shadow-md hover:bg-blue-900 focus:outline-none md:mx-0"
>
<a
href={`/auth/login?redirect=${encodeURIComponent(
@@ -1153,13 +1177,13 @@
</h3>
<div class="my-5 flex justify-center">
<div
- class="mx-6 grow-0 items-center rounded-lg bg-le-bleu py-2 text-lg uppercase text-white shadow-md hover:bg-gray-300 hover:text-black focus:outline-none md:mx-0"
+ class="mx-6 grow-0 items-center rounded-lg bg-le-bleu py-2 text-lg uppercase text-white shadow-md hover:bg-blue-900 focus:outline-none md:mx-0"
>
<a
href="https://budget.leximpact.an.fr/authentication/signin/leximpact?redirect=/budget"
title="Vers le simulateur CSG Budget de la Sécurité sociale"
>
- <div class="flex h-12 items-center px-4 py-1">
+ <div class="flex h-10 items-center px-4 py-1">
<PictoBudgetEtat />
<span class="pl-1 text-lg"> Simulateur budget CSG </span>
<iconify-icon class="ml-2 h-4 w-4" icon="ri-share-box-line" />
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 39d4f109f..eb4fba32c 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -3,8 +3,12 @@ const typography = require("@tailwindcss/typography")
const colors = require("tailwindcss/colors")
const config = {
- content: ["./src/**/*.{html,js,svelte,ts}"],
+ content: ["./src/**/*.{html,js,svelte,ts}", "./src/**/*.{html,js,svelte,ts}",
+ "./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",],
plugins: [
+ [
+ require('flowbite/plugin')
+ ],
typography,
function ({ addUtilities }) {
const extendLineThrough = {
--
GitLab