Fixed various toolbar buttons DnD graphic issues.
This commit is contained in:
parent
180a766b48
commit
db0e9b7592
|
@ -169,7 +169,7 @@ body {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
#top > .icon:hover, #top > .icon:focus, #top > .icon:active {
|
||||
#top > .icon:hover, #top > #top > .icon:active {
|
||||
outline: 0;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
|
|
@ -17,19 +17,19 @@
|
|||
<body tabindex="-1" id="noscript-popup">
|
||||
<div tabindex="-1" id="main">
|
||||
<div id="top">
|
||||
<button aria-role="button" id="close" class="close icon" title="__MSG_Close__"></button>
|
||||
<button aria-role="button" id="reload" class="reload icon" title="__MSG_Reload__"></button>
|
||||
<button aria-role="button" id="options" class="options icon" title="__MSG_Options__"></button>
|
||||
<a aria-role="a" id="close" class="close icon" title="__MSG_Close__"</a>
|
||||
<a aria-role="a" id="reload" class="reload icon" title="__MSG_Reload__"></a>
|
||||
<a aria-role="a" id="options" class="options icon" title="__MSG_Options__"></a>
|
||||
<div class="hider">
|
||||
<a aria-role="button" class="reveal" title="__MSG_Reveal__">…</a>
|
||||
<a aria-role="a" class="reveal" title="__MSG_Reveal__">…</a>
|
||||
<div class="hider-label">__MSG_Hider__</div>
|
||||
<button class="hider-close">×</button>
|
||||
<a class="hider-close">×</a>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<button aria-role="button" id="enforce" class="toggle icon"></button>
|
||||
<button aria-role="button" id="enforce-tab" class="toggle icon"></button>
|
||||
<button aria-role="button" id="temp-trust-page" class="toggle icon" title="__MSG_TempTrustPage__"></button>
|
||||
<button aria-role="button" id="revoke-temp" class="toggle icon" title="__MSG_RevokeTemp__"></button>
|
||||
<a aria-role="a" id="enforce" class="toggle icon"></a>
|
||||
<a aria-role="a" id="enforce-tab" class="toggle icon"></a>
|
||||
<a aria-role="a" id="temp-trust-page" class="toggle icon" title="__MSG_TempTrustPage__"></a>
|
||||
<a aria-role="a" id="revoke-temp" class="toggle icon" title="__MSG_RevokeTemp__"></a>
|
||||
</div>
|
||||
<div id="message" class="hidden"></div>
|
||||
<div id="high-contrast-chooser" class="opt-group">
|
||||
|
|
|
@ -39,15 +39,19 @@
|
|||
return;
|
||||
}
|
||||
d.style.opacity = ".5";
|
||||
d.style.filter = "none";
|
||||
let dt = ev.dataTransfer;
|
||||
dt.setData("text/plain", d.id);
|
||||
dt.dropEffect = "move";
|
||||
dt.setDragImage(d, 0, 0);
|
||||
dt.setDragImage(d, d.offsetWidth / 2, d.offsetHeight / 2);
|
||||
toggleHider(true);
|
||||
this.draggedElement = d;
|
||||
},
|
||||
dragend(ev) {
|
||||
ev.target.style.opacity = "";
|
||||
let d = ev.target;
|
||||
d.style.opacity = "";
|
||||
d.style.filter = "";
|
||||
this.draggedElement = null;
|
||||
},
|
||||
dragover(ev) {
|
||||
ev.preventDefault();
|
||||
|
@ -61,7 +65,6 @@
|
|||
let d = ev.dataTransfer ?
|
||||
document.getElementById(ev.dataTransfer.getData("text/plain"))
|
||||
: this.draggedElement;
|
||||
this.draggedElement = null;
|
||||
if (!d) return;
|
||||
switch(t) {
|
||||
case hider:
|
||||
|
@ -76,7 +79,7 @@
|
|||
break;
|
||||
}
|
||||
}
|
||||
t.insertBefore(d, stop);
|
||||
toolbar.insertBefore(d, stop);
|
||||
}
|
||||
|
||||
let left = [], right = [];
|
||||
|
@ -114,10 +117,7 @@
|
|||
toolbar.addEventListener(action, handler, true);
|
||||
}
|
||||
|
||||
let dragDiv = document.createElement("div");
|
||||
for (let draggable of document.querySelectorAll("#top .icon")) {
|
||||
draggable.setAttribute("draggable", "true");
|
||||
// work-around for https://bugzilla.mozilla.org/show_bug.cgi?id=568313
|
||||
draggable.appendChild(dragDiv.cloneNode());
|
||||
}
|
||||
}
|
||||
|
|
|
@ -355,8 +355,8 @@ span.preset {
|
|||
overflow: visible;
|
||||
}
|
||||
|
||||
:focus {
|
||||
--focus-color: #bdf8;
|
||||
input:focus, button:focus, input:focus, a:focus {
|
||||
--focus-color: #bdf8;
|
||||
outline: 0;
|
||||
filter:
|
||||
drop-shadow(3px 3px 3px var(--focus-color))
|
||||
|
|
|
@ -622,7 +622,7 @@ var UI = (() => {
|
|||
}
|
||||
|
||||
if (newRow === row) {
|
||||
let topButton = document.querySelector("#top > button");
|
||||
let topButton = document.querySelector("#top > .icon");
|
||||
if (topButton) topButton.focus();
|
||||
} else {
|
||||
newRow.querySelector("input.preset:checked").focus();
|
||||
|
|
Loading…
Reference in New Issue