fix(frontend): Fix app toolbar z-index (#1641)

* fix(frontend): Fix app toolbar z-index * fix(frontend): mimimize changes * fix(frontend): use same strategy as Popover
windmill-labs · May 24, 2023 · 42af285 · 42af285
1 parent 1c8c766
commit 42af285
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 39 deletions.
diff --git a/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte b/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
-	import Dropdown from '$lib/components/Dropdown.svelte'
-	import { ChevronDown, RefreshCw } from 'lucide-svelte'
+	import { RefreshCw } from 'lucide-svelte'
 	import { getContext, onMount } from 'svelte'
 	import Button from '../../common/button/Button.svelte'
 	import type { AppViewerContext } from '../types'
 	import { allItems } from '../utils'
+	import ButtonDropdown from '$lib/components/common/button/ButtonDropdown.svelte'
+	import { MenuItem } from '@rgossiaux/svelte-headlessui'
+	import { classNames } from '$lib/utils'
 
 	const { runnableComponents, app, initialized } = getContext<AppViewerContext>('AppViewerContext')
 	let loading: boolean = false
@@ -84,6 +86,17 @@
 			if (timeout) clearInterval(timeout)
 		}
 	})
+
+	let items = [
+		{
+			displayName: 'Once',
+			action: () => setInter(undefined)
+		},
+		...[1, 2, 3, 4, 5, 6].map((i) => ({
+			displayName: `Every ${i * 5} seconds`,
+			action: () => setInter(i * 5000)
+		}))
+	]
 </script>
 
 <div class="flex items-center">
@@ -100,22 +113,39 @@
 	>
 		<RefreshCw class={loading ? 'animate-spin' : ''} size={16} /> &nbsp;({componentNumber})
 	</Button>
-	<Dropdown
-		btnClasses="!rounded-l-none !border-l-0 min-w-[4rem] !px-2"
-		color={timeout ? 'blue' : 'light'}
-		variant="border"
-		dropdownItems={[
-			{
-				displayName: 'Once',
-				action: () => setInter(undefined)
-			},
-			...[1, 2, 3, 4, 5, 6].map((i) => ({
-				displayName: `Every ${i * 5} seconds`,
-				action: () => setInter(i * 5000)
-			}))
-		]}
-	>
-		<span class="grow text center">{interval ? `${interval / 1000}s` : 'once'}</span>
-		<ChevronDown class="ml-0.5" size={14} />
-	</Dropdown>
+
+	<ButtonDropdown hasPadding={true}>
+		<svelte:fragment slot="label">
+			<span
+				class={classNames('text-xs min-w-[2rem]', interval ? 'text-blue-500' : 'text-gray-600')}
+			>
+				{interval ? `${interval / 1000}s` : 'once'}
+			</span>
+		</svelte:fragment>
+		<svelte:fragment slot="items">
+			{#each items ?? [] as { }, index}
+				<MenuItem
+					on:click={() => {
+						if (index === 0) {
+							setInter(undefined)
+						} else {
+							setInter(index * 5000)
+						}
+					}}
+				>
+					<div
+						class={classNames(
+							'!text-gray-600 text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
+						)}
+					>
+						{#if index === 0}
+							Once
+						{:else}
+							{`Every ${index * 5} seconds`}
+						{/if}
+					</div>
+				</MenuItem>
+			{/each}
+		</svelte:fragment>
+	</ButtonDropdown>
 </div>
diff --git a/frontend/src/lib/components/common/button/ButtonDropdown.svelte b/frontend/src/lib/components/common/button/ButtonDropdown.svelte
@@ -2,29 +2,57 @@
 	import { Menu, Transition, MenuButton, MenuItems } from '@rgossiaux/svelte-headlessui'
 	import { ChevronDown } from 'lucide-svelte'
 	import { twMerge } from 'tailwind-merge'
+	import { createPopperActions, type PopperOptions } from 'svelte-popperjs'
+	import Portal from 'svelte-portal'
 
 	export let hasPadding: boolean = true
+
+	const [popperRef, popperContent] = createPopperActions({ placement: 'auto' })
+
+	const popperOptions: PopperOptions<{}> = {
+		placement: 'bottom-end',
+		strategy: 'fixed',
+		modifiers: [
+			{ name: 'offset', options: { offset: [8, 8] } },
+			{
+				name: 'arrow',
+				options: {
+					padding: 10
+				}
+			}
+		]
+	}
 </script>
 
 <Menu let:open as="div" class="relative hover:z-50 flex w-full h-full">
-	<MenuButton class={twMerge('h-full w-full', hasPadding ? 'px-2' : '')}>
-		<ChevronDown class="w-5 h-5" />
-	</MenuButton>
-	<Transition
-		show={open}
-		enter="transition ease-out duration-[25ms]"
-		enterFrom="transform opacity-0 scale-95"
-		enterTo="transform opacity-100 scale-100"
-		leave="transition ease-in duration-[25ms]"
-		leaveFrom="transform opacity-100 scale-100"
-		leaveTo="transform opacity-0 scale-95"
-	>
-		<MenuItems
-			class="absolute border right-0 z-50 mt-2 w-56 origin-top-right top-8 rounded-md bg-white shadow-md focus:outline-none"
+	<span use:popperRef>
+		<MenuButton
+			class={twMerge('h-full w-full flex flex-row gap-2 items-center', hasPadding ? 'px-2' : '')}
 		>
-			<div class="my-1">
-				<slot name="items" />
-			</div>
-		</MenuItems>
-	</Transition>
+			<slot name="label" />
+			<ChevronDown class="w-5 h-5" />
+		</MenuButton>
+	</span>
+
+	<Portal>
+		<div use:popperContent={popperOptions} class="z-[2000]">
+			<Transition
+				show={open}
+				enter="transition ease-out duration-[25ms]"
+				enterFrom="transform opacity-0 scale-95"
+				enterTo="transform opacity-100 scale-100"
+				leave="transition ease-in duration-[25ms]"
+				leaveFrom="transform opacity-100 scale-100"
+				leaveTo="transform opacity-0 scale-95"
+			>
+				<MenuItems
+					class="absolute border right-0 z-50 w-56 origin-top-right top-1 rounded-md bg-white shadow-md focus:outline-none"
+				>
+					<div class="my-1">
+						<slot name="items" />
+					</div>
+				</MenuItems>
+			</Transition>
+		</div>
+	</Portal>
 </Menu>