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

fix(frontend): Fix currency input dark mode (#3085)

Browse Source 
* fix(frontend): Fix curreny input dark mode

* fix(frontend): collapsible alert
This commit is contained in:
Faton Ramadani
2024-01-26 12:18:35 +01:00
committed by GitHub
parent f7f13ef9c8
commit b2228c19b0
5 changed files with 81 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/lib/components/ArgInput.svelte
View File

@@ -326,11 +326,11 @@
{:else if extra?.currency}
<CurrencyInput
inputClasses={{
formatted: twMerge('px-2 w-full py-1.5 text-black'),
formatted: 'px-2 w-full py-1.5 text-black dark:text-white',
wrapper: 'w-full windmillapp',
formattedZero: twMerge('text-black')
formattedZero: 'text-black dark:text-white'
}}
style="color:black;"
noColor
bind:value
currency={extra?.currency}
locale={extra?.currencyLocale ?? 'en-US'}

6
frontend/src/lib/components/LightweightArgInput.svelte
View File

@@ -187,11 +187,11 @@
{:else if extra?.currency}
<CurrencyInput
inputClasses={{
formatted: twMerge('px-2 w-full py-1.5 text-black'),
formatted: 'px-2 w-full py-1.5 text-black dark:text-white',
wrapper: 'w-full windmillapp',
formattedZero: twMerge('text-black')
formattedZero: 'text-black dark:text-white'
}}
style="color:black;"
noColor
bind:value
currency={extra?.currency}
locale={extra?.currencyLocale ?? 'en-US'}

6
frontend/src/lib/components/SchemaModal.svelte
View File

@@ -226,12 +226,12 @@
/>
</div>
{#if isFlowInput}
<Alert type="info" title="Default not used by webhooks">
<Alert type="info" title="Default not used by webhooks" size="xs" collapsible>
If this flow is triggered by a webhook, the default value will not replace a missing
value from the payload. It will only be used as the default value in the autogenerated
UI. We recommend using default values in the signature of the steps where this value is
used (using `x=default`) to have the desired behavior.</Alert
>
used (using `x=default`) to have the desired behavior.
</Alert>
{/if}
</div>
<div>

9
frontend/src/lib/components/apps/components/inputs/currency/CurrencyInput.svelte
View File

@@ -1,4 +1,6 @@
<script lang="ts">
import DarkModeObserver from '$lib/components/DarkModeObserver.svelte'
/* Forked from MIT LICENSE
https://raw.githubusercontent.com/Canutin/svelte-currency-input/main/src/lib/CurrencyInput.svelte
*/
@@ -35,6 +37,7 @@
export let isNegativeAllowed: boolean = true
export let fractionDigits: number = DEFAULT_FRACTION_DIGITS
export let inputClasses: InputClasses | null = null
export let noColor: boolean = false
export let style: string = ''
// Formats value as: e.g. $1,523.00 | -$1,523.00
@@ -161,8 +164,12 @@
$: isZero = value === 0
$: isNegative = value < 0
$: value, setFormattedValue()
let darkMode: boolean = false
</script>
<DarkModeObserver bind:darkMode />
<div class={inputClasses?.wrapper ?? DEFAULT_CLASS_WRAPPER}>
<input
class={inputClasses?.unformatted ?? DEFAULT_CLASS_UNFORMATTED}
@@ -182,7 +189,7 @@
? inputClasses?.formattedNegative ?? DEFAULT_CLASS_FORMATTED_NEGATIVE
: ''}
"
{style}
style={style ? style : noColor ? (darkMode ? 'color: white;' : 'color: black;') : ''}
type="text"
inputmode="numeric"
name={`formatted-${name}`}

86
frontend/src/lib/components/common/alert/Alert.svelte
View File

@@ -2,15 +2,26 @@
import { classNames } from '$lib/utils'
import type { AlertType } from './model'
import Tooltip from '$lib/components/Tooltip.svelte'
import { AlertCircle, AlertTriangle, CheckCircle2, Info } from 'lucide-svelte'
import {
AlertCircle,
AlertTriangle,
CheckCircle2,
Info,
ChevronDown,
ChevronUp
} from 'lucide-svelte'
import { slide } from 'svelte/transition'
import { twMerge } from 'tailwind-merge'
export let type: AlertType = 'info'
export let title: string
export let notRounded = false
export let tooltip: string = ''
export let documentationLink: string | undefined = undefined
export let size: 'xs' | 'sm' = 'sm'
export let collapsible: boolean = false
let isCollapsed = true
const icons: Record<AlertType, any> = {
info: Info,
@@ -45,12 +56,18 @@
descriptionClass: 'text-green-700 dark:text-green-200'
}
}
function toggleCollapse() {
if (collapsible) {
isCollapsed = !isCollapsed
}
}
</script>
<div
class={classNames(
notRounded ? '' : 'rounded-md',
size === 'sm' ? 'p-4' : 'p-2 ',
size === 'sm' ? 'p-4' : 'p-2',
classes[type].bgClass,
$$props.class
)}
@@ -59,28 +76,53 @@
<div class="flex h-8 w-8 items-center justify-center rounded-full">
<svelte:component this={icons[type]} class={classes[type].iconClass} size={16} />
</div>
<div class="ml-2 pt-[0.15rem] w-full">
<span
class={classNames(
size === 'sm' ? 'text-sm' : 'text-xs ',
'font-medium',
classes[type].titleClass
)}
>
{title}&nbsp;{#if tooltip != '' || documentationLink}
<Tooltip {documentationLink} scale={0.9}>{tooltip}</Tooltip>
{/if}
</span>
{#if $$slots.default}
<div
<div class={twMerge('ml-2 w-full')}>
<div class={twMerge('w-full flex flex-row items-center justify-between h-8')}>
<span
class={classNames(
size === 'sm' ? 'text-sm' : 'text-xs ',
'mt-2',
classes[type].descriptionClass
size === 'sm' ? 'text-sm' : 'text-xs',
'font-medium',
classes[type].titleClass
)}
>
<slot />
{title}
{#if tooltip != '' || documentationLink}
<Tooltip {documentationLink} scale={0.9}>{tooltip}</Tooltip>
{/if}
</span>
{#if collapsible}
<button class="cursor-pointer" on:click={toggleCollapse}>
{#if isCollapsed}
<ChevronDown size={16} />
{:else}
<ChevronUp size={16} />
{/if}
</button>
{/if}
</div>
{#if $$slots.default && !isCollapsed}
<div transition:slide|local={{ duration: 200 }} class="mt-2">
<div
class={classNames(
size === 'sm' ? 'text-sm' : 'text-xs',
classes[type].descriptionClass
)}
>
<slot />
</div>
</div>
{/if}
{#if $$slots.default && !collapsible}
<div class="mt-2">
<div
class={classNames(
size === 'sm' ? 'text-sm' : 'text-xs',
classes[type].descriptionClass
)}
>
<slot />
</div>
</div>
{/if}
</div>