feat(rules): search input align with tabs

This commit is contained in:
kunish 2024-10-13 02:17:17 +08:00
parent 554b361184
commit ab018c529d
No known key found for this signature in database
GPG Key ID: 67D3ACD788F3A7CD
2 changed files with 25 additions and 22 deletions

View File

@ -414,7 +414,7 @@ export default () => {
</select> </select>
</div> </div>
<div class="join flex flex-1 items-center md:flex-1"> <div class="join flex flex-1 items-center">
<input <input
type="search" type="search"
class="input input-sm join-item input-primary min-w-0 flex-1" class="input input-sm join-item input-primary min-w-0 flex-1"

View File

@ -128,7 +128,7 @@ export default () => {
<DocumentTitle>{t('rules')}</DocumentTitle> <DocumentTitle>{t('rules')}</DocumentTitle>
<div class="flex h-full flex-col gap-2"> <div class="flex h-full flex-col gap-2">
<div class="flex items-center gap-2"> <div class="flex w-full flex-wrap items-center gap-2">
<div class="tabs-boxed tabs gap-2"> <div class="tabs-boxed tabs gap-2">
<For each={tabs()}> <For each={tabs()}>
{(tab) => ( {(tab) => (
@ -146,28 +146,31 @@ export default () => {
</For> </For>
</div> </div>
<Show when={activeTab() === ActiveTab.ruleProviders}> <div class="join flex flex-1 items-center">
<Button <input
class="btn btn-circle btn-sm" class="input input-sm join-item input-primary min-w-0 flex-1"
disabled={allProviderIsUpdating()} type="search"
onClick={(e) => onUpdateAllProviderClick(e)} placeholder={t('search')}
icon={ value={globalFilter()}
<IconReload onInput={(e) => setGlobalFilter(e.currentTarget.value)}
class={twMerge(
allProviderIsUpdating() && 'animate-spin text-success',
)}
/>
}
/> />
</Show>
</div>
<input <Show when={activeTab() === ActiveTab.ruleProviders}>
class="input input-sm input-bordered input-primary" <Button
placeholder={t('search')} class="btn btn-primary join-item btn-sm"
value={globalFilter()} disabled={allProviderIsUpdating()}
onInput={(e) => setGlobalFilter(e.currentTarget.value)} onClick={(e) => onUpdateAllProviderClick(e)}
/> icon={
<IconReload
class={twMerge(
allProviderIsUpdating() && 'animate-spin text-success',
)}
/>
}
/>
</Show>
</div>
</div>
<div <div
ref={(ref) => (scrollElementRef = ref)} ref={(ref) => (scrollElementRef = ref)}