From f25363145e830f408196e111e8fe3b9023235325 Mon Sep 17 00:00:00 2001 From: stitch Date: Thu, 12 Sep 2024 21:47:10 +0300 Subject: [PATCH] added new popup/page for visualizing relay publishing --- assets/css/popups.css | 107 ++++++++++++++++++++++++++- assets/css/styles.css | 13 ++++ assets/js/loadingBarAnimation.js | 23 ++++++ dashboard-complete.html | 1 + dashboard-draft.html | 7 +- dashboard-failed.html | 1 + dashboard-progress.html | 1 + dashboard.html | 1 + index.html | 1 + loadingElement-Relays.html | 123 +++++++++++++++++++++++++++++++ loadingElement.html | 1 + notifications.html | 1 + premium.html | 1 + settings-account.html | 1 + settings-profile.html | 1 + settings-relays.html | 1 + settings-servers.html | 1 + settings-sub.html | 1 + 18 files changed, 282 insertions(+), 4 deletions(-) create mode 100644 assets/js/loadingBarAnimation.js create mode 100644 loadingElement-Relays.html diff --git a/assets/css/popups.css b/assets/css/popups.css index a78aa91..d14e0cf 100644 --- a/assets/css/popups.css +++ b/assets/css/popups.css @@ -59,7 +59,7 @@ .popupMainInsideWrapperBoxBottom { display: flex; flex-direction: column; - grid-gap: 10px; + grid-gap: 15px; padding: 15px; border-top: solid 1px rgba(0,0,0,0.1); color: rgba(0,0,0,0.5); @@ -108,3 +108,108 @@ max-width: 65px; } +.popupMainInsideWrapperBoxMidRelays { + display: flex; + flex-direction: row; + grid-gap: 15px; + flex-wrap: wrap; +} + +.popupMainInsideWrapperBoxMidRelaysRelay { + background: #ffffff; + padding: 4px; + border-radius: 4px; + border: solid 1px rgba(0,0,0,0.1); + display: flex; + flex-direction: row; + grid-gap: 5px; + overflow: hidden; + flex-grow: 1; + position: relative; + justify-content: space-between; +} + +.popupMainInsideWrapperBoxTopLoadingBar { + transition: ease 0.4s; + width: 50%; + height: 24px; + background: #8bca8c; + border-radius: 2px; + display: flex; + flex-direction: column; + justify-content: center; + overflow: hidden; +} + +.popupMainInsideWrapperBoxMidRelaysRelayTextWrapper { + display: flex; + flex-direction: row; + justify-content: start; + align-items: center; + grid-gap: 10px; + color: #434343; + padding: 0 5px; + flex-grow: 1; +} + +.popupMainInsideWrapperBoxMidRelaysRelayText { + font-size: 12px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: start; +} + +.popupMainInsideWrapperBoxMidRelaysRelayIcon { +} + +.popupMainInsideWrapperBoxMidRelaysRelay.popupMainInsideWrapperBoxMidRelaysRelaySuccess { + background: #9fe6a0; +} + +.popupMainInsideWrapperBoxMidRelaysRelay.popupMainInsideWrapperBoxMidRelaysRelaySuccess > :nth-child(1) { + color: #434343; +} + +.popupMainInsideWrapperBoxMidRelaysRelay.popupMainInsideWrapperBoxMidRelaysRelayFail { + background: #ff7f68; +} + +.popupMainInsideWrapperBoxMidRelaysRelay.popupMainInsideWrapperBoxMidRelaysRelayFail > :nth-child(1) { + color: white; +} + +.popupMainInsideWrapperBoxTopLoading { +} + +.popupMainInsideWrapperBoxTopLoadingTex { + position: absolute; + font-size: 12px; + line-height: 1; + width: 100%; + text-align: center; + color: rgba(0,0,0,0.5); +} + +.popupMainInsideWrapperBoxTopLoadingBarDot { + width: 12px; + height: 12px; + background: rgba(255,255,255,0.25); + border-radius: 100px; +} + +.popupMainInsideWrapperBoxMidRelaysRelayPaid { + width: 100%; + max-width: 20px; + /*background: #72ab73;*/ + border-radius: 3px; + color: rgba(67,67,67,0.35); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 5px; + font-size: 12px; + outline: solid 1px rgba(0,0,0,0.1); +} + diff --git a/assets/css/styles.css b/assets/css/styles.css index 2854769..d32ba00 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -547,3 +547,16 @@ h1, h2, h3, h4, h5, h6 { padding: 0 0 0 5px; } +.spinMain { + animation: spin 3s linear infinite; +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + diff --git a/assets/js/loadingBarAnimation.js b/assets/js/loadingBarAnimation.js new file mode 100644 index 0000000..b9f8898 --- /dev/null +++ b/assets/js/loadingBarAnimation.js @@ -0,0 +1,23 @@ +const dot = document.querySelector('.popupMainInsideWrapperBoxTopLoadingBarDot'); + const container = document.querySelector('.popupMainInsideWrapperBoxTopLoadingBar'); + + function animateDot() { + const containerWidth = container.offsetWidth; + const dotWidth = dot.offsetWidth; + + dot.style.transition = 'transform 3s linear'; + dot.style.transform = `translateX(${containerWidth + dotWidth}px)`; + + // Reset the animation + dot.addEventListener('transitionend', () => { + dot.style.transition = 'none'; // Disable transition during reset + dot.style.transform = `translateX(-${dotWidth}px)`; // Move dot back to start + // Force reflow to restart the animation + dot.offsetHeight; // Trigger reflow + dot.style.transition = 'transform 3s linear'; // Re-enable transition + dot.style.transform = `translateX(${containerWidth + dotWidth}px)`; + }, { once: true }); + } + + animateDot(); + setInterval(animateDot, 3000); // Repeat the animation every 5 seconds \ No newline at end of file diff --git a/dashboard-complete.html b/dashboard-complete.html index e5ff36b..3259352 100644 --- a/dashboard-complete.html +++ b/dashboard-complete.html @@ -489,6 +489,7 @@ + diff --git a/dashboard-draft.html b/dashboard-draft.html index e732e4a..e05edd0 100644 --- a/dashboard-draft.html +++ b/dashboard-draft.html @@ -508,9 +508,6 @@ -
-
-
@@ -650,6 +647,9 @@
+
+
+

Drag click any of the above elements to add them to your file.

@@ -663,6 +663,7 @@ + diff --git a/dashboard-failed.html b/dashboard-failed.html index 7bb85d2..f0eb070 100644 --- a/dashboard-failed.html +++ b/dashboard-failed.html @@ -431,6 +431,7 @@ + diff --git a/dashboard-progress.html b/dashboard-progress.html index f18d4d1..736d0d7 100644 --- a/dashboard-progress.html +++ b/dashboard-progress.html @@ -619,6 +619,7 @@ + diff --git a/dashboard.html b/dashboard.html index 7aca89e..3d9f4e4 100644 --- a/dashboard.html +++ b/dashboard.html @@ -678,6 +678,7 @@ + diff --git a/index.html b/index.html index 55e6916..75c4732 100644 --- a/index.html +++ b/index.html @@ -313,6 +313,7 @@ + diff --git a/loadingElement-Relays.html b/loadingElement-Relays.html new file mode 100644 index 0000000..9a3560e --- /dev/null +++ b/loadingElement-Relays.html @@ -0,0 +1,123 @@ + + + + + + + SIGit + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+

Publishing to relays...

+
+
+
+
+
+
+ + + +
+

wss://relay.sigit.io

+

Relay connection timed out

+
+
+
+ + +
+
+
+
+ + + +
+

wss://relay.sigit.io

+

success message

+
+
+
+ + +
+
+
+
+ + + +
+

wss://relay.sigit.io

+

Publishing

+
+
+
+ + +
+
+
+
+ + + +
+

wss://relay.sigit.io

+

Publishing

+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/loadingElement.html b/loadingElement.html index cce4436..665777d 100644 --- a/loadingElement.html +++ b/loadingElement.html @@ -47,6 +47,7 @@ + diff --git a/notifications.html b/notifications.html index 4de1d2b..1efc486 100644 --- a/notifications.html +++ b/notifications.html @@ -227,6 +227,7 @@ + diff --git a/premium.html b/premium.html index d82010b..36ff1ef 100644 --- a/premium.html +++ b/premium.html @@ -309,6 +309,7 @@ + diff --git a/settings-account.html b/settings-account.html index 07e8e46..0b21079 100644 --- a/settings-account.html +++ b/settings-account.html @@ -175,6 +175,7 @@ + diff --git a/settings-profile.html b/settings-profile.html index 98eec4a..57e8223 100644 --- a/settings-profile.html +++ b/settings-profile.html @@ -191,6 +191,7 @@ + diff --git a/settings-relays.html b/settings-relays.html index d1f03dc..b7a6a11 100644 --- a/settings-relays.html +++ b/settings-relays.html @@ -179,6 +179,7 @@ + diff --git a/settings-servers.html b/settings-servers.html index 8d0728a..b8c1735 100644 --- a/settings-servers.html +++ b/settings-servers.html @@ -174,6 +174,7 @@ + diff --git a/settings-sub.html b/settings-sub.html index 3ff5685..0f6e5c2 100644 --- a/settings-sub.html +++ b/settings-sub.html @@ -184,6 +184,7 @@ +