Update column editor and filter editor to make action buttons full width
This commit is contained in:
parent
757d2d11ef
commit
7b75d7f13d
|
@ -75,7 +75,9 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<ActionButton on:click={open}>Configure columns</ActionButton>
|
||||
<div class="column-editor">
|
||||
<ActionButton on:click={open}>Configure columns</ActionButton>
|
||||
</div>
|
||||
<Drawer bind:this={drawer} title="{subject} Columns">
|
||||
<svelte:fragment slot="description">
|
||||
Configure the columns in your {subject.toLowerCase()}.
|
||||
|
@ -89,3 +91,9 @@
|
|||
{allowCellEditing}
|
||||
/>
|
||||
</Drawer>
|
||||
|
||||
<style>
|
||||
.column-editor :global(.spectrum-ActionButton) {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -20,15 +20,26 @@
|
|||
$: datasource = getDatasourceForProvider($currentAsset, componentInstance)
|
||||
$: schema = getSchemaForDatasource($currentAsset, datasource)?.schema
|
||||
$: schemaFields = Object.values(schema || {})
|
||||
$: text = getText(value)
|
||||
|
||||
async function saveFilter() {
|
||||
dispatch("change", tempValue)
|
||||
notifications.success("Filters saved")
|
||||
drawer.hide()
|
||||
}
|
||||
|
||||
const getText = filters => {
|
||||
if (!filters?.length) {
|
||||
return "No filters set"
|
||||
} else {
|
||||
return `${filters.length} filter${filters.length === 1 ? "" : "s"} set`
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<ActionButton on:click={drawer.show}>Define filters</ActionButton>
|
||||
<div class="filter-editor">
|
||||
<ActionButton on:click={drawer.show}>{text}</ActionButton>
|
||||
</div>
|
||||
<Drawer bind:this={drawer} title="Filtering">
|
||||
<Button cta slot="buttons" on:click={saveFilter}>Save</Button>
|
||||
<FilterDrawer
|
||||
|
@ -40,3 +51,9 @@
|
|||
on:change={e => (tempValue = e.detail)}
|
||||
/>
|
||||
</Drawer>
|
||||
|
||||
<style>
|
||||
.filter-editor :global(.spectrum-ActionButton) {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue