fix: polish remote tooltip and device status
This commit is contained in:
parent
4f8dad2255
commit
b83c37d51f
2 changed files with 20 additions and 21 deletions
|
|
@ -5683,6 +5683,7 @@ function DevicesGrid({ devices, companyNameBySlug }: { devices: DevicesQueryItem
|
||||||
function DeviceCard({ device, companyName }: { device: DevicesQueryItem; companyName?: string | null }) {
|
function DeviceCard({ device, companyName }: { device: DevicesQueryItem; companyName?: string | null }) {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const effectiveStatus = resolveDeviceStatus(device)
|
const effectiveStatus = resolveDeviceStatus(device)
|
||||||
|
const statusIndicator = getDeviceStatusIndicator(effectiveStatus)
|
||||||
const isActive = device.isActive
|
const isActive = device.isActive
|
||||||
const lastHeartbeat = device.lastHeartbeatAt ? new Date(device.lastHeartbeatAt) : null
|
const lastHeartbeat = device.lastHeartbeatAt ? new Date(device.lastHeartbeatAt) : null
|
||||||
const deviceType = (device.deviceType ?? "desktop").toLowerCase()
|
const deviceType = (device.deviceType ?? "desktop").toLowerCase()
|
||||||
|
|
@ -5730,23 +5731,15 @@ function DeviceCard({ device, companyName }: { device: DevicesQueryItem; company
|
||||||
<div className="absolute right-2 top-2">
|
<div className="absolute right-2 top-2">
|
||||||
<span
|
<span
|
||||||
aria-hidden
|
aria-hidden
|
||||||
className={cn(
|
className={cn("relative block size-2 rounded-full border border-white shadow-sm", statusIndicator.dotClass)}
|
||||||
"relative block size-2 rounded-full",
|
|
||||||
effectiveStatus === "online"
|
|
||||||
? "bg-emerald-500"
|
|
||||||
: effectiveStatus === "offline"
|
|
||||||
? "bg-rose-500"
|
|
||||||
: effectiveStatus === "maintenance"
|
|
||||||
? "bg-amber-500"
|
|
||||||
: effectiveStatus === "blocked"
|
|
||||||
? "bg-orange-500"
|
|
||||||
: effectiveStatus === "deactivated"
|
|
||||||
? "bg-slate-500"
|
|
||||||
: "bg-slate-400"
|
|
||||||
)}
|
|
||||||
/>
|
/>
|
||||||
{effectiveStatus === "online" ? (
|
{statusIndicator.isPinging ? (
|
||||||
<span className="absolute left-1/2 top-1/2 -z-10 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-emerald-400/30 animate-ping" />
|
<span
|
||||||
|
className={cn(
|
||||||
|
"absolute left-1/2 top-1/2 -z-10 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full animate-ping",
|
||||||
|
statusIndicator.ringClass
|
||||||
|
)}
|
||||||
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
<CardHeader className="pb-2">
|
<CardHeader className="pb-2">
|
||||||
|
|
|
||||||
|
|
@ -1338,15 +1338,21 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
|
||||||
</span>
|
</span>
|
||||||
</Button>
|
</Button>
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
<TooltipContent className="max-w-xs space-y-1 text-left">
|
<TooltipContent className="max-w-xs space-y-1 rounded-xl border border-sidebar-ring/20 bg-sidebar-accent/90 px-3 py-2 text-left text-xs text-white shadow-lg backdrop-blur">
|
||||||
<p className="text-sm font-semibold text-neutral-900">Acesso remoto</p>
|
<p className="text-sm font-semibold text-white">Acesso remoto</p>
|
||||||
{remoteShortcutHostname ? (
|
{remoteShortcutHostname ? (
|
||||||
<p className="text-xs text-neutral-500">Host: {remoteShortcutHostname}</p>
|
<p className="text-xs text-white/90">
|
||||||
|
<span className="font-semibold text-white">Host:</span> {remoteShortcutHostname}
|
||||||
|
</p>
|
||||||
) : null}
|
) : null}
|
||||||
{remoteShortcutAccess?.identifier ? (
|
{remoteShortcutAccess?.identifier ? (
|
||||||
<p className="text-xs text-neutral-500">ID RustDesk: {remoteShortcutAccess.identifier}</p>
|
<p className="text-xs text-white/90">
|
||||||
|
<span className="font-semibold text-white">ID RustDesk:</span> {remoteShortcutAccess.identifier}
|
||||||
|
</p>
|
||||||
) : null}
|
) : null}
|
||||||
<p className="text-xs text-neutral-500">Status: {remoteShortcutStatusLabel}</p>
|
<p className="text-xs text-white/90">
|
||||||
|
<span className="font-semibold text-white">Status:</span> {remoteShortcutStatusLabel}
|
||||||
|
</p>
|
||||||
</TooltipContent>
|
</TooltipContent>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue