hrfee/jfa-go
1
0
Fork 0
mirror of https://github.com/hrfee/jfa-go.git synced 2024-12-22 17:10:10 +00:00
Code Issues Projects Releases Wiki Activity

settings: hidden items in search explained

Browse Source 
if a matched setting is hidden, an aside card will show explaining why,
    eitherbecause advanced settings is not enabled or because it depends
    on another setting.
This commit is contained in:
Harvey Tindall 2023-10-13 19:07:41 +01:00
parent 701d1305d3
commit 6909477f45
Signed by: hrfee
GPG Key ID: BBC65952848FB1A2
2 changed files with 47 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
lang/admin/en-us.json
View File

@ -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",

49
ts/modules/settings.ts
View File

@ -550,7 +550,7 @@ class sectionPanel {
this._section.setAttribute("data-section", sectionName);
this._section.innerHTML = `
<span class="heading">${s.meta.name}</span>
<p class="support lg my-2">${s.meta.description}</p>
<p class="support lg my-2 settings-section-description">${s.meta.description}</p>
`;
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 != "" &&
const shouldShow = (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
!(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 = `
<div class="content text-sm">
<span class="font-bold">${window.lang.strings("settingsHiddenDependency")}</span>
<ul class="settings-dependency-list"></ul>
</div>
`;
dependencyList = dependencyCard.querySelector(".settings-dependency-list") as HTMLUListElement;
// Insert it right after the description
this._sections[section].asElement().insertBefore(dependencyCard, this._sections[section].asElement().querySelector(".settings-section-description").nextElementSibling);
}
const li = document.createElement("li");
if (shouldShow) {
const depCode = this._settings.sections[section].settings[setting].depends_true || this._settings.sections[section].settings[setting].depends_false;
const dep = splitDependant(section, depCode);
let depName = this._settings.sections[dep[0]].settings[dep[1]].name;
if (dep[0] != section) {
depName = this._settings.sections[dep[0]].meta.name + " > " + depName;
}
li.textContent = window.lang.strings("settingsDependsOn").replace("{setting}", `"`+this._settings.sections[section].settings[setting].name+`"`).replace("{dependency}", `"`+depName+`"`);
} else {
li.textContent = window.lang.strings("settingsAdvancedMode").replace("{setting}", `"`+this._settings.sections[section].settings[setting].name+`"`);
}
dependencyList.appendChild(li);
}
}
}
}