From 7eed50707e3442a8ab838898d6b3053ac6ba1fb9 Mon Sep 17 00:00:00 2001 From: Gerard Burns Date: Mon, 1 Apr 2024 12:31:16 +0100 Subject: [PATCH] wip --- .../bbui/src/Form/Core/Multiselect.svelte | 14 +- packages/bbui/src/Form/Core/Picker.svelte | 233 +++++++++++------- packages/bbui/src/Form/Multiselect.svelte | 10 + packages/bbui/src/Tooltip/Context.svelte | 129 ++++++++++ .../settings/controls/FieldSelect.svelte | 50 +++- .../settings/controls/MultiFieldSelect.svelte | 108 +++++++- .../design/settings/fieldValidator.js | 6 +- packages/client/manifest.json | 40 +-- 8 files changed, 474 insertions(+), 116 deletions(-) create mode 100644 packages/bbui/src/Tooltip/Context.svelte diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte index 7c1900fe2e..959d5c99e0 100644 --- a/packages/bbui/src/Form/Core/Multiselect.svelte +++ b/packages/bbui/src/Form/Core/Multiselect.svelte @@ -9,8 +9,10 @@ export let options = [] export let getOptionLabel = option => option export let getOptionValue = option => option - export let getOptionsIcon = () => null - export let getOptionsIconToolip = () => null + export let getOptionIcon = () => null + export let getOptionIconTooltip = () => null + export let getOptionTooltip = () => null + export let isOptionEnabled = () => true export let readonly = false export let autocomplete = false export let sort = false @@ -19,6 +21,7 @@ export let customPopoverHeight export let open = false export let loading + export let align const dispatch = createEventDispatcher() @@ -82,8 +85,10 @@ diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte index f5c8398bec..d389abe60a 100644 --- a/packages/bbui/src/Form/Core/Picker.svelte +++ b/packages/bbui/src/Form/Core/Picker.svelte @@ -11,6 +11,13 @@ import Tags from "../../Tags/Tags.svelte" import Tag from "../../Tags/Tag.svelte" import ProgressCircle from "../../ProgressCircle/ProgressCircle.svelte" + import { + default as AbsTooltip, + TooltipPosition, + TooltipType, + } from "../../Tooltip/AbsTooltip.svelte" + import ContextTooltip from "../../Tooltip/Context.svelte" + export let id = null export let disabled = false @@ -27,6 +34,7 @@ export let getOptionValue = option => option export let getOptionIcon = () => null export let getOptionIconTooltip = () => null + export let getOptionTooltip = () => null export let useOptionIconImage = false export let getOptionColour = () => null export let getOptionSubtitle = () => null @@ -48,6 +56,11 @@ let button let component + let contextTooltipId = 0; + let contextTooltipAnchor = null + let contextTooltipOption = null + let contextTooltipVisible = false + $: sortedOptions = getSortedOptions(options, getOptionLabel, sort) $: filteredOptions = getFilteredOptions( sortedOptions, @@ -103,6 +116,29 @@ onDestroy(() => { component?.removeEventListener("scroll", null) }) + + const handleMouseenter = (e, option) => { + contextTooltipId += 1; + const invokedContextTooltipId = contextTooltipId + + setTimeout(() => { + if (contextTooltipId === invokedContextTooltipId) { + contextTooltipAnchor = e.target; + contextTooltipOption = option; + contextTooltipVisible = true; + } else { + console.log("not long enough"); + } + }, 400) + } + + const handleMouseleave = (e, option) => { + setTimeout(() => { + if (option === contextTooltipOption) { + contextTooltipVisible = false; + } + }, 600) + }