Alex-Devera/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-06-05 12:44:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Add pulse animation to client online status indicator

Browse source 
- Adds a CSS pulse animation (scale + opacity) to the badge dot
  when a client is online and enabled
- Applies to both desktop table and mobile card views
- Makes online/offline status distinguishable at a glance without
  needing to tap for tooltips, especially on mobile

Closes #4442
This commit is contained in:
abdulrahman 2026-05-17 03:56:46 +03:00
parent f9ae0347c6
commit 19b226895d
1 changed files with 11 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
frontend/src/pages/inbounds/ClientRowTable.vue
View file

@ -336,7 +336,7 @@ function confirmBulkDelete() {
<template v-else-if="isClientOnline(client.email)">{{ t('online') }}</template>
<template v-else>{{ t('offline') }}</template>
</template>
<a-badge :color="statusBadgeColor(client)" />
<a-badge :color="statusBadgeColor(client)" :class="{ 'client-online-pulse': client.enable && isClientOnline(client.email) }" />
</a-tooltip>
<div class="client-id-stack">
<a-tooltip :title="client.email">
@ -440,7 +440,7 @@ function confirmBulkDelete() {
<template v-else-if="isClientOnline(client.email)">{{ t('online') }}</template>
<template v-else>{{ t('offline') }}</template>
</template>
<a-badge :color="statusBadgeColor(client)" />
<a-badge :color="statusBadgeColor(client)" :class="{ 'client-online-pulse': client.enable && isClientOnline(client.email) }" />
</a-tooltip>
<a-tooltip :title="client.email">
<span class="client-email">{{ client.email }}</span>
@ -838,4 +838,13 @@ function confirmBulkDelete() {
width: 9px;
height: 9px;
}
.client-online-pulse :deep(.ant-badge-status-dot) {
animation: client-online-pulse 1.2s ease-in-out infinite;
}
@keyframes client-online-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.6); opacity: 0.3; }
}
</style>