CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-09 22:16:26 +12:00
Code Issues Projects Releases Wiki Activity

Break down component

Browse source
This commit is contained in:
Adria Navarro 2024-05-29 16:50:07 +02:00
parent 53968f0725
commit 3d15f71344
2 changed files with 59 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
View file

@ -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>

41
packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte Normal file
View file

@ -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>