From 27c959fe54bbe2b97c46b59bb901f2431f5ce59d Mon Sep 17 00:00:00 2001 From: Guilhem Date: Wed, 29 Oct 2025 22:03:12 +0100 Subject: [PATCH] glm/fix-prop-picker-position (#6991) * fix button fill container * fix popover overflow * Update script picker to new guidelines * fix expand sublow button * fix scroll * fix popover dark mode * fix refresh button * nit * fix popover oferflow * nit --- frontend/src/lib/assets/tokens/tokens.json | 2 +- .../src/lib/components/DeployButton.svelte | 2 +- frontend/src/lib/components/DropdownV2.svelte | 2 +- .../components/GitHubAppIntegration.svelte | 4 +- .../components/SchemaFormWithArgPicker.svelte | 2 +- .../components/ToggleHubWorkspaceQuick.svelte | 6 +- .../src/lib/components/TooltipInner.svelte | 2 +- .../common/button/RefreshButton.svelte | 20 ++-- .../src/lib/components/common/button/model.ts | 6 +- .../components/common/popup/PopupV2.svelte | 2 +- .../components/copilot/StepGenQuick.svelte | 5 +- .../flows/content/FlowInputsQuick.svelte | 101 +++++++----------- .../flows/map/FlowErrorHandlerItem.svelte | 12 +-- .../flows/map/FlowModuleSchemaItem.svelte | 28 ++++- .../flows/map/FlowStickyNode.svelte | 5 +- .../flows/map/InsertModuleButton.svelte | 5 +- .../flows/map/InsertModuleInner.svelte | 20 ++-- .../flows/map/InsertModulePopover.svelte | 57 +++++----- .../lib/components/flows/map/MapItem.svelte | 5 +- .../pickers/FlowScriptPickerQuick.svelte | 24 ++--- .../flows/pickers/FlowToplevelNode.svelte | 2 +- .../flows/pickers/PickHubScriptQuick.svelte | 32 +++--- .../flows/pickers/TopLevelNode.svelte | 26 ++--- .../pickers/WorkspaceScriptPickerQuick.svelte | 29 +++-- .../flows/propPicker/OutputPicker.svelte | 2 + .../lib/components/graph/FlowGraphV2.svelte | 2 +- .../graph/renderers/edges/BaseEdge.svelte | 9 +- .../graph/renderers/nodes/InputNode.svelte | 8 +- .../graph/renderers/nodes/ModuleNode.svelte | 24 ++--- .../graph/renderers/nodes/SubflowBound.svelte | 2 +- .../components/home/ListFiltersQuick.svelte | 54 +++++----- .../src/lib/components/icons/AsanaIcon.svelte | 20 +++- .../lib/components/icons/NextcloudIcon.svelte | 19 ++-- .../components/meltComponents/Popover.svelte | 27 +++-- .../sidebar/CriticalAlertModalInner.svelte | 2 +- 35 files changed, 283 insertions(+), 285 deletions(-) diff --git a/frontend/src/lib/assets/tokens/tokens.json b/frontend/src/lib/assets/tokens/tokens.json index de71a8beaf..46ff9fffd8 100644 --- a/frontend/src/lib/assets/tokens/tokens.json +++ b/frontend/src/lib/assets/tokens/tokens.json @@ -29,7 +29,7 @@ "text-emphasis-inverse": "#f3f4f6", "reserved-ai": "#a02cde", "component-virtual-node": "#dce0f1", - "text-accent": "#5074f6", + "text-accent": "#2652df", "border-selected": "#a0affa", "surface-sunken": "#e8e8ef", "text-tertiary": "#505c70", diff --git a/frontend/src/lib/components/DeployButton.svelte b/frontend/src/lib/components/DeployButton.svelte index b42e55ccd7..16ccc04cd2 100644 --- a/frontend/src/lib/components/DeployButton.svelte +++ b/frontend/src/lib/components/DeployButton.svelte @@ -58,7 +58,7 @@ > Deploy {#snippet tooltip()} -
+
diff --git a/frontend/src/lib/components/GitHubAppIntegration.svelte b/frontend/src/lib/components/GitHubAppIntegration.svelte index 5b485f2867..900c08b18e 100644 --- a/frontend/src/lib/components/GitHubAppIntegration.svelte +++ b/frontend/src/lib/components/GitHubAppIntegration.svelte @@ -179,10 +179,8 @@ {#snippet trigger()}
diff --git a/frontend/src/lib/components/TooltipInner.svelte b/frontend/src/lib/components/TooltipInner.svelte index beb7813ad2..b8c435f167 100644 --- a/frontend/src/lib/components/TooltipInner.svelte +++ b/frontend/src/lib/components/TooltipInner.svelte @@ -8,7 +8,7 @@
{#if markdownTooltip}
diff --git a/frontend/src/lib/components/common/button/RefreshButton.svelte b/frontend/src/lib/components/common/button/RefreshButton.svelte index a6e1d29c3c..be78e44bee 100644 --- a/frontend/src/lib/components/common/button/RefreshButton.svelte +++ b/frontend/src/lib/components/common/button/RefreshButton.svelte @@ -3,15 +3,15 @@ import { RefreshCw } from 'lucide-svelte' import Popover from '$lib/components/Popover.svelte' - import { twMerge } from 'tailwind-merge' interface Props { loading: boolean - size?: ButtonType.Size + size?: ButtonType.UnifiedSize light?: boolean + onClick?: () => void } - let { loading, size = 'xs2', light = false }: Props = $props() + let { loading, size = 'md', onClick }: Props = $props() let buttonHover = $state(false) @@ -21,15 +21,11 @@ on:mouseenter={() => (buttonHover = true)} on:mouseleave={() => (buttonHover = false)} color="light" - {size} - variant="border" - on:click - > - - + unifiedSize={size} + variant="subtle" + {onClick} + startIcon={{ icon: RefreshCw, props: { class: loading ? 'animate-spin' : '' } }} + > {#snippet text()} {#if loading} {#if buttonHover} diff --git a/frontend/src/lib/components/common/button/model.ts b/frontend/src/lib/components/common/button/model.ts index eda59146c7..34d05033ab 100644 --- a/frontend/src/lib/components/common/button/model.ts +++ b/frontend/src/lib/components/common/button/model.ts @@ -230,19 +230,19 @@ export namespace ButtonType { } export const UnifiedMinHeightClasses: Record = { - sm: 'min-h-6', + sm: 'min-h-7', md: 'min-h-8', lg: 'min-h-10' } export const UnifiedHeightClasses: Record = { - sm: 'h-6', + sm: 'h-7', md: 'h-8', lg: 'h-10' } export const UnifiedIconSizes: Record = { - sm: 14, + sm: 13, md: 14, lg: 18 } diff --git a/frontend/src/lib/components/common/popup/PopupV2.svelte b/frontend/src/lib/components/common/popup/PopupV2.svelte index 89d6bb2f51..d7919dd8a3 100644 --- a/frontend/src/lib/components/common/popup/PopupV2.svelte +++ b/frontend/src/lib/components/common/popup/PopupV2.svelte @@ -40,7 +40,7 @@ {#if open}
{#if loading} - + {/if} {#if funcDesc?.length === 0 && !loading && !disableAi} - + {/if}
diff --git a/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte b/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte index 37d7d742c6..a206077ed6 100644 --- a/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte +++ b/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte @@ -14,12 +14,10 @@ import type { FlowBuilderWhitelabelCustomUi } from '$lib/components/custom_ui' import { type Script, type ScriptLang, type HubScriptKind } from '$lib/gen' import ListFiltersQuick from '$lib/components/home/ListFiltersQuick.svelte' - import { Folder, User } from 'lucide-svelte' + import { Folder, User, X } from 'lucide-svelte' import type { FlowEditorContext } from '../../flows/types' - import { twMerge } from 'tailwind-merge' import { fade } from 'svelte/transition' import { flip } from 'svelte/animate' - import Scrollable from '$lib/components/Scrollable.svelte' import { Button } from '$lib/components/common' import { SettingsIcon } from 'lucide-svelte' import DefaultScriptsInner from '$lib/components/DefaultScriptsInner.svelte' @@ -37,7 +35,6 @@ funcDesc: string owners?: string[] loading?: boolean - small?: boolean kind: 'trigger' | 'script' | 'preprocessor' | 'failure' | 'approval' selectedKind?: 'script' | 'flow' | 'approval' | 'trigger' | 'preprocessor' | 'failure' displayPath?: boolean @@ -52,7 +49,6 @@ funcDesc, owners = $bindable([]), loading = $bindable(false), - small = false, kind, selectedKind = kind, displayPath = false, @@ -172,10 +168,7 @@ ] let topLevelNodes: [string, string][] = $state([]) - function computeToplevelNodeChoices( - funcDesc: string, - preFilter: 'all' | 'workspace' | 'hub' - ) { + function computeToplevelNodeChoices(funcDesc: string, preFilter: 'all' | 'workspace' | 'hub') { if (funcDesc.length > 0 && preFilter == 'all' && kind == 'script') { topLevelNodes = allToplevelNodes.filter((node) => node[0].toLowerCase().startsWith(funcDesc.toLowerCase()) @@ -194,7 +187,7 @@ selectedByKeyboard = 0 } - let scrollable: Scrollable | undefined = $state() + let scrollable: HTMLElement | undefined = $state() function onKeyDown(e: KeyboardEvent) { let length = topLevelNodes?.length + @@ -204,11 +197,11 @@ hubCompletions.length if (e.key === 'ArrowDown') { selectedByKeyboard = (selectedByKeyboard + 1) % length - scrollable?.scrollIntoView(selectedByKeyboard * 32) + scrollable?.scrollTo({ top: selectedByKeyboard * 32, behavior: 'smooth' }) e.preventDefault() } else if (e.key === 'ArrowUp') { selectedByKeyboard = (selectedByKeyboard - 1 + length) % length - scrollable?.scrollIntoView(selectedByKeyboard * 32) + scrollable?.scrollTo({ top: selectedByKeyboard * 32, behavior: 'smooth' }) e.preventDefault() } } @@ -249,9 +242,9 @@ -
+
{#if selectedKind != 'preprocessor'} - +
{#if ['script', 'trigger', 'approval', 'preprocessor', 'failure'].includes(selectedKind)} {#if (preFilter === 'all' && owners.length > 0) || preFilter === 'workspace'} {#if preFilter !== 'workspace'} @@ -265,22 +258,21 @@ animate:flip={{ duration: 100 }} class="w-full px-0.5" > - +
{/each}
@@ -309,29 +301,31 @@ {#if owners.length > 0} {#each owners as owner (owner)}
- +
{/each} {/if} {/if} - +
{/if} - +
{#if kind == 'script'} {#each topLevelNodes as [label, kind], i (label)} (openScriptSettings = true)} + onClick={() => (openScriptSettings = true)} startIcon={{ icon: SettingsIcon }} - size="xs2" - btnClasses="!text-primary" + unifiedSize="sm" variant="subtle" title="Edit global default scripts" /> {:else} @@ -472,6 +465,7 @@ {refreshCount} /> {/await} +
{/if} {#if selectedKind != 'preprocessor' && selectedKind != 'flow'} {#if (!selected || selected?.kind === 'integrations') && (preFilter === 'hub' || preFilter === 'all')} @@ -504,18 +498,5 @@ {/await} {/if} {/if} - +
- - diff --git a/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte b/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte index 7ca73438a1..2a80a34f37 100644 --- a/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte +++ b/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte @@ -106,7 +106,7 @@ { insertFailureModule(e.detail.inlineScript) }} @@ -115,19 +115,17 @@ }} kind="failure" > - {#snippet trigger({ toggleOpen })} + {#snippet trigger()} {/snippet} diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte index 70a60d5c5b..056d48fc0b 100644 --- a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte +++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte @@ -17,7 +17,8 @@ Play, Loader2, TriangleAlert, - Timer + Timer, + Maximize2 } from 'lucide-svelte' import { createEventDispatcher, getContext } from 'svelte' import { fade } from 'svelte/transition' @@ -83,6 +84,7 @@ flowJob?: Job | undefined isOwner?: boolean enableTestRun?: boolean + maximizeSubflow?: () => void } let { @@ -115,7 +117,8 @@ onUpdateMock, onEditInput, flowJob, - enableTestRun = false + enableTestRun = false, + maximizeSubflow = undefined }: Props = $props() let colorClasses = $derived(getNodeColorClasses(nodeState, selected)) @@ -472,7 +475,7 @@ {#if id !== 'preprocessor'} {/if} + {#if maximizeSubflow !== undefined && (hover || selected)} + + {/if} + diff --git a/frontend/src/lib/components/flows/pickers/WorkspaceScriptPickerQuick.svelte b/frontend/src/lib/components/flows/pickers/WorkspaceScriptPickerQuick.svelte index 9d1e6fca63..7f901cec1e 100644 --- a/frontend/src/lib/components/flows/pickers/WorkspaceScriptPickerQuick.svelte +++ b/frontend/src/lib/components/flows/pickers/WorkspaceScriptPickerQuick.svelte @@ -43,6 +43,7 @@ import { usePromise } from '$lib/svelte5Utils.svelte' import { get } from 'svelte/store' import { userStore } from '$lib/stores' + import Button from '$lib/components/common/button/Button.svelte' type Item = { path: string @@ -151,7 +152,7 @@ {kind == 'flow' ? 'No flows found.' : 'No scripts found.'}
{/if} -
{/snippet} - + {/each} diff --git a/frontend/src/lib/components/flows/propPicker/OutputPicker.svelte b/frontend/src/lib/components/flows/propPicker/OutputPicker.svelte index d65582251e..0328bc18aa 100644 --- a/frontend/src/lib/components/flows/propPicker/OutputPicker.svelte +++ b/frontend/src/lib/components/flows/propPicker/OutputPicker.svelte @@ -160,6 +160,7 @@ class="flex-1 h-full" bind:isOpen={inputOpen} bind:this={inputPopover} + portal="#flow-graph-v2" > {#snippet trigger({ isOpen })}