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>
<div className="flex items-center justify-between text-sm"> <div className="flex items-center justify-between text-sm">
<div className="flex items-center gap-1"> <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> </div>
<span className="text-slate-500 dark:text-slate-400"> <span className="text-slate-500 dark:text-slate-400">
{macro.steps?.length || 0}/{MAX_STEPS_PER_MACRO} steps {macro.steps?.length || 0}/{MAX_STEPS_PER_MACRO} steps

72
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 { Button } from "@/components/Button";
import { Combobox } from "@/components/Combobox"; import { Combobox } from "@/components/Combobox";
@ -94,6 +94,12 @@ export function MacroStepCard({
<Card className="p-4"> <Card className="p-4">
<div className="mb-2 flex items-center justify-between"> <div className="mb-2 flex items-center justify-between">
<div className="flex items-center gap-1.5"> <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"> <div className="flex items-center gap-1">
<Button <Button
size="XS" size="XS"
@ -110,18 +116,13 @@ export function MacroStepCard({
LeadingIcon={LuArrowDown} LeadingIcon={LuArrowDown}
/> />
</div> </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 && ( {onDelete && (
<Button <Button
size="XS" size="XS"
theme="danger" theme="light"
className="text-red-500 dark:text-red-400"
text="Delete" text="Delete"
LeadingIcon={LuTrash} LeadingIcon={LuTrash2}
onClick={onDelete} 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"> <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} {group}
</span> </span>
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-4 pt-1">
{mods.map(option => ( {mods.map(option => (
<Button <Button
key={option.value} key={option.value}
@ -164,31 +165,36 @@ export function MacroStepCard({
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<FieldLabel label="Keys" description={`Maximum ${MAX_KEYS_PER_STEP} keys per step.`} /> <FieldLabel label="Keys" description={`Maximum ${MAX_KEYS_PER_STEP} keys per step.`} />
</div> </div>
<div className="flex flex-wrap gap-1 pb-2"> {ensureArray(step.keys) && step.keys.length > 0 && (
{ensureArray(step.keys).map((key, keyIndex) => ( <div className="flex flex-wrap gap-1 pb-2">
<span {step.keys.map((key, keyIndex) => (
key={keyIndex} <span
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" key={keyIndex}
> 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} <span className="px-1">
{keyDisplayMap[key] || key}
</span>
<Button
size="XS"
className=""
theme="blank"
onClick={() => {
const newKeys = ensureArray(step.keys).filter((_, i) => i !== keyIndex);
onKeySelect({ value: null, keys: newKeys });
}}
LeadingIcon={LuX}
/>
</span> </span>
<Button ))}
size="XS" </div>
className="" )}
theme="blank"
onClick={() => {
const newKeys = ensureArray(step.keys).filter((_, i) => i !== keyIndex);
onKeySelect({ value: null, keys: newKeys });
}}
LeadingIcon={LuX}
/>
</span>
))}
</div>
<div className="relative w-full"> <div className="relative w-full">
<Combobox <Combobox
onChange={(value: { value: string; label: string }) => onKeySelect(value)} onChange={(value: { value: string; label: string }) => {
onKeySelect(value);
onKeyQueryChange('');
}}
displayValue={() => keyQuery} displayValue={() => keyQuery}
onInputChange={onKeyQueryChange} onInputChange={onKeyQueryChange}
options={getFilteredKeys} options={getFilteredKeys}
@ -204,7 +210,7 @@ export function MacroStepCard({
<div className="w-full flex flex-col gap-1"> <div className="w-full flex flex-col gap-1">
<div className="flex items-center 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>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<SelectMenuBasic <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 { useNavigate, useParams } from "react-router-dom";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { LuTrash } from "react-icons/lu"; import { LuTrash2 } from "react-icons/lu";
import { KeySequence, useMacrosStore } from "@/hooks/stores"; import { KeySequence, useMacrosStore } from "@/hooks/stores";
import { SettingsPageHeader } from "@/components/SettingsPageheader"; import { SettingsPageHeader } from "@/components/SettingsPageheader";
@ -102,7 +102,7 @@ export default function SettingsMacrosEditRoute() {
size="SM" size="SM"
theme="danger" theme="danger"
text="Delete Macro" text="Delete Macro"
LeadingIcon={LuTrash} LeadingIcon={LuTrash2}
onClick={() => setShowDeleteConfirm(true)} onClick={() => setShowDeleteConfirm(true)}
disabled={isDeleting} 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 { useEffect, Fragment, useMemo, useState, useCallback } from "react";
import { useNavigate } from "react-router-dom"; 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 { KeySequence, useMacrosStore, generateMacroId } from "@/hooks/stores";
import { SettingsPageHeader } from "@/components/SettingsPageheader"; import { SettingsPageHeader } from "@/components/SettingsPageheader";
@ -11,6 +11,7 @@ import { MAX_TOTAL_MACROS, COPY_SUFFIX } from "@/constants/macros";
import { keyDisplayMap, modifierDisplayMap } from "@/keyboardMappings"; import { keyDisplayMap, modifierDisplayMap } from "@/keyboardMappings";
import notifications from "@/notifications"; import notifications from "@/notifications";
import { ConfirmDialog } from "@/components/ConfirmDialog"; import { ConfirmDialog } from "@/components/ConfirmDialog";
import LoadingSpinner from "@/components/LoadingSpinner";
const normalizeSortOrders = (macros: KeySequence[]): KeySequence[] => { const normalizeSortOrders = (macros: KeySequence[]): KeySequence[] => {
return macros.map((macro, index) => ({ return macros.map((macro, index) => ({
@ -201,8 +202,9 @@ export default function SettingsMacrosRoute() {
<div className="flex items-center gap-1 ml-4"> <div className="flex items-center gap-1 ml-4">
<Button <Button
size="XS" size="XS"
theme="danger" className="text-red-500 dark:text-red-400"
LeadingIcon={LuTrash} theme="light"
LeadingIcon={LuTrash2}
onClick={() => { onClick={() => {
setMacroToDelete(macro); setMacroToDelete(macro);
setShowDeleteConfirm(true); setShowDeleteConfirm(true);
@ -254,7 +256,7 @@ export default function SettingsMacrosRoute() {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<SettingsPageHeader <SettingsPageHeader
title="Keyboard Macros" 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 && ( { macros.length > 0 && (
<div className="flex items-center pl-2"> <div className="flex items-center pl-2">
@ -274,16 +276,19 @@ export default function SettingsMacrosRoute() {
<div className="space-y-4"> <div className="space-y-4">
{loading && macros.length === 0 ? ( {loading && macros.length === 0 ? (
<EmptyCard <EmptyCard
IconElm={LuCommand}
headline="Loading macros..." headline="Loading macros..."
description="Please wait while we fetch your macros"
BtnElm={ 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 ? ( ) : macros.length === 0 ? (
<EmptyCard <EmptyCard
headline="No macros yet" IconElm={LuCommand}
description="Create keyboard macros for quick actions" headline="Create Your First Macro"
description="Combine keystrokes into a single action for faster workflows."
BtnElm={ BtnElm={
<Button <Button
size="SM" size="SM"