midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki 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
Show stats 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">
import { UIEventSource } from "../../Logic/UIEventSource.js"
import type { Writable } from "svelte/store";
/**
* For some stupid reason, it is very hard to bind inputs
*/
export let selected: UIEventSource<boolean>
let _c: boolean = selected.data ?? true
$: selected.setData(_c)
export let selected: Writable<boolean>;
let _c: boolean = selected.data ?? true;
$: selected.set(_c);
</script>
<input type="checkbox" bind:checked={_c} />
<label class="no-image-background flex gap-1">
<input bind:checked={_c} type="checkbox" />
<slot />
</label>

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

@ -55,27 +55,26 @@
{#if filteredLayer.layerDef.name}
<div bind:this={mainElem} class="mb-1.5">
<label class="no-image-background flex gap-1">
<Checkbox selected={isDisplayed} />
<If condition={filteredLayer.isDisplayed}>
<ToSvelte
construct={() => layer.defaultIcon()?.SetClass("block h-6 w-6 no-image-background")}
/>
<ToSvelte
slot="else"
construct={() =>
<Checkbox selected={isDisplayed} >
<If condition={filteredLayer.isDisplayed}>
<ToSvelte
construct={() => layer.defaultIcon()?.SetClass("block h-6 w-6 no-image-background")}
/>
<ToSvelte
slot="else"
construct={() =>
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">
<Tr t={Translations.t.general.layerSelection.zoomInToSeeThisLayer} />
</span>
{/if}
</label>
{/if}
</Checkbox>
{#if $isDisplayed && filteredLayer.layerDef.filters?.length > 0}
<div id="subfilters" class="ml-4 flex flex-col gap-y-1">
@ -83,10 +82,9 @@
<div>
<!-- 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}
<label>
<Checkbox selected={getBooleanStateFor(filter)} />
{filter.options[0].question}
</label>
<Checkbox selected={getBooleanStateFor(filter)} >
{filter.options[0].question}
</Checkbox>
{/if}
{#if filter.options.length === 1 && filter.options[0].fields.length > 0}