Add cursor-pointer and tooltip to Telegram copy button
This commit is contained in:
parent
d5da44fd75
commit
ec5a3a3b16
4 changed files with 36 additions and 12 deletions
|
|
@ -92,6 +92,7 @@
|
|||
'connected' => 'Channel connected!',
|
||||
'connected_toast' => 'Telegram channel connected successfully!',
|
||||
'copied_toast' => 'Command copied to clipboard',
|
||||
'copy_tooltip' => 'Copy command',
|
||||
'expired' => 'This code has expired. Generate a new one to try again.',
|
||||
'new_code' => 'Generate a new code',
|
||||
'retry' => 'Try again',
|
||||
|
|
|
|||
|
|
@ -92,6 +92,7 @@
|
|||
'connected' => '¡Canal conectado!',
|
||||
'connected_toast' => '¡Canal de Telegram conectado correctamente!',
|
||||
'copied_toast' => 'Comando copiado al portapapeles',
|
||||
'copy_tooltip' => 'Copiar comando',
|
||||
'expired' => 'Este código ha caducado. Genera uno nuevo para volver a intentarlo.',
|
||||
'new_code' => 'Generar un nuevo código',
|
||||
'retry' => 'Reintentar',
|
||||
|
|
|
|||
|
|
@ -92,6 +92,7 @@
|
|||
'connected' => 'Canal conectado!',
|
||||
'connected_toast' => 'Canal do Telegram conectado com sucesso!',
|
||||
'copied_toast' => 'Comando copiado para a área de transferência',
|
||||
'copy_tooltip' => 'Copiar comando',
|
||||
'expired' => 'Este código expirou. Gere um novo para tentar de novo.',
|
||||
'new_code' => 'Gerar um novo código',
|
||||
'retry' => 'Tentar novamente',
|
||||
|
|
|
|||
|
|
@ -14,6 +14,12 @@ import {
|
|||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from '@/components/ui/tooltip';
|
||||
import { copyToClipboard } from '@/lib/utils';
|
||||
import {
|
||||
connect as connectTelegram,
|
||||
|
|
@ -203,18 +209,33 @@ onUnmounted(stopPolling);
|
|||
<span>{{
|
||||
$t('accounts.telegram.step_command')
|
||||
}}</span>
|
||||
<button
|
||||
type="button"
|
||||
class="group flex w-full items-center justify-between gap-2 rounded-lg border bg-muted px-3 py-2 text-left font-mono text-sm transition-colors hover:bg-muted/70"
|
||||
@click="copyCommand"
|
||||
>
|
||||
<span class="min-w-0 truncate"
|
||||
>/connect {{ code }}</span
|
||||
>
|
||||
<IconCopy
|
||||
class="size-4 shrink-0 text-muted-foreground group-hover:text-foreground"
|
||||
/>
|
||||
</button>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<button
|
||||
type="button"
|
||||
class="group flex w-full cursor-pointer items-center justify-between gap-2 rounded-lg border bg-muted px-3 py-2 text-left font-mono text-sm transition-colors hover:bg-muted/70"
|
||||
@click="copyCommand"
|
||||
>
|
||||
<span class="min-w-0 truncate"
|
||||
>/connect {{ code }}</span
|
||||
>
|
||||
<IconCopy
|
||||
class="size-4 shrink-0 text-muted-foreground group-hover:text-foreground"
|
||||
/>
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>
|
||||
{{
|
||||
$t(
|
||||
'accounts.telegram.copy_tooltip',
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
|
|
|
|||
Loading…
Reference in a new issue