Made preset buttons automatically sized according to their (localized) content.
This commit is contained in:
parent
74e20bb3eb
commit
842caf7340
|
@ -435,7 +435,7 @@
|
|||
"message": "U"
|
||||
},
|
||||
"Untrusted": {
|
||||
"message": "Untrusted"
|
||||
"message": "Untrusted superca"
|
||||
},
|
||||
"UntrustedPagesAdj": {
|
||||
"message": "untrusted"
|
||||
|
|
|
@ -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;
|
||||
|
|
37
src/ui/ui.js
37
src/ui/ui.js
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue