mikros/rust
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Put back interactions with settings menus

Browse Source
This commit is contained in:
Guillaume Gomez 2024-08-14 16:40:00 +02:00
parent f2193c680c
commit aeb548a4f7
3 changed files with 91 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
util/gh-pages/index_template.html
View File

@ -27,7 +27,7 @@ Otherwise, have a great day =^.^=
</head> </head>
<body> <body>
<div id="settings-dropdown"> <div id="settings-dropdown">
<div class="settings-icon" tabindex="-1"></div> <button class="settings-icon" tabindex="-1"></button>
<div class="settings-menu" tabindex="-1"> <div class="settings-menu" tabindex="-1">
<div class="setting-radio-name">Theme</div> <div class="setting-radio-name">Theme</div>
<select id="theme-choice" onchange="setTheme(this.value, true)"> <select id="theme-choice" onchange="setTheme(this.value, true)">
@ -59,88 +59,62 @@ Otherwise, have a great day =^.^=
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-body row"> <div class="panel-body row">
<div id="upper-filters" class="col-12 col-md-5"> <div id="upper-filters" class="col-12 col-md-5">
<div class="btn-group"> <div class="btn-group" id="lint-levels" tabindex="-1">
<button type="button" class="btn btn-default dropdown-toggle"> <button type="button" class="btn btn-default dropdown-toggle">
Lint levels <span class="badge" id="selected-levels">4</span> <span class="caret"></span> Lint levels <span class="badge" id="selected-levels">4</span> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu" id="lint-levels"> <ul class="dropdown-menu" id="lint-levels-selector">
<li class="checkbox"> <li class="checkbox">
<label onclick="toggleLevels(true)"> <button onclick="toggleElements(this, true)">All</button>
<input type="checkbox" class="invisible" />
All
</label>
</li> </li>
<li class="checkbox"> <li class="checkbox">
<label onclick="toggleLevels(false)"> <button onclick="toggleElements(this, false)">None</button>
<input type="checkbox" class="invisible" />
None
</label>
</li> </li>
<li role="separator" class="divider"></li> <li role="separator" class="divider"></li>
</ul> </ul>
</div> </div>
<div class="btn-group"> <div class="btn-group" id="lint-groups" tabindex="-1">
<button type="button" class="btn btn-default dropdown-toggle"> <button type="button" class="btn btn-default dropdown-toggle">
Lint groups <span class="badge" id="selected-groups"></span> <span class="caret"></span> Lint groups <span class="badge" id="selected-groups"></span> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu" id="lint-groups"> <ul class="dropdown-menu" id="lint-groups-selector">
<li class="checkbox"> <li class="checkbox">
<label onclick="toggleGroups(true)"> <button onclick="toggleElements(this, true)">All</button>
<input type="checkbox" class="invisible" />
All
</label>
</li> </li>
<li class="checkbox"> <li class="checkbox">
<label onclick="resetGroupsToDefault()"> <button onclick="resetGroupsToDefault()">Default</button>
<input type="checkbox" class="invisible" />
Default
</label>
</li> </li>
<li class="checkbox"> <li class="checkbox">
<label onclick="toggleGroups(false)"> <button onclick="toggleElements(this, false)">None</button>
<input type="checkbox" class="invisible" />
None
</label>
</li> </li>
<li role="separator" class="divider"></li> <li role="separator" class="divider"></li>
</ul> </ul>
</div> </div>
<div id="version-filter"> <div class="btn-group" id="version-filter" tabindex="-1">
<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle">
<button type="button" class="btn btn-default dropdown-toggle"> Version
Version <span id="version-filter-count" class="badge">0</span>
<span id="version-filter-count" class="badge">0</span> <span class="caret"></span>
<span class="caret"></span> </button>
</button> <ul id="version-filter-selector" class="dropdown-menu">
<ul id="version-filter-selector" class="dropdown-menu"> <li class="checkbox">
<li class="checkbox"> <button onclick="clearVersionFilters()">Clear filters</button>
<label onclick="clearVersionFilters()"> </li>
<input type="checkbox" class="invisible" /> <li role="separator" class="divider"></li>
Clear filters </ul>
</label>
</li>
<li role="separator" class="divider"></li>
</ul>
</div>
</div> </div>
<div class="btn-group"> <div class="btn-group", id="lint-applicabilities" tabindex="-1">
<button type="button" class="btn btn-default dropdown-toggle"> <button type="button" class="btn btn-default dropdown-toggle">
Applicability Applicability
<span class="badge"></span> <span class="badge"></span>
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu" id="lint-applicabilities"> <ul class="dropdown-menu" id="lint-applicabilities-selector">
<li class="checkbox"> <li class="checkbox">
<label onclick="toggleApplicabilities(true)"> <button onclick="toggleElements(this, true)">All</button>
<input type="checkbox" class="invisible" />
All
</label>
</li> </li>
<li class="checkbox"> <li class="checkbox">
<label onclick="toggleApplicabilities(false)"> <button onclick="toggleElements(this, false)">None</button>
<input type="checkbox" class="invisible" />
None
</label>
</li> </li>
<li role="separator" class="divider"></li> <li role="separator" class="divider"></li>
</ul> </ul>

85
util/gh-pages/script.js
View File

@ -151,6 +151,14 @@ function handleShortcut(ev) {
document.addEventListener("keypress", handleShortcut); document.addEventListener("keypress", handleShortcut);
document.addEventListener("keydown", handleShortcut); document.addEventListener("keydown", handleShortcut);
function toggleElements(element, value) {
// `element` is always a button in a `li` in a `ul`. We want the `input` in the `ul`.
onEachLazy(
element.parentElement.parentElement.getElementsByTagName("input"),
el => el.checked = value,
);
}
function changeSetting(elem) { function changeSetting(elem) {
if (elem.id === "disable-shortcuts") { if (elem.id === "disable-shortcuts") {
disableShortcuts = elem.checked; disableShortcuts = elem.checked;
@ -211,8 +219,8 @@ function copyToClipboard(event) {
resetClipboardTimeout = setTimeout(resetClipboard, 1000); resetClipboardTimeout = setTimeout(resetClipboard, 1000);
} }
function handleBlur(event) { function handleBlur(event, elementId) {
const parent = document.getElementById("settings-dropdown"); const parent = document.getElementById(elementId);
if (!parent.contains(document.activeElement) && if (!parent.contains(document.activeElement) &&
!parent.contains(event.relatedTarget) !parent.contains(event.relatedTarget)
) { ) {
@ -227,6 +235,30 @@ function toggleExpansion(expand) {
); );
} }
function clearVersionFilters() {
onEachLazy(document.querySelectorAll("#version-filter-count input"), el => el.value = "");
}
const GROUPS_FILTER_DEFAULT = {
cargo: true,
complexity: true,
correctness: true,
deprecated: false,
nursery: true,
pedantic: true,
perf: true,
restriction: true,
style: true,
suspicious: true,
};
function resetGroupsToDefault() {
onEachLazy(document.querySelectorAll("#lint-groups-selector input"), el => {
const key = el.getAttribute("data-value");
el.checked = GROUPS_FILTER_DEFAULT[key];
});
}
function generateListOfOptions(list, elementId) { function generateListOfOptions(list, elementId) {
let html = ''; let html = '';
let nbEnabled = 0; let nbEnabled = 0;
@ -235,7 +267,7 @@ function generateListOfOptions(list, elementId) {
html += `\ html += `\
<li class="checkbox">\ <li class="checkbox">\
<label class="text-capitalize">\ <label class="text-capitalize">\
<input type="checkbox"${attr}/>${key}\ <input type="checkbox" data-value="${key}"${attr}/>${key}\
</label>\ </label>\
</li>`; </li>`;
if (value) { if (value) {
@ -243,39 +275,33 @@ function generateListOfOptions(list, elementId) {
} }
} }
const elem = document.getElementById(elementId); const elem = document.getElementById(`${elementId}-selector`);
elem.previousElementSibling.querySelector(".badge").innerText = `${nbEnabled}`; elem.previousElementSibling.querySelector(".badge").innerText = `${nbEnabled}`;
elem.innerHTML += html; elem.innerHTML += html;
setupDropdown(elementId);
}
function setupDropdown(elementId) {
const elem = document.getElementById(elementId);
const button = document.querySelector(`#${elementId} > button`);
button.onclick = () => elem.classList.toggle("open");
const setBlur = child => {
child.onblur = event => handleBlur(event, elementId);
};
onEachLazy(elem.children, setBlur);
onEachLazy(elem.querySelectorAll("input"), setBlur);
onEachLazy(elem.querySelectorAll("ul button"), setBlur);
} }
function generateSettings() { function generateSettings() {
const settings = document.getElementById("settings-dropdown"); setupDropdown("settings-dropdown");
const settingsButton = settings.querySelector(".settings-icon")
settingsButton.onclick = () => settings.classList.toggle("open");
settingsButton.onblur = handleBlur;
const settingsMenu = settings.querySelector(".settings-menu");
settingsMenu.onblur = handleBlur;
onEachLazy(
settingsMenu.querySelectorAll("input"),
el => el.onblur = handleBlur,
);
const LEVEL_FILTERS_DEFAULT = {allow: true, warn: true, deny: true, none: true}; const LEVEL_FILTERS_DEFAULT = {allow: true, warn: true, deny: true, none: true};
generateListOfOptions(LEVEL_FILTERS_DEFAULT, "lint-levels"); generateListOfOptions(LEVEL_FILTERS_DEFAULT, "lint-levels");
// Generate lint groups. // Generate lint groups.
const GROUPS_FILTER_DEFAULT = {
cargo: true,
complexity: true,
correctness: true,
deprecated: false,
nursery: true,
pedantic: true,
perf: true,
restriction: true,
style: true,
suspicious: true,
};
generateListOfOptions(GROUPS_FILTER_DEFAULT, "lint-groups"); generateListOfOptions(GROUPS_FILTER_DEFAULT, "lint-groups");
const APPLICABILITIES_FILTER_DEFAULT = { const APPLICABILITIES_FILTER_DEFAULT = {
@ -287,12 +313,6 @@ function generateSettings() {
}; };
generateListOfOptions(APPLICABILITIES_FILTER_DEFAULT, "lint-applicabilities"); generateListOfOptions(APPLICABILITIES_FILTER_DEFAULT, "lint-applicabilities");
const VERSIONS_FILTERS = {
"≥": {enabled: false, minorVersion: null },
"≤": {enabled: false, minorVersion: null },
"=": {enabled: false, minorVersion: null },
};
let html = ''; let html = '';
for (const kind of ["≥", "≤", "="]) { for (const kind of ["≥", "≤", "="]) {
html += `\ html += `\
@ -309,6 +329,7 @@ function generateSettings() {
</li>`; </li>`;
} }
document.getElementById("version-filter-selector").innerHTML += html; document.getElementById("version-filter-selector").innerHTML += html;
setupDropdown("version-filter");
} }
function generateSearch() { function generateSearch() {

14
util/gh-pages/style.css
View File

@ -272,8 +272,6 @@ L4.75,12h2.5l0.5393066-2.1572876 c0.2276001-0.1062012,0.4459839-0.2269287,0.649
height: 18px; height: 18px;
display: block; display: block;
filter: invert(0.7); filter: invert(0.7);
padding-left: 4px;
padding-top: 3px;
} }
.settings-menu * { .settings-menu * {
@ -329,6 +327,18 @@ L4.75,12h2.5l0.5393066-2.1572876 c0.2276001-0.1062012,0.4459839-0.2269287,0.649
display: flex; display: flex;
} }
ul.dropdown-menu li.checkbox > button {
border: 0;
width: 100%;
background: var(--theme-popup-bg);
color: var(--fg);
}
ul.dropdown-menu li.checkbox > button:hover {
background: var(--theme-hover);
box-shadow: none;
}
#version-filter { #version-filter {
min-width: available; min-width: available;
} }