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

feat(frontend): App components dark mode (#1937)

Browse Source 
* feat(frontend): migrate app components

* feat(frontend): Fix unreadable texts

* feat(frontend): migrate app components

* feat(frontend): Fix quill editor
This commit is contained in:
Faton Ramadani
2023-07-26 12:28:45 +02:00
committed by GitHub
parent 1c9beb09e9
commit 06303da2e5
57 changed files with 246 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/assets/app.css
+1
View File
@@ -77,3 +77,4 @@
display: flex !important;
}
}
frontend/src/lib/components/AppConnect.svelte
+1 -1
View File
@@ -373,7 +373,7 @@
>
Add item
</Button>
<span class="ml-2 text-sm text-gray-500">
<span class="ml-2 text-sm text-tertiary">
({(scopes ?? []).length} item{(scopes ?? []).length > 1 ? 's' : ''})
</span>
</div>
frontend/src/lib/components/EditorTheme.svelte
+63
View File
@@ -4,6 +4,8 @@
import DarkModeObserver from './DarkModeObserver.svelte'
import github from 'svelte-highlight/styles/github'
import nord from 'svelte-highlight/styles/nord'
import { each } from 'chart.js/helpers'
import { Chart } from 'chart.js'
meditor.defineTheme('nord', {
base: 'vs-dark',
@@ -115,9 +117,70 @@
if (document.documentElement.classList.contains('dark')) {
meditor.setTheme('nord')
darkMode = true
each(Chart.instances, (instance) => {
instance.options = {
scales: {
y: {
ticks: {
color: '#e0e7ed'
},
grid: {
color: '#4a5568'
}
},
x: {
ticks: {
color: '#e0e7ed'
},
grid: {
color: '#4a5568'
}
}
},
plugins: {
legend: {
labels: {
color: '#e0e7ed'
}
}
}
}
instance.update()
})
} else {
meditor.setTheme('myTheme')
darkMode = false
each(Chart.instances, (instance) => {
instance.options = {
scales: {
y: {
ticks: {
color: '#4a5568'
},
grid: {
color: '#e0e7ed'
}
},
x: {
ticks: {
color: '#4a5568'
},
grid: {
color: '#e0e7ed'
}
}
},
plugins: {
legend: {
labels: {
color: '#4a5568'
}
}
}
}
instance.update()
})
}
}
frontend/src/lib/components/ScriptBuilder.svelte
+2 -2
View File
@@ -449,7 +449,7 @@
</select>
</div>
{:else}
<div class="text-sm text-gray-600 italic mb-2">
<div class="text-sm text-secondary italic mb-2">
No custom worker group defined on this instance. See <a
href="https://www.windmill.dev/docs/core_concepts/worker_groups"
target="_blank">documentation</a
@@ -476,7 +476,7 @@
<input type="text" bind:value={v} placeholder="<KEY>=<VALUE>" />
<button
transition:fade|local={{ duration: 50 }}
class="rounded-full p-1 bg-white/60 duration-200 hover:bg-gray-200"
class="rounded-full p-1 bg-surface/60 duration-200 hover:bg-gray-200"
aria-label="Clear"
on:click={() => {
script.envs && script.envs.splice(i, 1)
frontend/src/lib/components/Toggle.svelte
+1 -1
View File
@@ -57,7 +57,7 @@
/>
<div
class={classNames(
"transition-all bg-surface-selected rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-white after:border after:rounded-full after:transition-all ",
"transition-all bg-surface-selected rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-surface after:border-white after:border after:rounded-full after:transition-all ",
color == 'red' ? 'peer-checked:bg-red-600' : 'peer-checked:bg-blue-600',
size === 'sm'
? 'w-11 h-6 after:top-0.5 after:left-[2px] after:h-5 after:w-5'
frontend/src/lib/components/apps/components/buttons/AppForm.svelte
+2 -2
View File
@@ -82,13 +82,13 @@
>
<div>
{#if noInputs}
<div class="text-gray-600 italic text-sm my-4">
<div class="text-secondary italic text-sm my-4">
Run forms are associated with a runnable that has user inputs.
<br />
Once a script or flow is chosen, set some <strong>Runnable Inputs</strong> to
<strong>
User Input
<Icon data={faUser} scale={1.3} class="rounded-sm bg-gray-200 p-1 ml-0.5" />
<Icon data={faUser} scale={1.3} class="rounded-sm bg-surface-secondary p-1 ml-0.5" />
</strong>
</div>
{/if}
frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte
+1 -1
View File
@@ -91,7 +91,7 @@
{errorHandledByComponent}
>
{#if noInputs}
<div class="text-gray-600 italic text-sm my-4">
<div class="text-secondary italic text-sm my-4">
Run forms are associated with a runnable that has user inputs.
<br />
Once a script or flow is chosen, set some <strong>Runnable Inputs</strong> to
frontend/src/lib/components/apps/components/display/AppBarChart.svelte
+14 -2
View File
@@ -19,7 +19,6 @@
import { concatCustomCss } from '../../utils'
import InputValue from '../helpers/InputValue.svelte'
import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
export let id: string
export let componentInput: AppInput | undefined
export let configuration: RichConfigurations
@@ -81,12 +80,25 @@
$: data = {
labels: result?.labels ?? [],
datasets: [
{
data: result?.data ?? [],
backgroundColor
}
]
],
options: {
scales: {
y: {
ticks: {
// Include a dollar sign in the ticks
callback: function (value, index, ticks) {
return '$' + value
}
}
}
}
}
}
$: css = concatCustomCss($app.css?.barchartcomponent, customCss)
frontend/src/lib/components/apps/components/display/AppFlowStatusComponent.svelte
+1 -1
View File
@@ -61,7 +61,7 @@
{#if jobId}
<FlowStatusViewer workspaceId={workspace} {jobId} />
{:else}
<span class="text-gray-600 text-xs">No flow</span>
<span class="text-secondary text-xs">No flow</span>
{/if}
</div>
</div>
frontend/src/lib/components/apps/components/display/AppMap.svelte
+2 -3
View File
@@ -228,8 +228,7 @@
@apply flex flex-col justify-start items-end;
}
.ol-control button {
@apply w-7 h-7 center-center bg-white border border-gray-300 text-gray-700
rounded mt-1 mr-1 shadow duration-200 hover:bg-gray-100 focus:bg-gray-100
hover:border-gray-500 focus:border-gray-500;
@apply w-7 h-7 center-center bg-surface border text-secondary
rounded mt-1 mr-1 shadow duration-200 hover:bg-surface-hover focus:bg-surface-hover;
}
</style>
frontend/src/lib/components/apps/components/display/AppPdf.svelte
+6 -6
View File
@@ -206,9 +206,9 @@
? 'w-[calc(100%-2px)] top-[1px]'
: 'w-full top-0'} {wideView
? 'justify-center gap-14'
: '!justify-between'} overflow-x-auto bg-white border mx-auto py-1"
: '!justify-between'} overflow-x-auto bg-surface border mx-auto py-1"
>
<div class="flex justify-start items-center px-2 text-gray-600 text-sm">
<div class="flex justify-start items-center px-2 text-secondary text-sm">
<Button
on:click={() => zoom && (zoom -= 10)}
disabled={!doc}
@@ -260,7 +260,7 @@
<ZoomIn size={16} />
</Button>
</div>
<div class="center-center px-2 text-gray-600 text-sm">
<div class="center-center px-2 text-secondary text-sm">
<input
on:input={({ currentTarget }) => {
scrollToPage(currentTarget.valueAsNumber)
@@ -276,7 +276,7 @@
/ {pages.length}
</span>
</div>
<div class="flex justify-end items-center px-2 text-gray-600 text-sm">
<div class="flex justify-end items-center px-2 text-secondary text-sm">
<Button
on:click={downloadPdf}
disabled={!doc}
@@ -297,7 +297,7 @@
{:else}
<div
out:fade={{ duration: 200 }}
class="absolute inset-0 center-center flex-col text-center text-sm bg-white text-gray-600"
class="absolute inset-0 center-center flex-col text-center text-sm bg-surface text-secondary"
>
<Loader2 class="animate-spin mb-2" />
Loading PDF
@@ -322,7 +322,7 @@
{#if error}
<div
class="absolute inset-0 z-20 center-center
bg-gray-100 text-center text-gray-600 text-sm"
bg-gray-100 text-center text-secondary text-sm"
>
{error}
</div>
frontend/src/lib/components/apps/components/display/AppText.svelte
+1 -1
View File
@@ -71,7 +71,7 @@
function getClasses() {
switch (resolvedConfig.style) {
case 'Caption':
return 'text-sm italic text-gray-500'
return 'text-sm italic text-tertiary'
case 'Label':
return 'font-semibold text-sm'
default:
frontend/src/lib/components/apps/components/display/PlotlyHtml.svelte
+20 -4
View File
@@ -15,7 +15,7 @@
export let initializing: boolean | undefined = undefined
export let render: boolean
const { worldStore } = getContext<AppViewerContext>('AppViewerContext')
const { worldStore, darkMode } = getContext<AppViewerContext>('AppViewerContext')
let resolvedConfig = initConfig(
components['plotlycomponent'].initialData.configuration,
@@ -41,7 +41,13 @@
let h: number | undefined = undefined
let w: number | undefined = undefined
$: Plotly && render && result && divEl && h && w && plot()
let shouldeUpdate = 1
darkMode.subscribe(() => {
shouldeUpdate++
})
$: Plotly && render && result && divEl && h && w && shouldeUpdate && plot()
let error = ''
function plot() {
@@ -53,7 +59,17 @@
width: w,
height: h,
margin: { l: 50, r: 40, b: 40, t: 40, pad: 4 },
...resolvedConfig.layout
...resolvedConfig.layout,
paper_bgcolor: $darkMode ? '#2e3440' : '#fff',
plot_bgcolor: $darkMode ? '#2e3440' : '#fff',
xaxis: {
color: $darkMode ? '#f3f6f8' : '#000'
},
yaxis: {
color: $darkMode ? '#f3f6f8' : '#000'
}
},
{ responsive: true, displayModeBar: false }
)
@@ -79,7 +95,7 @@
{#if error != ''}
<div class="flex flex-col h-full w-full overflow-auto">
<Alert title="Plotly error" type="error" size="xs" class="h-full w-full ">
<pre class="w-full bg-white p-2 rounded-md whitespace-pre-wrap">{error}</pre>
<pre class="w-full bg-surface p-2 rounded-md whitespace-pre-wrap">{error}</pre>
</Alert>
</div>
{/if}
frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
+5 -2
View File
@@ -1,6 +1,8 @@
<script lang="ts">
import 'ag-grid-community/styles/ag-grid.css'
import 'ag-grid-community/styles/ag-theme-alpine.css'
import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css'
import AgGridSvelte from 'ag-grid-svelte'
import { isObject } from '$lib/utils'
import { getContext } from 'svelte'
@@ -34,7 +36,7 @@
: [{ error: 'input was not an array' }]
}
const { worldStore, selectedComponent, componentControl } =
const { worldStore, selectedComponent, componentControl, darkMode } =
getContext<AppViewerContext>('AppViewerContext')
let resolvedConfig = initConfig(
@@ -121,7 +123,7 @@
{#if Array.isArray(value) && value.every(isObject)}
{#if Array.isArray(resolvedConfig.columnDefs) && resolvedConfig.columnDefs.every(isObject)}
<div
class="border border-gray-300 shadow-sm divide-y divide-gray-300 flex flex-col h-full"
class="border shadow-sm divide-y flex flex-col h-full"
bind:clientHeight
bind:clientWidth
>
@@ -132,6 +134,7 @@
style:height="{clientHeight}px"
style:width="{clientWidth}px"
class="ag-theme-alpine"
class:ag-theme-alpine-dark={$darkMode}
>
{#key extraConfig}
{#key resolvedConfig?.pagination}
frontend/src/lib/components/apps/components/display/table/AppTable.svelte
+10 -10
View File
@@ -255,7 +255,7 @@
{#if Array.isArray(result) && result.every(isObject)}
<div
class={twMerge(
'border border-gray-300 shadow-sm divide-y divide-gray-300 h-full',
'border shadow-sm divide-y h-full',
css?.container?.class ?? '',
'flex flex-col'
)}
@@ -272,10 +272,10 @@
{/if}
<div class="overflow-x-auto flex-1 w-full">
<table class="relative w-full border-b border-b-gray-200">
<table class="relative w-full border-b">
<thead
class={twMerge(
'bg-gray-50 text-left',
'bg-surface-secondary text-left',
css?.tableHeader?.class ?? '',
'sticky top-0 z-40'
)}
@@ -307,7 +307,7 @@
{/each}
</thead>
<tbody
class={twMerge('divide-y divide-gray-200 bg-white', css?.tableBody?.class ?? '')}
class={twMerge('divide-y bg-surface', css?.tableBody?.class ?? '')}
style={css?.tableBody?.style ?? ''}
>
{#each $table.getRowModel().rows as row, rowIndex (row.id)}
@@ -315,12 +315,12 @@
class={classNames(
'last-of-type:!border-b-0',
selectedRowIndex === rowIndex
? 'bg-blue-100 hover:bg-blue-200'
: 'hover:bg-blue-50',
? 'bg-blue-100 hover:bg-blue-200 dark:bg-surface-selected dark:hover:bg-surface-hover'
: 'hover:bg-blue-50 dark:hover:bg-surface-hover',
'divide-x w-full',
selectedRowIndex === rowIndex
? 'divide-blue-200 hover:divide-blue-300'
: 'divide-gray-200'
? 'divide-blue-200 hover:divide-blue-300 dark:divide-gray-600 dark:hover:divide-gray-700'
: ''
)}
>
{#each safeVisibleCell(row) as cell, index (index)}
@@ -331,7 +331,7 @@
<td
on:keydown={() => toggleRow(row, rowIndex)}
on:click={() => toggleRow(row, rowIndex)}
class="p-4 whitespace-pre-wrap truncate text-xs text-gray-900"
class="p-4 whitespace-pre-wrap truncate text-xs text-primary"
>
{#if typeof cell.column.columnDef.cell != 'string' && cellIsObject(cell.column.columnDef.cell, context)}
{JSON.stringify(cell.column.columnDef.cell(context), null, 4)}
@@ -534,7 +534,7 @@
<div class="flex flex-col h-full w-full overflow-auto">
<Alert title="Parsing issues" type="error" size="xs" class="h-full w-full ">
The result should be an array of objects. Received:
<pre class="w-full bg-white p-2 rounded-md whitespace-pre-wrap"
<pre class="w-full bg-surface p-2 rounded-md whitespace-pre-wrap"
>{JSON.stringify(result, null, 4)}</pre
>
</Alert>
frontend/src/lib/components/apps/components/helpers/ComponentErrorHandler.svelte
+2 -2
View File
@@ -9,10 +9,10 @@
{#if hasError}
<div class={classNames('bg-red-100 w-full h-full flex items-center justify-center text-red-500')}>
<Popover notClickable placement="bottom" popupClass="!bg-white border w-96">
<Popover notClickable placement="bottom" popupClass="!bg-surface border w-96">
<Bug size={14} />
<span slot="text">
<div class="bg-white">
<div class="bg-surface">
<Alert type="error" title="Error during execution">
<div class="flex flex-col gap-2">
One of the configuration of the component is invalid. Please check the configuration
frontend/src/lib/components/apps/components/helpers/Loader.svelte
+1 -1
View File
@@ -11,7 +11,7 @@
<div class="w-full h-full">
<div
out:fade|local={{ duration: 50 }}
class="absolute inset-0 center-center flex-col bg-white text-tertiary border"
class="absolute inset-0 center-center flex-col bg-surface text-tertiary border"
>
<Loader2 class="animate-spin" size={16} />
<span class="text-xs mt-1">Loading</span>
frontend/src/lib/components/apps/components/helpers/RefreshButton.svelte
+1 -1
View File
@@ -15,7 +15,7 @@
<button
on:pointerdown|preventDefault|stopPropagation
on:click|preventDefault|stopPropagation={refresh}
class="center-center p-1 rounded border bg-white/60 hover:bg-gray-200 z-10"
class="center-center p-1 rounded border bg-surface/60 hover:bg-gray-200 z-10"
>
<RefreshCw class={loading ? 'animate-spin' : ''} size={16} />
</button>
frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
+2 -2
View File
@@ -498,10 +498,10 @@
'bg-red-100/80'
)}
>
<Popover notClickable placement="bottom" popupClass="!bg-white border w-96">
<Popover notClickable placement="bottom" popupClass="!bg-surface border w-96">
<Bug size={14} />
<span slot="text">
<div class="bg-white">
<div class="bg-surface">
<Alert type="error" title="Error during execution">
<div class="flex flex-col gap-2">
An error occured, please contact the app author.
frontend/src/lib/components/apps/components/inputs/AppQuillEditor.svelte
+20
View File
@@ -99,3 +99,23 @@
<div bind:this={editor} />
</div>
{/if}
<style>
:global(.ql-toolbar .ql-stroke) {
fill: none;
@apply stroke-primary;
}
:global(.ql-toolbar .ql-fill) {
@apply fill-primary;
stroke: none;
}
:global(.ql-toolbar .ql-picker) {
@apply text-primary;
}
:global(.ql-container) {
@apply text-primary;
}
</style>
frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
+5 -4
View File
@@ -34,7 +34,8 @@
connectingInput,
selectedComponent,
runnableComponents,
componentControl
componentControl,
darkMode
} = getContext<AppViewerContext>('AppViewerContext')
const iterContext = getContext<ListContext>('ListWrapperContext')
@@ -190,9 +191,9 @@
items={listItems}
listAutoWidth={resolvedConfig.fullWidth}
inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
containerStyles={'border-color: #999;' +
SELECT_INPUT_DEFAULT_STYLE.containerStyles +
css?.input?.style}
containerStyles={'border-color: #999;' + $darkMode
? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
: SELECT_INPUT_DEFAULT_STYLE.containerStyles + css?.input?.style}
{value}
placeholder={resolvedConfig.placeholder}
on:focus={() => {
frontend/src/lib/components/apps/components/layout/AppList.svelte
+1 -1
View File
@@ -111,7 +111,7 @@
<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
</ListWrapper>
{#if !Array.isArray(result)}
<div class="text-center text-gray-500">Input data is not an array</div>
<div class="text-center text-tertiary">Input data is not an array</div>
{/if}
{/if}
{/if}
frontend/src/lib/components/apps/components/layout/AppModal.svelte
+3 -3
View File
@@ -121,7 +121,7 @@
<div
style={css?.popup?.style}
class={twMerge(
'm-24 max-h-[80%] bg-white overflow-y-auto rounded-lg relative',
'm-24 max-h-[80%] bg-surface overflow-y-auto rounded-lg relative',
css?.popup?.class
)}
use:clickOutside={false}
@@ -139,9 +139,9 @@
open = false
}}
style={css?.button?.style}
class="hover:bg-gray-200 bg-gray-100 rounded-full w-8 h-8 flex items-center justify-center transition-all"
class="hover:bg-surface-hover bg-surface-secondary rounded-full w-8 h-8 flex items-center justify-center transition-all"
>
<X class="text-gray-500" />
<X class="text-tertiary" />
</button>
</div>
</div>
frontend/src/lib/components/apps/components/layout/AppStepper.svelte
+1 -1
View File
@@ -168,7 +168,7 @@
<div bind:clientHeight={footerHeight}>
<div class="flex justify-between h-10 p-2">
<div class="flex items-center gap-2">
<span class="text-sm font-medium text-gray-500">
<span class="text-sm font-medium text-tertiary">
Step {selectedIndex + 1} of {tabs.length}
</span>
</div>
frontend/src/lib/components/apps/components/layout/AppTabs.svelte
+2 -2
View File
@@ -114,13 +114,13 @@
</div>
{:else if resolvedConfig.tabsKind == 'sidebar'}
<div
class="flex gap-y-2 flex-col w-1/6 max-w-[160px] bg-white text-[#2e3440] opacity-80 px-4 pt-4 border-r border-gray-400"
class="flex gap-y-2 flex-col w-1/6 max-w-[160px] bg-surface text-[#2e3440] opacity-80 px-4 pt-4 border-r border-gray-400"
>
{#each tabs ?? [] as res}
<button
class="rounded-sm !truncate text-sm hover:bg-gray-100 hover:border hover:text-black px-1 py-2 {selected ==
res
? 'outline outline-gray-500 outline-1 bg-white text-black'
? 'outline outline-gray-500 outline-1 bg-surface text-black'
: ''}"
on:pointerdown|stopPropagation
on:click={() => (selected = res)}>{res}</button
frontend/src/lib/components/apps/editor/AppComponentInput.svelte
+1 -1
View File
@@ -21,7 +21,7 @@
}
return false
}).length === 0}
<span class="text-sm text-gray-600">No resource input</span>
<span class="text-sm text-secondary">No resource input</span>
{:else}
<InputsSpecsEditor
id={component.id}
frontend/src/lib/components/apps/editor/AppEditor.svelte
+12 -3
View File
@@ -45,6 +45,7 @@
import { secondaryMenu, SecondaryMenu } from './settingsPanel/secondaryMenu'
import Popover from '../../Popover.svelte'
import { BG_PREFIX, migrateApp } from '../utils'
import DarkModeObserver from '$lib/components/DarkModeObserver.svelte'
export let app: App
export let path: string
@@ -79,6 +80,7 @@
workspace: $workspaceStore,
mode: 'editor'
}
const darkMode: Writable<boolean> = writable(document.documentElement.classList.contains('dark'))
const worldStore = buildWorld(context)
setContext<AppViewerContext>('AppViewerContext', {
@@ -106,7 +108,8 @@
state: writable({}),
componentControl: writable({}),
hoverStore: writable(undefined),
allIdsInPath: writable([])
allIdsInPath: writable([]),
darkMode
})
setContext<AppEditorContext>('AppEditorContext', {
@@ -200,8 +203,14 @@
} else {
secondaryMenu.close()
}
function onThemeChange() {
$darkMode = document.documentElement.classList.contains('dark')
}
</script>
<DarkModeObserver on:change={onThemeChange} />
<svelte:window on:hashchange={hashchange} />
{#if !$userStore?.operator}
@@ -243,7 +252,7 @@
$focusedGrid = undefined
}}
class={twMerge(
'bg-white h-full w-full relative',
'bg-surface h-full w-full relative',
$appStore.css?.['app']?.['viewer']?.class
)}
style={$appStore.css?.['app']?.['viewer']?.style}
@@ -348,7 +357,7 @@
>
<div
slot="submission"
class="flex flex-row-reverse w-full bg-white border-t border-gray-200 rounded-bl-lg rounded-br-lg"
class="flex flex-row-reverse w-full bg-surface border-t border-gray-200 rounded-bl-lg rounded-br-lg"
>
<Button
variant="border"
frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+8 -8
View File
@@ -585,7 +585,7 @@
{/each}
</div>
{:else}
<div class="text-sm text-gray-500">No items</div>
<div class="text-sm text-tertiary">No items</div>
{/if}
</div>
</PanelSection>
@@ -604,7 +604,7 @@
isLoading={false}
/>
</Pane>
<Pane size={50} minSize={10} class="text-sm text-gray-600">
<Pane size={50} minSize={10} class="text-sm text-secondary">
<pre class="overflow-x-auto break-words relative h-full px-2">
<DisplayResult
result={{
@@ -622,7 +622,7 @@
isLoading={false}
/>
</Pane>
<Pane size={50} minSize={10} class="text-sm text-gray-600">
<Pane size={50} minSize={10} class="text-sm text-secondary">
<pre class="overflow-x-auto break-words relative h-full px-2">
<DisplayResult workspaceId={$workspaceStore} jobId={selectedJobId} result={jobResult.result} />
</pre>
@@ -654,7 +654,7 @@
<Pane size={50} minSize={10}>
<LogViewer jobId={job?.id} content={job?.logs} isLoading={testIsLoading} />
</Pane>
<Pane size={50} minSize={10} class="text-sm text-gray-600">
<Pane size={50} minSize={10} class="text-sm text-secondary">
{#if job != undefined && 'result' in job && job.result != undefined}
<pre class="overflow-x-auto break-words relative h-full px-2"
><DisplayResult
@@ -666,9 +666,9 @@
{:else if testIsLoading}
<div class="p-2"><Loader2 class="animate-spin" /> </div>
{:else if job != undefined && 'result' in job && job?.['result'] == undefined}
<div class="p-2 text-gray-500">Result is undefined</div>
<div class="p-2 text-tertiary">Result is undefined</div>
{:else}
<div class="p-2 text-gray-500">
<div class="p-2 text-tertiary">
<Loader2 size={14} class="animate-spin mr-2" />
</div>
{/if}
@@ -689,7 +689,7 @@
</div>
{/if}
{:else}
<div class="text-sm p-2 text-gray-500">Select a job to see its details</div>
<div class="text-sm p-2 text-tertiary">Select a job to see its details</div>
{/if}
</div>
</Pane>
@@ -812,7 +812,7 @@
<div class="flex flex-row gap-1 items-center">
<Bug size={14} />
<div> Debug runs</div>
<div class="text-2xs text-gray-500"
<div class="text-2xs text-tertiary"
>({$jobs?.length > 99 ? '99+' : $jobs?.length ?? 0})</div
>
{#if hasErrors}
frontend/src/lib/components/apps/editor/AppInputs.svelte
+1 -1
View File
@@ -47,7 +47,7 @@
const field = fields[fieldKey]
return field.fieldType === 'object' && field.format?.startsWith('resource-')
}).length === 0}
<span class="text-sm text-gray-600">No resource input</span>
<span class="text-sm text-secondary">No resource input</span>
{:else}
<InputsSpecsEditor
id={BG_PREFIX + index}
frontend/src/lib/components/apps/editor/AppPreview.svelte
+13 -4
View File
@@ -23,6 +23,7 @@
import { dfs } from './appUtils'
import { BG_PREFIX, migrateApp } from '../utils'
import { workspaceStore } from '$lib/stores'
import DarkModeObserver from '$lib/components/DarkModeObserver.svelte'
export let app: App
export let appPath: string = ''
@@ -63,6 +64,8 @@
resizeWindow()
const parentWidth = writable(0)
const darkMode: Writable<boolean> = writable(document.documentElement.classList.contains('dark'))
const state = writable({})
setContext<AppViewerContext>('AppViewerContext', {
worldStore: buildWorld(ncontext),
@@ -89,7 +92,8 @@
state: state,
componentControl: writable({}),
hoverStore: writable(undefined),
allIdsInPath
allIdsInPath,
darkMode
})
let previousSelectedIds: string[] | undefined = undefined
@@ -102,8 +106,13 @@
$: width = $breakpoint === 'sm' ? 'max-w-[640px]' : 'w-full min-w-[768px]'
$: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-none' : ''
function onThemeChange() {
$darkMode = document.documentElement.classList.contains('dark')
}
</script>
<DarkModeObserver on:change={onThemeChange} />
<svelte:window on:hashchange={hashchange} on:resize={resizeWindow} />
<div class="relative h-full">
@@ -111,7 +120,7 @@
<div id="app-editor-select" />
<div
class="{$$props.class} {lockedClasses} {width} light h-full bg-white {app.fullscreen
class="{$$props.class} {lockedClasses} {width} h-full bg-surface {app.fullscreen
? ''
: 'max-w-6xl'} mx-auto"
>
@@ -123,11 +132,11 @@
)}
>
<div
class="w-full sticky top-0 flex justify-between border-b bg-gray-50 px-4 py-1 items-center gap-4"
class="w-full sticky top-0 flex justify-between border-b bg-surface-secondary px-4 py-1 items-center gap-4"
>
<h2 class="truncate">{summary}</h2>
<RecomputeAllComponents />
<div class="text-2xs text-gray-600">
<div class="text-2xs text-secondary">
{policy.on_behalf_of ? `on behalf of ${policy.on_behalf_of_email}` : ''}
</div>
</div>
frontend/src/lib/components/apps/editor/ComponentHeader.svelte
+3 -3
View File
@@ -127,14 +127,14 @@
'bg-red-100/80'
)}
>
<Popover notClickable placement="bottom" popupClass="!bg-white border w-96">
<Popover notClickable placement="bottom" popupClass="!bg-surface border w-96">
<Bug size={14} />
<span slot="text">
<div class="bg-white">
<div class="bg-surface">
<Alert type="error" title={`${json?.name}: ${json?.message}`}>
<div class="flex flex-col gap-2">
<div>
<pre class=" whitespace-pre-wrap text-gray-900 bg-white border w-full p-4 text-xs">
<pre class=" whitespace-pre-wrap text-primary bg-surface border w-full p-4 text-xs">
{json?.stack ?? ''}
</pre>
</div>
frontend/src/lib/components/apps/editor/component/Component.svelte
+1 -1
View File
@@ -120,7 +120,7 @@
{/if}
<div
class={twMerge(
'h-full bg-white/40 outline-1',
'h-full bg-surface/40 outline-1',
$hoverStore === component.id && $mode !== 'preview'
? $connectingInput.opened
? 'outline outline-orange-600'
frontend/src/lib/components/apps/editor/component/components.ts
+1 -1
View File
@@ -1347,7 +1347,7 @@ Hello \${ctx.username}
name: 'Rich Text Editor',
icon: TextCursorInput,
documentationLink: `${documentationBaseUrl}#rich-text-editor`,
dims: '2:1-2:1' as AppComponentDimensions,
dims: '2:1-4:4' as AppComponentDimensions,
customCss: {
input: { class: '', style: '' }
},
frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleProperty.svelte
+2 -2
View File
@@ -91,7 +91,7 @@
<Menu
let:close
noMinW
wrapperClasses="h-full bg-white rounded-r-md border-y border-r border-gray-300 pr-0.5"
wrapperClasses="h-full bg-surface rounded-r-md border-y border-r border-gray-300 pr-0.5"
popupClasses="!mt-0"
>
<button
@@ -101,7 +101,7 @@
>
{unit}
</button>
<ul class="bg-white rounded border py-1 overflow-auto">
<ul class="bg-surface rounded border py-1 overflow-auto">
{#each StylePropertyUnits as u}
<li class="w-full">
<Button
frontend/src/lib/components/apps/editor/contextPanel/SubGridOutput.svelte
+1 -1
View File
@@ -49,7 +49,7 @@
<div
class={classNames(
'px-1 py-0.5 flex justify-between items-center font-semibold text-xs border-l border-y w-full cursor-pointer',
selected === index ? 'bg-gray-200' : 'bg-gray-50'
selected === index ? 'bg-surface-selected' : 'bg-surface'
)}
on:click={() => {
selected = index
frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte
+1 -1
View File
@@ -211,7 +211,7 @@
</div>
<div class="text-2xs font-bold flex flex-row gap-2 items-center truncate">
{name}
<div class={classNames('bg-gray-200 rounded-sm')}>
<div class={classNames('bg-surface-secondary rounded-sm')}>
{#if !open}
<ChevronDown size={14} color="gray" />
{:else if $manuallyOpened[id]}
frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte
+1 -1
View File
@@ -149,7 +149,7 @@
{#if index < items.length - 1}
{@const condition = item.value}
<div class="w-full flex flex-row gap-2 items-center relative">
<div class={twMerge('grow border p-3 my-2 rounded-md border-gray-200 bg-white')}>
<div class={twMerge('grow border p-3 my-2 rounded-md bg-surface')}>
<InputsSpecEditor
key={`Condition ${index + 1}`}
bind:componentInput={item.value}
frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
+1 -1
View File
@@ -171,7 +171,7 @@
on:finalize={handleFinalize}
>
{#each items as item, index (item.id)}
<div class="border rounded-md p-2 mb-2 bg-white">
<div class="border rounded-md p-2 mb-2 bg-surface">
<div class="w-full flex flex-row gap-2 items-center relative my-1">
<input
on:keydown|stopPropagation
frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte
+1 -1
View File
@@ -53,7 +53,7 @@
<div
class={classNames(
'w-full text-xs font-bold gap-1 truncate py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
'bg-white border-gray-300 hover:bg-gray-100 focus:bg-gray-100 text-secondary',
'bg-surface border-gray-300 hover:bg-gray-100 focus:bg-gray-100 text-secondary',
$selectedComponent?.includes(component.id) ? 'outline outline-blue-500 bg-red-400' : ''
)}
on:click={() => {
frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalInputEditor.svelte
+1 -1
View File
@@ -18,7 +18,7 @@
</script>
{#if componentInput?.type === 'eval'}
<div class="border border-gray-300">
<div class="border">
<SimpleEditor
lang="javascript"
bind:code={componentInput.expr}
frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte
+1 -1
View File
@@ -75,7 +75,7 @@
wrapperClasses=" z-[1002]"
>
{#if !loading}
<div class="w-72 shadow-[0_10px_40px_-5px_rgba(0,0,0,0.25)] bg-white rounded-md p-2">
<div class="w-72 shadow-[0_10px_40px_-5px_rgba(0,0,0,0.25)] bg-surface rounded-md p-2">
{#if filteredItems}
<input
on:keydown={(event) => {
frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/TabSelectInput.svelte
+2 -6
View File
@@ -20,11 +20,7 @@
<div class="flex flex-col">
<label for="tabId" class="text-xs font-semibold">Tab ID</label>
<select
id="tabId"
bind:value={componentInput.value.id}
class="border border-gray-300 rounded-md p-1 !w-16"
>
<select id="tabId" bind:value={componentInput.value.id} class="border rounded-md p-1 !w-16">
{#each tabComponents as tabComponent}
<option value={tabComponent.data.id}>
{tabComponent.data.id}
@@ -37,7 +33,7 @@
<select
id="tabIndex"
bind:value={componentInput.value.index}
class="border border-gray-300 rounded-md p-1 !w-16"
class="border rounded-md p-1 !w-16"
>
{#each tabComponents as tabComponent}
{#if tabComponent.data.id === componentInput.value.id}
frontend/src/lib/components/apps/editor/settingsPanel/mainInput/InlineScriptList.svelte
+1 -1
View File
@@ -45,7 +45,7 @@
<RowIcon kind="script" />
<div class="w-full text-left font-normal">
<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
<div class="text-primary flex-wrap text-md font-semibold mb-1">
{#if item.marked}
{@html item.marked ?? ''}
{:else}
frontend/src/lib/components/apps/types.ts
+1
View File
@@ -213,6 +213,7 @@ export type AppViewerContext = {
>
hoverStore: Writable<string | undefined>
allIdsInPath: Writable<string[]>
darkMode: Writable<boolean>
}
export type AppEditorContext = {
frontend/src/lib/components/apps/utils.ts
+2
View File
@@ -285,6 +285,8 @@ export function concatCustomCss<T extends Record<string, ComponentCssProperty>>(
const compStyle = v?.style?.trim() || ''
const compEnding = compStyle?.endsWith(';') || !compStyle ? ' ' : ';'
console.log(key, v)
return [
key,
{
frontend/src/lib/components/common/button/Button.svelte
+1 -1
View File
@@ -82,7 +82,7 @@
},
gray: {
border:
'border-gray-600 hover:border-gray-900 focus:border-gray-900 bg-surface hover:bg-gray-200 focus:bg-gray-200 text-gray-800 hover:text-gray-900 focus:text-gray-900 focus:ring-gray-300',
'border-gray-600 hover:border-gray-900 focus:border-gray-900 bg-surface hover:bg-gray-200 focus:bg-gray-200 text-gray-800 hover:text-primary focus:text-primary focus:ring-gray-300',
contained:
'bg-gray-700/90 hover:bg-gray-900/90 focus:bg-gray-900/90 text-white focus:ring-gray-300',
divider: 'divide-x divide-gray-700 dark:divide-gray-200'
frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte
+2 -2
View File
@@ -32,7 +32,7 @@
<button
bind:this={button}
title="Open calendar picker"
class="absolute bottom-1 right-1 top-1 py-1 min-w-min !px-2 items-center text-gray-800 bg-white border rounded center-center hover:bg-gray-50 transition-all cursor-pointer"
class="absolute bottom-1 right-1 top-1 py-1 min-w-min !px-2 items-center text-gray-800 bg-surface border rounded center-center hover:bg-gray-50 transition-all cursor-pointer"
aria-label="Open calendar picker"
on:click={() => {
input.focus()
@@ -45,7 +45,7 @@
options={{ placement: 'top-start' }}
transition={fade}
wrapperClasses="!z-[1002]"
outerClasses="rounded shadow-xl bg-white border p-3"
outerClasses="rounded shadow-xl bg-surface border p-3"
closeOn={[]}
>
<label class="block text-primary">
frontend/src/lib/components/common/fileInput/FileInput.svelte
+2 -2
View File
@@ -97,7 +97,7 @@
class={twMerge(
`relative center-center flex-col text-center font-medium text-tertiary
border-2 border-dashed border-gray-400 hover:border-blue-500
focus-within:border-blue-500 hover:bg-blue-50 focus-within:bg-blue-50
focus-within:border-blue-500 hover:bg-blue-50 dark:hover:bg-frost-900 focus-within:bg-blue-50
duration-200 rounded-lg p-1`,
c
)}
@@ -113,7 +113,7 @@
Selected file{files.length > 1 ? 's' : ''}:
</div>
</slot>
<ul class="relative z-20 max-w-[500px] bg-white rounded-lg overflow-hidden mx-auto">
<ul class="relative z-20 max-w-[500px] bg-surface rounded-lg overflow-hidden mx-auto">
{#each files as { name }, i}
<li
class="flex justify-between items-center font-normal text-sm
frontend/src/lib/components/common/modal/AlwaysMountedModal.svelte
+3 -3
View File
@@ -36,7 +36,7 @@
<div
style={css?.popup?.style}
class={twMerge(
'bg-white max-w-5xl m-24 overflow-y-auto rounded-lg relative',
'bg-surface max-w-5xl m-24 overflow-y-auto rounded-lg relative',
css?.popup?.class
)}
use:clickOutside
@@ -52,7 +52,7 @@
isOpen = false
}}
style={css?.button?.style}
class="hover:bg-gray-200 bg-gray-100 rounded-full w-8 h-8 flex items-center justify-center transition-all"
class="hover:bg-surface-hover bg-surface-secondary rounded-full w-8 h-8 flex items-center justify-center transition-all"
>
<X class="text-tertiary" />
</button>
@@ -60,7 +60,7 @@
</div>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="relative bg-white rounded-md" on:click|stopPropagation={() => {}}>
<div class="relative bg-surface rounded-md" on:click|stopPropagation={() => {}}>
<div
class={twMerge(
'max-w-screen-lg max-h-screen-80 overflow-auto flex flex-col',
frontend/src/lib/components/common/stepper/Stepper.svelte
+1 -1
View File
@@ -81,7 +81,7 @@
<span
class={classNames(
'hidden sm:block',
selectedIndex === index ? 'font-semibold text-gray-900' : 'font-normal text-tertiary'
selectedIndex === index ? 'font-semibold text-primary' : 'font-normal text-tertiary'
)}
>
{step}
frontend/src/lib/components/flows/content/FlowSettings.svelte
+1 -1
View File
@@ -255,7 +255,7 @@
</select>
</div>
{:else}
<div class="text-sm text-gray-600 italic mb-2">
<div class="text-sm text-secondary italic mb-2">
No custom worker group defined on this instance. See <a
href="https://www.windmill.dev/docs/core_concepts/worker_groups"
target="_blank">documentation</a
frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte
+1 -1
View File
@@ -99,7 +99,7 @@
{:else}
<div
out:fade={{ duration: 200 }}
class="absolute inset-0 center-center flex-col bg-white text-tertiary border"
class="absolute inset-0 center-center flex-col bg-surface text-tertiary border"
>
<Loader2 class="animate-spin" size={16} />
<span class="text-xs mt-1">Loading</span>
frontend/src/lib/components/flows/map/MapItem.svelte
+3 -3
View File
@@ -67,7 +67,7 @@
dispatch('insert', { modules, index: idx, detail: 'move' })
}}
type="button"
class=" text-gray-900 bg-white border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
class=" text-primary bg-surface border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
>
<ClipboardCopy size={12} />
</button>
@@ -198,7 +198,7 @@
dispatch('insert', { modules, index: idx + 1, detail: 'move' })
}}
type="button"
class=" text-gray-900 bg-white border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
class=" text-primary bg-surface border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
>
<ClipboardCopy size={12} />
</button>
@@ -222,7 +222,7 @@
dispatch('newBranch', { module: mod })
}}
type="button"
class=" text-gray-900 bg-white border mx-0.5 rotate-180 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
class=" text-primary bg-surface border mx-0.5 rotate-180 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
>
<GitBranchPlus size={12} />
</button>
frontend/src/lib/components/sidebar/DarkModeToggle.svelte
+1
View File
@@ -16,6 +16,7 @@
if (!document.documentElement.classList.contains('dark')) {
document.documentElement.classList.add('dark')
window.localStorage.setItem('dark-mode', 'dark')
darkMode = true
} else {
document.documentElement.classList.remove('dark')
frontend/src/lib/components/sidebar/MultiplayerMenu.svelte
+1 -1
View File
@@ -116,7 +116,7 @@
>
</span>
<div class="flex flex-col">
<span class="text-sm text-gray-900 truncate">{user}</span>
<span class="text-sm text-primary truncate">{user}</span>
<span class="text-xs text-tertiary truncate">{showActivity(url)}</span>
</div>
</div>
frontend/src/routes/(root)/(logged)/+layout.svelte
+1 -1
View File
@@ -311,7 +311,7 @@
on:click={() => {
menuOpen = true
}}
class="h-8 w-8 inline-flex items-center justify-center rounded-md text-tertiary hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
class="h-8 w-8 inline-flex items-center justify-center rounded-md text-tertiary hover:text-primary focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
>
<svg
class="h-6 w-6"
frontend/tailwind.config.cjs
+6
View File
@@ -685,6 +685,12 @@ const config = {
[`@media (min-width: ${theme('screens.qhd')})`]: {
fontSize: '20px !important'
}
},
input: {
backgroundColor: theme('colors.surface-secondary') + ' !important'
},
textarea: {
backgroundColor: theme('colors.surface-secondary') + ' !important'
}
})
addComponents({