Better filterbar style
This commit is contained in:
parent
8ed74bf3ec
commit
c603e31f64
3 changed files with 68 additions and 64 deletions
|
@ -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;
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue