Better solution for #826

This commit is contained in:
the-djmaze 2023-01-05 09:55:09 +01:00
parent d6d9be0dab
commit d4e1e90eef
2 changed files with 13 additions and 9 deletions

View file

@ -67,10 +67,8 @@ class SquireUI
clr = createElement('input'),
doClr = name => input => {
// https://github.com/the-djmaze/snappymail/issues/826
var rect = input.getBoundingClientRect();
clr.style.top = (rect.bottom - clr.offsetHeight) + 'px';
clr.style.left = rect.left + 'px';
clr.style.width = (rect.right - rect.left) + 'px';
clr.style.left = (input.offsetLeft + input.parentNode.offsetLeft) + 'px';
clr.style.width = input.offsetWidth + 'px';
clr.value = '';
clr.onchange = () => squire.setStyle({[name]:clr.value});
@ -260,11 +258,8 @@ class SquireUI
browseImage = createElement('input'),
squire = new Squire(wysiwyg, SquireDefaultConfig);
clr.type = "color";
clr.style.opacity = 0;
clr.style.position = 'fixed';
clr.style.left = '-100em';
container.append(clr);
clr.type = 'color';
toolbar.append(clr);
browseImage.type = 'file';
browseImage.accept = 'image/*';

View file

@ -5,9 +5,18 @@
overflow-x: auto;
overflow-y: hidden;
padding: 2px;
position: relative;
white-space: nowrap;
}
.squire-toolbar input[type="color"] {
bottom: 0;
left: -100em;
opacity: 0;
position: absolute;
width: 40px;
}
.squire-toolbar select {
font-size: 12px;
padding: 4px 1.5em 4px 6px;