|
/** |
|
* ============================================================================ |
|
* KANBAN FORCE - HIGHLIGHT (V11 - CONTRASTE PERFEITO) |
|
* ============================================================================ |
|
* * Correção V11: Ajuste de cores para leitura no Modo Escuro. |
|
* * - Modo Claro: Fundo Amarelo Pastel (#fff9c4) + Texto Preto (#000). |
|
* * - Modo Escuro: Fundo Ouro Profundo (#2b2500) + Texto Branco (#fff). |
|
* * Isso garante contraste máximo e evita que o texto fique "apagado". |
|
* ============================================================================ |
|
*/ |
|
|
|
(function highlightCardsV11() { |
|
// --- 1. Configurações --- |
|
const HIGHLIGHT_CLASS = 'kf-highlight-final'; |
|
const STYLE_ID = 'kf-highlight-style-v11'; |
|
|
|
let input = prompt("Destacar cards com MENOS de quantos dias?", "2"); |
|
let limitDays = parseInt(input, 10); |
|
if (isNaN(limitDays) || limitDays < 0) limitDays = 1; |
|
|
|
// --- 2. CSS com Variáveis de Texto e Fundo --- |
|
const oldStyle = document.getElementById(STYLE_ID); |
|
if (oldStyle) oldStyle.remove(); |
|
|
|
const css = ` |
|
/* === VARIÁVEIS (PADRÃO / CLARO) === */ |
|
:root { |
|
--kf-hl-bg: #fff9c4; /* Amarelo Pastel */ |
|
--kf-hl-text: #000000; /* Texto Preto (Contraste Alto) */ |
|
--kf-hl-border: #ff0000; |
|
} |
|
|
|
/* === REGRAS PARA MODO ESCURO (DATA-THEME) === */ |
|
body[data-theme='dark'] { |
|
--kf-hl-bg: #362f00; /* Ouro/Oliva Muito Escuro (Fundo) */ |
|
--kf-hl-text: #ffffff; /* Texto Branco Puro (Leitura fácil) */ |
|
--kf-hl-border: #ff3333; /* Vermelho um pouco mais claro para brilhar no escuro */ |
|
} |
|
|
|
/* === APLICAÇÃO NOS CARDS === */ |
|
app-kanbanforce-card.${HIGHLIGHT_CLASS} ion-card { |
|
background-color: var(--kf-hl-bg) !important; |
|
--background: var(--kf-hl-bg) !important; |
|
color: var(--kf-hl-text) !important; /* Força a cor do texto para garantir leitura */ |
|
transition: background-color 0.3s ease, color 0.3s ease; |
|
} |
|
|
|
/* Garante que titulos e textos dentro do card herdem a cor forçada */ |
|
app-kanbanforce-card.${HIGHLIGHT_CLASS} ion-card * { |
|
color: var(--kf-hl-text) !important; |
|
} |
|
|
|
/* Borda do container */ |
|
app-kanbanforce-card.${HIGHLIGHT_CLASS} .card-container { |
|
border: 3px solid var(--kf-hl-border) !important; |
|
border-radius: 8px; |
|
box-sizing: border-box; |
|
} |
|
`; |
|
|
|
const styleEl = document.createElement('style'); |
|
styleEl.id = STYLE_ID; |
|
styleEl.innerHTML = css; |
|
document.head.appendChild(styleEl); |
|
|
|
// --- 3. Execução (Lógica de Tempo) --- |
|
console.log(`🔎 Marcando cards com < ${limitDays} dias...`); |
|
const cards = document.querySelectorAll('app-kanbanforce-card'); |
|
let count = 0; |
|
|
|
cards.forEach(card => { |
|
try { |
|
// Reset |
|
card.classList.remove(HIGHLIGHT_CLASS); |
|
const container = card.querySelector('.card-container'); |
|
const inner = card.querySelector('ion-card'); |
|
if(container) container.style.border = ''; |
|
if(inner) { |
|
inner.style.backgroundColor = ''; |
|
inner.style.removeProperty('--background'); |
|
inner.style.removeProperty('color'); // Reseta cor do texto |
|
} |
|
|
|
// Busca Tempo |
|
const rows = Array.from(card.querySelectorAll('.card-row')); |
|
const timeRow = rows.find(row => { |
|
const title = row.querySelector('.cycle-time-title'); |
|
return title && title.innerText.toLowerCase().includes('tempo na coluna'); |
|
}); |
|
|
|
if (!timeRow) return; |
|
|
|
const timeValComponent = timeRow.querySelector('app-card-cycle-time ion-col'); |
|
if (!timeValComponent) return; |
|
const timeText = timeValComponent.innerText.trim(); |
|
|
|
// Valida Regra |
|
let shouldHighlight = false; |
|
if (timeText === '-' || timeText === '') { |
|
shouldHighlight = false; |
|
} else if (timeText.includes('d')) { |
|
const daysMatch = timeText.match(/(\d+)\s*d/i); |
|
if (daysMatch) { |
|
const days = parseInt(daysMatch[1], 10); |
|
if (days < limitDays) shouldHighlight = true; |
|
} |
|
} else { |
|
shouldHighlight = true; |
|
} |
|
|
|
// Aplica Classe |
|
if (shouldHighlight) { |
|
card.classList.add(HIGHLIGHT_CLASS); |
|
count++; |
|
} |
|
|
|
} catch (err) { |
|
console.error(err); |
|
} |
|
}); |
|
|
|
console.log(`✅ Concluído! ${count} cards marcados.`); |
|
})(); |
