MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Break down component

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

51
packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
View File

@ -1,7 +1,8 @@
<script> <script>
import { getContext } from "svelte" 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 { getColumnIcon } from "../lib/utils"
import ToggleActionButtonGroup from "./ToggleActionButtonGroup.svelte"
const { columns, datasource, stickyColumn, dispatch } = getContext("grid") const { columns, datasource, stickyColumn, dispatch } = getContext("grid")
@ -30,8 +31,12 @@
} }
const options = [ const options = [
{ icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE }, { icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE, tooltip: "Writable" },
{ icon: "VisibilityOff", value: PERMISSION_OPTIONS.HIDDEN }, {
icon: "VisibilityOff",
value: PERMISSION_OPTIONS.HIDDEN,
tooltip: "Hidden",
},
] ]
function columnToPermissionOptions(column) { function columnToPermissionOptions(column) {
@ -65,38 +70,24 @@
{$stickyColumn.label} {$stickyColumn.label}
</div> </div>
<div class="permissionPicker"> <ToggleActionButtonGroup
{#each options as option}
<ActionButton
disabled disabled
size="S" value={PERMISSION_OPTIONS.WRITABLE}
icon={option.icon} {options}
quiet
selected={option.value === PERMISSION_OPTIONS.WRITABLE}
noPadding
/> />
{/each}
</div>
{/if} {/if}
{#each $columns as column} {#each $columns as column}
<div class="column"> <div class="column">
<Icon size="S" name={getColumnIcon(column)} /> <Icon size="S" name={getColumnIcon(column)} />
{column.label} {column.label}
</div> </div>
<div class="permissionPicker"> <ToggleActionButtonGroup
{#each options as option} on:click={e => toggleColumn(column, e.detail)}
<ActionButton value={columnToPermissionOptions(column)}
on:click={() => toggleColumn(column, option.value)} {options}
size="S"
icon={option.icon}
quiet
selected={option.value === columnToPermissionOptions(column)}
noPadding
/> />
{/each} {/each}
</div> </div>
{/each}
</div>
</div> </div>
</Popover> </Popover>
@ -120,16 +111,4 @@
display: flex; display: flex;
gap: 8px; 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> </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>