diff --git a/lang/admin/en-us.json b/lang/admin/en-us.json index e22efe8..a61318b 100644 --- a/lang/admin/en-us.json +++ b/lang/admin/en-us.json @@ -83,6 +83,9 @@ "settingsRefreshPage": "Refresh the page in a few seconds.", "settingsRequiredOrRestartMessage": "Note: {n} indicates a required field, {n} indicates changes require a restart.", "settingsSave": "Save", + "settingsHiddenDependency": "Matching settings are hidden because they depend on the value of another setting:", + "settingsDependsOn": "{setting}: Depends on {dependency}", + "settingsAdvancedMode": "{setting}: Advanced Settings must be enabled", "ombiProfile": "Ombi user profile", "ombiUserDefaultsDescription": "Create an Ombi user and configure it, then select it below. It's settings/permissions will be stored and applied to new Ombi users created by jfa-go when this profile is selected.", "userProfiles": "User Profiles", diff --git a/ts/modules/settings.ts b/ts/modules/settings.ts index b5a9b23..22d7f53 100644 --- a/ts/modules/settings.ts +++ b/ts/modules/settings.ts @@ -550,7 +550,7 @@ class sectionPanel { this._section.setAttribute("data-section", sectionName); this._section.innerHTML = ` ${s.meta.name} -
${s.meta.description}
+${s.meta.description}
`; this.update(s); @@ -866,6 +866,12 @@ export class settingsList { let firstVisibleSection = ""; for (let section of this._settings.order) { + + let dependencyCard = this._sections[section].asElement().querySelector(".settings-dependency-message"); + if (dependencyCard) dependencyCard.remove(); + dependencyCard = null; + let dependencyList = null; + // hide button, unhide if matched this._buttons[section].classList.add("unfocused"); @@ -881,7 +887,7 @@ export class settingsList { for (let setting of this._settings.sections[section].order) { 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.add("opacity-50", "pointer-events-none"); element.setAttribute("aria-disabled", "true"); @@ -893,15 +899,46 @@ export class settingsList { this._buttons[section].classList.remove("unfocused"); firstVisibleSection = firstVisibleSection || section; } - if (query != "" && - ((this._settings.sections[section].settings[setting].advanced && this._advanced) || - !(this._settings.sections[section].settings[setting].advanced))) { - - // FIXME: Make this look better, stop it cutting of the top of tooltips + const shouldShow = (query != "" && + ((this._settings.sections[section].settings[setting].advanced && this._advanced) || + !(this._settings.sections[section].settings[setting].advanced))); + if (shouldShow) { // 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"); } + if ((shouldShow && element.querySelector("label").classList.contains("unfocused")) || (!shouldShow)) { + // Add a note explaining why the setting is hidden + if (!dependencyCard) { + dependencyCard = document.createElement("aside"); + dependencyCard.classList.add("aside", "my-2", "~warning", "settings-dependency-message"); + dependencyCard.innerHTML = ` +