melissa/templates: ajustes UI dos cards e icones (4 fixes)

1. Icone "eye" do header de Preview -> cor primary (classe
   mdt-main__title-icon-eye).

2. Icone "ellipsis-v" (3 pontos) dos cards do tenant -> cor
   primary via :deep(.p-button-icon) selector.

3. Variaveis do card: formato "< 12 variaveis >" (entities
   HTML &lt;/&gt;) em font monospace + cor primary + bold.
   Removido o icone pi-code (a propria notacao < > sinaliza).

4. .mdt-card max-height: 200px + overflow hidden. Foot agora
   tem justify-content: center + margin-top: auto pra grudar
   no fundo do card.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
2026-05-21 16:53:08 -03:00
parent b821db6438
commit f1c24242e0
@@ -359,7 +359,7 @@ onMounted(() => {
<template v-else-if="view === 'preview' && previewTemplate">
<div class="mdt-main__title-row">
<div class="mdt-main__title">
<i class="pi pi-eye" />
<i class="pi pi-eye mdt-main__title-icon-eye" />
<span>{{ previewTemplate.nome_template }}</span>
</div>
<div class="mdt-preview-actions">
@@ -440,7 +440,7 @@ onMounted(() => {
text
rounded
size="small"
class="!w-7 !h-7"
class="!w-7 !h-7 mdt-card__menu-btn"
@click.stop="$refs[`menu_${tpl.id}`]?.[0]?.toggle($event)"
/>
<Menu
@@ -455,8 +455,7 @@ onMounted(() => {
inativo
</span>
<span class="mdt-card__vars">
<i class="pi pi-code" />
{{ tpl.variaveis?.length || 0 }} variáveis
&lt; {{ tpl.variaveis?.length || 0 }} variáveis &gt;
</span>
</div>
</div>
@@ -977,6 +976,8 @@ onMounted(() => {
text-align: left;
cursor: pointer;
font-family: inherit;
max-height: 200px;
overflow: hidden;
transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.mdt-card:hover {
@@ -1086,17 +1087,35 @@ onMounted(() => {
.mdt-card__foot {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 4px;
margin-top: auto;
padding-top: 8px;
}
.mdt-card__vars {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.7rem;
color: var(--m-text-muted);
font-size: 0.72rem;
font-weight: 600;
color: var(--p-primary-color);
font-family: 'JetBrains Mono', 'Consolas', monospace;
letter-spacing: 0.02em;
}
/* Botão 3-pontos do menu do card — cor primary */
.mdt-card__menu-btn:deep(.p-button-icon) {
color: var(--p-primary-color) !important;
}
.mdt-card__menu-btn:hover:deep(.p-button-icon) {
color: var(--p-primary-color) !important;
opacity: 0.85;
}
/* Ícone eye do header de preview — cor primary */
.mdt-main__title-icon-eye {
color: var(--p-primary-color) !important;
}
.mdt-card__vars > i { font-size: 0.65rem; }
/* Mobile (<1024px) */
@media (max-width: 1023px) {