From ecbf397a78a7d3377f31a21e9ca890fd858c6493 Mon Sep 17 00:00:00 2001 From: tophf Date: Thu, 13 Jan 2022 13:30:16 +0300 Subject: [PATCH] remove unused stuff, use dom.js, polish css --- injection-order/injection-order.css | 24 +++-------------------- injection-order/injection-order.html | 5 +---- injection-order/injection-order.js | 29 ++++++++++------------------ js/dlg/message-box.css | 15 ++++++++++++++ manage/manage.css | 20 ------------------- 5 files changed, 29 insertions(+), 64 deletions(-) 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 {