Superminaren
/
kvm
mirror of https://github.com/jetkvm/kvm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

cleanup icons

This commit is contained in:
Andrew Davis 2025-04-05 23:58:25 +10:00
parent 6b6b86287e
commit 40acb6e2e5
No known key found for this signature in database
GPG Key ID: 30AB5B89A109D044
4 changed files with 56 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/components/MacroForm.tsx
View File

@ -181,7 +181,7 @@ export function MacroForm({
<div>
<div className="flex items-center justify-between text-sm">
<div className="flex items-center gap-1">
<FieldLabel label="Steps" info={`Each step is a collection of keys and/or modifiers that will be executed in order. You can add up to a maximum of ${MAX_STEPS_PER_MACRO} steps per macro.`} />
<FieldLabel label="Steps" description={`Keys/modifiers executed in sequence with a delay between each step.`} />
</div>
<span className="text-slate-500 dark:text-slate-400">
{macro.steps?.length || 0}/{MAX_STEPS_PER_MACRO} steps

34
ui/src/components/MacroStepCard.tsx
View File

@ -1,4 +1,4 @@
import { LuArrowUp, LuArrowDown, LuX, LuTrash } from "react-icons/lu";
import { LuArrowUp, LuArrowDown, LuX, LuTrash2 } from "react-icons/lu";
import { Button } from "@/components/Button";
import { Combobox } from "@/components/Combobox";
@ -94,6 +94,12 @@ export function MacroStepCard({
<Card className="p-4">
<div className="mb-2 flex items-center justify-between">
<div className="flex items-center gap-1.5">
<span className="flex h-6 w-5 items-center justify-center rounded-full bg-blue-100 text-xs font-semibold text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">
{stepIndex + 1}
</span>
</div>
<div className="flex items-center space-x-2">
<div className="flex items-center gap-1">
<Button
size="XS"
@ -110,18 +116,13 @@ export function MacroStepCard({
LeadingIcon={LuArrowDown}
/>
</div>
<span className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-100 text-xs font-semibold text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">
{stepIndex + 1}
</span>
</div>
<div className="flex items-center space-x-2">
{onDelete && (
<Button
size="XS"
theme="danger"
theme="light"
className="text-red-500 dark:text-red-400"
text="Delete"
LeadingIcon={LuTrash}
LeadingIcon={LuTrash2}
onClick={onDelete}
/>
)}
@ -137,7 +138,7 @@ export function MacroStepCard({
<span className="absolute -top-2.5 left-2 px-1 text-xs font-medium bg-white dark:bg-slate-800 text-slate-500 dark:text-slate-400">
{group}
</span>
<div className="flex flex-wrap gap-1">
<div className="flex flex-wrap gap-4 pt-1">
{mods.map(option => (
<Button
key={option.value}
@ -164,11 +165,12 @@ export function MacroStepCard({
<div className="flex items-center gap-1">
<FieldLabel label="Keys" description={`Maximum ${MAX_KEYS_PER_STEP} keys per step.`} />
</div>
{ensureArray(step.keys) && step.keys.length > 0 && (
<div className="flex flex-wrap gap-1 pb-2">
{ensureArray(step.keys).map((key, keyIndex) => (
{step.keys.map((key, keyIndex) => (
<span
key={keyIndex}
className="inline-flex items-center rounded-md bg-blue-100 px-1 text-xs font-medium text-blue-800 dark:bg-blue-900/40 dark:text-blue-200"
className="inline-flex items-center py-0.5 rounded-md bg-blue-100 px-1 text-xs font-medium text-blue-800 dark:bg-blue-900/40 dark:text-blue-200"
>
<span className="px-1">
{keyDisplayMap[key] || key}
@ -186,9 +188,13 @@ export function MacroStepCard({
</span>
))}
</div>
)}
<div className="relative w-full">
<Combobox
onChange={(value: { value: string; label: string }) => onKeySelect(value)}
onChange={(value: { value: string; label: string }) => {
onKeySelect(value);
onKeyQueryChange('');
}}
displayValue={() => keyQuery}
onInputChange={onKeyQueryChange}
options={getFilteredKeys}
@ -204,7 +210,7 @@ export function MacroStepCard({
<div className="w-full flex flex-col gap-1">
<div className="flex items-center gap-1">
<FieldLabel label="Step Duration" info="The time to wait after pressing the keys in this step before moving to the next step. This helps ensure reliable key presses when automating keyboard input." />
<FieldLabel label="Step Duration" description="Time to wait before executing the next step." />
</div>
<div className="flex items-center gap-3">
<SelectMenuBasic

4
ui/src/routes/devices.$id.settings.macros.edit.tsx
View File

@ -1,6 +1,6 @@
import { useNavigate, useParams } from "react-router-dom";
import { useState, useEffect } from "react";
import { LuTrash } from "react-icons/lu";
import { LuTrash2 } from "react-icons/lu";
import { KeySequence, useMacrosStore } from "@/hooks/stores";
import { SettingsPageHeader } from "@/components/SettingsPageheader";
@ -102,7 +102,7 @@ export default function SettingsMacrosEditRoute() {
size="SM"
theme="danger"
text="Delete Macro"
LeadingIcon={LuTrash}
LeadingIcon={LuTrash2}
onClick={() => setShowDeleteConfirm(true)}
disabled={isDeleting}
/>

21
ui/src/routes/devices.$id.settings.macros.tsx
View File

@ -1,6 +1,6 @@
import { useEffect, Fragment, useMemo, useState, useCallback } from "react";
import { useNavigate } from "react-router-dom";
import { LuPenLine, LuLoader, LuCopy, LuMoveRight, LuCornerDownRight, LuArrowUp, LuArrowDown, LuTrash } from "react-icons/lu";
import { LuPenLine, LuCopy, LuMoveRight, LuCornerDownRight, LuArrowUp, LuArrowDown, LuTrash2, LuCommand } from "react-icons/lu";
import { KeySequence, useMacrosStore, generateMacroId } from "@/hooks/stores";
import { SettingsPageHeader } from "@/components/SettingsPageheader";
@ -11,6 +11,7 @@ import { MAX_TOTAL_MACROS, COPY_SUFFIX } from "@/constants/macros";
import { keyDisplayMap, modifierDisplayMap } from "@/keyboardMappings";
import notifications from "@/notifications";
import { ConfirmDialog } from "@/components/ConfirmDialog";
import LoadingSpinner from "@/components/LoadingSpinner";
const normalizeSortOrders = (macros: KeySequence[]): KeySequence[] => {
return macros.map((macro, index) => ({
@ -201,8 +202,9 @@ export default function SettingsMacrosRoute() {
<div className="flex items-center gap-1 ml-4">
<Button
size="XS"
theme="danger"
LeadingIcon={LuTrash}
className="text-red-500 dark:text-red-400"
theme="light"
LeadingIcon={LuTrash2}
onClick={() => {
setMacroToDelete(macro);
setShowDeleteConfirm(true);
@ -254,7 +256,7 @@ export default function SettingsMacrosRoute() {
<div className="flex items-center justify-between">
<SettingsPageHeader
title="Keyboard Macros"
description={`Create and manage keyboard macros for quick actions. Currently ${macros.length}/${MAX_TOTAL_MACROS} macros are active.`}
description={`Combine keystrokes into a single action for faster workflows.`}
/>
{ macros.length > 0 && (
<div className="flex items-center pl-2">
@ -274,16 +276,19 @@ export default function SettingsMacrosRoute() {
<div className="space-y-4">
{loading && macros.length === 0 ? (
<EmptyCard
IconElm={LuCommand}
headline="Loading macros..."
description="Please wait while we fetch your macros"
BtnElm={
<LuLoader className="h-6 w-6 animate-spin text-blue-500" />
<div className="my-2 flex flex-col items-center space-y-2 text-center">
<LoadingSpinner className="h-6 w-6 text-blue-700 dark:text-blue-500" />
</div>
}
/>
) : macros.length === 0 ? (
<EmptyCard
headline="No macros yet"
description="Create keyboard macros for quick actions"
IconElm={LuCommand}
headline="Create Your First Macro"
description="Combine keystrokes into a single action for faster workflows."
BtnElm={
<Button
size="SM"