kalugin66/windmill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(frontend): Fix dropdown buttons (#1970)

Browse Source
This commit is contained in:
Faton Ramadani
2023-07-31 13:16:19 +02:00
committed by GitHub
parent b57668610c
commit eea36b5bfc
3 changed files with 73 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/lib/components/common/button/Button.svelte
View File

@@ -123,7 +123,9 @@
</script>
<div
class="{dropdownItems ? colorVariants[color].divider : ''} {wrapperClasses} flex flex-row"
class="{dropdownItems && variant === 'contained'
? colorVariants[color].divider
: ''} {wrapperClasses} flex flex-row"
style={wrapperStyle}
>
{#if href}
@@ -197,7 +199,9 @@
{/if}
{#if dropdownItems}
<div class={twMerge(buttonClass, 'rounded-r-md rounded-l-none m-0 p-0 h-auto')}>
<div
class={twMerge(buttonClass, 'rounded-r-md rounded-l-none m-0 p-0 h-auto !w-10 border-l-0')}
>
<ButtonDropdown>
<svelte:fragment slot="items">
{#each computeDropdowns() ?? [] as item}

2
frontend/src/lib/components/common/button/ButtonDropdown.svelte
View File

@@ -24,7 +24,7 @@
}
</script>
<Menu let:open as="div" class="relative hover:z-50 flex w-full h-full ">
<Menu let:open as="div" class="relative hover:z-50 flex w-full h-full">
<span use:popperRef>
<MenuButton
class={twMerge('h-full w-full flex flex-row gap-2 items-center', hasPadding ? 'px-2' : '')}

66
frontend/src/routes/kitchen_sink/+page.svelte Normal file
View File

@@ -0,0 +1,66 @@
<script lang="ts">
import Button from '$lib/components/common/button/Button.svelte'
import Tab from '$lib/components/common/tabs/Tab.svelte'
import TabContent from '$lib/components/common/tabs/TabContent.svelte'
import Tabs from '$lib/components/common/tabs/Tabs.svelte'
import DarkModeToggle from '$lib/components/sidebar/DarkModeToggle.svelte'
let tab = 'button'
let dropdownItems = [
{
label: 'Lorem ipsum',
onClick: () => {}
}
]
</script>
<DarkModeToggle forcedDarkMode={false} />
<Tabs bind:selected={tab}>
<Tab value="button">Buttons</Tab>
<svelte:fragment slot="content">
<TabContent value="button" class="p-4 flex gap-4 flex-col ">
<div class="font-bold text-md">Contained buttons</div>
<div class="grid grid-cols-2 gap-2 md:grid-cols-4 lg:grid-cols-6">
<Button>Lorem</Button>
<Button color="dark">Lorem</Button>
<Button color="gray">Lorem</Button>
<Button color="green">Lorem</Button>
<Button color="light">Lorem</Button>
<Button color="none">Lorem</Button>
<Button color="red">Lorem</Button>
</div>
<div class="font-bold text-md">Border buttons</div>
<div class="grid grid-cols-2 gap-2 md:grid-cols-4 lg:grid-cols-6">
<Button variant="border">Lorem</Button>
<Button variant="border" color="dark">Lorem</Button>
<Button variant="border" color="gray">Lorem</Button>
<Button variant="border" color="green">Lorem</Button>
<Button variant="border" color="light">Lorem</Button>
<Button variant="border" color="none">Lorem</Button>
<Button variant="border" color="red">Lorem</Button>
</div>
<div class="font-bold text-md">Dropdown buttons</div>
<div class="grid grid-cols-2 gap-2 md:grid-cols-4 lg:grid-cols-6">
<Button {dropdownItems}>Lorem</Button>
<Button {dropdownItems} color="dark">Lorem</Button>
<Button {dropdownItems} color="gray">Lorem</Button>
<Button {dropdownItems} color="green">Lorem</Button>
<Button {dropdownItems} color="light">Lorem</Button>
<Button {dropdownItems} color="none">Lorem</Button>
<Button {dropdownItems} color="red">Lorem</Button>
</div>
<div class="font-bold text-md">Dropdown buttons</div>
<div class="grid grid-cols-2 gap-2 md:grid-cols-4 lg:grid-cols-6">
<Button variant="border" {dropdownItems}>Lorem</Button>
<Button variant="border" {dropdownItems} color="dark">Lorem</Button>
<Button variant="border" {dropdownItems} color="gray">Lorem</Button>
<Button variant="border" {dropdownItems} color="green">Lorem</Button>
<Button variant="border" {dropdownItems} color="light">Lorem</Button>
<Button variant="border" {dropdownItems} color="none">Lorem</Button>
<Button variant="border" {dropdownItems} color="red">Lorem</Button>
</div>
</TabContent>
</svelte:fragment>
</Tabs>