From ffee41aea320947ae4f50654e3a61b87c82bc202 Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Wed, 22 Feb 2023 12:31:04 +0000 Subject: [PATCH] custom popover height and sidebar styling --- .../bbui/src/Form/Core/Multiselect.svelte | 2 + packages/bbui/src/Form/Core/Picker.svelte | 3 + packages/bbui/src/Form/Multiselect.svelte | 2 + packages/bbui/src/Form/Select.svelte | 2 + packages/bbui/src/Popover/Popover.svelte | 2 + .../_components/AppColumnRenderer.svelte | 2 +- .../auditLogs/_components/UserRenderer.svelte | 4 +- .../portal/account/auditLogs/index.svelte | 58 ++++++++++++++++--- 8 files changed, 63 insertions(+), 12 deletions(-) diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte index a315f44a65..8860fcbf0b 100644 --- a/packages/bbui/src/Form/Core/Multiselect.svelte +++ b/packages/bbui/src/Form/Core/Multiselect.svelte @@ -15,6 +15,7 @@ export let sort = false export let autoWidth = false export let fetchTerm = null + export let customPopoverHeight const dispatch = createEventDispatcher() @@ -91,4 +92,5 @@ onSelectOption={toggleOption} {sort} {autoWidth} + {customPopoverHeight} /> diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte index ace41aa35b..5cef0f9213 100644 --- a/packages/bbui/src/Form/Core/Picker.svelte +++ b/packages/bbui/src/Form/Core/Picker.svelte @@ -32,6 +32,7 @@ export let autocomplete = false export let sort = false export let fetchTerm = null + export let customPopoverHeight const dispatch = createEventDispatcher() let searchTerm = null @@ -136,6 +137,7 @@ on:close={() => (open = false)} useAnchorWidth={!autoWidth} maxWidth={autoWidth ? 400 : null} + customHeight={customPopoverHeight} >
{ @@ -38,6 +39,7 @@ {getOptionValue} {autoWidth} {autocomplete} + {customPopoverHeight} bind:fetchTerm on:change={onChange} on:click diff --git a/packages/bbui/src/Form/Select.svelte b/packages/bbui/src/Form/Select.svelte index 4f30318282..76fe613c92 100644 --- a/packages/bbui/src/Form/Select.svelte +++ b/packages/bbui/src/Form/Select.svelte @@ -21,6 +21,7 @@ export let sort = false export let tooltip = "" export let autocomplete = false + export let customPopoverHeight const dispatch = createEventDispatcher() const onChange = e => { @@ -53,6 +54,7 @@ {getOptionColour} {isOptionEnabled} {autocomplete} + {customPopoverHeight} on:change={onChange} on:click /> diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte index 8f6ef06591..081e3a34df 100644 --- a/packages/bbui/src/Popover/Popover.svelte +++ b/packages/bbui/src/Popover/Popover.svelte @@ -18,6 +18,7 @@ export let useAnchorWidth = false export let dismissible = true export let offset = 5 + export let customHeight $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum" @@ -74,6 +75,7 @@ on:keydown={handleEscape} class="spectrum-Popover is-open" role="presentation" + style="height: {customHeight}" transition:fly|local={{ y: -20, duration: 200 }} > diff --git a/packages/builder/src/pages/builder/portal/account/auditLogs/_components/AppColumnRenderer.svelte b/packages/builder/src/pages/builder/portal/account/auditLogs/_components/AppColumnRenderer.svelte index 2ad3997f79..08260ecc5c 100644 --- a/packages/builder/src/pages/builder/portal/account/auditLogs/_components/AppColumnRenderer.svelte +++ b/packages/builder/src/pages/builder/portal/account/auditLogs/_components/AppColumnRenderer.svelte @@ -2,4 +2,4 @@ export let value -
{value?.name || "N/A"}
+
{value?.name || ""}
diff --git a/packages/builder/src/pages/builder/portal/account/auditLogs/_components/UserRenderer.svelte b/packages/builder/src/pages/builder/portal/account/auditLogs/_components/UserRenderer.svelte index 5d3d8fa28a..1dfb425965 100644 --- a/packages/builder/src/pages/builder/portal/account/auditLogs/_components/UserRenderer.svelte +++ b/packages/builder/src/pages/builder/portal/account/auditLogs/_components/UserRenderer.svelte @@ -18,11 +18,11 @@ on:focus={() => (showTooltip = true)} on:mouseleave={() => (showTooltip = false)} > - +
{#if showTooltip}
- +
{/if} diff --git a/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte b/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte index 47c93d23d1..4459eb12a5 100644 --- a/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte +++ b/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte @@ -10,6 +10,7 @@ CoreTextArea, DatePicker, Pagination, + Helpers, Divider, } from "@budibase/bbui" import { licensing, users, apps, auditLogs } from "stores/portal" @@ -185,6 +186,11 @@ viewDetails, }) + const copyToClipboard = async value => { + await Helpers.copyToClipboard(value) + notifications.success("Copied") + } + onMount(async () => { await auditLogs.getEventDefinitions() }) @@ -246,6 +252,7 @@
event[0]} getOptionLabel={event => event[1]} @@ -318,6 +325,12 @@
+
copyToClipboard(JSON.stringify(selectedLog.metadata))} + class="copy-icon" + > + +
+ .copy-icon { + right: 16px; + top: 80px; + z-index: 10; + justify-content: center; + align-items: center; + display: flex; + flex-direction: row; + box-sizing: border-box; + + border: 1px solid var(--spectrum-alias-border-color); + border-radius: var(--spectrum-alias-border-radius-regular); + width: 31px; + color: var(--spectrum-alias-text-color); + background-color: var(--spectrum-global-color-gray-75); + transition: background-color + var(--spectrum-global-animation-duration-100, 130ms), + box-shadow var(--spectrum-global-animation-duration-100, 130ms), + border-color var(--spectrum-global-animation-duration-100, 130ms); + height: calc(var(--spectrum-alias-item-height-m) - 2px); + position: absolute; + } + .copy-icon:hover { + cursor: pointer; + color: var(--spectrum-alias-text-color-hover); + background-color: var(--spectrum-global-color-gray-50); + border-color: var(--spectrum-alias-border-color-hover); + } .side-panel-header { display: flex; padding: 20px 10px 10px 10px; @@ -346,7 +387,7 @@ .side-panel-body { padding: 10px; - height: 95%; + height: calc(100% - 67px); } #side-panel { position: absolute; @@ -357,11 +398,11 @@ border-left: var(--border-light); width: 320px; max-width: calc(100vw - 48px - 48px); - overflow: auto; - overflow-x: hidden; transform: translateX(100%); transition: transform 130ms ease-in-out; - height: calc(100% - 25px); + height: calc(100% - 24px); + overflow-y: hidden; + overflow-x: hidden; z-index: 2; } #side-panel.visible { @@ -373,15 +414,14 @@ } #side-panel :global(textarea) { - min-height: 202px !important; + min-height: 100% !important; background-color: var( --spectrum-textfield-m-background-color, var(--spectrum-global-color-gray-50) ); - color: var( - --spectrum-textfield-m-text-color, - var(--spectrum-alias-text-color) - ); + padding-top: var(--spacing-l); + padding-left: var(--spacing-l); + font-size: 13px; } .search :global(.spectrum-InputGroup) {