Fixed various toolbar buttons DnD graphic issues.

This commit is contained in:
hackademix 2020-06-06 21:54:20 +02:00
parent 180a766b48
commit db0e9b7592
5 changed files with 20 additions and 20 deletions

View File

@ -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);
}

View File

@ -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">

View File

@ -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());
}
}

View File

@ -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))

View File

@ -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();