Made preset buttons automatically sized according to their (localized) content.

This commit is contained in:
hackademix 2018-07-11 00:53:25 +02:00
parent 74e20bb3eb
commit 842caf7340
3 changed files with 54 additions and 5 deletions

View File

@ -435,7 +435,7 @@
"message": "U"
},
"Untrusted": {
"message": "Untrusted"
"message": "Untrusted superca"
},
"UntrustedPagesAdj": {
"message": "untrusted"

View File

@ -197,7 +197,15 @@ input.preset:active, input.preset:focus, input.preset:hover {
border-radius: .5em;
}
.presets input.preset:checked, #presets input.preset {
#presets-sizer {
visibility: hidden;
width: 10px;
height: 1px;
overflow: hidden !important;
border: 1px solid red;
}
.presets input.preset:checked, #presets input.preset, #presets-sizer input.preset {
opacity: 1;
transform: none;
min-width: 9.38em;
@ -226,7 +234,6 @@ input.preset:active, input.preset:focus, input.preset:hover {
left: 0em;
padding-left: 2.5em;
transition: 0.2s all;
}
.presets input.preset[value^="T"] + label {
@ -235,10 +242,17 @@ input.preset:active, input.preset:focus, input.preset:hover {
.presets input.preset:checked + label, #presets .presets label {
opacity: 1;
width: 60%;
width: 80%;
display: inline-block;
}
#presets-sizer .presets label {
position: static;
display: block;
width: auto;
overflow: visible;
}
button.options {
-moz-appearance: none;
border: none;

View File

@ -187,7 +187,7 @@ var UI = (() => {
initRow(table = this.table) {
let row = table.querySelector("tr.site");
debug("initRow: ", new Error().stack);
// PRESETS
{
let presets = row.querySelector(".presets");
@ -212,7 +212,42 @@ var UI = (() => {
clone.querySelector(".options").remove();
}
presets.appendChild(clone);
}
if (!document.getElementById("presets-sizer")) {
// adapt button to label if needed
let sizer = table.cloneNode(true);
sizer.id = "presets-sizer";
document.body.appendChild(sizer);
let presetWidth = sizer.querySelector("input.preset").offsetWidth;
let labelWidth = 0;
for (let l of sizer.querySelectorAll("label.preset")) {
let lw = l.offsetWidth;
debug("lw", lw);
if (lw > labelWidth) labelWidth = lw;
}
debug(`Preset: %s Label: %s`, presetWidth, labelWidth);
labelWidth += 16;
if (presetWidth < labelWidth) {
for (let ss of document.styleSheets) {
if (ss.href.endsWith("/ui.css")) {
for (let r of ss.cssRules) {
if (/input\.preset:checked.*min-width:/.test(r.cssText)) {
r.style.minWidth = (labelWidth) + "px";
break;
}
}
}
}
}
sizer.style.visibility = "visible";
// setTimeout( () => sizer.style.display = "none");
}
}
// URL