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

Make delete rows button more prominent

This commit is contained in:
Andrew Kingston 2023-04-21 10:38:07 +01:00
parent 574595c0af
commit 3e2fcf2f76
2 changed files with 16 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/frontend-core/src/components/grid/controls/DeleteButton.svelte
View File

@ -1,10 +1,5 @@
<script> <script>
import { import { Modal, ModalContent, Button, notifications } from "@budibase/bbui"
Modal,
ModalContent,
ActionButton,
notifications,
} from "@budibase/bbui"
import { getContext } from "svelte" import { getContext } from "svelte"
const { selectedRows, rows, config } = getContext("grid") const { selectedRows, rows, config } = getContext("grid")
@ -32,14 +27,15 @@
{#if selectedRowCount} {#if selectedRowCount}
<div class="delete-button" data-ignore-click-outside="true"> <div class="delete-button" data-ignore-click-outside="true">
<ActionButton <Button
icon="Delete" icon="Delete"
size="S" size="M"
on:click={modal.show} on:click={modal.show}
disabled={!$config.allowEditRows} disabled={!$config.allowEditRows}
cta
> >
Delete {selectedRowCount} row{selectedRowCount === 1 ? "" : "s"} Delete {selectedRowCount} row{selectedRowCount === 1 ? "" : "s"}
</ActionButton> </Button>
</div> </div>
{/if} {/if}
@ -57,16 +53,12 @@
</Modal> </Modal>
<style> <style>
.delete-button :global(.spectrum-ActionButton:not(:disabled) *) { .delete-button :global(.spectrum-Button:not(:disabled)) {
color: var(--spectrum-global-color-red-400); background-color: var(--spectrum-global-color-red-400);
}
.delete-button :global(.spectrum-ActionButton:not(:disabled)) {
border-color: var(--spectrum-global-color-red-400); border-color: var(--spectrum-global-color-red-400);
} }
/*.delete-button.disabled :global(.spectrum-ActionButton *) {*/ .delete-button :global(.spectrum-Button:not(:disabled):hover) {
/* color: var(--spectrum-global-color-gray-600);*/ background-color: var(--spectrum-global-color-red-500);
/*}*/ border-color: var(--spectrum-global-color-red-500);
/*.delete-button.disabled :global(.spectrum-ActionButton) {*/ }
/* border-color: var(--spectrum-global-color-gray-400);*/
/*}*/
</style> </style>

6
packages/frontend-core/src/components/grid/stores/ui.js
View File

@ -1,4 +1,5 @@
import { writable, get, derived } from "svelte/store" import { writable, get, derived } from "svelte/store"
import { tick } from "svelte"
import { import {
DefaultRowHeight, DefaultRowHeight,
LargeRowHeight, LargeRowHeight,
@ -101,7 +102,10 @@ export const initialise = context => {
} = context } = context
// Ensure we clear invalid rows from state if they disappear // Ensure we clear invalid rows from state if they disappear
rows.subscribe(() => { rows.subscribe(async () => {
// We tick here to ensure other derived stores have properly updated.
// We depend on the row lookup map which is a derived store,
await tick()
const $focusedCellId = get(focusedCellId) const $focusedCellId = get(focusedCellId)
const $selectedRows = get(selectedRows) const $selectedRows = get(selectedRows)
const $hoveredRowId = get(hoveredRowId) const $hoveredRowId = get(hoveredRowId)