dmaax/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

LibWebView: Use existing CSS rules for advanced setting inputs

Browse source 
We already have classes to govern most of how the advanced settings were
trying to behave. More-so, the advanced settings checkboxes were placed
too central compared to all other settings, which are positioned further
to the right.
This commit is contained in:
Timothy Flynn 2026-05-26 15:26:58 -04:00 committed by Tim Flynn
parent 73a5c2a14c
commit fcc5f5917a
2 changed files with 28 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
Base/res/ladybird/about-pages/settings.html
View file

@ -59,7 +59,8 @@
.inline-container input[type="number"],
.inline-container input[type="text"],
.inline-container input[type="url"],
.inline-container select {
.inline-container select,
.inline-container textarea {
width: 50%;
}
@ -117,6 +118,10 @@
border: 1px solid var(--border-color);
}
textarea {
resize: vertical;
}
input[type="number"].success,
input[type="text"].success,
input[type="url"].success {
@ -281,19 +286,6 @@
width: 100%;
}
.config-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 20px;
align-items: center;
}
.config-row + .config-row {
border-top: 1px solid var(--border-color);
padding-top: 16px;
margin-top: 16px;
}
.config-name {
font-family: monospace;
font-size: 13px;
@ -307,32 +299,6 @@
font-size: 14px;
}
.config-control {
min-width: 180px;
}
.config-control input[type="text"],
.config-control input[type="number"],
.config-control textarea {
width: 100%;
}
.config-control textarea {
min-width: 280px;
resize: vertical;
}
@media (max-width: 600px) {
.config-row {
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
}
.config-control {
min-width: 0;
}
}
.tab-bar {
display: flex;
gap: 4px;
@ -598,7 +564,7 @@
<div class="card-group">
<input id="config-filter" type="search" placeholder="Filter configuration keys" />
</div>
<div id="config-list"></div>
<div class="card-group" id="config-list"></div>
</div>
</div>
</div>

41
Base/res/ladybird/about-pages/settings/advanced.js
View file

@ -9,23 +9,22 @@ function sendConfigVariableValue(variable, value) {
}
function createControl(variable) {
const control = document.createElement("div");
control.classList.add("config-control");
const type = variable.type === "array" && variable.elementType === "string" ? "textarea" : "input";
const input = document.createElement(type);
input.id = variable.name;
if (variable.type === "boolean") {
const input = document.createElement("input");
input.type = "checkbox";
input.toggleAttribute("switch", true);
input.switch = true;
input.checked = !!variable.value;
input.addEventListener("change", () => {
sendConfigVariableValue(variable, input.checked);
});
control.append(input);
return control;
return input;
}
if (variable.type === "array" && variable.elementType === "string") {
const input = document.createElement("textarea");
if (type === "textarea") {
input.rows = 3;
input.value = Array.isArray(variable.value) ? variable.value.join("\n") : "";
input.addEventListener("change", () => {
@ -36,11 +35,10 @@ function createControl(variable) {
sendConfigVariableValue(variable, value);
});
control.append(input);
return control;
return input;
}
const input = document.createElement("input");
input.value = variable.value ?? "";
if (variable.type === "number") {
@ -59,31 +57,34 @@ function createControl(variable) {
});
}
control.append(input);
return control;
return input;
}
function createRow(variable) {
const row = document.createElement("div");
row.classList.add("card-group");
row.classList.add("card-separator");
row.classList.add("config-row");
row.classList.add("inline-container");
row.dataset.filterText = `${variable.name} ${variable.title} ${variable.description}`.toLowerCase();
const details = document.createElement("div");
const name = document.createElement("div");
const name = document.createElement("p");
name.classList.add("config-name");
name.textContent = variable.name;
const title = document.createElement("div");
const title = document.createElement("p");
title.classList.add("config-title");
title.textContent = variable.title;
const description = document.createElement("p");
description.classList.add("config-description", "description");
description.classList.add("description");
description.textContent = variable.description;
details.append(name, title, description);
row.append(details, createControl(variable));
const label = document.createElement("label");
label.htmlFor = variable.name;
label.append(name, title, description);
row.append(label, createControl(variable));
return row;
}