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 </>) 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:
@@ -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
|
||||
< {{ tpl.variaveis?.length || 0 }} variáveis >
|
||||
</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) {
|
||||
|
||||
Reference in New Issue
Block a user