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

remove unused stuff, use dom.js, polish css

Browse Source
This commit is contained in:
tophf 2022-01-13 13:30:16 +03:00
parent b9f4109a41
commit ecbf397a78
5 changed files with 29 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,19 +2,10 @@ html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
#main.ready {
animation: slidein .25s ease-in-out;
}
.closer {
display: none;
}
.closer::after {
content: "\bb";
}
ol { ol {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: .75rem 0;
font-size: 16px; font-size: 16px;
overflow-y: auto; overflow-y: auto;
background: rgba(255, 2555, 255, 0.7) background: rgba(255, 2555, 255, 0.7)
@ -22,8 +13,7 @@ ol {
li { li {
position: relative; position: relative;
user-select: none; user-select: none;
border: 1px solid silver; padding: 0.3em .5em;
padding: 0.3em 0;
background: white; background: white;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -31,7 +21,7 @@ li {
cursor: move; cursor: move;
} }
li:not(:first-child) { li:not(:first-child) {
/* margin-top: -1px; */ border-top: 1px solid rgba(128, 128, 128, .25);
} }
.draggable-list-dragging li { .draggable-list-dragging li {
transition: transform .25s ease-in-out; transition: transform .25s ease-in-out;
@ -48,11 +38,3 @@ li.draggable-list-target {
.dragger { .dragger {
padding: 0.6em; padding: 0.6em;
} }
@keyframes slidein {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}

5
injection-order/injection-order.html
View File

@ -19,10 +19,7 @@
</head> </head>
<body id="stylus-injection-order"> <body id="stylus-injection-order">
<div id="main"> <ol id="style-list"></ol>
<button class="closer"></button>
<ol id="style-list"></ol>
</div>
<script src="/vendor/@eight04/draggable-list/dist/draggable-list.iife.min.js"></script> <script src="/vendor/@eight04/draggable-list/dist/draggable-list.iife.min.js"></script>
<script src="injection-order.js"></script> <script src="injection-order.js"></script>
</body> </body>

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

@ -1,42 +1,33 @@
/* global $ $create */// dom.js
/* global API */// msg.js
/* global DraggableList */ /* global DraggableList */
/* global prefs */ /* global prefs */
/* global API */
'use strict'; 'use strict';
(async () => { (async () => {
const list = (await getOrderedStyles()).map(createLi); const list = (await getOrderedStyles()).map(style => ({
const ol = document.querySelector('#style-list'); el: $create('li', [$create('span.dragger'), style.name]),
style,
}));
const ol = $('#style-list');
let maxTranslateY; let maxTranslateY;
ol.append(...list.map(l => l.el)); 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); e.detail.origin.dataTransfer.setDragImage(new Image(), 0, 0);
maxTranslateY = ol.scrollHeight - e.detail.dragTarget.offsetHeight - e.detail.dragTarget.offsetTop; 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'; e.detail.origin.dataTransfer.dropEffect = 'move';
const y = Math.min(e.detail.currentPos.y - e.detail.startPos.y, maxTranslateY); const y = Math.min(e.detail.currentPos.y - e.detail.startPos.y, maxTranslateY);
e.detail.dragTarget.style.transform = `translateY(${y}px)`; 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); const [item] = list.splice(e.detail.originalIndex, 1);
list.splice(e.detail.spliceIndex, 0, item); list.splice(e.detail.spliceIndex, 0, item);
ol.insertBefore(e.detail.dragTarget, e.detail.insertBefore); ol.insertBefore(e.detail.dragTarget, e.detail.insertBefore);
prefs.set('injectionOrder', list.map(l => l.style._id)); prefs.set('injectionOrder', list.map(l => l.style._id));
}); });
new DraggableList(ol, {scrollContainer: ol}); 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() { async function getOrderedStyles() {
const [styles] = await Promise.all([ const [styles] = await Promise.all([

15
js/dlg/message-box.css
View File

@ -173,6 +173,21 @@
right: auto; 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 { @keyframes fadein {
from { from {
opacity: 0; opacity: 0;

20
manage/manage.css
View File

@ -980,18 +980,6 @@ a:hover {
animation: fadeout .25s ease-in-out; 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 { .settings-column {
margin-top: 1rem; margin-top: 1rem;
} }
@ -1013,14 +1001,6 @@ a:hover {
opacity: 0; opacity: 0;
} }
} }
@keyframes slideout {
from {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}
@keyframes fadein-25pct { @keyframes fadein-25pct {
from { from {