From 0fdfcbf8f6e088635620325086780aadbdb37932 Mon Sep 17 00:00:00 2001
From: Dorine Lambinet <dorine.lambinet@gmail.com>
Date: Mon, 12 Sep 2022 17:47:33 +0200
Subject: [PATCH] Modifie le design des expansions panels
---
.../components/test_cases/TestCaseView.svelte | 27 ++++++++++++++-----
.../VariableReferredParameters.svelte | 24 ++++++++---------
2 files changed, 32 insertions(+), 19 deletions(-)
diff --git a/src/lib/components/test_cases/TestCaseView.svelte b/src/lib/components/test_cases/TestCaseView.svelte
index 6dee56262..63fa7d58a 100644
--- a/src/lib/components/test_cases/TestCaseView.svelte
+++ b/src/lib/components/test_cases/TestCaseView.svelte
@@ -132,7 +132,7 @@
<div class="origin-center -rotate-90">
<div class="flex ">
<span
- class="mr-2 text-xs uppercase tracking-wide text-gray-500 xl:text-sm"
+ class="mr-2 text-xs uppercase tracking-wide text-gray-600 xl:text-sm"
class:text-le-bleu={name === $waterfall.name}
class:font-bold={name === $waterfall.name}
>
@@ -303,27 +303,40 @@
</div>
<!--Bouton pour passer du mode compact au mode waterfall-->
- <div class="flex justify-end">
+ <div class=" flex w-full justify-between">
{#if displayMode.compact}
<a
- class="flex cursor-pointer gap-1 rounded-t-md border-x border-t bg-gray-100 p-3 text-sm uppercase text-gray-600 hover:underline"
+ class=" w-full cursor-pointer"
href={newSimulationUrl({
...displayMode,
compact: undefined,
})}
data-sveltekit-noscroll
- ><Icon class="h-5 w-5" icon="ri-eye-line" />voir tous
- dispositifs</a
+ ><div
+ class="mb-2 flex items-center border-gray-300 py-1 pr-4 text-gray-600 "
+ >
+ <Icon
+ class="h-5 min-h-fit w-5"
+ icon="ri-arrow-right-s-line"
+ /><span class="tracking-wider "
+ >Voir tous les dispositifs</span
+ >
+ </div></a
>
{:else}
<a
- class="flex cursor-pointer gap-1 rounded-t-md border-x border-t bg-gray-100 p-3 text-sm uppercase text-gray-600 hover:underline"
+ class="w-full cursor-pointer"
href={newSimulationUrl({
...displayMode,
compact: true,
})}
data-sveltekit-noscroll
- ><Icon class="h-5 w-5" icon="ri-eye-off-line" />Masquer</a
+ ><div
+ class="flex items-center border-b border-gray-300 py-1 pr-4 text-gray-600"
+ >
+ <Icon class="h-5 min-h-fit w-5" icon="ri-arrow-up-s-line" />
+ <span class="tracking-wider">Tous les dispositifs</span>
+ </div></a
>
{/if}
</div>
diff --git a/src/lib/components/variables/VariableReferredParameters.svelte b/src/lib/components/variables/VariableReferredParameters.svelte
index ab9f1f5c5..2b6c104ec 100644
--- a/src/lib/components/variables/VariableReferredParameters.svelte
+++ b/src/lib/components/variables/VariableReferredParameters.svelte
@@ -163,16 +163,17 @@
{#if billDecomposition?.children === undefined}
{#if Object.keys(bothRootDirectParameterById).length > 0}
<button
- class="mb-3 w-full border-b border-black py-1 pr-4 text-black"
+ class="mb-3 w-full border-b border-gray-300 py-1 pr-4 "
on:click={() => (openDirectParameters = !openDirectParameters)}
>
- <div class="flex justify-between">
+ <div class="flex items-center text-gray-600">
{#if openDirectParameters}
- <Icon class="inline-flex h-5 w-5" icon="ri:arrow-up-s-line" />
+ <Icon class="h-5 min-h-fit w-5" icon="ri-arrow-up-s-line" />
{:else}
- <Icon class="inline-flex h-5 w-5" icon="ri:arrow-down-s-line" />
- {/if}
- <span class="tracking-wider">Principaux paramètres de la loi</span>
+ <Icon class="h-5 min-h-fit w-5" icon="ri-arrow-right-s-line" />
+ {/if}<span class="ml-1 tracking-wider"
+ >Principaux paramètres de la loi</span
+ >
</div>
</button>
@@ -215,16 +216,15 @@
{#if Object.keys(bothRootParameterById).length > 0}
<button
- class="mb-3 w-full border-b border-black py-1 pr-4 text-black"
+ class="mb-3 w-full border-b border-gray-300 py-1 pr-4 text-gray-600"
on:click={() => (openAllParameters = !openAllParameters)}
>
- <div class="flex justify-between">
+ <div class="flex items-center">
{#if openAllParameters}
- <Icon class="inline-flex h-5 w-5" icon="ri:arrow-up-s-line" />
+ <Icon class="h-5 min-h-fit w-5" icon="ri-arrow-up-s-line" />
{:else}
- <Icon class="inline-flex h-5 w-5" icon="ri:arrow-down-s-line" />
- {/if}
- <span class="tracking-wider"
+ <Icon class="h-5 min-h-fit w-5" icon="ri-arrow-right-s-line" />
+ {/if}<span class="tracking-wider"
>Autres paramètres affectant le dispositif</span
>
</div>
--
GitLab