open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix dropEffect + highlight the target

Browse Source
This commit is contained in:
tophf 2022-01-13 23:04:14 +03:00
parent e7cb2e2dc3
commit b5e46c8078
2 changed files with 9 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
injection-order/injection-order.css
View File

@ -19,21 +19,20 @@
} }
.injection-order a { .injection-order a {
display: block; display: block;
color: #000;
text-decoration: none;
transition: transform .25s ease-in-out;
z-index: 1;
user-select: none; user-select: none;
padding: 0.3em .5em; padding: 0.3em .5em;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
cursor: move; cursor: move;
color: #000;
text-decoration: none;
} }
.injection-order a.enabled { .injection-order a.enabled {
font-weight: bold; font-weight: bold;
} }
.injection-order a:active {
background: white;
}
.injection-order a:hover { .injection-order a:hover {
text-decoration: underline; text-decoration: underline;
} }
@ -45,12 +44,9 @@
padding: 0.6em; padding: 0.6em;
font-weight: normal; font-weight: normal;
} }
.injection-order .draggable-list-dragging a { .injection-order .draggable-list-target {
transition: transform .25s ease-in-out; position: relative;
z-index: 1; background: lightcyan;
}
.injection-order a.draggable-list-target {
transition: none; transition: none;
z-index: 100; z-index: 100;
position: relative;
} }

3
injection-order/injection-order.js
View File

@ -19,6 +19,7 @@ async function InjectionOrder(show = true) {
maxTranslateY = ol.scrollHeight - d.dragTarget.offsetHeight - d.dragTarget.offsetTop; maxTranslateY = ol.scrollHeight - d.dragTarget.offsetHeight - d.dragTarget.offsetTop;
}); });
ol.on('d:dragmove', ({detail: d}) => { ol.on('d:dragmove', ({detail: d}) => {
d.origin.stopPropagation(); // preserves dropEffect
d.origin.dataTransfer.dropEffect = 'move'; d.origin.dataTransfer.dropEffect = 'move';
const y = Math.min(d.currentPos.y - d.startPos.y, maxTranslateY); const y = Math.min(d.currentPos.y - d.startPos.y, maxTranslateY);
d.dragTarget.style.transform = `translateY(${y}px)`; d.dragTarget.style.transform = `translateY(${y}px)`;
@ -29,7 +30,7 @@ async function InjectionOrder(show = true) {
ol.insertBefore(d.dragTarget, d.insertBefore); ol.insertBefore(d.dragTarget, d.insertBefore);
prefs.set('injectionOrder', entries.map(l => l.style._id)); prefs.set('injectionOrder', entries.map(l => l.style._id));
}); });
new DraggableList(ol, {scrollContainer: ol}); DraggableList(ol, {scrollContainer: ol});
await messageBoxProxy.show({ await messageBoxProxy.show({
title: t('styleInjectionOrder'), title: t('styleInjectionOrder'),