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

Unify components

This commit is contained in:
Adria Navarro 2024-05-29 15:31:25 +02:00
parent 4262532cb1
commit a689d82b66
2 changed files with 17 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,6 @@
import { getContext } from "svelte" import { getContext } from "svelte"
import { ActionButton, Popover, Toggle, Icon } from "@budibase/bbui" import { ActionButton, Popover, Toggle, 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")
@ -32,6 +31,12 @@
HIDDEN: "hidden", HIDDEN: "hidden",
} }
const options = [
{ icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE },
{ icon: "Visibility", value: PERMISSION_OPTIONS.READONLY },
{ icon: "VisibilityOff", value: PERMISSION_OPTIONS.HIDDEN },
]
function columnToPermissionOptions(column) { function columnToPermissionOptions(column) {
if (!column.visible) { if (!column.visible) {
return PERMISSION_OPTIONS.HIDDEN return PERMISSION_OPTIONS.HIDDEN
@ -73,15 +78,17 @@
<Icon size="S" name={getColumnIcon(column)} /> <Icon size="S" name={getColumnIcon(column)} />
{column.label} {column.label}
</div> </div>
<ToggleActionButtonGroup <div>
on:change={e => toggleColumn(column, e.detail)} {#each options as option}
value={columnToPermissionOptions(column)} <ActionButton
options={[ on:click={() => toggleColumn(column, option.value)}
{ icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE }, size="S"
{ icon: "Visibility", value: PERMISSION_OPTIONS.READONLY }, icon={option.icon}
{ icon: "VisibilityOff", value: PERMISSION_OPTIONS.HIDDEN }, quiet
]} selected={option.value === columnToPermissionOptions(column)}
/> />
{/each}
</div>
{/each} {/each}
</div> </div>
</div> </div>

25
packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte
View File

@ -1,25 +0,0 @@
<script>
import { createEventDispatcher } from "svelte"
import { ActionButton } from "@budibase/bbui"
export let value
export let options
let dispatch = createEventDispatcher()
const onClick = value => {
dispatch("change", value)
}
</script>
<div>
{#each options as option}
<ActionButton
on:click={() => onClick(option.value)}
size="S"
icon={option.icon}
quiet
selected={option.value === value}
/>
{/each}
</div>