Styling: filterview

UI/BigComponents/Filterview.svelte

@@ -19,11 +19,7 @@ export let filteredLayer: FilteredLayer;
 export let highlightedLayer: Store<string | undefined> = new ImmutableStore(undefined);
 export let zoomlevel: Store<number> = new ImmutableStore(22);
 let layer: LayerConfig = filteredLayer.layerDef;
-let isDisplayed: boolean = filteredLayer.isDisplayed.data;
+let isDisplayed: Store<boolean> = filteredLayer.isDisplayed;
-onDestroy(filteredLayer.isDisplayed.addCallbackAndRunD(d => {
-    isDisplayed = d;
-    return false;
-}));
 
 /**
  * Gets a UIEventSource as boolean for the given option, to be used with a checkbox
@@ -52,9 +48,9 @@ $:  onDestroy(
 );
 </script>
 {#if filteredLayer.layerDef.name}
-    <div bind:this={mainElem}>
+    <div bind:this={mainElem} class="mb-1.5">
-        <label class="flex gap-1">
+        <label class="flex gap-1 no-image-background">
-            <Checkbox selected={filteredLayer.isDisplayed}/>
+            <Checkbox selected={isDisplayed}/>
             <If condition={filteredLayer.isDisplayed}>
                 <ToSvelte
                         construct={() => layer.defaultIcon()?.SetClass("block h-6 w-6 no-image-background")}></ToSvelte>
@@ -72,9 +68,8 @@ $:  onDestroy(
 
         </label>
 
-
+        {#if $isDisplayed && filteredLayer.layerDef.filters?.length > 0}
-        <If condition={filteredLayer.isDisplayed}>
+            <div id="subfilters" class="flex flex-col gap-y-1 ml-4">
-            <div id="subfilters" class="flex flex-col gap-y-1 mb-4 ml-4">
                 {#each filteredLayer.layerDef.filters as filter}
                     <div>
 
@@ -106,8 +101,7 @@ $:  onDestroy(
                     </div>
                 {/each}
             </div>
-        </If>
+        {/if}
-
     </div>
 {/if}
 

UI/ThemeViewGUI.svelte

@@ -250,11 +250,11 @@
                 </If>
             </div>
 
-            <div class="flex flex-col" slot="content1">
+            <div class="flex flex-col m-2" slot="content1">
                 {#each layout.layers as layer}
                     <Filterview zoomlevel={state.mapProperties.zoom}
                                 filteredLayer={state.layerState.filteredLayers.get(layer.id)}
-                                highlightedLayer={state.guistate.highlightedLayerInFilters}></Filterview>
+                                highlightedLayer={state.guistate.highlightedLayerInFilters}/>
                 {/each}
                 {#each layout.tileLayerSources as tilesource}
                     <OverlayToggle
@@ -347,9 +347,9 @@
             <div class="links-as-button" slot="content1">
                 <!-- All shown components are set by 'usersettings.json', which happily uses some special visualisations created specifically for it -->
                 <LoginToggle {state}>
-                    <div slot="not-logged-in" class="flex flex-col">
+                    <div class="flex flex-col" slot="not-logged-in">
                         <Tr class="alert" t={Translations.t.userinfo.notLoggedIn}/>
-                        <LoginButton osmConnection={state.osmConnection} clss="primary"/>
+                        <LoginButton clss="primary" osmConnection={state.osmConnection}/>
                     </div>
                     <SelectedElementView
                             highlightedRendering={state.guistate.highlightedUserSetting}

index.css

@@ -290,7 +290,7 @@ label:hover {
     border: 2px solid var(--interactive-contrast)
 }
 
-label img {
+label:not(.no-image-background) img {
     padding: 0.25rem;
     border-radius: 0.25rem;
     background: var(--low-interaction-background);
@@ -300,7 +300,7 @@ label svg path {
     transition: all 250ms;
 }
 
-label:hover svg path {
+label:hover:not(.no-image-background) svg path {
     fill: var(--catch-detail-foregroundcolor) !important;
 }
 

public/css/index-tailwind-output.css

@@ -889,6 +889,14 @@ video {
   margin-bottom: 0.5rem;
 }
 
+.mb-1\.5 {
+  margin-bottom: 0.375rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -925,10 +933,6 @@ video {
   margin-top: -3rem;
 }
 
-.mb-1 {
-  margin-bottom: 0.25rem;
-}
-
 .box-border {
   box-sizing: border-box;
 }
@@ -2111,7 +2115,7 @@ label:hover {
   border: 2px solid var(--interactive-contrast)
 }
 
-label img {
+label:not(.no-image-background) img {
   padding: 0.25rem;
   border-radius: 0.25rem;
   background: var(--low-interaction-background);
@@ -2121,7 +2125,7 @@ label svg path {
   transition: all 250ms;
 }
 
-label:hover svg path {
+label:hover:not(.no-image-background) svg path {
   fill: var(--catch-detail-foregroundcolor) !important;
 }