diff options
author | hackademix | 2018-07-11 00:53:25 +0200 |
---|---|---|
committer | hackademix | 2018-07-11 00:53:25 +0200 |
commit | 842caf73408a8bf678c0308a06fe56df4a7ecb3b (patch) | |
tree | 290188bfa50a836fe03101cc2974f44c2c48cc7f /src/ui | |
parent | 74e20bb3ebe1bba03769ef65e442468ce54a2cc9 (diff) | |
download | noscript-842caf73408a8bf678c0308a06fe56df4a7ecb3b.tar.gz noscript-842caf73408a8bf678c0308a06fe56df4a7ecb3b.tar.xz noscript-842caf73408a8bf678c0308a06fe56df4a7ecb3b.zip |
Made preset buttons automatically sized according to their (localized) content.
Diffstat (limited to 'src/ui')
-rw-r--r-- | src/ui/ui.css | 20 | ||||
-rw-r--r-- | src/ui/ui.js | 37 |
2 files changed, 53 insertions, 4 deletions
diff --git a/src/ui/ui.css b/src/ui/ui.css index 8f2b81f..901a4b1 100644 --- a/src/ui/ui.css +++ b/src/ui/ui.css @@ -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; diff --git a/src/ui/ui.js b/src/ui/ui.js index 99943d7..927a712 100644 --- a/src/ui/ui.js +++ b/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 |