Move delete button to the select/deselect row (#50)

* Move "Delete selected" button to select/deselect row

Addresses #48: the warning-red delete button next to the lighter-red
"Update properties" CTA drew the eye toward delete and made update
look inactive. Move delete to the Select all / Deselect all row,
left-justified, with the same styling as the sibling buttons.

* Let selection row span full modal width

The "Delete selected" button was only pushed left within the right
half of the row. Hide the empty .setting-item-info on this row so the
control area spans the modal, letting margin-right: auto put Delete at
the left edge while Select all / Deselect all stay on the right.
This commit is contained in:
Gary Ritchie 2026-04-22 20:17:33 -06:00 committed by GitHub
parent 4d53ba0e27
commit eaf24746b3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 18 additions and 14 deletions

View file

@ -182,7 +182,14 @@ export class BulkEditModal extends Modal {
});
}
new Setting(contentEl)
const selectionRow = new Setting(contentEl)
.addButton(btn => {
btn.setButtonText("Delete selected").onClick(() => {
void this.doDelete();
});
this.deleteBtn = btn.buttonEl;
this.deleteBtn.addClass("bulk-properties-delete-btn");
})
.addButton(btn => {
btn.setButtonText("Select all").onClick(() => {
void this.bulkSetSelection(true);
@ -195,6 +202,7 @@ export class BulkEditModal extends Modal {
});
this.deselectAllBtn = btn.buttonEl;
});
selectionRow.settingEl.addClass("bulk-properties-selection-row");
const editableProperties = settings.properties.filter(p => p.name !== settings.selectionProperty);
const hasEditableProperties = editableProperties.length > 0;
@ -249,20 +257,8 @@ export class BulkEditModal extends Modal {
updateToggleAriaChecked(toggle, value);
});
});
}
const footer = new Setting(contentEl)
.addButton(btn => {
btn
.setButtonText("Delete selected notes")
.setWarning()
.onClick(() => {
void this.doDelete();
});
this.deleteBtn = btn.buttonEl;
});
if (hasEditableProperties) {
footer.addButton(btn => {
new Setting(contentEl).addButton(btn => {
btn
.setButtonText("Update properties")
.setCta()

View file

@ -43,6 +43,14 @@
margin-left: var(--size-4-2);
}
.bulk-properties-selection-row .setting-item-info {
display: none;
}
.bulk-properties-delete-btn {
margin-right: auto;
}
.bulk-properties-value-container {
padding-bottom: var(--size-4-3);
}