From 99ef4f2992d6065bf6a72f252fa7c11b790cf9dd Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 7 Jul 2023 14:46:41 +0100 Subject: [PATCH] Add new temporary tooltip component. Improve tooltips and user avatars --- packages/bbui/src/Tooltip/AbsTooltip.svelte | 67 ++++++++++------ packages/bbui/src/Tooltip/TempTooltip.svelte | 39 +++++++++ packages/bbui/src/index.js | 1 + .../src/components/common/NavItem.svelte | 80 +++++++++++-------- .../_components/UserAvatars.svelte | 14 +++- .../app/[application]/settings/_layout.svelte | 2 +- .../src/components/UserAvatar.svelte | 53 ++---------- .../components/grid/layout/HeaderRow.svelte | 33 ++++---- .../src/components/grid/stores/columns.js | 16 ++++ .../src/components/grid/stores/ui.js | 18 +---- 10 files changed, 186 insertions(+), 137 deletions(-) create mode 100644 packages/bbui/src/Tooltip/TempTooltip.svelte diff --git a/packages/bbui/src/Tooltip/AbsTooltip.svelte b/packages/bbui/src/Tooltip/AbsTooltip.svelte index 3e8caa389e..c6963d0870 100644 --- a/packages/bbui/src/Tooltip/AbsTooltip.svelte +++ b/packages/bbui/src/Tooltip/AbsTooltip.svelte @@ -5,7 +5,6 @@ Bottom: "bottom", Left: "left", } - export const TooltipType = { Default: "default", Info: "info", @@ -23,14 +22,27 @@ export let type = TooltipType.Default export let text = "" export let fixed = false + export let color = null let wrapper let hovered = false let left = 0 let top = 0 + let visible = false + let timeout - $: visible = hovered || fixed + $: { + if (hovered || fixed) { + timeout = setTimeout(show, 200) + } else { + clearTimeout(timeout) + hide() + } + } + $: tooltipStyle = color ? `background:${color};` : null + $: tipStyle = color ? `border-top-color:${color};` : null + // Computes the position of the tooltip then shows it const show = () => { const node = wrapper?.children?.[0] if (!node) { @@ -38,6 +50,7 @@ } const bounds = node.getBoundingClientRect() + // Determine where to render tooltip based on position prop if (position === TooltipPosition.Top) { left = bounds.left + bounds.width / 2 top = bounds.top @@ -54,36 +67,36 @@ return } - hovered = true + visible = true } + + // Hides the tooltip const hide = () => { - hovered = false + visible = false } -{#if text} -
- -
- {#if visible} - - - {text} - - - - {/if} -{:else} +
(hovered = true)} + on:mouseleave={() => (hovered = false)} +> +
+ +{#if visible && text} + + + {text} + + + {/if} diff --git a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte index 7020e8fc11..7063a271be 100644 --- a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte @@ -46,7 +46,7 @@ />
- import { Avatar, Tooltip } from "@budibase/bbui" + import { Avatar, AbsTooltip, TooltipPosition } from "@budibase/bbui" import { helpers } from "@budibase/shared-core" export let user export let size - export let tooltipDirection = "top" + export let tooltipPosition = TooltipPosition.Top export let showTooltip = true - - $: tooltipStyle = getTooltipStyle(tooltipDirection) - - const getTooltipStyle = direction => { - if (!direction) { - return "" - } - if (direction === "top") { - return "transform: translateX(-50%) translateY(-100%);" - } else if (direction === "bottom") { - return "transform: translateX(-50%) translateY(100%);" - } - } {#if user} -
+ - {#if showTooltip} -
- -
- {/if} -
+ {/if} - - diff --git a/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte b/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte index f5e6365b88..71bde9d3d8 100644 --- a/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte +++ b/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte @@ -4,7 +4,7 @@ import HeaderCell from "../cells/HeaderCell.svelte" import { Icon, - AbsTooltip, + TempTooltip, TooltipType, TooltipPosition, } from "@budibase/bbui" @@ -16,10 +16,11 @@ hiddenColumnsWidth, width, config, + hasNonAutoColumn, } = getContext("grid") $: columnsWidth = $renderedColumns.reduce( - (total, col) => (total += col.width), + (total, col) => total + col.width, 0 ) $: end = $hiddenColumnsWidth + columnsWidth - 1 - $scroll.left @@ -35,19 +36,23 @@
{#if $config.allowSchemaChanges} - -
dispatch("add-column")} + {#key left} + - -
- +
dispatch("add-column")} + > + +
+ + {/key} {/if} diff --git a/packages/frontend-core/src/components/grid/stores/columns.js b/packages/frontend-core/src/components/grid/stores/columns.js index 21458eaefb..6ca8704c1c 100644 --- a/packages/frontend-core/src/components/grid/stores/columns.js +++ b/packages/frontend-core/src/components/grid/stores/columns.js @@ -83,6 +83,21 @@ export const deriveStores = context => { await saveChanges() } + // Derive if we have any normal columns + const hasNonAutoColumn = derived( + [columns, stickyColumn], + ([$columns, $stickyColumn]) => { + let allCols = $columns || [] + if ($stickyColumn) { + allCols = [...allCols, $stickyColumn] + } + const normalCols = allCols.filter(column => { + return !column.schema?.autocolumn + }) + return normalCols.length > 0 + } + ) + // Persists column changes by saving metadata against table schema const saveChanges = async () => { const $columns = get(columns) @@ -128,6 +143,7 @@ export const deriveStores = context => { } return { + hasNonAutoColumn, columns: { ...columns, actions: { diff --git a/packages/frontend-core/src/components/grid/stores/ui.js b/packages/frontend-core/src/components/grid/stores/ui.js index 671addc087..2f16265273 100644 --- a/packages/frontend-core/src/components/grid/stores/ui.js +++ b/packages/frontend-core/src/components/grid/stores/ui.js @@ -70,8 +70,7 @@ export const deriveStores = context => { rowHeight, stickyColumn, width, - columns, - stickyColumns, + hasNonAutoColumn, config, } = context @@ -117,18 +116,9 @@ export const deriveStores = context => { // Derive if we're able to add rows const canAddRows = derived( - [config, columns, stickyColumn], - ([$config, $columns, $stickyColumn]) => { - // Check if we have a normal column - let allCols = $columns || [] - if ($stickyColumn) { - allCols = [...allCols, $stickyColumn] - } - const normalCols = allCols.filter(column => { - return column.visible && !column.schema?.autocolumn - }) - // Check if we're allowed to add rows - return $config.allowAddRows && normalCols.length > 0 + [config, hasNonAutoColumn], + ([$config, $hasNonAutoColumn]) => { + return $config.allowAddRows && $hasNonAutoColumn } )