fix(webui): tighten automation toolbar layout
This commit is contained in:
@@ -3477,42 +3477,44 @@ function AutomationsSettings({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<section className="rounded-[24px] border border-border/45 bg-card/80 p-3 shadow-[0_22px_70px_rgba(15,23,42,0.055)] backdrop-blur-xl">
|
<section className="rounded-[24px] border border-border/45 bg-card/80 p-3 shadow-[0_22px_70px_rgba(15,23,42,0.055)] backdrop-blur-xl sm:p-4">
|
||||||
<div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
|
<div className="flex flex-col gap-3">
|
||||||
<div className="flex min-w-0 flex-wrap gap-1 rounded-[16px] bg-muted/50 p-1">
|
<div className="-mx-1 overflow-x-auto px-1 pb-0.5">
|
||||||
{summaryOptions.map((option) => (
|
<div className="inline-flex min-w-max items-center gap-1 rounded-[16px] bg-muted/50 p-1">
|
||||||
<button
|
{summaryOptions.map((option) => (
|
||||||
key={option.value}
|
<button
|
||||||
type="button"
|
key={option.value}
|
||||||
onClick={() => onFilterChange(option.value)}
|
type="button"
|
||||||
className={cn(
|
onClick={() => onFilterChange(option.value)}
|
||||||
"inline-flex h-8 items-center gap-2 rounded-[12px] px-3 text-[12px] font-medium text-muted-foreground transition-colors",
|
className={cn(
|
||||||
filter === option.value && "bg-background text-foreground shadow-sm",
|
"inline-flex h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-[12px] px-3 text-[12px] font-medium text-muted-foreground transition-colors",
|
||||||
)}
|
filter === option.value && "bg-background text-foreground shadow-sm",
|
||||||
>
|
)}
|
||||||
<span>{option.label}</span>
|
>
|
||||||
<span className="min-w-5 rounded-full bg-background/75 px-1.5 py-0.5 text-center text-[11px] tabular-nums text-muted-foreground">
|
<span>{option.label}</span>
|
||||||
{option.count}
|
<span className="min-w-5 shrink-0 rounded-full bg-background/75 px-1.5 py-0.5 text-center text-[11px] tabular-nums text-muted-foreground">
|
||||||
</span>
|
{option.count}
|
||||||
</button>
|
</span>
|
||||||
))}
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex min-w-0 flex-col gap-2 sm:flex-row sm:items-center sm:justify-end">
|
<div className="grid min-w-0 gap-2 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center">
|
||||||
<div className="relative min-w-0 sm:w-[24rem]">
|
<div className="relative min-w-0">
|
||||||
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
|
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
|
||||||
<Input
|
<Input
|
||||||
value={query}
|
value={query}
|
||||||
onChange={(event) => onQueryChange(event.target.value)}
|
onChange={(event) => onQueryChange(event.target.value)}
|
||||||
placeholder={tx("settings.automations.search", "Search automation, message, session, or cron expression")}
|
placeholder={tx("settings.automations.search", "Search automations")}
|
||||||
className="h-9 rounded-[13px] border-border/45 bg-background/85 pl-9 text-[13px] shadow-sm"
|
className="h-9 w-full rounded-[13px] border-border/45 bg-background/85 pl-9 text-[13px] shadow-sm"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="inline-flex h-9 items-center justify-center gap-1.5 rounded-[13px] border border-border/45 bg-background/85 px-3 text-[12px] font-medium text-muted-foreground shadow-sm transition-colors hover:bg-muted/70 hover:text-foreground"
|
className="inline-flex h-9 min-w-[8.5rem] items-center justify-center gap-1.5 whitespace-nowrap rounded-[13px] border border-border/45 bg-background/85 px-3 text-[12px] font-medium text-muted-foreground shadow-sm transition-colors hover:bg-muted/70 hover:text-foreground sm:w-auto"
|
||||||
>
|
>
|
||||||
<ArrowUpDown className="h-3.5 w-3.5" aria-hidden />
|
<ArrowUpDown className="h-3.5 w-3.5" aria-hidden />
|
||||||
<span>{sortLabel[sort]}</span>
|
<span>{sortLabel[sort]}</span>
|
||||||
|
|||||||
@@ -493,7 +493,7 @@
|
|||||||
"updated": "Updated",
|
"updated": "Updated",
|
||||||
"name": "Name"
|
"name": "Name"
|
||||||
},
|
},
|
||||||
"search": "Search automation, message, session, or cron expression",
|
"search": "Search automations",
|
||||||
"queue": "Queue",
|
"queue": "Queue",
|
||||||
"loading": "Loading automations...",
|
"loading": "Loading automations...",
|
||||||
"noMatches": "No automations match this view.",
|
"noMatches": "No automations match this view.",
|
||||||
|
|||||||
@@ -493,7 +493,7 @@
|
|||||||
"updated": "Actualizada",
|
"updated": "Actualizada",
|
||||||
"name": "Nombre"
|
"name": "Nombre"
|
||||||
},
|
},
|
||||||
"search": "Buscar tarea, mensaje, sesión o expresión cron",
|
"search": "Buscar automatizaciones",
|
||||||
"queue": "Cola",
|
"queue": "Cola",
|
||||||
"loading": "Cargando automatizaciones...",
|
"loading": "Cargando automatizaciones...",
|
||||||
"noMatches": "No hay automatizaciones que coincidan con esta vista.",
|
"noMatches": "No hay automatizaciones que coincidan con esta vista.",
|
||||||
|
|||||||
@@ -493,7 +493,7 @@
|
|||||||
"updated": "Mise à jour",
|
"updated": "Mise à jour",
|
||||||
"name": "Nom"
|
"name": "Nom"
|
||||||
},
|
},
|
||||||
"search": "Rechercher une tâche, un message, une session ou une expression cron",
|
"search": "Rechercher des automatisations",
|
||||||
"queue": "File",
|
"queue": "File",
|
||||||
"loading": "Chargement des automatisations...",
|
"loading": "Chargement des automatisations...",
|
||||||
"noMatches": "Aucune automatisation ne correspond à cette vue.",
|
"noMatches": "Aucune automatisation ne correspond à cette vue.",
|
||||||
|
|||||||
@@ -493,7 +493,7 @@
|
|||||||
"updated": "Diperbarui",
|
"updated": "Diperbarui",
|
||||||
"name": "Nama"
|
"name": "Nama"
|
||||||
},
|
},
|
||||||
"search": "Cari tugas, pesan, sesi, atau ekspresi cron",
|
"search": "Cari otomatisasi",
|
||||||
"queue": "Antrean",
|
"queue": "Antrean",
|
||||||
"loading": "Memuat otomasi...",
|
"loading": "Memuat otomasi...",
|
||||||
"noMatches": "Tidak ada otomasi yang cocok dengan tampilan ini.",
|
"noMatches": "Tidak ada otomasi yang cocok dengan tampilan ini.",
|
||||||
|
|||||||
@@ -493,7 +493,7 @@
|
|||||||
"updated": "更新日時",
|
"updated": "更新日時",
|
||||||
"name": "名前"
|
"name": "名前"
|
||||||
},
|
},
|
||||||
"search": "タスク、メッセージ、セッション、cron 式を検索",
|
"search": "自動化を検索",
|
||||||
"queue": "キュー",
|
"queue": "キュー",
|
||||||
"loading": "自動タスクを読み込み中...",
|
"loading": "自動タスクを読み込み中...",
|
||||||
"noMatches": "この表示に一致する自動タスクはありません。",
|
"noMatches": "この表示に一致する自動タスクはありません。",
|
||||||
|
|||||||
@@ -493,7 +493,7 @@
|
|||||||
"updated": "업데이트",
|
"updated": "업데이트",
|
||||||
"name": "이름"
|
"name": "이름"
|
||||||
},
|
},
|
||||||
"search": "작업, 메시지, 세션 또는 cron 식 검색",
|
"search": "자동화 검색",
|
||||||
"queue": "대기열",
|
"queue": "대기열",
|
||||||
"loading": "자동화를 불러오는 중...",
|
"loading": "자동화를 불러오는 중...",
|
||||||
"noMatches": "이 보기와 일치하는 자동화가 없습니다.",
|
"noMatches": "이 보기와 일치하는 자동화가 없습니다.",
|
||||||
|
|||||||
@@ -493,7 +493,7 @@
|
|||||||
"updated": "Đã cập nhật",
|
"updated": "Đã cập nhật",
|
||||||
"name": "Tên"
|
"name": "Tên"
|
||||||
},
|
},
|
||||||
"search": "Tìm tác vụ, tin nhắn, phiên hoặc biểu thức cron",
|
"search": "Tìm tự động hóa",
|
||||||
"queue": "Hàng đợi",
|
"queue": "Hàng đợi",
|
||||||
"loading": "Đang tải tự động hóa...",
|
"loading": "Đang tải tự động hóa...",
|
||||||
"noMatches": "Không có tự động hóa phù hợp với chế độ xem này.",
|
"noMatches": "Không có tự động hóa phù hợp với chế độ xem này.",
|
||||||
|
|||||||
@@ -493,7 +493,7 @@
|
|||||||
"updated": "更新时间",
|
"updated": "更新时间",
|
||||||
"name": "名称"
|
"name": "名称"
|
||||||
},
|
},
|
||||||
"search": "搜索任务、消息、会话或 cron 表达式",
|
"search": "搜索自动任务",
|
||||||
"queue": "任务队列",
|
"queue": "任务队列",
|
||||||
"loading": "正在加载自动任务...",
|
"loading": "正在加载自动任务...",
|
||||||
"noMatches": "当前视图没有匹配的自动任务。",
|
"noMatches": "当前视图没有匹配的自动任务。",
|
||||||
|
|||||||
@@ -493,7 +493,7 @@
|
|||||||
"updated": "更新時間",
|
"updated": "更新時間",
|
||||||
"name": "名稱"
|
"name": "名稱"
|
||||||
},
|
},
|
||||||
"search": "搜尋任務、訊息、會話或 cron 表達式",
|
"search": "搜尋自動任務",
|
||||||
"queue": "任務佇列",
|
"queue": "任務佇列",
|
||||||
"loading": "正在載入自動任務...",
|
"loading": "正在載入自動任務...",
|
||||||
"noMatches": "目前檢視沒有符合的自動任務。",
|
"noMatches": "目前檢視沒有符合的自動任務。",
|
||||||
|
|||||||
Reference in New Issue
Block a user