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

Update delete button and allow horizontal scrolling

This commit is contained in:
Andrew Kingston 2023-03-07 14:14:16 +00:00
parent 7f231aecdf
commit ef54813764
3 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/frontend-core/src/components/sheet/DeleteButton.svelte
View File

@ -1,5 +1,5 @@
<script> <script>
import { Modal, ModalContent, Button } from "@budibase/bbui" import { Modal, ModalContent, ActionButton } from "@budibase/bbui"
import { getContext } from "svelte" import { getContext } from "svelte"
const { selectedRows, rows } = getContext("sheet") const { selectedRows, rows } = getContext("sheet")
@ -25,9 +25,9 @@
{#if selectedRowCount} {#if selectedRowCount}
<div class="delete-button"> <div class="delete-button">
<Button icon="Delete" size="M" cta on:click={modal.show}> <ActionButton icon="Delete" size="S" on:click={modal.show}>
Delete {selectedRowCount} row{selectedRowCount === 1 ? "" : "s"} Delete {selectedRowCount} row{selectedRowCount === 1 ? "" : "s"}
</Button> </ActionButton>
</div> </div>
{/if} {/if}
@ -46,16 +46,11 @@
<style> <style>
.delete-button { .delete-button {
position: absolute;
bottom: 30px;
right: 30px;
} }
.delete-button :global(.spectrum-Button) { .delete-button :global(.spectrum-ActionButton *) {
background: var(--spectrum-global-color-red-400); color: var(--spectrum-global-color-red-400);
}
.delete-button :global(.spectrum-ActionButton) {
border-color: var(--spectrum-global-color-red-400); border-color: var(--spectrum-global-color-red-400);
} }
.delete-button :global(.spectrum-Button:hover) {
background: var(--spectrum-global-color-red-500);
border-color: var(--spectrum-global-color-red-500);
}
</style> </style>

5
packages/frontend-core/src/components/sheet/Sheet.svelte
View File

@ -95,6 +95,7 @@
<slot name="controls" /> <slot name="controls" />
</div> </div>
<div class="controls-right"> <div class="controls-right">
<DeleteButton />
<UserAvatars /> <UserAvatars />
</div> </div>
</div> </div>
@ -104,7 +105,6 @@
<HeaderRow /> <HeaderRow />
<SheetBody /> <SheetBody />
</div> </div>
<DeleteButton />
<ResizeOverlay /> <ResizeOverlay />
<ScrollOverlay /> <ScrollOverlay />
</div> </div>
@ -177,4 +177,7 @@
align-items: center; align-items: center;
gap: var(--cell-spacing); gap: var(--cell-spacing);
} }
.controls-right {
gap: 12px;
}
</style> </style>

5
packages/frontend-core/src/components/sheet/SheetScrollWrapper.svelte
View File

@ -44,7 +44,10 @@
// Handles a wheel even and updates the scroll offsets // Handles a wheel even and updates the scroll offsets
const handleWheel = e => { const handleWheel = e => {
e.preventDefault() e.preventDefault()
debouncedHandleWheel(e.deltaX, e.deltaY, e.clientY) const modifier = e.ctrlKey || e.metaKey
let x = modifier ? e.deltaY : e.deltaX
let y = modifier ? e.deltaX : e.deltaY
debouncedHandleWheel(x, y, e.clientY)
} }
const debouncedHandleWheel = domDebounce((deltaX, deltaY, clientY) => { const debouncedHandleWheel = domDebounce((deltaX, deltaY, clientY) => {
// Calculate new scroll top // Calculate new scroll top