starred/windmill
1
0
Fork 0
mirror of https://github.com/windmill-labs/windmill.git synced 2026-08-20 00:02:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve app icon renderer and app html renderer

Browse Source
This commit is contained in:
Ruben Fiszel
2024-04-12 09:51:54 +02:00
parent fdfacba0f1
commit 800813759d
7 changed files with 116 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/apps/components/buttons/AppButton.svelte
+8 -4
View File
@@ -67,14 +67,14 @@
let runnableComponent: RunnableComponent
let confirmedCallback: (() => void) | undefined = undefined
let beforeIconComponent: any
let afterIconComponent: any
$: resolvedConfig.beforeIcon && beforeIconComponent && handleBeforeIcon()
$: resolvedConfig.afterIcon && afterIconComponent && handleAfterIcon()
let confirmedCallback: (() => void) | undefined = undefined
async function handleBeforeIcon() {
if (resolvedConfig.beforeIcon) {
beforeIconComponent = await loadIcon(
@@ -225,13 +225,17 @@
{loading}
>
{#if resolvedConfig.beforeIcon}
<div class="min-w-4" bind:this={beforeIconComponent} />
{#key resolvedConfig.beforeIcon}
<div class="min-w-4" bind:this={beforeIconComponent} />
{/key}
{/if}
{#if resolvedConfig.label?.toString() && resolvedConfig.label?.toString()?.length > 0}
<div>{resolvedConfig.label.toString()}</div>
{/if}
{#if resolvedConfig.afterIcon}
<div class="min-w-4" bind:this={afterIconComponent} />
{#key resolvedConfig.afterIcon}
<div class="min-w-4" bind:this={afterIconComponent} />
{/key}
{/if}
</Button>
{/key}
frontend/src/lib/components/apps/components/display/AppDownload.svelte
+24 -8
View File
@@ -34,18 +34,30 @@
let beforeIconComponent: any
let afterIconComponent: any
$: resolvedConfig.beforeIcon && handleBeforeIcon()
$: resolvedConfig.afterIcon && handleAfterIcon()
$: resolvedConfig.beforeIcon && beforeIconComponent && handleBeforeIcon()
$: resolvedConfig.afterIcon && afterIconComponent && handleAfterIcon()
async function handleBeforeIcon() {
if (resolvedConfig.beforeIcon) {
beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon)
beforeIconComponent = await loadIcon(
resolvedConfig.beforeIcon,
beforeIconComponent,
14,
undefined,
undefined
)
}
}
async function handleAfterIcon() {
if (resolvedConfig.afterIcon) {
afterIconComponent = await loadIcon(resolvedConfig.afterIcon)
afterIconComponent = await loadIcon(
resolvedConfig.afterIcon,
afterIconComponent,
14,
undefined,
undefined
)
}
}
@@ -101,14 +113,18 @@
nonCaptureEvent
>
<span class="truncate inline-flex gap-2 items-center">
{#if resolvedConfig.beforeIcon && beforeIconComponent}
<svelte:component this={beforeIconComponent} size={14} />
{#if resolvedConfig.beforeIcon}
{#key resolvedConfig.beforeIcon}
<div class="min-w-4" bind:this={beforeIconComponent} />
{/key}
{/if}
{#if resolvedConfig.label && resolvedConfig.label?.length > 0}
<div>{resolvedConfig.label}</div>
{/if}
{#if resolvedConfig.afterIcon && afterIconComponent}
<svelte:component this={afterIconComponent} size={14} />
{#if resolvedConfig.afterIcon}
{#key resolvedConfig.afterIcon}
<div class="min-w-4" bind:this={afterIconComponent} />
{/key}
{/if}
</span>
</Button>
frontend/src/lib/components/apps/components/display/AppHtml.svelte
+6 -23
View File
@@ -5,7 +5,6 @@
import type { AppViewerContext, ComponentCustomCSS } from '../../types'
import { initCss } from '../../utils'
import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
import { twMerge } from 'tailwind-merge'
import ResolveStyle from '../helpers/ResolveStyle.svelte'
export let id: string
@@ -14,7 +13,7 @@
export let customCss: ComponentCustomCSS<'htmlcomponent'> | undefined = undefined
export let render: boolean
const { app, worldStore, mode } = getContext<AppViewerContext>('AppViewerContext')
const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
const outputs = initOutput($worldStore, id, {
result: undefined,
@@ -22,8 +21,6 @@
})
let result: string | undefined = undefined
let h: number | undefined = undefined
let w: number | undefined = undefined
let css = initCss($app.css?.htmlcomponent, customCss)
</script>
@@ -43,8 +40,6 @@
e?.preventDefault()
}}
class="h-full w-full"
bind:clientHeight={h}
bind:clientWidth={w}
>
<RunnableWrapper
{outputs}
@@ -55,22 +50,10 @@
bind:initializing
bind:result
>
{#key result}
<iframe
frameborder="0"
style="height: {h}px; width: {w}px; {css?.container?.style ?? ''}"
class={twMerge('p-0', css?.container?.class, 'wm-html')}
title="sandbox"
srcdoc={result
? '<base target="_parent" /><scr' +
`ipt type="application/javascript" src="/tailwind.js"></script>` +
result
: ''}
/>
{/key}
<!-- svelte-ignore a11y-click-events-have-key-events -->
{#if $mode == 'dnd'}
<div on:click|stopPropagation class="absolute top-0 h-full w-full" />
{/if}
<div class="w-full h-full overflow-auto">
{#key result}
{@html result}
{/key}
</div>
</RunnableWrapper>
</div>
frontend/src/lib/components/apps/components/display/AppMenu.svelte
+27 -10
View File
@@ -40,22 +40,35 @@
configuration
)
let beforeIconComponent: any
let afterIconComponent: any
let css = initCss($app.css?.menucomponent, customCss)
$: resolvedConfig.beforeIcon && handleBeforeIcon()
$: resolvedConfig.afterIcon && handleAfterIcon()
let beforeIconComponent: any
let afterIconComponent: any
$: resolvedConfig.beforeIcon && beforeIconComponent && handleBeforeIcon()
$: resolvedConfig.afterIcon && afterIconComponent && handleAfterIcon()
async function handleBeforeIcon() {
if (resolvedConfig.beforeIcon) {
beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon)
beforeIconComponent = await loadIcon(
resolvedConfig.beforeIcon,
beforeIconComponent,
14,
undefined,
undefined
)
}
}
async function handleAfterIcon() {
if (resolvedConfig.afterIcon) {
afterIconComponent = await loadIcon(resolvedConfig.afterIcon)
afterIconComponent = await loadIcon(
resolvedConfig.afterIcon,
afterIconComponent,
14,
undefined,
undefined
)
}
}
</script>
@@ -104,14 +117,18 @@
nonCaptureEvent
>
<span class="truncate inline-flex gap-2 items-center">
{#if resolvedConfig.beforeIcon && beforeIconComponent}
<svelte:component this={beforeIconComponent} size={14} />
{#if resolvedConfig.beforeIcon}
{#key resolvedConfig.beforeIcon}
<div class="min-w-4" bind:this={beforeIconComponent} />
{/key}
{/if}
{#if resolvedConfig.label && resolvedConfig.label?.length > 0}
<div>{resolvedConfig.label}</div>
{/if}
{#if resolvedConfig.afterIcon && afterIconComponent}
<svelte:component this={afterIconComponent} size={14} />
{#if resolvedConfig.afterIcon}
{#key resolvedConfig.afterIcon}
<div class="min-w-4" bind:this={afterIconComponent} />
{/key}
{/if}
</span>
</Button>
frontend/src/lib/components/apps/components/display/AppStatCard.svelte
+12 -4
View File
@@ -30,11 +30,17 @@
let iconComponent: any
$: isIcon && resolvedConfig?.media?.configuration?.icon?.icon && handleIcon()
$: isIcon && resolvedConfig?.media?.configuration?.icon?.icon && iconComponent && handleIcon()
async function handleIcon() {
if (resolvedConfig?.media?.configuration?.icon?.icon) {
iconComponent = await loadIcon(resolvedConfig.media.configuration.icon.icon)
iconComponent = await loadIcon(
resolvedConfig?.media?.configuration?.icon?.icon,
iconComponent,
34,
undefined,
undefined
)
}
}
@@ -80,8 +86,10 @@
style={css?.media?.style}
>
{#if isIcon}
{#if resolvedConfig?.media && iconComponent}
<svelte:component this={iconComponent} size={24} />
{#if resolvedConfig?.media}
{#key resolvedConfig.media}
<div class="min-w-4 text-primary" bind:this={iconComponent} />
{/key}
{/if}
{:else}
<Loader loading={resolvedConfig?.media?.configuration?.image?.source == undefined}>
frontend/src/lib/components/apps/components/icon.ts
-1
View File
@@ -31,7 +31,6 @@ export async function loadIcon(
elem.setAttribute('stroke', color)
}
}
} else {
}
} catch (error) {
console.error(error)
frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte
+39 -11
View File
@@ -82,18 +82,30 @@
let beforeIconComponent: any
let afterIconComponent: any
$: resolvedConfig.beforeIcon && handleBeforeIcon()
$: resolvedConfig.afterIcon && handleAfterIcon()
$: resolvedConfig.beforeIcon && beforeIconComponent && handleBeforeIcon()
$: resolvedConfig.afterIcon && afterIconComponent && handleAfterIcon()
async function handleBeforeIcon() {
if (resolvedConfig.beforeIcon) {
beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon)
beforeIconComponent = await loadIcon(
resolvedConfig.beforeIcon,
beforeIconComponent,
14,
undefined,
undefined
)
}
}
async function handleAfterIcon() {
if (resolvedConfig.afterIcon) {
afterIconComponent = await loadIcon(resolvedConfig.afterIcon)
afterIconComponent = await loadIcon(
resolvedConfig.afterIcon,
afterIconComponent,
14,
undefined,
undefined
)
}
}
</script>
@@ -141,14 +153,20 @@
<AlignWrapper {render} {verticalAlignment}>
<div class="relative w-full">
<div class="absolute top-1/2 -translate-y-1/2 left-2">
{#if resolvedConfig.beforeIcon && beforeIconComponent}
<svelte:component this={beforeIconComponent} size={14} />
{#if resolvedConfig.beforeIcon}
{#key resolvedConfig.beforeIcon}
<div class="min-w-4" bind:this={beforeIconComponent} />
{/key}
{/if}
</div>
{#if inputType === 'password'}
<input
class={twMerge(classInput, beforeIconComponent && 'pl-8', afterIconComponent && 'pr-8')}
class={twMerge(
classInput,
resolvedConfig.beforeIcon ? '!pl-8' : '',
resolvedConfig.afterIcon ? '!pr-8' : ''
)}
style={css?.input?.style ?? ''}
on:pointerdown|stopPropagation={(e) =>
!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
@@ -160,7 +178,11 @@
/>
{:else if inputType === 'text'}
<input
class={twMerge(classInput, beforeIconComponent && 'pl-8', afterIconComponent && 'pr-8')}
class={twMerge(
classInput,
resolvedConfig.beforeIcon ? '!pl-8' : '',
resolvedConfig.afterIcon ? '!pr-8' : ''
)}
style={css?.input?.style ?? ''}
on:pointerdown|stopPropagation={(e) =>
!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
@@ -172,7 +194,11 @@
/>
{:else if inputType === 'email'}
<input
class={twMerge(classInput, beforeIconComponent && 'pl-8', afterIconComponent && 'pr-8')}
class={twMerge(
classInput,
resolvedConfig.beforeIcon != undefined ? '!pl-8' : '',
resolvedConfig.afterIcon ? '!pr-8' : ''
)}
style={css?.input?.style ?? ''}
on:pointerdown|stopPropagation={(e) =>
!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
@@ -185,8 +211,10 @@
{/if}
<div class="absolute top-1/2 -translate-y-1/2 right-2">
{#if resolvedConfig.afterIcon && afterIconComponent}
<svelte:component this={afterIconComponent} size={14} />
{#if resolvedConfig.afterIcon}
{#key resolvedConfig.afterIcon}
<div class="min-w-4" bind:this={afterIconComponent} />
{/key}
{/if}
</div>
</div>