mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-20 15:06:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Solve "transfer-complete" and "receive-complete" status detection via css instead of adding a new class

Browse source
This commit is contained in:
schlagmichdoch 2024-02-09 02:09:53 +01:00
parent 902b5c6b8f
commit 7c6062e1e0
2 changed files with 6 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

7
public/scripts/ui.js
View file

@ -807,16 +807,11 @@ class PeerUI {
this.$el.querySelector('.status').innerText = statusName; this.$el.querySelector('.status').innerText = statusName;
this._currentStatus = status; this._currentStatus = status;
if (status === "transfer-complete" || status === "receive-complete") { if (status.indexOf("-complete") || status === "receive-complete") {
this.$el.classList.remove('blink');
this.statusTimeout = setTimeout(() => { this.statusTimeout = setTimeout(() => {
this.setProgress(0, null); this.setProgress(0, null);
}, 10000); }, 10000);
} }
else {
this.$el.classList.add('blink');
}
} }
_onDrop(e) { _onDrop(e) {

10
public/styles/styles-deferred.css
View file

@ -188,12 +188,12 @@ x-peer:not(.type-public-id) .highlight-room-public-id {
display: none; display: none;
} }
x-peer:not([status].blink):hover, x-peer:is(:not([status]), [status$=-complete]):hover,
x-peer:not([status].blink):focus { x-peer:is(:not([status]), [status$=-complete]):focus {
transform: scale(1.05); transform: scale(1.05);
} }
x-peer[status].blink x-icon { x-peer[status]:not([status$=-complete]) x-icon {
box-shadow: none; box-shadow: none;
} }
@ -249,7 +249,7 @@ x-peer[status] .device-name {
display: none; display: none;
} }
x-peer[status].blink { x-peer[status]:not([status$=-complete]) {
pointer-events: none; pointer-events: none;
} }
@ -257,7 +257,7 @@ x-peer {
animation: pop 600ms ease-out 1; animation: pop 600ms ease-out 1;
} }
x-peer[status]:not(.blink) .status { x-peer[status$=-complete] .status {
color: var(--primary-color); color: var(--primary-color);
} }