From 701d1305d3d1a885de814018fcee2baa0e62b0ea Mon Sep 17 00:00:00 2001 From: Harvey Tindall Date: Fri, 13 Oct 2023 15:51:51 +0100 Subject: [PATCH] settings: non-match search result have transparency Matches have 100% opacity, non-matches have 50. Looks better than the aside thing, doesn't break anything. --- ts/modules/settings.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/ts/modules/settings.ts b/ts/modules/settings.ts index 32b6970..b5a9b23 100644 --- a/ts/modules/settings.ts +++ b/ts/modules/settings.ts @@ -123,9 +123,9 @@ class DOMInput { if (setting.depends_false) { state = false; } document.addEventListener(`settings-${dependant[0]}-${dependant[1]}`, (event: settingsBoolEvent) => { if (Boolean(event.detail) !== state) { - this._input.parentElement.parentElement.classList.add("unfocused"); + this._input.parentElement.classList.add("unfocused"); } else { - this._input.parentElement.parentElement.classList.remove("unfocused"); + this._input.parentElement.classList.remove("unfocused"); } }); } @@ -882,7 +882,9 @@ export class settingsList { if (this._settings.sections[section].settings[setting].type == "note") continue; const element = sectionElement.querySelector(`div[data-name="${setting}"]`) as HTMLElement; // FIXME: Make this look better, stop it cutting of the top of tooltips - element.classList.remove("-mx-2", "my-2", "p-2", "aside", "~neutral", "@low"); + // element.classList.remove("-mx-2", "my-2", "p-2", "aside", "~neutral", "@low"); + element.classList.add("opacity-50", "pointer-events-none"); + element.setAttribute("aria-disabled", "true"); if (setting.toLowerCase().includes(query) || this._settings.sections[section].settings[setting].name.toLowerCase().includes(query) || this._settings.sections[section].settings[setting].description.toLowerCase().includes(query) || @@ -896,7 +898,9 @@ export class settingsList { !(this._settings.sections[section].settings[setting].advanced))) { // FIXME: Make this look better, stop it cutting of the top of tooltips - element.classList.add("-mx-2", "my-2", "p-2", "aside", "~neutral", "@low"); + // element.classList.add("-mx-2", "my-2", "p-2", "aside", "~neutral", "@low"); + element.classList.remove("opacity-50", "pointer-events-none"); + element.setAttribute("aria-disabled", "false"); } } }