Osmwithspace/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Refactoring: include 'label' section into Checkbox

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-09-28 03:07:10 +02:00
parent 08e408e19d
commit 4067912ce0
2 changed files with 25 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/UI/Base/Checkbox.svelte
View file

@ -1,12 +1,14 @@
<script lang="ts"> <script lang="ts">
import { UIEventSource } from "../../Logic/UIEventSource.js" import type { Writable } from "svelte/store";
/** /**
* For some stupid reason, it is very hard to bind inputs * For some stupid reason, it is very hard to bind inputs
*/ */
export let selected: UIEventSource<boolean> export let selected: Writable<boolean>;
let _c: boolean = selected.data ?? true let _c: boolean = selected.data ?? true;
$: selected.setData(_c) $: selected.set(_c);
</script> </script>
<label class="no-image-background flex gap-1">
<input type="checkbox" bind:checked={_c} /> <input bind:checked={_c} type="checkbox" />
<slot />
</label>

36
src/UI/BigComponents/Filterview.svelte
View file

@ -55,27 +55,26 @@
{#if filteredLayer.layerDef.name} {#if filteredLayer.layerDef.name}
<div bind:this={mainElem} class="mb-1.5"> <div bind:this={mainElem} class="mb-1.5">
<label class="no-image-background flex gap-1"> <Checkbox selected={isDisplayed} >
<Checkbox selected={isDisplayed} /> <If condition={filteredLayer.isDisplayed}>
<If condition={filteredLayer.isDisplayed}> <ToSvelte
<ToSvelte construct={() => layer.defaultIcon()?.SetClass("block h-6 w-6 no-image-background")}
construct={() => layer.defaultIcon()?.SetClass("block h-6 w-6 no-image-background")} />
/> <ToSvelte
<ToSvelte slot="else"
slot="else" construct={() =>
construct={() =>
layer.defaultIcon()?.SetClass("block h-6 w-6 no-image-background opacity-50")} layer.defaultIcon()?.SetClass("block h-6 w-6 no-image-background opacity-50")}
/> />
</If> </If>
{filteredLayer.layerDef.name} {filteredLayer.layerDef.name}
{#if $zoomlevel < layer.minzoom} {#if $zoomlevel < layer.minzoom}
<span class="alert"> <span class="alert">
<Tr t={Translations.t.general.layerSelection.zoomInToSeeThisLayer} /> <Tr t={Translations.t.general.layerSelection.zoomInToSeeThisLayer} />
</span> </span>
{/if} {/if}
</label> </Checkbox>
{#if $isDisplayed && filteredLayer.layerDef.filters?.length > 0} {#if $isDisplayed && filteredLayer.layerDef.filters?.length > 0}
<div id="subfilters" class="ml-4 flex flex-col gap-y-1"> <div id="subfilters" class="ml-4 flex flex-col gap-y-1">
@ -83,10 +82,9 @@
<div> <div>
<!-- There are three (and a half) modes of filters: a single checkbox, a radio button/dropdown or with searchable fields --> <!-- There are three (and a half) modes of filters: a single checkbox, a radio button/dropdown or with searchable fields -->
{#if filter.options.length === 1 && filter.options[0].fields.length === 0} {#if filter.options.length === 1 && filter.options[0].fields.length === 0}
<label> <Checkbox selected={getBooleanStateFor(filter)} >
<Checkbox selected={getBooleanStateFor(filter)} /> {filter.options[0].question}
{filter.options[0].question} </Checkbox>
</label>
{/if} {/if}
{#if filter.options.length === 1 && filter.options[0].fields.length > 0} {#if filter.options.length === 1 && filter.options[0].fields.length > 0}