From 1eee7e4e45d26bd3c0fc2f219316fef6b077c215 Mon Sep 17 00:00:00 2001
From: Dorine Lambinet <dorine.lambinet@gmail.com>
Date: Thu, 3 Mar 2022 16:49:14 +0100
Subject: [PATCH] Premiers ajustements de la vue comparaison, avec notament
l'ajout d'un fond qui permet d'obtenir les deux nuances de gris
---
.../test_cases/TestCaseCompareView.svelte | 423 ++++++++----------
.../components/test_cases/TestCaseView.svelte | 2 +-
src/routes/index.svelte | 2 +-
.../background_compareview_body.svg | 4 +
.../background_compareview_header.svg | 5 +
5 files changed, 204 insertions(+), 232 deletions(-)
create mode 100644 static/background_image/background_compareview_body.svg
create mode 100644 static/background_image/background_compareview_header.svg
diff --git a/src/lib/components/test_cases/TestCaseCompareView.svelte b/src/lib/components/test_cases/TestCaseCompareView.svelte
index b508c2479..9797ee09d 100644
--- a/src/lib/components/test_cases/TestCaseCompareView.svelte
+++ b/src/lib/components/test_cases/TestCaseCompareView.svelte
@@ -11,6 +11,7 @@
import { session } from "$app/stores"
import type { CalculationByName, CalculationName } from "$lib/calculations"
// import PictoArbreMetropole from "$lib/components/pictos/PictoArbreMetropole.svelte"
+ import Icon from "@iconify/svelte"
import PictoFemme from "$lib/components/pictos/PictoFemme.svelte"
import PictoEnfant from "$lib/components/pictos/PictoEnfant.svelte"
import Spinner from "$lib/components/Spinner.svelte"
@@ -206,251 +207,206 @@
class="place-self-start shadow-md w-full rounded-t-sm bg-white md:mb-5 relative"
id="situation_{situation0Index}_{situation1Index}"
>
- <div class="flex justify-between">
- <span>Vue comparée</span>
- <button on:click={() => ($testCaseToCompareIndex = undefined)} type="button"
- >x</button
- >
- </div>
<div
- class="sticky top-0 bg-gray-100 border border-gray-200 border-b-2 p-4 pb-2 md:rounded-t-md "
- id="situation_{situation0Index}_{situation1Index}_cases_summary"
+ class="bg-gray-100 rounded-t-md flex justify-between py-1 px-4 border-gray-200 border"
>
- <!-- Title & close button of the two test cases to compare -->
- <div class="flex justify-between ">
- <div class="flex justify-between space-x-2 w-1/2">
- <h1 class="font-bold overflow-hidden text-ellipsis text-gray-600">
- {situation0.title}
- </h1>
- {#if displayMode.edit}
- <button
- class="inline-flex items-center hover:text-black text-gray-500"
- on:click={() => dispatch("toggleEdit")}
- title="Fermer l'édition du cas type"
- >
- <span class="text-sm ml-1 uppercase">Quitter l'édition</span>
- <!-- Material-icon : Close -->
- <svg
- class="fill-current"
- xmlns="http://www.w3.org/2000/svg"
- height="14px"
- viewBox="0 0 22 22"
- width="14px"
- fill="#000000"
- >
- <path d="M0 0h24v24H0z" fill="none" />
- <path
- d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
- />
- </svg>
- </button>
- {:else}
- <button
- class="inline-flex items-center text-gray-500 hover:text-black"
- on:click={() => dispatch("toggleEdit")}
- title="Éditer ce cas type"
- id="situation_{situation0Index}_{situation1Index}_edit"
- >
- <!-- Material-icon : Edit mode -->
- <svg
- class="fill-current h-4 w-4"
- xmlns="http://www.w3.org/2000/svg"
- height="14px"
- viewBox="0 0 22 22"
- width="14px"
- >
- <path d="M0 0h24v24H0z" fill="none" /><path
- d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
- />
- </svg>
- <span class="text-sm ml-1 uppercase">éditer</span>
- </button>
- {/if}
- </div>
- <div class="flex justify-between space-x-2 w-1/2">
- <h1 class="font-bold overflow-hidden text-ellipsis text-gray-600">
- {situation1.title}
- </h1>
- {#if displayMode.edit}
- <button
- class="inline-flex items-center hover:text-black text-gray-500"
- on:click={() => dispatch("toggleEdit")}
- title="Fermer l'édition du cas type"
- >
- <span class="text-sm ml-1 uppercase">Quitter l'édition</span>
- <!-- Material-icon : Close -->
- <svg
- class="fill-current"
- xmlns="http://www.w3.org/2000/svg"
- height="14px"
- viewBox="0 0 22 22"
- width="14px"
- fill="#000000"
+ <div class="w-2/12" />
+ <span class="text-gray-600 uppercase tracking-wide"
+ >Comparaison cas types</span
+ >
+ {#if !displayMode.edit}
+ <button
+ class="w-2/12 inline-flex items-center text-gray-500 hover:text-black"
+ on:click={() => ($testCaseToCompareIndex = undefined)}
+ type="button"
+ title="Fermer la comparaison des deux cas types"
+ >
+ <Icon icon="ri-close-line" class="h-6 w-6" />
+ <span class="text-sm uppercase">Quitter</span>
+ </button>
+ {/if}
+ </div>
+ <div class="flex border-gray-200 border-b-2 border-r border-l">
+ <div class="w-1/12 bg-gray-100 " />
+ <div
+ class="justify-self-end w-11/12 bg-[url('/static/background_image/background_compareview_header.svg')] bg-no-repeat bg-center bg-cover py-2 px-4 "
+ id="situation_{situation0Index}_{situation1Index}_cases_summary"
+ >
+ <img
+ class="object-cover object-center w-full"
+ src="../lib/components/background_compareview_header.png"
+ alt=""
+ />
+ <!-- Title & close button of the two test cases to compare -->
+ <div class="flex justify-between ">
+ <div class="flex justify-between space-x-2 w-1/2">
+ <h1 class="font-bold overflow-hidden text-ellipsis text-gray-600">
+ {situation0.title}
+ </h1>
+
+ {#if !displayMode.edit}
+ <button
+ class="inline-flex items-center text-gray-500 hover:text-black"
+ on:click={() => dispatch("toggleEdit")}
+ title="Éditer ce cas type"
+ id="situation_{situation0Index}_{situation1Index}_edit"
>
- <path d="M0 0h24v24H0z" fill="none" />
- <path
- d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
- />
- </svg>
- </button>
- {:else}
- <button
- class="inline-flex items-center text-gray-500 hover:text-black"
- on:click={() => dispatch("toggleEdit")}
- title="Éditer ce cas type"
- id="situation_{situation1Index}_{situation1Index}_edit"
- >
- <!-- Material-icon : Edit mode -->
- <svg
- class="fill-current h-4 w-4"
- xmlns="http://www.w3.org/2000/svg"
- height="14px"
- viewBox="0 0 22 22"
- width="14px"
+ <Icon icon="ri-pencil-fill" class="h-5 w-5" />
+ <span class="text-sm ml-1 uppercase">éditer</span>
+ </button>
+ {/if}
+ </div>
+ <div class="flex justify-between space-x-2 w-1/2">
+ <h1 class="font-bold overflow-hidden text-ellipsis text-gray-600">
+ {situation1.title}
+ </h1>
+ {#if !displayMode.edit}
+ <button
+ class="inline-flex items-center text-gray-500 hover:text-black"
+ on:click={() => dispatch("toggleEdit")}
+ title="Éditer ce cas type"
+ id="situation_{situation1Index}_{situation1Index}_edit"
>
- <path d="M0 0h24v24H0z" fill="none" /><path
- d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
- />
- </svg>
- <span class="text-sm ml-1 uppercase">éditer</span>
- </button>
- {/if}
+ <Icon icon="ri-pencil-fill" class="h-5 w-5" />
+ <span class="text-sm ml-1 uppercase">éditer</span>
+ </button>
+ {/if}
+ </div>
</div>
- </div>
- <div class="flex flex-col mt-1">
- <!-- Attributes shared by the two test cases to compare -->
- <!-- Element 1 de la grille-->
- <div class="flex mx-auto">
- <!--Composition du foyer-->
- <div class="flex space-x-2">
- <!-- Localité du cas type-->
- <!-- <div class="flex">
+ <div class="flex flex-col mt-1">
+ <!-- Attributes shared by the two test cases to compare -->
+ <!-- Element 1 de la grille-->
+ <div class="flex mx-auto">
+ <!--Composition du foyer-->
+ <div class="flex space-x-2">
+ <!-- Localité du cas type-->
+ <!-- <div class="flex">
<PictoArbreMetropole />
</div> -->
- <div class="flex">
- <!-- Nombre adultes et salaires-->
- <p>
- {adultsCount}
- </p>
- <PictoFemme />
- </div>
+ <div class="flex">
+ <!-- Nombre adultes et salaires-->
+ <p>
+ {adultsCount}
+ </p>
+ <PictoFemme />
+ </div>
- <div class="flex">
- <!-- Nombre Enfant et âge et salaires-->
- <p>
- {childrenCount}
- </p>
- <PictoEnfant />
+ <div class="flex">
+ <!-- Nombre Enfant et âge et salaires-->
+ <p>
+ {childrenCount}
+ </p>
+ <PictoEnfant />
+ </div>
</div>
</div>
</div>
- </div>
- <!-- Attributes NOT shared by the two test cases to compare -->
- {#if variableSummaryByName !== undefined && slider !== undefined}
- <div class="flex justify-between">
- <div class="flex-col items-baseline w-1/2">
- <!-- TODO: Use a <select> to choose current slider. -->
- <span class="font-light text-sm truncate">
- {variableSummaryByName[slider.name].ux_name ??
- variableSummaryByName[slider.name].label} /an :
- </span>
- <ul class="shrink-0">
- {#each Object.entries(sliderEntitySituation ?? {}).sort( ([populationId1], [populationId2]) => populationId1.localeCompare(populationId2), ) as [populationId, population]}
- {#if populationId === slider.id || getVariableValue(situation0, slider.name, populationId) !== 0}
- <li>
- <span class="font-light text-sm ">
- {population.name ?? populationId} :
- </span>
- <span
- >{euroAmountFormatter.format(
- getVariableValue(situation0, slider.name, populationId),
- )}</span
- >
- {#if populationId === slider.id}
- <label class="text-xs">
- <input
- checked={situation0.slider !== undefined &&
- situation0.slider.entity === slider.entity &&
- situation0.slider.id === slider.id &&
- situation0.slider.name === slider.name}
- on:click={() =>
- toggleSlider(variableSummaryByName[slider.name])}
- type="checkbox"
- />
- Faire varier
- </label>
- {#if situation0.slider !== undefined && situation0.slider.entity === slider.entity && situation0.slider.id === slider.id && situation0.slider.name === slider.name}
- <input
- class="block mt-2 mx-2"
- max="100"
- min="0"
- on:input={changeVectorIndex}
- step="1"
- type="range"
- value={situation0.slider.vectorIndex}
- />
+ <!-- Attributes NOT shared by the two test cases to compare -->
+ {#if variableSummaryByName !== undefined && slider !== undefined}
+ <div class="flex justify-between">
+ <div class="flex-col items-baseline w-1/2">
+ <!-- TODO: Use a <select> to choose current slider. -->
+ <span class="font-light text-sm truncate">
+ {variableSummaryByName[slider.name].ux_name ??
+ variableSummaryByName[slider.name].label} /an :
+ </span>
+ <ul class="shrink-0">
+ {#each Object.entries(sliderEntitySituation ?? {}).sort( ([populationId1], [populationId2]) => populationId1.localeCompare(populationId2), ) as [populationId, population]}
+ {#if populationId === slider.id || getVariableValue(situation0, slider.name, populationId) !== 0}
+ <li>
+ <span class="font-light text-sm ">
+ {population.name ?? populationId} :
+ </span>
+ <span
+ >{euroAmountFormatter.format(
+ getVariableValue(situation0, slider.name, populationId),
+ )}</span
+ >
+ {#if populationId === slider.id}
+ <label class="text-xs">
+ <input
+ checked={situation0.slider !== undefined &&
+ situation0.slider.entity === slider.entity &&
+ situation0.slider.id === slider.id &&
+ situation0.slider.name === slider.name}
+ on:click={() =>
+ toggleSlider(variableSummaryByName[slider.name])}
+ type="checkbox"
+ />
+ Faire varier
+ </label>
+ {#if situation0.slider !== undefined && situation0.slider.entity === slider.entity && situation0.slider.id === slider.id && situation0.slider.name === slider.name}
+ <input
+ class="block mt-2 mx-2"
+ max="100"
+ min="0"
+ on:input={changeVectorIndex}
+ step="1"
+ type="range"
+ value={situation0.slider.vectorIndex}
+ />
+ {/if}
{/if}
- {/if}
- </li>
- {/if}
- {/each}
- </ul>
- </div>
+ </li>
+ {/if}
+ {/each}
+ </ul>
+ </div>
- <div class="flex-col items-baseline w-1/2">
- <!-- TODO: Use a <select> to choose current slider. -->
- <span class="font-light text-sm truncate">
- {variableSummaryByName[slider.name].ux_name ??
- variableSummaryByName[slider.name].label} /an :
- </span>
- <ul class="shrink-0">
- {#each Object.entries(sliderEntitySituation ?? {}).sort( ([populationId1], [populationId2]) => populationId1.localeCompare(populationId2), ) as [populationId, population]}
- {#if populationId === slider.id || getVariableValue(situation1, slider.name, populationId) !== 0}
- <li>
- <span class="font-light text-sm ">
- {population.name ?? populationId} :
- </span>
- <span
- >{euroAmountFormatter.format(
- getVariableValue(situation1, slider.name, populationId),
- )}</span
- >
- {#if populationId === slider.id}
- <label class="text-xs">
- <input
- checked={situation1.slider !== undefined &&
- situation1.slider.entity === slider.entity &&
- situation1.slider.id === slider.id &&
- situation1.slider.name === slider.name}
- on:click={() =>
- toggleSlider(variableSummaryByName[slider.name])}
- type="checkbox"
- />
- Faire varier
- </label>
- {#if situation1.slider !== undefined && situation1.slider.entity === slider.entity && situation1.slider.id === slider.id && situation1.slider.name === slider.name}
- <input
- class="block mt-2 mx-2"
- max="100"
- min="0"
- on:input={changeVectorIndex}
- step="1"
- type="range"
- value={situation1.slider.vectorIndex}
- />
+ <div class="flex-col items-baseline w-1/2">
+ <!-- TODO: Use a <select> to choose current slider. -->
+ <span class="font-light text-sm truncate">
+ {variableSummaryByName[slider.name].ux_name ??
+ variableSummaryByName[slider.name].label} /an :
+ </span>
+ <ul class="shrink-0">
+ {#each Object.entries(sliderEntitySituation ?? {}).sort( ([populationId1], [populationId2]) => populationId1.localeCompare(populationId2), ) as [populationId, population]}
+ {#if populationId === slider.id || getVariableValue(situation1, slider.name, populationId) !== 0}
+ <li>
+ <span class="font-light text-sm ">
+ {population.name ?? populationId} :
+ </span>
+ <span
+ >{euroAmountFormatter.format(
+ getVariableValue(situation1, slider.name, populationId),
+ )}</span
+ >
+ {#if populationId === slider.id}
+ <label class="text-xs">
+ <input
+ checked={situation1.slider !== undefined &&
+ situation1.slider.entity === slider.entity &&
+ situation1.slider.id === slider.id &&
+ situation1.slider.name === slider.name}
+ on:click={() =>
+ toggleSlider(variableSummaryByName[slider.name])}
+ type="checkbox"
+ />
+ Faire varier
+ </label>
+ {#if situation1.slider !== undefined && situation1.slider.entity === slider.entity && situation1.slider.id === slider.id && situation1.slider.name === slider.name}
+ <input
+ class="block mt-2 mx-2"
+ max="100"
+ min="0"
+ on:input={changeVectorIndex}
+ step="1"
+ type="range"
+ value={situation1.slider.vectorIndex}
+ />
+ {/if}
{/if}
- {/if}
- </li>
- {/if}
- {/each}
- </ul>
- </div>
+ </li>
+ {/if}
+ {/each}
+ </ul>
+ </div>
- <!--Identité de l'entreprise - Element 3 de la grid -->
- <!--
+ <!--Identité de l'entreprise - Element 3 de la grid -->
+ <!--
<div class="flex h-8">
<PictoEntreprise />
<div class="flex space-x-1">
@@ -465,8 +421,9 @@
</div>
</div>
-->
- </div>
- {/if}
+ </div>
+ {/if}
+ </div>
</div>
<div id="situation_{situation0Index}_{situation1Index}_waterfall">
{#if variableSummaryByName !== undefined}
@@ -510,7 +467,7 @@
displayMode.parametersVariableName === 'csg_imposable_salaire' ||
displayMode.parametersVariableName === 'irpp_economique'
? 'md:h-[calc(100vh-20rem)] 2xl:h-[calc(100vh-17rem)]'
- : 'md:h-[calc(100vh-21rem)] 2xl:h-[calc(100vh-18rem)]'} w-10/12 md:w-11/12 px-1 md:px-3 overflow-y-auto "
+ : 'md:h-[calc(100vh-21rem)] 2xl:h-[calc(100vh-18rem)]'} w-10/12 md:w-11/12 px-1 md:px-3 overflow-y-auto bg-[url('/static/background_image/background_compareview_body.svg')] bg-no-repeat bg-center bg-cover border-gray-200 border-b-2 border-r border-l"
>
<div class="p-3 border-b flex-col relative">
{#if Object.values($calculationByName).filter((calculation) => calculation.running && (calculation.situationIndex === undefined || calculation.situationIndex === situation0Index)).length > 0}
@@ -681,3 +638,9 @@
{/if}
</div>
</div>
+
+<style>
+ .fond {
+ background-image: url("/components/background_image/background_compareview_header.png");
+ }
+</style>
diff --git a/src/lib/components/test_cases/TestCaseView.svelte b/src/lib/components/test_cases/TestCaseView.svelte
index 50149aa69..7a6dc31e5 100644
--- a/src/lib/components/test_cases/TestCaseView.svelte
+++ b/src/lib/components/test_cases/TestCaseView.svelte
@@ -1,5 +1,4 @@
<script lang="ts">
- import Icon from "@iconify/svelte"
import type {
DecompositionReference,
Variable,
@@ -12,6 +11,7 @@
import { session } from "$app/stores"
import type { CalculationByName, CalculationName } from "$lib/calculations"
// import PictoArbreMetropole from "$lib/components/pictos/PictoArbreMetropole.svelte"
+ import Icon from "@iconify/svelte"
import PictoFemme from "$lib/components/pictos/PictoFemme.svelte"
import PictoEnfant from "$lib/components/pictos/PictoEnfant.svelte"
import Spinner from "$lib/components/Spinner.svelte"
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 1bbc49870..702b90a7e 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1122,7 +1122,7 @@
title="Fermer l'édition du cas type"
>
<Icon icon="ri-close-line" class="h-6 w-6" />
- <span class="text-sm uppercase">Quitter l'édition</span>
+ <span class="text-sm uppercase">Fermer l'édition</span>
</button>
</div>
diff --git a/static/background_image/background_compareview_body.svg b/static/background_image/background_compareview_body.svg
new file mode 100644
index 000000000..759207229
--- /dev/null
+++ b/static/background_image/background_compareview_body.svg
@@ -0,0 +1,4 @@
+<svg width="362" height="267" viewBox="0 0 362 267" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="362" height="267" fill="white"/>
+<rect x="181" width="181" height="267" fill="#F1F1F1"/>
+</svg>
diff --git a/static/background_image/background_compareview_header.svg b/static/background_image/background_compareview_header.svg
new file mode 100644
index 000000000..17140563e
--- /dev/null
+++ b/static/background_image/background_compareview_header.svg
@@ -0,0 +1,5 @@
+<svg width="362" height="267" viewBox="0 0 362 267" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="362" height="267" fill="white"/>
+<rect width="181" height="267" fill="#F5F5F5"/>
+<rect x="181" width="181" height="267" fill="#DCDCDC"/>
+</svg>
--
GitLab