mirror of https://github.com/jetkvm/kvm.git
cleanup styles and macro list
This commit is contained in:
Andrew Davis
parent
5c3424e89f
commit
0206d798a3
ui/src
|
|
@ -202,35 +202,21 @@ video::-webkit-media-controls {
|
|||
display: none;
|
||||
}
|
||||
|
||||
/* Macro Component Styles */
|
||||
@keyframes macroFadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes macroScaleIn {
|
||||
from { transform: scale(0.95); opacity: 0; }
|
||||
to { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
.macro-animate-fadeIn { animation: macroFadeIn 0.2s ease-out; }
|
||||
.macro-animate-scaleIn { animation: macroScaleIn 0.2s ease-out; }
|
||||
|
||||
/* Base Macro Element Styles */
|
||||
.macro-sortable, .macro-step, [data-macro-item] {
|
||||
/* Macro list sortable */
|
||||
.macro-sortable, [data-macro-item] {
|
||||
transition: box-shadow 0.15s ease-out, background-color 0.2s ease-out, transform 0.1s, border-color 0.2s;
|
||||
position: relative;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.macro-sortable.dragging, .macro-step.dragging, [data-macro-item].dragging {
|
||||
.macro-sortable.dragging, [data-macro-item].dragging {
|
||||
z-index: 10;
|
||||
opacity: 0.8;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
@apply bg-blue-500/10;
|
||||
}
|
||||
|
||||
.macro-sortable.drop-target, .macro-step.drop-target, [data-macro-item].drop-target {
|
||||
.macro-sortable.drop-target, [data-macro-item].drop-target {
|
||||
@apply border-2 border-dashed border-blue-500 bg-blue-500/5;
|
||||
}
|
||||
|
||||
|
|
@ -243,7 +229,6 @@ video::-webkit-media-controls {
|
|||
transform: none;
|
||||
}
|
||||
|
||||
/* Drag Handle Styles */
|
||||
.drag-handle, .macro-sortable-handle {
|
||||
cursor: grab;
|
||||
touch-action: none;
|
||||
|
|
@ -255,78 +240,7 @@ video::-webkit-media-controls {
|
|||
}
|
||||
|
||||
@media (hover: none) {
|
||||
.macro-sortable, .macro-step, [data-macro-item] {
|
||||
.macro-sortable, [data-macro-item] {
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Macro Form Elements */
|
||||
.macro-input {
|
||||
@apply w-full rounded-md border border-slate-300 bg-white p-1.5 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-slate-600 dark:bg-slate-700 dark:text-white;
|
||||
}
|
||||
|
||||
.macro-input-error {
|
||||
@apply border-red-500 dark:border-red-500;
|
||||
}
|
||||
|
||||
.macro-select, .macro-delay-select {
|
||||
@apply w-full rounded-md border border-slate-300 bg-slate-50 p-2 text-sm shadow-sm
|
||||
focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500
|
||||
dark:border-slate-600 dark:bg-slate-800 dark:text-white;
|
||||
}
|
||||
|
||||
/* Macro Card Elements */
|
||||
.macro-card, .macro-step-card {
|
||||
@apply rounded-md border border-slate-300 bg-white p-4 shadow-sm
|
||||
dark:border-slate-600 dark:bg-slate-800
|
||||
transition-colors duration-200;
|
||||
}
|
||||
|
||||
.macro-step-card:hover {
|
||||
@apply border-blue-300 dark:border-blue-700;
|
||||
}
|
||||
|
||||
/* Badge & Step Number Styles */
|
||||
.macro-key-badge, .macro-step-number {
|
||||
@apply inline-flex items-center rounded-md bg-blue-100 px-2 py-1 text-xs font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-200;
|
||||
}
|
||||
|
||||
/* Section Styling Utilities */
|
||||
.macro-section {
|
||||
@apply space-y-4 mt-2;
|
||||
}
|
||||
|
||||
.macro-section-header {
|
||||
@apply flex items-center justify-between;
|
||||
}
|
||||
|
||||
.macro-section-title {
|
||||
@apply text-sm font-medium text-slate-700 dark:text-slate-300;
|
||||
}
|
||||
|
||||
.macro-section-subtitle {
|
||||
@apply text-xs text-slate-500 dark:text-slate-400;
|
||||
}
|
||||
|
||||
/* Error Styles */
|
||||
.macro-error {
|
||||
@apply mb-4 rounded-md bg-red-50 p-3 dark:bg-red-900/30;
|
||||
}
|
||||
|
||||
.macro-error-icon {
|
||||
@apply h-5 w-5 text-red-400 dark:text-red-300;
|
||||
}
|
||||
|
||||
.macro-error-text {
|
||||
@apply text-sm font-medium text-red-800 dark:text-red-200;
|
||||
}
|
||||
|
||||
/* Container Styles */
|
||||
.macro-modifiers-container {
|
||||
@apply flex flex-wrap gap-2;
|
||||
}
|
||||
|
||||
.macro-modifier-group {
|
||||
@apply inline-flex flex-col rounded-md border border-slate-200 p-2 dark:border-slate-700;
|
||||
min-width: fit-content;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useState, useEffect, useRef, useCallback } from "react";
|
||||
import { LuPlus, LuTrash, LuX, LuPenLine, LuLoader, LuGripVertical, LuInfo, LuCopy, LuArrowUp, LuArrowDown } from "react-icons/lu";
|
||||
import { useState, useEffect, useRef, useCallback, Fragment } from "react";
|
||||
import { LuPlus, LuTrash, LuX, LuPenLine, LuLoader, LuGripVertical, LuInfo, LuCopy, LuArrowUp, LuArrowDown, LuMoveRight, LuCornerDownRight } from "react-icons/lu";
|
||||
|
||||
import { KeySequence, useMacrosStore } from "@/hooks/stores";
|
||||
import { SettingsPageHeader } from "@/components/SettingsPageheader";
|
||||
|
|
@ -1239,37 +1239,55 @@ export default function SettingsMacrosRoute() {
|
|||
<LuGripVertical className="h-4 w-4" />
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<h4 className="truncate text-sm font-medium text-black dark:text-white">
|
||||
<div className="pl-4 flex-1 overflow-hidden">
|
||||
<h3 className="truncate text-sm font-semibold text-black dark:text-white">
|
||||
{macro.name}
|
||||
</h4>
|
||||
<p className="mt-1 text-xs text-slate-500 dark:text-slate-400 overflow-hidden">
|
||||
<span className="flex flex-wrap items-center">
|
||||
{macro.steps.slice(0, 3).map((step, stepIndex) => {
|
||||
const keysText = ensureArray(step.keys).length > 0
|
||||
? ensureArray(step.keys).map(key => keyDisplayMap[key] || key).join(' + ')
|
||||
: '';
|
||||
const modifiersDisplayText = ensureArray(step.modifiers).length > 0
|
||||
? ensureArray(step.modifiers).map(m => modifierDisplayMap[m] || m).join(' + ')
|
||||
: '';
|
||||
const combinedText = (modifiersDisplayText || keysText)
|
||||
? [modifiersDisplayText, keysText].filter(Boolean).join(' + ')
|
||||
: 'Delay only';
|
||||
</h3>
|
||||
<p className="mt-1 ml-2 text-xs text-slate-500 dark:text-slate-400 overflow-hidden">
|
||||
<span className="flex flex-col items-start gap-1">
|
||||
{macro.steps.map((step, stepIndex) => {
|
||||
const StepIcon = stepIndex === 0 ? LuMoveRight : LuCornerDownRight;
|
||||
|
||||
return (
|
||||
<span key={stepIndex} className="inline-flex items-center my-0.5">
|
||||
{stepIndex > 0 && <span className="mx-1 text-blue-400 dark:text-blue-500">→</span>}
|
||||
<span className="whitespace-nowrap">
|
||||
<span className="font-medium text-slate-600 dark:text-slate-300">{combinedText}</span>
|
||||
<span key={stepIndex} className="inline-flex items-center">
|
||||
<StepIcon className="mr-1 text-slate-400 dark:text-slate-500 h-3 w-3 flex-shrink-0" />
|
||||
<span className="bg-slate-50 dark:bg-slate-800 px-2 py-0.5 rounded-md border border-slate-200/50 dark:border-slate-700/50">
|
||||
{(ensureArray(step.modifiers).length > 0 || ensureArray(step.keys).length > 0) ? (
|
||||
<>
|
||||
{ensureArray(step.modifiers).map((modifier, idx) => (
|
||||
<Fragment key={`mod-${idx}`}>
|
||||
<span className="font-medium text-slate-600 dark:text-slate-200">
|
||||
{modifierDisplayMap[modifier] || modifier}
|
||||
</span>
|
||||
{idx < ensureArray(step.modifiers).length - 1 && (
|
||||
<span className="text-slate-400 dark:text-slate-600"> + </span>
|
||||
)}
|
||||
</Fragment>
|
||||
))}
|
||||
|
||||
{ensureArray(step.modifiers).length > 0 && ensureArray(step.keys).length > 0 && (
|
||||
<span className="text-slate-400 dark:text-slate-600"> + </span>
|
||||
)}
|
||||
|
||||
{ensureArray(step.keys).map((key, idx) => (
|
||||
<Fragment key={`key-${idx}`}>
|
||||
<span className="font-medium text-blue-600 dark:text-blue-200">
|
||||
{keyDisplayMap[key] || key}
|
||||
</span>
|
||||
{idx < ensureArray(step.keys).length - 1 && (
|
||||
<span className="text-slate-400 dark:text-slate-600"> + </span>
|
||||
)}
|
||||
</Fragment>
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
<span className="font-medium text-slate-500 dark:text-slate-400">Delay only</span>
|
||||
)}
|
||||
<span className="ml-1 text-slate-400 dark:text-slate-500">({step.delay}ms)</span>
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
{macro.steps.length > 3 && (
|
||||
<span className="ml-1 text-slate-400 dark:text-slate-500">
|
||||
+ {macro.steps.length - 3} more steps
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue