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

MelissaConfiguracoes: titulo + subtitulo de volta no accordion

Browse Source 
Restaura label + desc tanto no header do grupo quanto no sub-item,
com altura confortavel (min-height 44px no item). Optimizacoes
mantidas pra evitar lag:

- Sem -webkit-line-clamp (custoso com o backdrop-filter do parent);
  desc 1 linha com text-overflow: ellipsis
- Icone inline (16-18px, sem caixa 32x32 + box-shadow transition)
- Sem transition de color-mix em hover

Hover/active continuam com cor primary (12-16%). Desc no hover/active
ganha tom misturado primary 70% pra ficar legivel sem competir com
o label.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
2026-05-06 14:52:46 -03:00
parent a0948919ef
commit 1b5214c90b
1 changed files with 55 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/melissa/MelissaConfiguracoes.vue
+55 -17
View File
@@ -350,7 +350,10 @@ function resetCores() {
<AccordionHeader>
<div class="mcfg-grp-head">
<i :class="g.icon" class="mcfg-grp-icon" />
<span class="mcfg-grp-label">{{ g.label }}</span>
<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>
</div>
</AccordionHeader>
@@ -362,11 +365,13 @@ function resetCores() {
type="button"
class="mcfg-nav-item"
:class="{ 'is-active': secaoAtiva === s.key }"
:title="s.desc"
@click="selecionar(s)"
>
<i :class="s.icon" class="mcfg-nav-item__icon" />
<span class="mcfg-nav-item__label">{{ s.label }}</span>
<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>
</div>
</AccordionContent>
@@ -736,7 +741,7 @@ function resetCores() {
padding: 2px 0 6px;
}
/* Header de grupo — icone inline + label + badge */
/* Header de grupo — icone inline + (label + desc) + badge */
.mcfg-grp-head {
display: flex;
align-items: center;
@@ -745,19 +750,33 @@ function resetCores() {
min-width: 0;
}
.mcfg-grp-icon {
width: 16px;
width: 18px;
text-align: center;
color: var(--p-primary-color);
font-size: 0.92rem;
font-size: 0.95rem;
flex-shrink: 0;
}
.mcfg-grp-label {
.mcfg-grp-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
text-align: left;
}
.mcfg-grp-label {
font-size: 0.86rem;
font-weight: 600;
color: var(--m-text);
text-align: left;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mcfg-grp-desc {
font-size: 0.7rem;
color: var(--m-text-muted);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -778,28 +797,28 @@ function resetCores() {
border-radius: 999px;
}
/* Sub-itens — botao linha unica, denso */
/* Sub-itens — botao com titulo + subtitulo */
.mcfg-nav-list {
display: flex;
flex-direction: column;
gap: 1px;
padding-left: 22px;
gap: 2px;
padding-left: 24px;
padding-right: 4px;
}
.mcfg-nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 10px;
padding: 8px 10px;
background: transparent;
border: none;
border-radius: 7px;
border-radius: 8px;
color: var(--m-text);
cursor: pointer;
text-align: left;
font-family: inherit;
font-size: 0.84rem;
width: 100%;
min-height: 44px;
}
.mcfg-nav-item:hover {
background: color-mix(in srgb, var(--p-primary-color) 12%, transparent);
@@ -815,17 +834,36 @@ function resetCores() {
width: 16px;
text-align: center;
color: var(--m-text-muted);
font-size: 0.82rem;
font-size: 0.85rem;
flex-shrink: 0;
}
.mcfg-nav-item__label {
.mcfg-nav-item__text {
flex: 1;
min-width: 0;
font-weight: 500;
display: flex;
flex-direction: column;
gap: 1px;
}
.mcfg-nav-item__label {
font-size: 0.84rem;
font-weight: 600;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mcfg-nav-item__desc {
font-size: 0.7rem;
color: var(--m-text-muted);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mcfg-nav-item:hover .mcfg-nav-item__desc,
.mcfg-nav-item.is-active .mcfg-nav-item__desc {
color: color-mix(in srgb, var(--p-primary-color) 70%, var(--m-text-muted));
}
/* ═════ COL 2: Main ═════ */
.mcfg-main {