Break down component
This commit is contained in:
parent
53968f0725
commit
3d15f71344
2 changed files with 59 additions and 39 deletions
|
@ -1,7 +1,8 @@
|
|||
<script>
|
||||
import { getContext } from "svelte"
|
||||
import { ActionButton, Popover, Toggle, Icon } from "@budibase/bbui"
|
||||
import { ActionButton, Popover, Icon } from "@budibase/bbui"
|
||||
import { getColumnIcon } from "../lib/utils"
|
||||
import ToggleActionButtonGroup from "./ToggleActionButtonGroup.svelte"
|
||||
|
||||
const { columns, datasource, stickyColumn, dispatch } = getContext("grid")
|
||||
|
||||
|
@ -30,8 +31,12 @@
|
|||
}
|
||||
|
||||
const options = [
|
||||
{ icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE },
|
||||
{ icon: "VisibilityOff", value: PERMISSION_OPTIONS.HIDDEN },
|
||||
{ icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE, tooltip: "Writable" },
|
||||
{
|
||||
icon: "VisibilityOff",
|
||||
value: PERMISSION_OPTIONS.HIDDEN,
|
||||
tooltip: "Hidden",
|
||||
},
|
||||
]
|
||||
|
||||
function columnToPermissionOptions(column) {
|
||||
|
@ -65,36 +70,22 @@
|
|||
{$stickyColumn.label}
|
||||
</div>
|
||||
|
||||
<div class="permissionPicker">
|
||||
{#each options as option}
|
||||
<ActionButton
|
||||
disabled
|
||||
size="S"
|
||||
icon={option.icon}
|
||||
quiet
|
||||
selected={option.value === PERMISSION_OPTIONS.WRITABLE}
|
||||
noPadding
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
<ToggleActionButtonGroup
|
||||
disabled
|
||||
value={PERMISSION_OPTIONS.WRITABLE}
|
||||
{options}
|
||||
/>
|
||||
{/if}
|
||||
{#each $columns as column}
|
||||
<div class="column">
|
||||
<Icon size="S" name={getColumnIcon(column)} />
|
||||
{column.label}
|
||||
</div>
|
||||
<div class="permissionPicker">
|
||||
{#each options as option}
|
||||
<ActionButton
|
||||
on:click={() => toggleColumn(column, option.value)}
|
||||
size="S"
|
||||
icon={option.icon}
|
||||
quiet
|
||||
selected={option.value === columnToPermissionOptions(column)}
|
||||
noPadding
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
<ToggleActionButtonGroup
|
||||
on:click={e => toggleColumn(column, e.detail)}
|
||||
value={columnToPermissionOptions(column)}
|
||||
{options}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -120,16 +111,4 @@
|
|||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.permissionPicker {
|
||||
display: flex;
|
||||
gap: var(--spacing-xs);
|
||||
padding-left: calc(var(--spacing-xl) * 2);
|
||||
}
|
||||
|
||||
.permissionPicker :global(.spectrum-Icon) {
|
||||
width: 14px;
|
||||
}
|
||||
.permissionPicker :global(.spectrum-ActionButton) {
|
||||
width: 22px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -0,0 +1,41 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from "svelte"
|
||||
|
||||
let dispatch = createEventDispatcher()
|
||||
|
||||
import { ActionButton } from "@budibase/bbui"
|
||||
|
||||
export let value
|
||||
export let options
|
||||
export let disabled
|
||||
</script>
|
||||
|
||||
<div class="permissionPicker">
|
||||
{#each options as option}
|
||||
<ActionButton
|
||||
on:click={() => dispatch("click", option.value)}
|
||||
{disabled}
|
||||
size="S"
|
||||
icon={option.icon}
|
||||
quiet
|
||||
selected={option.value === value}
|
||||
noPadding
|
||||
tooltip={option.tooltip}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.permissionPicker {
|
||||
display: flex;
|
||||
gap: var(--spacing-xs);
|
||||
padding-left: calc(var(--spacing-xl) * 2);
|
||||
}
|
||||
|
||||
.permissionPicker :global(.spectrum-Icon) {
|
||||
width: 14px;
|
||||
}
|
||||
.permissionPicker :global(.spectrum-ActionButton) {
|
||||
width: 22px;
|
||||
}
|
||||
</style>
|
Loading…
Reference in a new issue