diff --git a/src/app.postcss b/src/app.postcss index 55101502655c6aa89045177d262a4613aea6ae3e..ab642b313082586039f23e8f4b2bc0937b2b25c6 100644 --- a/src/app.postcss +++ b/src/app.postcss @@ -21,4 +21,7 @@ .link2 { @apply underline hover:text-gray-800; } + .opacity-0-unclickable { + @apply opacity-0 pointer-events-none; + } } diff --git a/src/lib/components/test_cases/TestCaseEdit.svelte b/src/lib/components/test_cases/TestCaseEdit.svelte index bcaf458a39bedc6b0ad7deef4644712116bb726b..3d99ddc6c7fd80968188d1dd63f34e2d7ac99ded 100644 --- a/src/lib/components/test_cases/TestCaseEdit.svelte +++ b/src/lib/components/test_cases/TestCaseEdit.svelte @@ -51,6 +51,9 @@ .map(([name]) => name), ) + $: inputInstantsByVariableName ??= {} + $: situation ??= {} + $: persons = Object.entries( (situation[personEntity.key_plural] ?? {}) as { [id: string]: PopulationWithoutId diff --git a/src/lib/components/test_cases/TestCaseSummary.svelte b/src/lib/components/test_cases/TestCaseSummary.svelte index 9b5b467cdf027c9884d2337d5fec3c33c58847f2..715330d673bdeb93bb7ab88070eb5f62aee191d0 100644 --- a/src/lib/components/test_cases/TestCaseSummary.svelte +++ b/src/lib/components/test_cases/TestCaseSummary.svelte @@ -389,39 +389,39 @@ {#if mode === "view"} <div class="flex items-end gap-8"> - {#if displayMode.edit === undefined} - {#if mode === "view"} - <button - class="flex text-sm uppercase text-gray-600 hover:text-black" - on:click={() => (isTestCaseCompareModalOpen = true)} - title="Comparer ce cas type avec un autre" - id="situation_{situationIndex}_compare" - ><span> + {#if mode === "view"} + <button + class="flex text-sm uppercase text-gray-600 hover:text-black transition-opacity ease duration-500" + class:opacity-0-unclickable={displayMode.edit !== undefined} + on:click={() => (isTestCaseCompareModalOpen = true)} + title="Comparer ce cas type avec un autre" + id="situation_{situationIndex}_compare" + ><span> <iconify-icon - icon="ri-user-shared-2-fill" - class="align-[-0.2rem] text-lg" + icon="ri-user-shared-2-fill" + class="align-[-0.2rem] text-lg" /> <iconify-icon - icon="ri-user-line" - class="-ml-1 mr-1 align-[-0.2rem] text-lg" + icon="ri-user-line" + class="-ml-1 mr-1 align-[-0.2rem] text-lg" /> </span> - comparer - </button> - {/if} - <button - class="flex text-sm uppercase text-gray-600 hover:text-black" - on:click={() => dispatch("changeTestCaseToEditIndex", situationIndex)} - title="Éditer ce cas type" - id="situation_{situationIndex}_edit" - > - <iconify-icon - icon="ri-pencil-fill" - class="mr-1 align-[-0.2rem] text-lg" - /> - <span class="hidden sm:flex">éditer</span> + comparer </button> {/if} + <button + class="flex text-sm uppercase text-gray-600 hover:text-black transition-opacity ease duration-500" + class:opacity-0-unclickable={displayMode.edit !== undefined} + on:click={() => dispatch("changeTestCaseToEditIndex", situationIndex)} + title="Éditer ce cas type" + id="situation_{situationIndex}_edit" + > + <iconify-icon + icon="ri-pencil-fill" + class="mr-1 align-[-0.2rem] text-lg" + /> + <span class="hidden sm:flex">éditer</span> + </button> </div> {/if} </div> diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index a3bbee2ba63c82a63b74965f040df1086c2855bb..bb6e1029198a25652d18721bbf6ed23e5f216601 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -666,84 +666,91 @@ } let validateBtnHeight = 0; + + function onKeyDown(e) { + switch (e.keyCode) { + case 13: // 'Enter' key + if (displayMode.edit !== undefined) changeTestCaseToEditIndex(undefined) + } + } </script> -<svelte:window bind:innerWidth={windowInnerWidth} /> +<svelte:window bind:innerWidth={windowInnerWidth} on:keydown={onKeyDown} /> <svelte:head> <title>Calculs | {data.title}</title> </svelte:head> -{#if displayMode.edit === undefined} - <div - class="sticky top-0 z-50 flex h-10 min-h-10 w-full justify-between shadow-md md:hidden" - > - <!--Onglets - MOBILE--> - <a - class="flex w-1/2 items-center justify-center text-base uppercase tracking-wider" - class:font-bold={displayMode.mobileLaw} - class:text-white={displayMode.mobileLaw} - class:bg-le-jaune-dark={displayMode.mobileLaw} - class:shadow-inner={displayMode.mobileLaw} - class:bg-le-jaune-light={!displayMode.mobileLaw} - class:text-le-jaune-dark={!displayMode.mobileLaw} - href={newSimulationUrl({ - ...displayMode, - mobileLaw: true, - })} - data-sveltekit-noscroll +<main class="fond flex-1 flex h-full overflow-x-clip md:overflow-hidden"> + <div class="flex-[1_0_100%] flex flex-col overflow-x-clip md:overflow-hidden transition-transform ease-in-out-quart duration-500" + class:!translate-x-[-50%]={displayMode.edit !== undefined}> + <div + class="sticky top-0 z-50 flex h-10 min-h-10 w-full justify-between shadow-md md:hidden" > - <div - class:border-b-2={displayMode.mobileLaw} - class:border-white={displayMode.mobileLaw} + <!--Onglets - MOBILE--> + <a + class="flex w-1/2 items-center justify-center text-base uppercase tracking-wider" + class:font-bold={displayMode.mobileLaw} + class:text-white={displayMode.mobileLaw} + class:bg-le-jaune-dark={displayMode.mobileLaw} + class:shadow-inner={displayMode.mobileLaw} + class:bg-le-jaune-light={!displayMode.mobileLaw} + class:text-le-jaune-dark={!displayMode.mobileLaw} + href={newSimulationUrl({ + ...displayMode, + mobileLaw: true, + })} + data-sveltekit-noscroll > - Loi - </div> - </a> - <a - class="flex w-1/2 items-center justify-center text-base uppercase tracking-wider" - class:font-bold={!displayMode.mobileLaw} - class:text-white={!displayMode.mobileLaw} - class:bg-le-jaune-dark={!displayMode.mobileLaw} - class:shadow-inner-={!displayMode.mobileLaw} - class:bg-le-jaune-light={displayMode.mobileLaw} - class:text-le-jaune-very-dark={displayMode.mobileLaw} - href={newSimulationUrl({ - ...displayMode, - mobileLaw: undefined, - })} - data-sveltekit-noscroll - > - <div - class:border-b-2={!displayMode.mobileLaw} - class:border-white={!displayMode.mobileLaw} + <div + class:border-b-2={displayMode.mobileLaw} + class:border-white={displayMode.mobileLaw} + > + Loi + </div> + </a> + <a + class="flex w-1/2 items-center justify-center text-base uppercase tracking-wider" + class:font-bold={!displayMode.mobileLaw} + class:text-white={!displayMode.mobileLaw} + class:bg-le-jaune-dark={!displayMode.mobileLaw} + class:shadow-inner-={!displayMode.mobileLaw} + class:bg-le-jaune-light={displayMode.mobileLaw} + class:text-le-jaune-very-dark={displayMode.mobileLaw} + href={newSimulationUrl({ + ...displayMode, + mobileLaw: undefined, + })} + data-sveltekit-noscroll > - Impacts - </div> + <div + class:border-b-2={!displayMode.mobileLaw} + class:border-white={!displayMode.mobileLaw} + > + Impacts + </div> - {#if Object.keys($parametricReform).length !== 0 && displayMode.mobileLaw} - <span class="flex h-3 w-3"> - <span - class="absolute inline-flex h-3 w-3 animate-ping rounded-full bg-le-jaune-dark bg-opacity-90" - /> - <span class="relative inline-flex h-3 w-3 rounded-full bg-le-jaune" /> - </span> - {/if} - </a> - </div> -{/if} + {#if Object.keys($parametricReform).length !== 0 && displayMode.mobileLaw} + <span class="flex h-3 w-3"> + <span + class="absolute inline-flex h-3 w-3 animate-ping rounded-full bg-le-jaune-dark bg-opacity-90" + /> + <span class="relative inline-flex h-3 w-3 rounded-full bg-le-jaune" /> + </span> + {/if} + </a> + </div> -<main class="fond flex-1 md:overflow-hidden"> - <div class="flex md:h-full"> - <!-- Panneau de gauche les zones éditables par l'utilisateur (amendement)--> - {#if displayMode.edit === undefined} + <div class="flex flex-1 overflow-x-hidden"> + <!-- Panneau de gauche les zones éditables par l'utilisateur (amendement)--> <div - class="w-full flex-none bg-white md:block md:w-1/2" - class:hidden={!displayMode.mobileLaw} + class="flex h-fit md:!h-full bg-white overflow-y-scroll md:overflow-visible md:z-10 flex-[1_0_100%] md:flex-[1_0_50%] md:translate-x-0 transition-transform ease-in-out-quart duration-500" + class:translate-x-[-100%]={!displayMode.mobileLaw} + class:!h-screen={!displayMode.mobileLaw} id="situation_left_part_law" > <div class="flex min-h-full"> <!--Partie I Paramètres de la loi--> - <div class="w-full bg-white md:w-2/3"> + <div class="w-full bg-white md:w-2/3 overflow-y-scroll"> <h1 class="mb-5 ml-5 hidden border-b border-black pb-3 text-3xl font-bold text-black md:flex md:pt-12 md:text-2xl lg:pt-11 lg:text-3xl" > @@ -803,9 +810,9 @@ <a class="text-sm uppercase text-gray-600 hover:text-black" href={newSimulationUrl({ - ...displayMode, - parametersVariableName: "csg_imposable_salaire", - })} + ...displayMode, + parametersVariableName: "csg_imposable_salaire", + })} > CSG - part imposable<iconify-icon class="ml-1 align-[-0.23rem] text-lg" @@ -818,9 +825,9 @@ <a class="flex items-center text-sm uppercase text-gray-600 hover:text-black" href={newSimulationUrl({ - ...displayMode, - parametersVariableName: "csg_deductible_salaire", - })} + ...displayMode, + parametersVariableName: "csg_deductible_salaire", + })} > CSG - part déductible<iconify-icon class="ml-1 align-[-0.2rem] text-lg" @@ -830,7 +837,7 @@ </div> {/if} - <div class="overflow-y-auto md:h-[calc(100vh-12.8rem)]"> + <div class="overflow-y-auto"> <h1 class="ml-3 flex border-b border-black pt-3 pb-3 text-2xl font-bold text-black md:hidden" > @@ -845,8 +852,8 @@ <button class="place-self-start text-lg font-light" on:click={() => { - modificationsOpen = !modificationsOpen - }} + modificationsOpen = !modificationsOpen + }} > {#if !modificationsOpen} <iconify-icon @@ -907,9 +914,9 @@ <a class="text-sm uppercase text-gray-600 hover:text-black" href={newSimulationUrl({ - ...displayMode, - parametersVariableName: "csg_imposable_salaire", - })} + ...displayMode, + parametersVariableName: "csg_imposable_salaire", + })} > CSG - part imposable<iconify-icon class="ml-1 align-[-0.23rem] text-lg" @@ -922,9 +929,9 @@ <a class="text-sm uppercase text-gray-600 hover:text-black" href={newSimulationUrl({ - ...displayMode, - parametersVariableName: "csg_deductible_salaire", - })} + ...displayMode, + parametersVariableName: "csg_deductible_salaire", + })} > CSG - part déductible<iconify-icon class="ml-1 align-[-0.23rem] text-lg" @@ -957,8 +964,8 @@ <button class="place-self-start text-lg font-light" on:click={() => { - modificationsOpen = !modificationsOpen - }} + modificationsOpen = !modificationsOpen + }} > {#if !modificationsOpen} <iconify-icon @@ -1039,67 +1046,67 @@ </div> </div> </div> - {/if} - <!-- Panneau central pour les impacts --> + <!-- Panneau central pour les impacts --> - <!-- - Note: When you change the height below (h-...), don't forget to adjust - the height of the div enclosing the test cases below. - --> - <div - class="md:block w-full overflow-y-scroll md:w-1/2" - class:hidden={displayMode.mobileLaw || displayMode.edit !== undefined} - id="situation_right_part_impacts" - > - <!--en-tête--> + <!-- + Note: When you change the height below (h-...), don't forget to adjust + the height of the div enclosing the test cases below. + --> <div - class="sticky top-0 z-25 mb-4 flex flex-col border-b bg-yellow-50 md:pl-3 md:pr-6 lg:pl-5 lg:pr-8" + class="h-fit md:!h-full md:block overflow-y-scroll flex-[1_0_100%] md:flex-[1_0_50%] md:translate-x-0 transition-transform ease-in-out-quart duration-500" + class:translate-x-[-100%]={!displayMode.mobileLaw} + class:!h-screen={displayMode.mobileLaw} + id="situation_right_part_impacts" > - <!-- - <select - class="rounded border-1 text-xs" - on:blur={changeBillName} - on:change={changeBillName} - value={$billName} - > - <option value={undefined}>Pas de projet/proposition de loi</option> - {#each metadata.reforms as { label, name }} - <option value={name}>{label}</option> - {/each} - </select> - --> - <!--Bouton sauvegarder partager--> - - <button - class="h-9 place-self-end px-4 pt-1 text-sm uppercase text-gray-500 hover:text-black md:px-0" - on:click={shareLink} - id="situation_savebutton" - title="Sauvegarder/partager votre écran de travail tel qu'il est visible actuellement" + <!--en-tête--> + <div + class="sticky top-0 z-25 mb-4 flex flex-col border-b bg-yellow-50 md:pl-3 md:pr-6 lg:pl-5 lg:pr-8" > - <iconify-icon - class="mr-1 align-[-0.2rem] text-base" - icon="ri-share-fill" - /> - Sauvegarder / partager - </button> - - <!--Affichage du titre "impacts" et onglets de choix cas types ou budget--> - - {#if displayMode.parametersVariableName !== undefined && budgetVariablesName.has(displayMode.parametersVariableName)} - <div class="flex items-center justify-center md:justify-start"> - <a - data-sveltekit-noscroll - href={newSimulationUrl({ + <!-- + <select + class="rounded border-1 text-xs" + on:blur={changeBillName} + on:change={changeBillName} + value={$billName} + > + <option value={undefined}>Pas de projet/proposition de loi</option> + {#each metadata.reforms as { label, name }} + <option value={name}>{label}</option> + {/each} + </select> + --> + <!--Bouton sauvegarder partager--> + + <button + class="h-9 place-self-end px-4 pt-1 text-sm uppercase text-gray-500 hover:text-black md:px-0" + on:click={shareLink} + id="situation_savebutton" + title="Sauvegarder/partager votre écran de travail tel qu'il est visible actuellement" + > + <iconify-icon + class="mr-1 align-[-0.2rem] text-base" + icon="ri-share-fill" + /> + Sauvegarder / partager + </button> + + <!--Affichage du titre "impacts" et onglets de choix cas types ou budget--> + + {#if displayMode.parametersVariableName !== undefined && budgetVariablesName.has(displayMode.parametersVariableName)} + <div class="flex items-center justify-center md:justify-start"> + <a + data-sveltekit-noscroll + href={newSimulationUrl({ ...displayMode, budget: undefined, })} - > - <div - class="flex h-14 items-center px-3 pb-1 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:border-b-4={!displayMode.budget} - class:border-black={!displayMode.budget} > + <div + class="flex h-14 items-center px-3 pb-1 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:border-b-4={!displayMode.budget} + class:border-black={!displayMode.budget} + > <span class="hidden tracking-wide sm:flex" class:text-black={!displayMode.budget} @@ -1108,28 +1115,28 @@ > Impact cas type </span> - <span - class="flex tracking-wide sm:hidden" - class:text-black={!displayMode.budget} - class:font-bold={!displayMode.budget} - class:hover:text-le-bleu={displayMode.budget} - > + <span + class="flex tracking-wide sm:hidden" + class:text-black={!displayMode.budget} + class:font-bold={!displayMode.budget} + class:hover:text-le-bleu={displayMode.budget} + > Cas type </span> - </div> - </a> - <a - data-sveltekit-noscroll - href={newSimulationUrl({ + </div> + </a> + <a + data-sveltekit-noscroll + href={newSimulationUrl({ ...displayMode, budget: true, })} - > - <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:border-b-4={displayMode.budget} - class:border-black={displayMode.budget} > + <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:border-b-4={displayMode.budget} + class:border-black={displayMode.budget} + > <span class="hidden tracking-wide sm:flex" class:text-black={displayMode.budget} @@ -1139,32 +1146,32 @@ > Impact budgétaire </span> - <span - class="flex tracking-wide sm:hidden" - class:text-black={displayMode.budget} - class:font-bold={displayMode.budget} - class:hover:text-le-bleu={!displayMode.budget} - class:pb-2={!displayMode.budget} - > + <span + class="flex tracking-wide sm:hidden" + class:text-black={displayMode.budget} + class:font-bold={displayMode.budget} + class:hover:text-le-bleu={!displayMode.budget} + class:pb-2={!displayMode.budget} + > Budget </span> - </div> - </a> - </div> - {:else if displayMode.parametersVariableName === undefined} - <div class="flex items-center justify-center md:justify-start"> - <a - data-sveltekit-noscroll - href={newSimulationUrl({ + </div> + </a> + </div> + {:else if displayMode.parametersVariableName === undefined} + <div class="flex items-center justify-center md:justify-start"> + <a + data-sveltekit-noscroll + href={newSimulationUrl({ ...displayMode, budget: undefined, })} - > - <div - class="flex h-14 items-center px-3 pb-1 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:border-b-4={!displayMode.budget} - class:border-black={!displayMode.budget} > + <div + class="flex h-14 items-center px-3 pb-1 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:border-b-4={!displayMode.budget} + class:border-black={!displayMode.budget} + > <span class="hidden tracking-wide sm:flex" class:text-black={!displayMode.budget} @@ -1173,28 +1180,28 @@ > Impact cas type </span> - <span - class="flex tracking-wide sm:hidden" - class:text-black={!displayMode.budget} - class:font-bold={!displayMode.budget} - class:hover:text-le-bleu={displayMode.budget} - > + <span + class="flex tracking-wide sm:hidden" + class:text-black={!displayMode.budget} + class:font-bold={!displayMode.budget} + class:hover:text-le-bleu={displayMode.budget} + > Cas type </span> - </div> - </a> - <a - data-sveltekit-noscroll - href={newSimulationUrl({ + </div> + </a> + <a + data-sveltekit-noscroll + href={newSimulationUrl({ ...displayMode, budget: true, })} - > - <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:border-b-4={displayMode.budget} - class:border-black={displayMode.budget} > + <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:border-b-4={displayMode.budget} + class:border-black={displayMode.budget} + > <span class="hidden tracking-wide sm:flex" class:text-black={displayMode.budget} @@ -1204,46 +1211,46 @@ > Impact budgétaire </span> - <span - class="flex tracking-wide sm:hidden" - class:text-black={displayMode.budget} - class:font-bold={displayMode.budget} - class:hover:text-le-bleu={!displayMode.budget} - class:pb-2={!displayMode.budget} - > + <span + class="flex tracking-wide sm:hidden" + class:text-black={displayMode.budget} + class:font-bold={displayMode.budget} + class:hover:text-le-bleu={!displayMode.budget} + class:pb-2={!displayMode.budget} + > Budget </span> - </div> - </a> - </div> - {:else} - <div> - <h2 class="flex"> - <div - 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" - > + </div> + </a> + </div> + {:else} + <div> + <h2 class="flex"> + <div + 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> - <div - id="onglet-impact-budgetaire" - 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" - > + <div + id="onglet-impact-budgetaire" + 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 class="pb-2 tracking-wide text-gray-300"> Impact budgétaire </span> - </div> - {#if displayMode.parametersVariableName !== undefined} - {@const variable = - variableSummaryByName[displayMode.parametersVariableName]} - <Popover - class="m-10 w-80 text-sm font-light shadow-2xl" - placement="bottom" - title="Impact budgétaire indisponible" - triggeredBy="#onglet-impact-budgetaire" - > + </div> + {#if displayMode.parametersVariableName !== undefined} + {@const variable = + variableSummaryByName[displayMode.parametersVariableName]} + <Popover + class="m-10 w-80 text-sm font-light shadow-2xl" + placement="bottom" + title="Impact budgétaire indisponible" + triggeredBy="#onglet-impact-budgetaire" + > <span class="text-black"> Le calcul des impacts budgétaires du dispositif « {variable.short_label ?? variable.label ?? @@ -1257,316 +1264,316 @@ ></span > </span> - </Popover> - {/if} - </h2> - </div> - {/if} - </div> - <!--Impacts--> - <div class="px-0 md:px-6 lg:px-8 "> - {#if displayMode.budget && displayMode.parametersVariableName !== undefined && budgetVariablesName.has(displayMode.parametersVariableName)} - {#if user === undefined} - <div class="my-10 mx-5 flex flex-col justify-center md:mx-10"> - <h3 class="text-center text-xl text-black "> - Vous êtes parlementaire* ? <br /><span class="font-bold" - >Identifiez-vous pour accéder aux impacts budgétaires :</span - > - </h3> - <div class="mt-5 mb-10 grow-0 place-self-center"> - <a - class="rounded-lg bg-le-bleu py-2 px-4 text-center text-lg uppercase text-white drop-shadow-md hover:bg-blue-900" - data-sveltekit-reload - href={`/auth/login?redirect=${encodeURIComponent( + </Popover> + {/if} + </h2> + </div> + {/if} + </div> + <!--Impacts--> + <div class="px-0 md:px-6 lg:px-8 md:mb-4"> + {#if displayMode.budget && displayMode.parametersVariableName !== undefined && budgetVariablesName.has(displayMode.parametersVariableName)} + {#if user === undefined} + <div class="my-10 mx-5 flex flex-col justify-center md:mx-10"> + <h3 class="text-center text-xl text-black "> + Vous êtes parlementaire* ? <br /><span class="font-bold" + >Identifiez-vous pour accéder aux impacts budgétaires :</span + > + </h3> + <div class="mt-5 mb-10 grow-0 place-self-center"> + <a + class="rounded-lg bg-le-bleu py-2 px-4 text-center text-lg uppercase text-white drop-shadow-md hover:bg-blue-900" + data-sveltekit-reload + href={`/auth/login?redirect=${encodeURIComponent( $page.url.toString(), )}`} - title="Vers le simulateur budgétaire de l'impôt sur le revenu" - > - <iconify-icon - class="mr-1 align-[-0.4rem] text-2xl" - icon="ri-key-fill" - /> - Se connecter - </a> - </div> + title="Vers le simulateur budgétaire de l'impôt sur le revenu" + > + <iconify-icon + class="mr-1 align-[-0.4rem] text-2xl" + icon="ri-key-fill" + /> + Se connecter + </a> + </div> - <p class="text-sm text-black"> - *Les simulations budgétaires LexImpact s’appuient sur des - données représentatives de la population française et protégées. - Seules les personnes habilitées peuvent avoir accès à cette - partie du simulateur. Pour plus d’informations, veuillez - consulter <a - class="link" - href="https://leximpact.an.fr/cgu" - title="Conditions générales d'utilisation de la partie en accès restreint du simulateur" - >nos conditions générales d’utilisation</a - >. - </p> - </div> + <p class="text-sm text-black"> + *Les simulations budgétaires LexImpact s’appuient sur des + données représentatives de la population française et protégées. + Seules les personnes habilitées peuvent avoir accès à cette + partie du simulateur. Pour plus d’informations, veuillez + consulter <a + class="link" + href="https://leximpact.an.fr/cgu" + title="Conditions générales d'utilisation de la partie en accès restreint du simulateur" + >nos conditions générales d’utilisation</a + >. + </p> + </div> + {/if} {/if} - {/if} - {#if displayMode.budget} - <div class="mb-6 flex flex-col"> - {#if $budgetSimulation === undefined} - {#if user !== undefined && displayMode.parametersVariableName !== undefined} - <div class="z-10 bg-le-jaune bg-opacity-20"> - <Spinner /> - </div> - {/if} - {:else if displayMode.parametersVariableName === "irpp_economique"} - <a - class="mr-4 place-self-end text-sm uppercase text-gray-600 hover:text-black md:mr-0" - data-sveltekit-noscroll - href={newSimulationUrl({ + {#if displayMode.budget} + <div class="mb-6 flex flex-col"> + {#if $budgetSimulation === undefined} + {#if user !== undefined && displayMode.parametersVariableName !== undefined} + <div class="z-10 bg-le-jaune bg-opacity-20"> + <Spinner /> + </div> + {/if} + {:else if displayMode.parametersVariableName === "irpp_economique"} + <a + class="mr-4 place-self-end text-sm uppercase text-gray-600 hover:text-black md:mr-0" + data-sveltekit-noscroll + href={newSimulationUrl({ ...displayMode, budget: true, parametersVariableName: undefined, })} - >Changer de dispositif<iconify-icon - class="ml-1 align-[-0.2rem] text-lg" - icon="ri-arrow-up-line" - /></a - > - <h3 class="mx-4 mb-2 text-2xl font-bold md:mx-0"> - Impôt sur le revenu - </h3> - <IrBudgetView budgetSimulation={$budgetSimulation} /> - <IrGagnantsPerdantsView budgetSimulation={$budgetSimulation} /> - {:else if displayMode.parametersVariableName === "csg_deductible_salaire" || displayMode.parametersVariableName === "csg_imposable_salaire"} - <a - class="mr-4 place-self-end text-sm uppercase text-gray-600 hover:text-black md:mr-0" - data-sveltekit-noscroll - href={newSimulationUrl({ + >Changer de dispositif<iconify-icon + class="ml-1 align-[-0.2rem] text-lg" + icon="ri-arrow-up-line" + /></a + > + <h3 class="mx-4 mb-2 text-2xl font-bold md:mx-0"> + Impôt sur le revenu + </h3> + <IrBudgetView budgetSimulation={$budgetSimulation} /> + <IrGagnantsPerdantsView budgetSimulation={$budgetSimulation} /> + {:else if displayMode.parametersVariableName === "csg_deductible_salaire" || displayMode.parametersVariableName === "csg_imposable_salaire"} + <a + class="mr-4 place-self-end text-sm uppercase text-gray-600 hover:text-black md:mr-0" + data-sveltekit-noscroll + href={newSimulationUrl({ ...displayMode, budget: true, parametersVariableName: undefined, })} - >Changer de dispositif<iconify-icon - class="ml-1 align-[-0.2rem] text-lg" - icon="ri-arrow-up-line" - /></a - > - <h3 class="mx-4 mb-2 text-2xl font-bold md:mx-0"> - CSG des revenus d'activité - <br /><span class="text-xl font-normal" - >Imposable et déductible</span - > - </h3> - <CsgBudgetView budgetSimulation={$budgetSimulation} /> - <CsgGagnantsPerdantsView budgetSimulation={$budgetSimulation} /> - {/if} - </div> - {#if displayMode.parametersVariableName === undefined} - <div class="mx-4 text-center md:mx-0 md:text-left"> - <h3 class="mb-2 text-2xl font-bold"> - Estimer l'impact budgétaire - </h3> - <p class="text-base text-black md:mx-0"> - Le simulateur LexImpact permet l'évaluation d'impacts - budgétaires pour les dispositifs suivants : - </p> - <div class="my-3 flex flex-col justify-center gap-4"> - <div> - <a - class="rounded-full bg-le-gris-dispositif-light px-3 py-1.5 hover:bg-le-gris-dispositif hover:bg-opacity-60" - href={newSimulationUrl({ + >Changer de dispositif<iconify-icon + class="ml-1 align-[-0.2rem] text-lg" + icon="ri-arrow-up-line" + /></a + > + <h3 class="mx-4 mb-2 text-2xl font-bold md:mx-0"> + CSG des revenus d'activité + <br /><span class="text-xl font-normal" + >Imposable et déductible</span + > + </h3> + <CsgBudgetView budgetSimulation={$budgetSimulation} /> + <CsgGagnantsPerdantsView budgetSimulation={$budgetSimulation} /> + {/if} + </div> + {#if displayMode.parametersVariableName === undefined} + <div class="mx-4 text-center md:mx-0 md:text-left"> + <h3 class="mb-2 text-2xl font-bold"> + Estimer l'impact budgétaire + </h3> + <p class="text-base text-black md:mx-0"> + Le simulateur LexImpact permet l'évaluation d'impacts + budgétaires pour les dispositifs suivants : + </p> + <div class="my-3 flex flex-col justify-center gap-4"> + <div> + <a + class="rounded-full bg-le-gris-dispositif-light px-3 py-1.5 hover:bg-le-gris-dispositif hover:bg-opacity-60" + href={newSimulationUrl({ ...displayMode, parametersVariableName: "irpp_economique", })} - > - Impôt sur le revenu - </a> - </div> - <div> - <a - class="rounded-full bg-le-gris-dispositif-light px-3 py-1.5 hover:bg-le-gris-dispositif hover:bg-opacity-60" - href={newSimulationUrl({ + > + Impôt sur le revenu + </a> + </div> + <div> + <a + class="rounded-full bg-le-gris-dispositif-light px-3 py-1.5 hover:bg-le-gris-dispositif hover:bg-opacity-60" + href={newSimulationUrl({ ...displayMode, parametersVariableName: "csg_deductible_salaire", })} - > - CSG des revenus d'activité (déductible) - </a> - </div> - <div> - <a - class="rounded-full bg-le-gris-dispositif-light px-3 py-1.5 hover:bg-le-gris-dispositif hover:bg-opacity-60" - href={newSimulationUrl({ + > + CSG des revenus d'activité (déductible) + </a> + </div> + <div> + <a + class="rounded-full bg-le-gris-dispositif-light px-3 py-1.5 hover:bg-le-gris-dispositif hover:bg-opacity-60" + href={newSimulationUrl({ ...displayMode, parametersVariableName: "csg_imposable_salaire", })} - > - CSG des revenus d'activité (imposable) - </a> + > + CSG des revenus d'activité (imposable) + </a> + </div> </div> </div> - </div> - {/if} - {:else} - {#if $testCasesIndex.length === 1} - <button - class="mx-4 mb-3 flex h-8 grow-0 items-center rounded-md bg-gray-300 px-2 py-1 text-sm uppercase text-black shadow-md hover:bg-le-bleu hover:text-white focus:outline-none md:mx-0" - on:click={() => (isTestCaseSelectModalOpen = true)} - title="Choisir un cas type" - ><iconify-icon - class="mr-1 align-[-0.2rem] text-lg" - icon="ri-user-search-fill" - />Autres cas types</button - > - {/if} + {/if} + {:else} + {#if $testCasesIndex.length === 1} + <button + class="mx-4 mb-3 flex h-8 grow-0 items-center rounded-md bg-gray-300 px-2 py-1 text-sm uppercase text-black shadow-md hover:bg-le-bleu hover:text-white focus:outline-none md:mx-0" + on:click={() => (isTestCaseSelectModalOpen = true)} + title="Choisir un cas type" + ><iconify-icon + class="mr-1 align-[-0.2rem] text-lg" + icon="ri-user-search-fill" + />Autres cas types</button + > + {/if} - {#if displayMode.parametersVariableName === "prime_partage_valeur_exoneree_exceptionnelle" || displayMode.parametersVariableName === "prime_partage_valeur_exoneree" || displayMode.parametersVariableName === "aah" || displayMode.parametersVariableName === "exoneration_cotisations_employeur_tode" || displayMode.parametersVariableName === "taxes_tous_carburants" || displayMode.parametersVariableName === "paje_cmg"} - <div class="mb-4 ml-4 flex flex-col md:ml-0"> - <p class="text-sm"> - Cas types et situations illustrant le dispositif : - </p> - <TestCaseExamplesSelectBar {displayMode} /> - </div> - {/if} - <TestCaseSelectModal - {displayMode} - bind:isOpen={isTestCaseSelectModalOpen} - on:changeTestCasesIndex - year={$year} - /> - <!-- Cas types avec leur waterfall --> - {#if $testCasesIndex.length === 1} - <TestCaseView - decompositionByName={$decompositionByName} + {#if displayMode.parametersVariableName === "prime_partage_valeur_exoneree_exceptionnelle" || displayMode.parametersVariableName === "prime_partage_valeur_exoneree" || displayMode.parametersVariableName === "aah" || displayMode.parametersVariableName === "exoneration_cotisations_employeur_tode" || displayMode.parametersVariableName === "taxes_tous_carburants" || displayMode.parametersVariableName === "paje_cmg"} + <div class="mb-4 ml-4 flex flex-col md:ml-0"> + <p class="text-sm"> + Cas types et situations illustrant le dispositif : + </p> + <TestCaseExamplesSelectBar {displayMode} /> + </div> + {/if} + <TestCaseSelectModal {displayMode} - on:changeDecompositionByName={({ detail }) => + bind:isOpen={isTestCaseSelectModalOpen} + on:changeTestCasesIndex + year={$year} + /> + <!-- Cas types avec leur waterfall --> + {#if $testCasesIndex.length === 1} + <TestCaseView + decompositionByName={$decompositionByName} + {displayMode} + on:changeDecompositionByName={({ detail }) => changeDecompositionByName($testCasesIndex[0], detail)} - on:changeSituation={({ detail }) => + on:changeSituation={({ detail }) => changeSituation($testCasesIndex[0], detail)} - on:changeTestCasesIndex={({ detail }) => + on:changeTestCasesIndex={({ detail }) => changeTestCasesIndex(detail)} - on:changeTestCaseToEditIndex={({ detail }) => + on:changeTestCaseToEditIndex={({ detail }) => changeTestCaseToEditIndex(detail)} - situation={$testCases[$testCasesIndex[0]]} - situationIndex={$testCasesIndex[0]} - valuesByCalculationNameByVariableName={$valuesByCalculationNameByVariableNameArray[ + situation={$testCases[$testCasesIndex[0]]} + situationIndex={$testCasesIndex[0]} + valuesByCalculationNameByVariableName={$valuesByCalculationNameByVariableNameArray[ $testCasesIndex[0] ]} - year={$year} - /> - {:else} - <TestCaseCompareView - decompositionByName={$decompositionByName} - {displayMode} - on:changeDecompositionByName={({ detail }) => + year={$year} + /> + {:else} + <TestCaseCompareView + decompositionByName={$decompositionByName} + {displayMode} + on:changeDecompositionByName={({ detail }) => changeDecompositionByName($testCasesIndex[0], detail)} - on:changeSituation={changeCompareSituation} - on:changeTestCasesIndex={({ detail }) => + on:changeSituation={changeCompareSituation} + on:changeTestCasesIndex={({ detail }) => changeTestCasesIndex(detail)} - on:changeTestCaseToEditIndex={({ detail }) => + on:changeTestCaseToEditIndex={({ detail }) => changeTestCaseToEditIndex(detail)} - situationsToCompareIndex={$testCasesIndex} - year={$year} - /> + situationsToCompareIndex={$testCasesIndex} + year={$year} + /> + {/if} {/if} - {/if} + </div> </div> </div> + </div> - <!-- Panneau de droite pour l'édition de cas types --> - - {#if displayMode.edit !== undefined} - <div class="flex flex-col relative z-40 w-full bg-gray-300 shadow-lg md:w-1/2 md:overflow-y-scroll"> - <h2 class="mx-5 mt-6 mr-2 text-2xl font-bold text-black lg:text-3xl"> - Éditer le cas type - </h2> - <div class="overflow-y-scroll" style:padding-bottom="{validateBtnHeight}px"> - <TestCaseEdit - date={$date} - inputInstantsByVariableName={$inputInstantsByVariableNameArray[ - displayMode.edit - ]} - on:changeInputInstantsByVariableName={({ detail }) => - changeInputInstantsByVariableName(displayMode.edit, detail)} - on:changeSituation={({ detail }) => - changeSituation(displayMode.edit, detail)} - situation={$testCases[displayMode.edit]} - situationIndex={displayMode.edit} - valuesByCalculationNameByVariableName={$valuesByCalculationNameByVariableNameArray[ - displayMode.edit - ]} - year={$year} - /> - <div class="m-4 rounded bg-le-bleu-light p-2 text-gray-700 shadow-md"> - <p class="px-2 pb-1"> - <span class="font-bold" - >Vous avez besoin de configurer plus précisemment votre cas type - ?</span - > - Contactez-nous sur - <a class="link" href="mailto:leximpact@an.fr">leximpact@an.fr</a>. - </p> - <div class="m-1 rounded bg-white p-2 text-gray-700"> - <p> - ⚠️ Le mode d'édition avancée est fonctionnel mais encore - difficile d'accès. Si vous avez besoin d'utiliser votre cas type - dans un amendement, nous vous proposons une relecture. - </p> - <p class="mt-2"> - Pour cela, utilisez la fonctionnalité "Sauvegarder/Partager" et - transmettez-nous le lien de votre copie de travail ainsi qu'un - résumé du cas type que vous cherchez à concevoir. - </p> - </div> - </div> - - {#if displayMode.variableName === undefined} - <h2 class="ml-4 mb-2 pt-3 text-xl font-bold"> - Ajouter des caractéristiques : - </h2> - <p class="font-sm mx-4 mb-10 hidden text-gray-700 md:block"> - ↖️ Cliquez sur le nom d'un dispositif affiché sur le cas type pour - éditer les variables entrant dans le calcul de ce dispositif. - </p> - <p class="font-sm mx-4 mb-10 block text-gray-700 md:hidden"> - Utilisez votre ordinateur ou élargissez l'écran pour obtenir plus - de fonctionnalités. - </p> - {:else} - <VariableReferredInputsPane - date={$date} - inputInstantsByVariableName={$inputInstantsByVariableNameArray[ - displayMode.testCasesIndex[0] - ]} - name={displayMode.variableName} - on:changeInputInstantsByVariableName={({ detail }) => - changeInputInstantsByVariableName( - displayMode.testCasesIndex[0], - detail, - )} - on:changeSituation={({ detail }) => - changeSituation(displayMode.testCasesIndex[0], detail)} - situation={$testCases[displayMode.testCasesIndex[0]]} - situationIndex={displayMode.testCasesIndex[0]} - valuesByCalculationNameByVariableName={$valuesByCalculationNameByVariableNameArray[ - displayMode.testCasesIndex[0] - ]} - year={$year} - /> - {/if} + <!-- Panneau de droite pour l'édition de cas types --> + <div class="flex flex-col relative z-40 w-full bg-gray-300 shadow-lg md:w-1/2 md:overflow-y-scroll flex-[1_0_100%] md:flex-[1_0_50%] transition-transform ease-in-out-quart duration-500" + class:translate-x-[-100%]={displayMode.edit !== undefined}> + <h2 class="mx-5 mt-6 mr-2 text-2xl font-bold text-black lg:text-3xl"> + Éditer le cas type + </h2> + <div class="overflow-y-scroll" style:padding-bottom="{validateBtnHeight}px"> + <TestCaseEdit + date={$date} + inputInstantsByVariableName={$inputInstantsByVariableNameArray[ + displayMode.edit + ]} + on:changeInputInstantsByVariableName={({ detail }) => + changeInputInstantsByVariableName(displayMode.edit, detail)} + on:changeSituation={({ detail }) => + changeSituation(displayMode.edit, detail)} + situation={$testCases[displayMode.edit]} + situationIndex={displayMode.edit} + valuesByCalculationNameByVariableName={$valuesByCalculationNameByVariableNameArray[ + displayMode.edit + ]} + year={$year} + /> + <div class="m-4 rounded bg-le-bleu-light p-2 text-gray-700 shadow-md"> + <p class="px-2 pb-1"> + <span class="font-bold" + >Vous avez besoin de configurer plus précisemment votre cas type + ?</span + > + Contactez-nous sur + <a class="link" href="mailto:leximpact@an.fr">leximpact@an.fr</a>. + </p> + <div class="m-1 rounded bg-white p-2 text-gray-700"> + <p> + ⚠️ Le mode d'édition avancée est fonctionnel mais encore + difficile d'accès. Si vous avez besoin d'utiliser votre cas type + dans un amendement, nous vous proposons une relecture. + </p> + <p class="mt-2"> + Pour cela, utilisez la fonctionnalité "Sauvegarder/Partager" et + transmettez-nous le lien de votre copie de travail ainsi qu'un + résumé du cas type que vous cherchez à concevoir. + </p> </div> </div> - <!--Bouton flottant mobile pour fermer volet édition du cas type--> - <button - bind:clientHeight={validateBtnHeight} - on:click={() => changeTestCaseToEditIndex(undefined)} - class="fixed bottom-8 right-8 z-40 flex rounded-full bg-le-bleu px-4 py-3 text-xl uppercase text-white shadow-lg hover:bg-blue-900" - title="Valider le cas type et fermer l'édition" - > - <span class="hidden md:flex">Valider</span> - <iconify-icon - class="ml-2 align-[-0.2rem] text-2xl" - icon="ri-check-fill" + + {#if displayMode.variableName === undefined} + <h2 class="ml-4 mb-2 pt-3 text-xl font-bold"> + Ajouter des caractéristiques : + </h2> + <p class="font-sm mx-4 mb-10 hidden text-gray-700 md:block"> + ↖️ Cliquez sur le nom d'un dispositif affiché sur le cas type pour + éditer les variables entrant dans le calcul de ce dispositif. + </p> + <p class="font-sm mx-4 mb-10 block text-gray-700 md:hidden"> + Utilisez votre ordinateur ou élargissez l'écran pour obtenir plus + de fonctionnalités. + </p> + {:else} + <VariableReferredInputsPane + date={$date} + inputInstantsByVariableName={$inputInstantsByVariableNameArray[ + displayMode.testCasesIndex[0] + ]} + name={displayMode.variableName} + on:changeInputInstantsByVariableName={({ detail }) => + changeInputInstantsByVariableName( + displayMode.testCasesIndex[0], + detail, + )} + on:changeSituation={({ detail }) => + changeSituation(displayMode.testCasesIndex[0], detail)} + situation={$testCases[displayMode.testCasesIndex[0]]} + situationIndex={displayMode.testCasesIndex[0]} + valuesByCalculationNameByVariableName={$valuesByCalculationNameByVariableNameArray[ + displayMode.testCasesIndex[0] + ]} + year={$year} /> - </button> - {/if} + {/if} + </div> </div> + <!--Bouton flottant mobile pour fermer volet édition du cas type--> + <button + bind:clientHeight={validateBtnHeight} + on:click={() => changeTestCaseToEditIndex(undefined)} + class="fixed bottom-8 right-8 z-40 flex rounded-full bg-le-bleu px-4 py-3 text-xl uppercase text-white shadow-lg hover:bg-blue-900 transition-transform ease-in-out-quart duration-500 translate-y-[calc(100%+4rem)]" + class:!translate-y-0={displayMode.edit !== undefined} + title="Valider le cas type et fermer l'édition" + > + <span class="hidden md:flex">Valider</span> + <iconify-icon + class="md:ml-2 align-[-0.2rem] text-2xl" + icon="ri-check-fill" + /> + </button> </main> <style> diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 5b3bcec0edd689b60d1eb3610e20ec351acad0d0..0c7986075e9b5bc29f983151fe9bc1dc9c723f76 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -50,6 +50,28 @@ const config = { }, zIndex: { '25': '25', + }, + transitionTimingFunction: { + 'in-quad': 'cubic-bezier(.55, .085, .68, .53)', + 'in-cubic': 'cubic-bezier(.550, .055, .675, .19)', + 'in-quart': 'cubic-bezier(.895, .03, .685, .22)', + 'in-quint': 'cubic-bezier(.755, .05, .855, .06)', + 'in-expo': 'cubic-bezier(.95, .05, .795, .035)', + 'in-circ': 'cubic-bezier(.6, .04, .98, .335)', + + 'out-quad': 'cubic-bezier(.25, .46, .45, .94)', + 'out-cubic': 'cubic-bezier(.215, .61, .355, 1)', + 'out-quart': 'cubic-bezier(.165, .84, .44, 1)', + 'out-quint': 'cubic-bezier(.23, 1, .32, 1)', + 'out-expo': 'cubic-bezier(.19, 1, .22, 1)', + 'out-circ': 'cubic-bezier(.075, .82, .165, 1)', + + 'in-out-quad': 'cubic-bezier(.455, .03, .515, .955)', + 'in-out-cubic': 'cubic-bezier(.645, .045, .355, 1)', + 'in-out-quart': 'cubic-bezier(.77, 0, .175, 1)', + 'in-out-quint': 'cubic-bezier(.86, 0, .07, 1)', + 'in-out-expo': 'cubic-bezier(1, 0, 0, 1)', + 'in-out-circ': 'cubic-bezier(.785, .135, .15, .86)' } }, fontFamily: {