From 09f531d30885105ab45505c119d10b4be913302e Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Sun, 21 Jul 2024 10:33:44 +0200
Subject: [PATCH] UX: filterview: move 'enable all' and 'disable all' into
 header by request of user

---
 public/css/index-tailwind-output.css    | 36 ++++++++++++-------------
 src/UI/BigComponents/FilterPanel.svelte | 27 +++++++++++--------
 2 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css
index d81d4047b..46d027e00 100644
--- a/public/css/index-tailwind-output.css
+++ b/public/css/index-tailwind-output.css
@@ -993,6 +993,10 @@ video {
   margin-right: 4rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
@@ -1025,10 +1029,6 @@ video {
   margin-right: 0.25rem;
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -1041,6 +1041,10 @@ video {
   margin-bottom: 0.5rem;
 }
 
+.mr-10 {
+  margin-right: 2.5rem;
+}
+
 .mb-1\.5 {
   margin-bottom: 0.375rem;
 }
@@ -1217,14 +1221,14 @@ video {
   height: 6rem;
 }
 
-.h-full {
-  height: 100%;
-}
-
 .h-screen {
   height: 100vh;
 }
 
+.h-full {
+  height: 100%;
+}
+
 .h-fit {
   height: -webkit-fit-content;
   height: -moz-fit-content;
@@ -2019,6 +2023,10 @@ video {
   row-gap: 0.5rem;
 }
 
+.gap-x-2 {
+  column-gap: 0.5rem;
+}
+
 .gap-x-1 {
   column-gap: 0.25rem;
 }
@@ -2031,10 +2039,6 @@ video {
   column-gap: 0px;
 }
 
-.gap-x-2 {
-  column-gap: 0.5rem;
-}
-
 .gap-y-8 {
   row-gap: 2rem;
 }
@@ -3461,18 +3465,14 @@ video {
   padding-right: 1rem;
 }
 
-.pl-5 {
-  padding-left: 1.25rem;
+.pl-3 {
+  padding-left: 0.75rem;
 }
 
 .pr-3 {
   padding-right: 0.75rem;
 }
 
-.pl-3 {
-  padding-left: 0.75rem;
-}
-
 .pl-1 {
   padding-left: 0.25rem;
 }
diff --git a/src/UI/BigComponents/FilterPanel.svelte b/src/UI/BigComponents/FilterPanel.svelte
index 0104f6b5d..f0a482b2c 100644
--- a/src/UI/BigComponents/FilterPanel.svelte
+++ b/src/UI/BigComponents/FilterPanel.svelte
@@ -48,9 +48,22 @@
 </script>
 
 <TitledPanel>
-  <div class="flex" slot="title">
-    <Filter class="h-6 w-6 pr-2" />
-    <Tr t={Translations.t.general.menu.filter} />
+  <div class="flex items-center justify-between w-full mr-10" slot="title">
+    <div class="flex">
+      <Filter class="h-6 w-6 pr-2" />
+      <Tr t={Translations.t.general.menu.filter} />
+    </div>
+
+
+    <div class="flex self-end text-sm gap-x-2">
+      <button class="small as-link" class:disabled={allEnabled} on:click={() => enableAll(true)}>
+        <Tr t={Translations.t.general.filterPanel.enableAll} />
+      </button>
+      <button class="small as-link" class:disabled={allDisabled} on:click={() => enableAll(false)}>
+        <Tr t={Translations.t.general.filterPanel.disableAll} />
+      </button>
+    </div>
+
   </div>
 
     {#each layout.layers as layer}
@@ -60,14 +73,6 @@
         highlightedLayer={state.guistate.highlightedLayerInFilters}
       />
     {/each}
-    <div class="mt-1 flex self-end">
-      <button class="small" class:disabled={allEnabled} on:click={() => enableAll(true)}>
-        <Tr t={Translations.t.general.filterPanel.enableAll} />
-      </button>
-      <button class="small" class:disabled={allDisabled} on:click={() => enableAll(false)}>
-        <Tr t={Translations.t.general.filterPanel.disableAll} />
-      </button>
-    </div>
 
     {#each layout.tileLayerSources as tilesource}
       <OverlayToggle