sansguidon/snippets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change(miniflux) filters colors should align with content

Browse Source
This commit is contained in:
SansGuidon 2025-05-08 07:21:08 +00:00
parent a89696f8b6
commit a1945a98e6
1 changed files with 37 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
miniflux_scripts/entries_duration_filter.js
View File

@ -30,43 +30,57 @@
document.querySelectorAll('article.item.entry-item').forEach(entry => { document.querySelectorAll('article.item.entry-item').forEach(entry => {
const mins = parseMinutes(entry.querySelector('.item-meta-info-reading-time span')); const mins = parseMinutes(entry.querySelector('.item-meta-info-reading-time span'));
if (mins !== null) { if (mins === null) return;
if (mins <= SHORT_MAX) { if (mins <= SHORT_MAX) {
stylize(entry, { stylize(entry, {
bg: 'rgb(37, 44, 39)', bg: 'rgb(37, 44, 39)',
border: 'rgb(79, 194, 20)', border: 'rgb(79, 194, 20)',
hoverBorder: 'rgb(129, 255, 50)', hoverBorder: 'rgb(129, 255, 50)',
hoverGlow: 'rgba(129, 255, 50, .8)', hoverGlow: 'rgba(129, 255, 50, .8)',
}); });
entry.dataset.readCategory = 'short'; entry.dataset.readCategory = 'short';
} else if (mins >= LONG_MIN) { } else if (mins >= LONG_MIN) {
stylize(entry, { stylize(entry, {
bg: 'rgb(44, 39, 37)', bg: 'rgb(44, 39, 37)',
border: 'rgb(194, 79, 20)', border: 'rgb(194, 79, 20)',
hoverBorder: 'rgb(255, 129, 50)', hoverBorder: 'rgb(255, 129, 50)',
hoverGlow: 'rgba(255, 129, 50, .8)', hoverGlow: 'rgba(255, 129, 50, .8)',
}); });
entry.dataset.readCategory = 'long'; entry.dataset.readCategory = 'long';
}
} }
}); });
function addFilter(label, category) { function addFilter(label, category) {
const nav = document.querySelector('.page-header nav ul'); const nav = document.querySelector('.page-header nav ul');
if (!nav) return; const entries = document.querySelectorAll('article.item.entry-item');
if (!nav || entries.length === 0) return; // no content -> no button
const mapping = {
short: { border: 'rgb(79, 194, 20)', bg: 'rgb(37, 44, 39)' },
long: { border: 'rgb(194, 79, 20)', bg: 'rgb(44, 39, 37)' },
all: { border: '#ccc', bg: '#ccc' },
};
const m = mapping[category];
const btn = document.createElement('button'); const btn = document.createElement('button');
btn.textContent = `Filter: ${label}`; btn.textContent = `Filter: ${label}`;
Object.assign(btn.style, { Object.assign(btn.style, {
marginLeft: '10px', marginLeft: '10px',
padding: '5px 10px', padding: '5px 10px',
border: '1px solid rgb(79, 194, 20)', border: `1px solid ${m.border}`,
borderRadius: '5px', borderRadius: '5px',
backgroundColor: 'rgb(37, 44, 39)', backgroundColor: m.bg,
color: '#fff', color: category === 'all' ? '#000' : '#fff',
cursor: 'pointer', cursor: 'pointer',
}); });
btn.addEventListener('mouseover', () => {
btn.style.borderColor = category === 'all' ? '#999' : m.border;
});
btn.addEventListener('mouseout', () => {
btn.style.borderColor = m.border;
});
btn.onclick = () => { btn.onclick = () => {
document.querySelectorAll('article.item.entry-item').forEach(e => { entries.forEach(e => {
e.style.display = (category === 'all' || e.dataset.readCategory === category) ? '' : 'none'; e.style.display = (category === 'all' || e.dataset.readCategory === category) ? '' : 'none';
}); });
}; };