diff --git a/src/ui/popup.css b/src/ui/popup.css index 857b9d0..0413948 100644 --- a/src/ui/popup.css +++ b/src/ui/popup.css @@ -124,16 +124,17 @@ body { display: block; font-size: 1.2em; font-weight: bold; - padding: 0; + padding: .2em; text-align: center; margin: 0; + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + border: none; + background: transparent; } -.hider.open > .reveal { - display: none !important; -} - -.hider:not(.open) > :not(.reveal) { +.hider.open > .reveal, .hider:not(.open) > :not(.reveal) { display: none !important; } diff --git a/src/ui/toolbar.js b/src/ui/toolbar.js index 6d60bba..8ec4872 100644 --- a/src/ui/toolbar.js +++ b/src/ui/toolbar.js @@ -48,7 +48,7 @@ toggleHider(false); let dnd = { - dragstart(ev) { + dragstart(ev) { let d = ev.target; if (hider.querySelectorAll(".icon").length) { toggleHider(true); @@ -58,12 +58,25 @@ ev.preventDefault(); return; } + // work-around for Firefox unable to drag buttons, https://bugzilla.mozilla.org/show_bug.cgi?id=568313 + let placeHolder = document.createElement("a"); + for (let attr of d.attributes) { + placeHolder.setAttribute(attr.name, attr.value); + } + placeHolder.style.position = "absolute"; + placeHolder.style.top = "-2000px"; + d.parentNode.appendChild(placeHolder); + setTimeout(() => placeHolder.remove(), 0); + d.style.opacity = ".5"; d.style.filter = "none"; + let dt = ev.dataTransfer; dt.setData("text/plain", d.id); dt.dropEffect = "move"; - dt.setDragImage(d, d.offsetWidth / 2, d.offsetHeight / 2); + + dt.setDragImage(placeHolder, d.offsetWidth / 2, d.offsetHeight / 2); + toggleHider(true); this.draggedElement = d; }, @@ -82,10 +95,9 @@ }, drop(ev) { let t = ev.target; - let d = ev.dataTransfer ? - document.getElementById(ev.dataTransfer.getData("text/plain")) - : this.draggedElement; + let d = this.draggedElement; if (!d) return; + switch(t) { case hider: t.appendChild(d); @@ -138,6 +150,7 @@ } for (let draggable of document.querySelectorAll("#top .icon")) { + draggable.innerHTML = "
"; draggable.setAttribute("draggable", "true"); } }