Better filterbar style
This commit is contained in:
parent
8ed74bf3ec
commit
c603e31f64
|
@ -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;
|
||||
|
|
|
@ -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,49 +68,33 @@
|
|||
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>
|
||||
{#each Object.entries(children) as [toplevel, subchildren], i}
|
||||
{#if subchildren}
|
||||
<svelte:self
|
||||
item={toplevel}
|
||||
children={subchildren}
|
||||
on:change={handleChildChange(i)}
|
||||
filtering={subfiltering.storeAt(i)}
|
||||
bind:selected={subselected[i]}
|
||||
/>
|
||||
{:else}
|
||||
<svelte:self
|
||||
item={toplevel}
|
||||
on:change={handleChildChange(i)}
|
||||
filtering={subfiltering.storeAt(i)}
|
||||
bind:selected={subselected[i]}
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
</ul>
|
||||
</li>
|
||||
{#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
|
||||
item={toplevel}
|
||||
children={subchildren}
|
||||
on:change={handleChildChange(i)}
|
||||
filtering={subfiltering.storeAt(i)}
|
||||
bind:selected={subselected[i]}
|
||||
level={level + 1}
|
||||
/>
|
||||
{:else}
|
||||
<svelte:self
|
||||
item={toplevel}
|
||||
on:change={handleChildChange(i)}
|
||||
filtering={subfiltering.storeAt(i)}
|
||||
bind:selected={subselected[i]}
|
||||
level={level + 1}
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
{/if}
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
<script>
|
||||
export let initialValue;
|
||||
import { Icon } from 'sveltestrap';
|
||||
|
||||
export let state;
|
||||
export let value;
|
||||
|
||||
|
@ -7,31 +8,45 @@
|
|||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let node;
|
||||
let checkedValue = false;
|
||||
|
||||
$: {
|
||||
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) {
|
||||
function handleClick() {
|
||||
if (state === 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>
|
||||
|
|
Loading…
Reference in a new issue