Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
1 changed files with 27 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/melissa/MelissaDocumentosTemplates.vue
+27 -8
View File
@@ -359,7 +359,7 @@ onMounted(() => {
<template v-else-if="view === 'preview' && previewTemplate"> <template v-else-if="view === 'preview' && previewTemplate">
<div class="mdt-main__title-row"> <div class="mdt-main__title-row">
<div class="mdt-main__title"> <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> <span>{{ previewTemplate.nome_template }}</span>
</div> </div>
<div class="mdt-preview-actions"> <div class="mdt-preview-actions">
@@ -440,7 +440,7 @@ onMounted(() => {
text text
rounded rounded
size="small" 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)" @click.stop="$refs[`menu_${tpl.id}`]?.[0]?.toggle($event)"
/> />
<Menu <Menu
@@ -455,8 +455,7 @@ onMounted(() => {
inativo inativo
</span> </span>
<span class="mdt-card__vars"> <span class="mdt-card__vars">
<i class="pi pi-code" /> &lt; {{ tpl.variaveis?.length || 0 }} variáveis &gt;
{{ tpl.variaveis?.length || 0 }} variáveis
</span> </span>
</div> </div>
</div> </div>
@@ -977,6 +976,8 @@ onMounted(() => {
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
font-family: inherit; font-family: inherit;
max-height: 200px;
overflow: hidden;
transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease; transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
} }
.mdt-card:hover { .mdt-card:hover {
@@ -1086,17 +1087,35 @@ onMounted(() => {
.mdt-card__foot { .mdt-card__foot {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
gap: 8px; gap: 8px;
margin-top: 4px; margin-top: auto;
padding-top: 8px;
} }
.mdt-card__vars { .mdt-card__vars {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
font-size: 0.7rem; font-size: 0.72rem;
color: var(--m-text-muted); 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) */ /* Mobile (<1024px) */
@media (max-width: 1023px) { @media (max-width: 1023px) {