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

MelissaConfiguracoes: accordion enxuto pra tirar o lag

Browse Source 
Continua usando o <Accordion> do PrimeVue, mas DOM/CSS bem mais leves:

- Header: icone inline + label + badge (era icone 36x36 caixa
  centralizada + label + desc 2-linhas + badge)
- Sub-itens: botao denso 1-linha (icone + label, desc vai pro
  title="" como tooltip nativo)
- Removidas transitions de box-shadow e color-mix nos hovers
  (eram custosas com o backdrop-filter blur do parent)
- Removidas as line-clamp 2-linhas em cada item (~30 itens
  abertos = ~30 layouts caros)
- Hover/active dos sub-itens com color-mix(--p-primary-color),
  alinhado com o padrao do MelissaMenu (.mm-foot-item)
- Padding compactado, gap entre items 1px (era 6px)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
2026-05-06 14:49:38 -03:00
parent e912558769
commit a0948919ef
1 changed files with 55 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/melissa/MelissaConfiguracoes.vue
+55 -105
View File
@@ -349,13 +349,8 @@ function resetCores() {
<AccordionPanel v-for="g in grupos" :key="g.key" :value="g.key"> <AccordionPanel v-for="g in grupos" :key="g.key" :value="g.key">
<AccordionHeader> <AccordionHeader>
<div class="mcfg-grp-head"> <div class="mcfg-grp-head">
<div class="mcfg-grp-icon"> <i :class="g.icon" class="mcfg-grp-icon" />
<i :class="g.icon" /> <span class="mcfg-grp-label">{{ g.label }}</span>
</div>
<div class="mcfg-grp-text">
<span class="mcfg-grp-label">{{ g.label }}</span>
<span class="mcfg-grp-desc">{{ g.desc }}</span>
</div>
<span class="mcfg-grp-badge">{{ g.items.length }}</span> <span class="mcfg-grp-badge">{{ g.items.length }}</span>
</div> </div>
</AccordionHeader> </AccordionHeader>
@@ -367,15 +362,11 @@ function resetCores() {
type="button" type="button"
class="mcfg-nav-item" class="mcfg-nav-item"
:class="{ 'is-active': secaoAtiva === s.key }" :class="{ 'is-active': secaoAtiva === s.key }"
:title="s.desc"
@click="selecionar(s)" @click="selecionar(s)"
> >
<div class="mcfg-nav-item__icon"> <i :class="s.icon" class="mcfg-nav-item__icon" />
<i :class="s.icon" /> <span class="mcfg-nav-item__label">{{ s.label }}</span>
</div>
<div class="mcfg-nav-item__text">
<span class="mcfg-nav-item__label">{{ s.label }}</span>
<span class="mcfg-nav-item__desc">{{ s.desc }}</span>
</div>
</button> </button>
</div> </div>
</AccordionContent> </AccordionContent>
@@ -714,46 +705,38 @@ function resetCores() {
.mcfg-side::-webkit-scrollbar { width: 5px; } .mcfg-side::-webkit-scrollbar { width: 5px; }
.mcfg-side::-webkit-scrollbar-thumb { background: var(--m-border-strong); border-radius: 3px; } .mcfg-side::-webkit-scrollbar-thumb { background: var(--m-border-strong); border-radius: 3px; }
/* Accordion — neutralizando cores do PrimeVue pra tema Melissa */ /* Accordion — usando o componente do PrimeVue, neutralizando cores
.mcfg-accordion :deep(.p-accordion) { pra tema Melissa. Estilo enxuto pra evitar lag (sem transitions
display: flex; de box-shadow/color-mix, sem line-clamp em cada item). */
flex-direction: column;
gap: 2px;
background: transparent;
}
.mcfg-accordion :deep(.p-accordionpanel) { .mcfg-accordion :deep(.p-accordionpanel) {
border: none; border: none;
background: transparent; background: transparent;
} }
.mcfg-accordion :deep(.p-accordionheader) { .mcfg-accordion :deep(.p-accordionheader) {
padding: 8px; padding: 6px 8px;
background: transparent; background: transparent;
border: none; border: none;
color: var(--m-text); color: var(--m-text);
border-radius: 9px; border-radius: 8px;
transition: background-color 140ms ease;
min-height: 56px;
} }
.mcfg-accordion :deep(.p-accordionheader:hover) { .mcfg-accordion :deep(.p-accordionheader:hover) {
background: var(--m-bg-soft-hover); background: var(--m-bg-soft-hover);
} }
.mcfg-accordion :deep(.p-accordionheader-toggle-icon) { .mcfg-accordion :deep(.p-accordionheader-toggle-icon) {
color: var(--m-text-muted); color: var(--m-text-muted);
font-size: 0.7rem; font-size: 0.72rem;
margin-left: 4px;
transition: transform 200ms ease;
} }
.mcfg-accordion :deep(.p-accordioncontent) { .mcfg-accordion :deep(.p-accordioncontent),
border: none; .mcfg-accordion :deep(.p-accordioncontent-content) {
padding: 0;
background: transparent; background: transparent;
border: none;
} }
.mcfg-accordion :deep(.p-accordioncontent-content) { .mcfg-accordion :deep(.p-accordioncontent-content) {
padding: 4px 4px 6px; padding: 2px 0 6px;
background: transparent;
border: none;
} }
/* Header de grupo — ícone + label/desc + badge contador */ /* Header de grupo — icone inline + label + badge */
.mcfg-grp-head { .mcfg-grp-head {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -762,119 +745,86 @@ function resetCores() {
min-width: 0; min-width: 0;
} }
.mcfg-grp-icon { .mcfg-grp-icon {
width: 36px; height: 36px; width: 16px;
display: grid; place-items: center; text-align: center;
background: var(--m-accent-soft); color: var(--p-primary-color);
color: var(--m-accent); font-size: 0.92rem;
border-radius: 9px;
flex-shrink: 0; flex-shrink: 0;
transition: box-shadow 140ms ease;
}
.mcfg-grp-icon > i { font-size: 0.92rem; }
.mcfg-accordion :deep(.p-accordionheader:hover) .mcfg-grp-icon {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--m-accent) 28%, transparent);
}
.mcfg-grp-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
text-align: left;
} }
.mcfg-grp-label { .mcfg-grp-label {
flex: 1;
min-width: 0;
font-size: 0.86rem; font-size: 0.86rem;
font-weight: 600; font-weight: 600;
color: var(--m-text); color: var(--m-text);
line-height: 1.25; text-align: left;
}
.mcfg-grp-desc {
font-size: 0.72rem;
color: var(--m-text-muted);
line-height: 1.3;
overflow: hidden; overflow: hidden;
display: -webkit-box; text-overflow: ellipsis;
-webkit-line-clamp: 2; white-space: nowrap;
-webkit-box-orient: vertical;
} }
.mcfg-grp-badge { .mcfg-grp-badge {
flex-shrink: 0; flex-shrink: 0;
min-width: 22px; min-width: 20px;
height: 22px; height: 18px;
padding: 0 7px; padding: 0 6px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: var(--m-bg-medium); background: var(--m-bg-medium);
border: 1px solid var(--m-border); border: 1px solid var(--m-border);
color: var(--m-text-muted); color: var(--m-text-muted);
font-size: 0.68rem; font-size: 0.66rem;
font-weight: 700; font-weight: 700;
border-radius: 999px; border-radius: 999px;
} }
/* Cards de sub-itens dentro do grupo */ /* Sub-itens — botao linha unica, denso */
.mcfg-nav-list { .mcfg-nav-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 6px; gap: 1px;
padding-left: 14px; padding-left: 22px;
padding-right: 2px; padding-right: 4px;
} }
.mcfg-nav-item { .mcfg-nav-item {
display: flex; display: flex;
align-items: flex-start; align-items: center;
gap: 10px; gap: 10px;
padding: 10px; padding: 7px 10px;
background: var(--m-bg-medium); background: transparent;
border: 1px solid var(--m-border); border: none;
border-radius: 10px; border-radius: 7px;
color: var(--m-text); color: var(--m-text);
cursor: pointer; cursor: pointer;
text-align: left; text-align: left;
font-family: inherit; font-family: inherit;
transition: background-color 140ms ease, border-color 140ms ease; font-size: 0.84rem;
width: 100%; width: 100%;
} }
.mcfg-nav-item:hover { .mcfg-nav-item:hover {
background: var(--m-bg-soft-hover); background: color-mix(in srgb, var(--p-primary-color) 12%, transparent);
border-color: var(--m-border-strong); color: var(--p-primary-color);
} }
.mcfg-nav-item:hover .mcfg-nav-item__icon { color: var(--p-primary-color); }
.mcfg-nav-item.is-active { .mcfg-nav-item.is-active {
background: var(--m-accent-soft); background: color-mix(in srgb, var(--p-primary-color) 16%, transparent);
border-color: color-mix(in srgb, var(--m-accent) 55%, transparent); color: var(--p-primary-color);
} }
.mcfg-nav-item.is-active .mcfg-nav-item__icon { color: var(--p-primary-color); }
.mcfg-nav-item__icon { .mcfg-nav-item__icon {
width: 32px; height: 32px; width: 16px;
display: grid; place-items: center; text-align: center;
background: var(--m-bg-soft);
color: var(--m-text-muted); color: var(--m-text-muted);
border-radius: 9px; font-size: 0.82rem;
flex-shrink: 0; flex-shrink: 0;
transition: background-color 140ms ease, color 140ms ease;
}
.mcfg-nav-item.is-active .mcfg-nav-item__icon {
background: color-mix(in srgb, var(--m-accent) 22%, transparent);
color: var(--m-accent);
}
.mcfg-nav-item__icon > i { font-size: 0.82rem; }
.mcfg-nav-item__text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
} }
.mcfg-nav-item__label { .mcfg-nav-item__label {
font-size: 0.84rem; flex: 1;
font-weight: 600; min-width: 0;
line-height: 1.2; font-weight: 500;
} overflow: hidden;
.mcfg-nav-item.is-active .mcfg-nav-item__label { color: var(--m-accent); } text-overflow: ellipsis;
.mcfg-nav-item__desc { white-space: nowrap;
font-size: 0.7rem;
color: var(--m-text-muted);
line-height: 1.3;
} }
/* ═════ COL 2: Main ═════ */ /* ═════ COL 2: Main ═════ */