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" />
<style>
:global(.fc-event) {
cursor: pointer;
}
@media (max-width: 765px) {
:global(.fc-header-toolbar) {
flex-direction: column;

View file

@ -7,12 +7,13 @@
import { Icon } from 'sveltestrap';
export let item = null;
export let level = 1;
export let children = [];
export let selected = [];
export let filtering = createTriState(CHECKED);
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) {
return function (other) {
@ -67,31 +68,15 @@
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 =
$filtering === CHECKED ? [item, ...subselected.flat()] : subselected.flat();
</script>
{#if item != null}
<li>
<TriStateCheckbox
state={$filtering}
on:change={handleChange}
value={item}
initialValue={true}
/>
<span><Icon name={icon()} />{item}</span>
<ul>
{#if item}
<div class="ml-1" style="padding-left: {2 * level}em">
<TriStateCheckbox state={$filtering} on:change={handleChange} value={item} />
</div>
{#each Object.entries(children) as [toplevel, subchildren], i}
{#if subchildren}
<svelte:self
@ -100,6 +85,7 @@
on:change={handleChildChange(i)}
filtering={subfiltering.storeAt(i)}
bind:selected={subselected[i]}
level={level + 1}
/>
{:else}
<svelte:self
@ -107,9 +93,8 @@
on:change={handleChildChange(i)}
filtering={subfiltering.storeAt(i)}
bind:selected={subselected[i]}
level={level + 1}
/>
{/if}
{/each}
</ul>
</li>
{/if}

View file

@ -1,5 +1,6 @@
<script>
export let initialValue;
import { Icon } from 'sveltestrap';
export let state;
export let value;
@ -8,30 +9,44 @@
const dispatch = createEventDispatcher();
let node;
let checkedValue = false;
$: {
if (node) {
function handleClick() {
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;
} else {
state = CHECKED;
}
dispatch('change', { value: state });
}
$: icon = () => {
switch (state) {
case UNCHECKED:
return 'square';
case WEIRD:
return 'square-half';
case CHECKED:
return 'check-square-fill';
}
};
</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>