Add title to filterview

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "mapcomplete",
-  "version": "0.41.7",
+  "version": "0.42.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "mapcomplete",
-      "version": "0.41.7",
+      "version": "0.42.0",
       "license": "GPL-3.0-or-later",
       "dependencies": {
         "@comunica/core": "^3.0.1",
@@ -69,7 +69,7 @@
         "svg-path-parser": "^1.1.0",
         "tailwind-merge": "^1.13.1",
         "tailwindcss": "^3.1.8",
-        "trap-focus-svelte": "^1.0.1",
+        "trap-focus-svelte": "^1.0.2",
         "vite-node": "^0.28.3",
         "vitest": "^0.28.3",
         "wikibase-sdk": "^7.14.0",
@@ -15240,8 +15240,9 @@
       }
     },
     "node_modules/trap-focus-svelte": {
-      "version": "1.0.1",
+      "version": "1.0.2",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/trap-focus-svelte/-/trap-focus-svelte-1.0.2.tgz",
+      "integrity": "sha512-2I5V22WMxnoVDkx1mvjKjxR0fl3V5ra9vOZCV4y9iXm3AHJgYugQbCO2e6IuF4seBsadS8mtzAwQTzZDVD3oqg=="
     },
     "node_modules/triple-beam": {
       "version": "1.4.1",
@@ -27159,7 +27160,9 @@
       }
     },
     "trap-focus-svelte": {
-      "version": "1.0.1"
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/trap-focus-svelte/-/trap-focus-svelte-1.0.2.tgz",
+      "integrity": "sha512-2I5V22WMxnoVDkx1mvjKjxR0fl3V5ra9vOZCV4y9iXm3AHJgYugQbCO2e6IuF4seBsadS8mtzAwQTzZDVD3oqg=="
     },
     "triple-beam": {
       "version": "1.4.1"

package.json

@@ -188,7 +188,7 @@
     "svg-path-parser": "^1.1.0",
     "tailwind-merge": "^1.13.1",
     "tailwindcss": "^3.1.8",
-    "trap-focus-svelte": "^1.0.1",
+    "trap-focus-svelte": "^1.0.2",
     "vite-node": "^0.28.3",
     "vitest": "^0.28.3",
     "wikibase-sdk": "^7.14.0",

src/UI/BigComponents/FilterPanel.svelte

@@ -9,6 +9,8 @@
   import Translations from "../i18n/Translations"
   import Tr from "../Base/Tr.svelte"
   import Filter from "../../assets/svg/Filter.svelte"
+  import { EyeIcon } from "@rgossiaux/svelte-heroicons/solid"
+  import { trapFocus } from "trap-focus-svelte"
 
   export let state: ThemeViewState
   let layout = state.layout
@@ -35,6 +37,7 @@
     }
     v.isDisplayed.addCallbackD((_) => updateEnableState())
   })
+
   function enableAll(doEnable: boolean) {
     state.layerState.filteredLayers.forEach((v) => {
       if (!v.layerDef.name) {
@@ -45,34 +48,35 @@
   }
 </script>
 
-<div class="m-2 flex flex-col">
+<div class="h-full flex flex-col">
-  <h2 class="flex items-center">
+  <h2 class="low-interaction m-0 flex items-center p-4 drop-shadow-md">
     <Filter class="h-6 w-6 pr-2" />
     <Tr t={Translations.t.general.menu.filter} />
   </h2>
+  <div class="flex h-full flex-col overflow-auto p-4 border-b-2">
+    {#each layout.layers as layer}
+      <Filterview
+        zoomlevel={state.mapProperties.zoom}
+        filteredLayer={state.layerState.filteredLayers.get(layer.id)}
+        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.layers as layer}
+    {#each layout.tileLayerSources as tilesource}
-    <Filterview
+      <OverlayToggle
-      zoomlevel={state.mapProperties.zoom}
+        layerproperties={tilesource}
-      filteredLayer={state.layerState.filteredLayers.get(layer.id)}
+        state={state.overlayLayerStates.get(tilesource.id)}
-      highlightedLayer={state.guistate.highlightedLayerInFilters}
+        highlightedLayer={state.guistate.highlightedLayerInFilters}
-    />
+        zoomlevel={state.mapProperties.zoom}
-  {/each}
+      />
-  <div class="mt-1 flex self-end">
+    {/each}
-    <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
-      layerproperties={tilesource}
-      state={state.overlayLayerStates.get(tilesource.id)}
-      highlightedLayer={state.guistate.highlightedLayerInFilters}
-      zoomlevel={state.mapProperties.zoom}
-    />
-  {/each}
 </div>

src/UI/ThemeViewGUI.svelte

@@ -635,7 +635,7 @@
 <If condition={state.guistate.privacyPanelIsOpened}>
   <FloatOver on:close={() => state.guistate.privacyPanelIsOpened.setData(false)}>
     <div class="flex h-full flex-col overflow-hidden">
-      <h2 class="low-interaction m-0 flex items-center p-4">
+      <h2 class="low-interaction m-0 flex items-center p-4 drop-shadow-md">
         <EyeIcon class="w-6 pr-2" />
         <Tr t={Translations.t.privacy.title} />
       </h2>