Better filterbar style

This commit is contained in:
Tom Hubrecht 2022-03-06 21:21:31 +01:00
parent 8ed74bf3ec
commit c603e31f64
3 changed files with 68 additions and 64 deletions

View file

@ -89,6 +89,10 @@
<div class="fc-toolbar-title" /> <div class="fc-toolbar-title" />
<style> <style>
:global(.fc-event) {
cursor: pointer;
}
@media (max-width: 765px) { @media (max-width: 765px) {
:global(.fc-header-toolbar) { :global(.fc-header-toolbar) {
flex-direction: column; flex-direction: column;

View file

@ -7,12 +7,13 @@
import { Icon } from 'sveltestrap'; import { Icon } from 'sveltestrap';
export let item = null; export let item = null;
export let level = 1;
export let children = []; export let children = [];
export let selected = []; export let selected = [];
export let filtering = createTriState(CHECKED); export let filtering = createTriState(CHECKED);
let subfiltering = createTriStates(CHECKED, Object.entries(children).length); let subfiltering = createTriStates(CHECKED, Object.entries(children).length);
let subselected = Array.from({ length: Object.entries(children).length }, e => []); let subselected = Array.from({ length: Object.entries(children).length }, _ => []);
function isVal(val) { function isVal(val) {
return function (other) { return function (other) {
@ -67,49 +68,33 @@
dispatch('change', { value: evt.detail.value }); dispatch('change', { value: evt.detail.value });
} }
$: icon = () => {
switch ($filtering) {
case UNCHECKED:
return 'circle';
case WEIRD:
return 'circle-half';
case CHECKED:
return 'check-circle-fill';
}
};
$: selected = $: selected =
$filtering === CHECKED ? [item, ...subselected.flat()] : subselected.flat(); $filtering === CHECKED ? [item, ...subselected.flat()] : subselected.flat();
</script> </script>
{#if item != null} {#if item}
<li> <div class="ml-1" style="padding-left: {2 * level}em">
<TriStateCheckbox <TriStateCheckbox state={$filtering} on:change={handleChange} value={item} />
state={$filtering} </div>
on:change={handleChange}
value={item} {#each Object.entries(children) as [toplevel, subchildren], i}
initialValue={true} {#if subchildren}
/> <svelte:self
<span><Icon name={icon()} />{item}</span> item={toplevel}
<ul> children={subchildren}
{#each Object.entries(children) as [toplevel, subchildren], i} on:change={handleChildChange(i)}
{#if subchildren} filtering={subfiltering.storeAt(i)}
<svelte:self bind:selected={subselected[i]}
item={toplevel} level={level + 1}
children={subchildren} />
on:change={handleChildChange(i)} {:else}
filtering={subfiltering.storeAt(i)} <svelte:self
bind:selected={subselected[i]} item={toplevel}
/> on:change={handleChildChange(i)}
{:else} filtering={subfiltering.storeAt(i)}
<svelte:self bind:selected={subselected[i]}
item={toplevel} level={level + 1}
on:change={handleChildChange(i)} />
filtering={subfiltering.storeAt(i)} {/if}
bind:selected={subselected[i]} {/each}
/>
{/if}
{/each}
</ul>
</li>
{/if} {/if}

View file

@ -1,5 +1,6 @@
<script> <script>
export let initialValue; import { Icon } from 'sveltestrap';
export let state; export let state;
export let value; export let value;
@ -8,30 +9,44 @@
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
let node; function handleClick() {
let checkedValue = false; if (state === CHECKED) {
$: {
if (node) {
if (state === CHECKED) {
checkedValue = true;
} else {
checkedValue = false;
}
node.indeterminate = state === WEIRD;
}
}
function handleClick(evt) {
if (evt.target.checked) {
state = CHECKED;
} else if (!evt.target.checked) {
state = UNCHECKED; state = UNCHECKED;
} else {
state = CHECKED;
} }
dispatch('change', { value: state }); dispatch('change', { value: state });
} }
$: icon = () => {
switch (state) {
case UNCHECKED:
return 'square';
case WEIRD:
return 'square-half';
case CHECKED:
return 'check-square-fill';
}
};
</script> </script>
<input type="checkbox" checked={checkedValue} on:click={handleClick} bind:this={node} value={value} /> <span class="cal w-100 d-block" on:click={handleClick}>
<span class="ms-2">
<Icon name={icon()} />
</span>
<span class="ms-1">{value}</span>
</span>
<style>
.cal {
cursor: pointer;
padding: 0.2em;
border-radius: 4px;
}
.cal:hover {
/* background-color: #62a1fe; */
background-color: #6c757d;
color: #fff;
}
</style>