diff --git a/injection-order/injection-order.css b/injection-order/injection-order.css
index 823e4396..4b78054e 100644
--- a/injection-order/injection-order.css
+++ b/injection-order/injection-order.css
@@ -2,19 +2,10 @@ html, body {
margin: 0;
padding: 0;
}
-#main.ready {
- animation: slidein .25s ease-in-out;
-}
-.closer {
- display: none;
-}
-.closer::after {
- content: "\bb";
-}
ol {
list-style: none;
margin: 0;
- padding: 0;
+ padding: .75rem 0;
font-size: 16px;
overflow-y: auto;
background: rgba(255, 2555, 255, 0.7)
@@ -22,8 +13,7 @@ ol {
li {
position: relative;
user-select: none;
- border: 1px solid silver;
- padding: 0.3em 0;
+ padding: 0.3em .5em;
background: white;
white-space: nowrap;
overflow: hidden;
@@ -31,7 +21,7 @@ li {
cursor: move;
}
li:not(:first-child) {
- /* margin-top: -1px; */
+ border-top: 1px solid rgba(128, 128, 128, .25);
}
.draggable-list-dragging li {
transition: transform .25s ease-in-out;
@@ -48,11 +38,3 @@ li.draggable-list-target {
.dragger {
padding: 0.6em;
}
-@keyframes slidein {
- from {
- transform: translateX(100%);
- }
- to {
- transform: translateX(0);
- }
-}
diff --git a/injection-order/injection-order.html b/injection-order/injection-order.html
index 88dc8a51..915fd0d3 100644
--- a/injection-order/injection-order.html
+++ b/injection-order/injection-order.html
@@ -19,10 +19,7 @@
-
+
diff --git a/injection-order/injection-order.js b/injection-order/injection-order.js
index 52b9cd7d..2c3cb854 100644
--- a/injection-order/injection-order.js
+++ b/injection-order/injection-order.js
@@ -1,42 +1,33 @@
+/* global $ $create */// dom.js
+/* global API */// msg.js
/* global DraggableList */
/* global prefs */
-/* global API */
'use strict';
(async () => {
- const list = (await getOrderedStyles()).map(createLi);
- const ol = document.querySelector('#style-list');
+ const list = (await getOrderedStyles()).map(style => ({
+ el: $create('li', [$create('span.dragger'), style.name]),
+ style,
+ }));
+ const ol = $('#style-list');
let maxTranslateY;
ol.append(...list.map(l => l.el));
- ol.addEventListener('d:dragstart', e => {
+ ol.on('d:dragstart', e => {
e.detail.origin.dataTransfer.setDragImage(new Image(), 0, 0);
maxTranslateY = ol.scrollHeight - e.detail.dragTarget.offsetHeight - e.detail.dragTarget.offsetTop;
});
- ol.addEventListener('d:dragmove', e => {
+ ol.on('d:dragmove', e => {
e.detail.origin.dataTransfer.dropEffect = 'move';
const y = Math.min(e.detail.currentPos.y - e.detail.startPos.y, maxTranslateY);
e.detail.dragTarget.style.transform = `translateY(${y}px)`;
});
- ol.addEventListener('d:dragend', e => {
+ ol.on('d:dragend', e => {
const [item] = list.splice(e.detail.originalIndex, 1);
list.splice(e.detail.spliceIndex, 0, item);
ol.insertBefore(e.detail.dragTarget, e.detail.insertBefore);
prefs.set('injectionOrder', list.map(l => l.style._id));
});
new DraggableList(ol, {scrollContainer: ol});
- document.querySelector('#main').classList.add('ready');
-
- document.querySelector('.closer').addEventListener('click', () => {
- parent.dispatchEvent(new Event('closeOptions'));
- });
-
- function createLi(style) {
- const el = document.createElement('li');
- const dragger = document.createElement('span');
- dragger.className = 'dragger';
- el.append(dragger, style.name);
- return {el, style};
- }
async function getOrderedStyles() {
const [styles] = await Promise.all([
diff --git a/js/dlg/message-box.css b/js/dlg/message-box.css
index 48874cb0..ea551e53 100644
--- a/js/dlg/message-box.css
+++ b/js/dlg/message-box.css
@@ -173,6 +173,21 @@
right: auto;
}
+#message-box.injection-order-dialog > div {
+ height: 100%;
+ width: 40em;
+ max-width: 80vw;
+}
+#message-box.injection-order-dialog #message-box-contents {
+ padding: 0;
+}
+#injection-order {
+ display: block;
+ border: 0;
+ height: 100%;
+ width: 100%;
+}
+
@keyframes fadein {
from {
opacity: 0;
diff --git a/manage/manage.css b/manage/manage.css
index 2789b4db..5caf56a2 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -980,18 +980,6 @@ a:hover {
animation: fadeout .25s ease-in-out;
}
-.injection-order-dialog > div {
- height: 100%;
-}
-#injection-order {
- display: block;
- border: 0;
- height: 100%;
-}
-#injection-order.fadeout {
- animation: slideout .25s ease-in-out;
-}
-
.settings-column {
margin-top: 1rem;
}
@@ -1013,14 +1001,6 @@ a:hover {
opacity: 0;
}
}
-@keyframes slideout {
- from {
- transform: translateX(0);
- }
- to {
- transform: translateX(100%);
- }
-}
@keyframes fadein-25pct {
from {