feat(frontend): Improve inputs (#3651)

* fix(frontend): Improve AgGrid Infinite table default codes + deprecated table + improve AutoDatatable * fix(frontend): Handle undefined rowCount * fix(frontend): Improve Ag Grid footer * fix(frontend): Improve Deprecated badge * fix(frontend): Improve inputs * fix(frontend): revert select
windmill-labs · May 1, 2024 · 790f263 · 790f263
1 parent d7d2f03
commit 790f263
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 10 deletions.
diff --git a/frontend/src/lib/assets/app.css b/frontend/src/lib/assets/app.css
@@ -154,3 +154,7 @@
 .component-wrapper {
 	@apply rounded-md border overflow-hidden border-gray-300 dark:border-gray-600;
 }
+
+.app-editor-input {
+	@apply rounded-md border border-gray-300 dark:border-gray-500 focus:border-gray-300 focus:dark:border-gray-500 focus:!ring-1 focus:!ring-blue-300;
+}
diff --git a/frontend/src/lib/components/DateTimeInput.svelte b/frontend/src/lib/components/DateTimeInput.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte'
 	import { Button } from './common'
+	import { Clock } from 'lucide-svelte'
 
 	export let value: string | undefined = undefined
 
@@ -63,11 +64,21 @@
 
 <div class="flex flex-row gap-1 items-center w-full" id={randomId} on:pointerdown on:focus>
 	<!-- svelte-ignore a11y-autofocus -->
-	<input type="date" bind:value={date} {autofocus} class="!w-3/4" min={minDate} max={maxDate} />
-	<input type="time" bind:value={time} class="!w-1/4 min-w-[100px]" />
+	<input
+		type="date"
+		bind:value={date}
+		{autofocus}
+		class="!w-3/4 app-editor-input"
+		min={minDate}
+		max={maxDate}
+	/>
+	<input type="time" bind:value={time} class="!w-1/4 min-w-[100px] app-editor-input" />
 	<Button
 		variant="border"
 		color="light"
+		startIcon={{
+			icon: Clock
+		}}
 		size="xs"
 		portalTarget={`#${randomId}`}
 		dropdownItems={useDropdown
@@ -100,6 +111,8 @@
 			: undefined}
 		on:click={() => {
 			setTimeLater(0)
-		}}>Now</Button
+		}}
 	>
+		Now
+	</Button>
 </div>
diff --git a/frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte
@@ -98,7 +98,11 @@
 			min={resolvedConfig.minDate}
 			max={resolvedConfig.maxDate}
 			placeholder="Type..."
-			class={twMerge('windmillapp w-full py-1.5 text-sm px-2', css?.input?.class, 'wm-date-input')}
+			class={twMerge(
+				'windmillapp w-full py-1.5 text-sm px-2 app-editor-input',
+				css?.input?.class,
+				'wm-date-input'
+			)}
 			style={css?.input?.style ?? ''}
 		/>
 	{/if}

diff --git a/frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte
@@ -77,7 +77,7 @@
 <InitializeComponent {id} />
 
 {#if render}
-	<div class="w-full h-full p-1">
+	<div class="w-full h-full">
 		<FileInput
 			bind:this={fileInput}
 			accept={acceptedFileTypes?.length ? acceptedFileTypes?.join(', ') : undefined}

diff --git a/frontend/src/lib/components/apps/components/inputs/AppQuillEditor.svelte b/frontend/src/lib/components/apps/components/inputs/AppQuillEditor.svelte
@@ -101,13 +101,21 @@
 {/if}
 
 <style>
+	:global(.ql-toolbar) {
+		@apply rounded-t-md;
+	}
+
+	:global(.dark .ql-toolbar) {
+		@apply border-gray-500;
+	}
+
 	:global(.ql-toolbar .ql-stroke) {
 		fill: none;
-		@apply stroke-primary;
+		@apply stroke-primary rounded-t-md;
 	}
 
 	:global(.ql-toolbar .ql-fill) {
-		@apply fill-primary;
+		@apply fill-primary bg-red-500;
 		stroke: none;
 	}
 
@@ -116,6 +124,14 @@
 	}
 
 	:global(.ql-container) {
-		@apply text-primary;
+		@apply text-primary rounded-b-md;
+	}
+
+	:global(.dark .ql-container) {
+		@apply border-gray-500;
+	}
+
+	:global(.dark .ql-container > .ql-editor.ql-blank::before) {
+		@apply text-gray-500;
 	}
 </style>
diff --git a/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte
@@ -73,9 +73,10 @@
 	let css = initCss($app.css?.[appCssKey], customCss)
 
 	$: classInput = twMerge(
-		'windmillapp w-full  py-1.5 text-sm focus:ring-indigo-100 px-2',
+		'windmillapp w-full py-1.5 px-2 text-sm',
 		css?.input?.class ?? '',
 		resolvedConfig.disabled ? 'placeholder:text-gray-400 dark:placeholder:text-gray-600' : '',
+		'app-editor-input',
 		'wm-text-input'
 	)
 

diff --git a/frontend/src/lib/components/apps/components/inputs/currency/AppCurrencyInput.svelte b/frontend/src/lib/components/apps/components/inputs/currency/AppCurrencyInput.svelte
@@ -99,6 +99,7 @@
 							formatted: twMerge(
 								'px-2 w-full py-1.5 windmillapp',
 								css?.input?.class,
+								'app-editor-input h-8',
 								'wm-currency-input'
 							),
 							wrapper: 'w-full windmillapp',

diff --git a/frontend/src/lib/components/common/fileInput/FileInput.svelte b/frontend/src/lib/components/common/fileInput/FileInput.svelte
@@ -126,7 +126,7 @@
 	class={twMerge(
 		`relative center-center flex-col text-center font-medium text-tertiary 
 		border border-dashed border-gray-400 hover:border-blue-500 
-		focus-within:border-blue-500 hover:bg-blue-50 dark:hover:bg-frost-900 focus-within:bg-blue-50 
+		focus-within:border-blue-300 hover:bg-blue-50 dark:hover:bg-frost-900  
 		duration-200 rounded-lg p-1`,
 		c
 	)}