Merge pull request #100 from wagesj45/codex/wrap-controls-into-hidden-sections-with-buttons

Add toggle buttons for rule conditions
This commit is contained in:
Jordan Wages 2025-07-16 00:18:06 -05:00 committed by GitHub
commit bed1bbfd70
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -282,6 +282,30 @@ document.addEventListener('DOMContentLoaded', async () => {
return row; return row;
} }
function createConditionButton(label, sectionEl, checkbox) {
const btn = document.createElement('button');
btn.type = 'button';
btn.className = 'button is-small is-light';
btn.textContent = label;
let active = checkbox ? checkbox.checked : sectionEl && !sectionEl.classList.contains('is-hidden');
function update() {
btn.classList.toggle('is-info', active);
if (sectionEl) sectionEl.classList.toggle('is-hidden', !active);
if (checkbox) checkbox.checked = active;
}
btn.addEventListener('click', () => {
active = !active;
markDirty();
update();
});
update();
return btn;
}
function renderRules(rules = []) { function renderRules(rules = []) {
ruleCountEl.textContent = rules.length; ruleCountEl.textContent = rules.length;
rulesContainer.innerHTML = ''; rulesContainer.innerHTML = '';
@ -391,7 +415,7 @@ document.addEventListener('DOMContentLoaded', async () => {
addAction.addEventListener('click', () => actionsContainer.appendChild(createActionRow())); addAction.addEventListener('click', () => actionsContainer.appendChild(createActionRow()));
const stopLabel = document.createElement('label'); const stopLabel = document.createElement('label');
stopLabel.className = 'checkbox mt-2'; stopLabel.className = 'checkbox mt-2 is-hidden';
const stopCheck = document.createElement('input'); const stopCheck = document.createElement('input');
stopCheck.type = 'checkbox'; stopCheck.type = 'checkbox';
stopCheck.className = 'stop-processing'; stopCheck.className = 'stop-processing';
@ -400,7 +424,7 @@ document.addEventListener('DOMContentLoaded', async () => {
stopLabel.append(' Stop after match'); stopLabel.append(' Stop after match');
const unreadLabel = document.createElement('label'); const unreadLabel = document.createElement('label');
unreadLabel.className = 'checkbox mt-2 ml-4'; unreadLabel.className = 'checkbox mt-2 ml-4 is-hidden';
const unreadCheck = document.createElement('input'); const unreadCheck = document.createElement('input');
unreadCheck.type = 'checkbox'; unreadCheck.type = 'checkbox';
unreadCheck.className = 'unread-only'; unreadCheck.className = 'unread-only';
@ -409,7 +433,7 @@ document.addEventListener('DOMContentLoaded', async () => {
unreadLabel.append(' Only apply to unread messages'); unreadLabel.append(' Only apply to unread messages');
const ageBox = document.createElement('div'); const ageBox = document.createElement('div');
ageBox.className = 'field is-grouped mt-2'; ageBox.className = 'field is-grouped mt-2 is-hidden';
const minInput = document.createElement('input'); const minInput = document.createElement('input');
minInput.type = 'number'; minInput.type = 'number';
minInput.placeholder = 'Min days'; minInput.placeholder = 'Min days';
@ -426,7 +450,7 @@ document.addEventListener('DOMContentLoaded', async () => {
ageBox.appendChild(maxInput); ageBox.appendChild(maxInput);
const acctBox = document.createElement('div'); const acctBox = document.createElement('div');
acctBox.className = 'field mt-2'; acctBox.className = 'field mt-2 is-hidden';
const acctLabel = document.createElement('label'); const acctLabel = document.createElement('label');
acctLabel.className = 'label'; acctLabel.className = 'label';
acctLabel.textContent = 'Accounts'; acctLabel.textContent = 'Accounts';
@ -450,7 +474,7 @@ document.addEventListener('DOMContentLoaded', async () => {
acctBox.appendChild(acctControl); acctBox.appendChild(acctControl);
const folderBox = document.createElement('div'); const folderBox = document.createElement('div');
folderBox.className = 'field mt-2'; folderBox.className = 'field mt-2 is-hidden';
const folderLabel = document.createElement('label'); const folderLabel = document.createElement('label');
folderLabel.className = 'label'; folderLabel.className = 'label';
folderLabel.textContent = 'Folders'; folderLabel.textContent = 'Folders';
@ -473,10 +497,37 @@ document.addEventListener('DOMContentLoaded', async () => {
folderBox.appendChild(folderLabel); folderBox.appendChild(folderLabel);
folderBox.appendChild(folderControl); folderBox.appendChild(folderControl);
if (typeof rule.minAgeDays === 'number' || typeof rule.maxAgeDays === 'number') {
ageBox.classList.remove('is-hidden');
}
if ((rule.accounts || []).length) {
acctBox.classList.remove('is-hidden');
}
if ((rule.folders || []).length) {
folderBox.classList.remove('is-hidden');
}
const condButtons = document.createElement('div');
condButtons.className = 'field is-grouped is-grouped-multiline mb-2';
function addCond(btn) {
const p = document.createElement('p');
p.className = 'control';
p.appendChild(btn);
condButtons.appendChild(p);
}
addCond(createConditionButton('Stop', null, stopCheck));
addCond(createConditionButton('Unread', null, unreadCheck));
addCond(createConditionButton('Age', ageBox));
addCond(createConditionButton('Accounts', acctBox));
addCond(createConditionButton('Folders', folderBox));
const body = document.createElement('div'); const body = document.createElement('div');
body.className = 'message-body'; body.className = 'message-body';
body.appendChild(actionsContainer); body.appendChild(actionsContainer);
body.appendChild(addAction); body.appendChild(addAction);
body.appendChild(condButtons);
body.appendChild(stopLabel); body.appendChild(stopLabel);
body.appendChild(unreadLabel); body.appendChild(unreadLabel);
body.appendChild(ageBox); body.appendChild(ageBox);