perco/HouseHub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(liste): couleur appliquée sur tout le tab (pas juste un point)
Deploy HouseHub / deploy (push) Successful in 2s
Details

Browse Source 
- Tab actif coloré : background + border = couleur choisie, texte blanc
- Tab inactif coloré : border + texte = couleur choisie
- Suppression du .liste-tab-dot inutilisé

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
perco
2026-05-19 22:08:42 +02:00
co-authored by Claude Sonnet 4.6
parent 7b294f300a
commit 6bbee271e3
2 changed files with 15 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/liste/assets/liste.css
+1 -8
View File
@@ -435,15 +435,8 @@
} }
.liste-color-swatch-none.active { outline-color: var(--primary, #4361ee); } .liste-color-swatch-none.active { outline-color: var(--primary, #4361ee); }
/* ── Tab dot + type emoji ──────────────────────────────────────────────────── */ /* ── Tab type emoji ────────────────────────────────────────────────────────── */
.liste-tab-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
display: inline-block;
}
.liste-tab-type { font-size: .85rem; line-height: 1; } .liste-tab-type { font-size: .85rem; line-height: 1; }
/* ── Category section headers ──────────────────────────────────────────────── */ /* ── Category section headers ──────────────────────────────────────────────── */
modules/liste/assets/liste.js
+14 -5
View File
@@ -253,22 +253,31 @@ function renderTabs() {
container.innerHTML = ''; container.innerHTML = '';
state.lists.forEach(list => { state.lists.forEach(list => {
const isActive = list.id === state.currentListId;
const tab = document.createElement('div'); const tab = document.createElement('div');
tab.className = 'liste-tab' + (list.id === state.currentListId ? ' active' : ''); tab.className = 'liste-tab' + (isActive ? ' active' : '');
tab.dataset.id = list.id; tab.dataset.id = list.id;
const dot = list.color ? `<span class="liste-tab-dot" style="background:${esc(list.color)}"></span>` : ''; // Apply custom color to entire tab
if (list.color) {
if (isActive) {
tab.style.cssText = `background:${list.color};border-color:${list.color};color:#fff`;
} else {
tab.style.cssText = `border-color:${list.color};color:${list.color}`;
}
}
const emoji = typeEmoji(list.list_type); const emoji = typeEmoji(list.list_type);
const prefix = emoji ? `<span class="liste-tab-type">${emoji}</span>` : ''; const prefix = emoji ? `<span class="liste-tab-type">${emoji}</span>` : '';
if (list.id === state.currentListId) { if (isActive) {
tab.innerHTML = ` tab.innerHTML = `
${dot}${prefix} ${prefix}
<span class="liste-tab-name">${esc(list.name)}</span> <span class="liste-tab-name">${esc(list.name)}</span>
<button class="liste-tab-btn liste-tab-edit" title="Modifier" data-id="${list.id}">✏</button> <button class="liste-tab-btn liste-tab-edit" title="Modifier" data-id="${list.id}">✏</button>
`; `;
} else { } else {
tab.innerHTML = `${dot}${prefix}<span class="liste-tab-name">${esc(list.name)}</span>`; tab.innerHTML = `${prefix}<span class="liste-tab-name">${esc(list.name)}</span>`;
tab.addEventListener('click', () => switchList(list.id)); tab.addEventListener('click', () => switchList(list.id));
} }
container.appendChild(tab); container.appendChild(tab);