Updated settings page icons

2025-12-29 00:14:14 -08:00
parent 4931c08acd
commit 54a4b84d6e
4 changed files with 21 additions and 8 deletions
@@ -7,6 +7,7 @@
        "": {
            "name": "nodecast-tv",
            "version": "1.0.0",
+            "license": "GPL-3.0-only",
            "dependencies": {
                "express": "^4.18.2",
                "xml2js": "^0.6.2"
@@ -2021,6 +2021,12 @@ kbd {
  color: var(--color-warning);
 }

-.icon.text-error {
-  color: var(--color-error);
+/* Animation Utilities */
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.spin {
+  animation: spin 1s linear infinite;
 }
@@ -62,10 +62,10 @@ class SourceManager {
          <div class="source-url">${source.url}</div>
        </div>
        <div class="source-actions">
-          <button class="btn btn-sm btn-secondary" data-action="refresh" title="Refresh Data">${Icons.play}</button>
-          <button class="btn btn-sm btn-secondary" data-action="test" title="Test Connection">${Icons.search}</button>
+          <button class="btn btn-sm btn-secondary" data-action="refresh" title="Refresh Data">${Icons.refresh}</button>
+          <button class="btn btn-sm btn-secondary" data-action="test" title="Test Connection">${Icons.link}</button>
          <button class="btn btn-sm btn-secondary" data-action="toggle" title="${source.enabled ? 'Disable' : 'Enable'}">
-            ${source.enabled ? Icons.favorite : Icons.favoriteOutline}
+            ${source.enabled ? Icons.check : Icons.circle}
          </button>
          <button class="btn btn-sm btn-secondary" data-action="edit" title="Edit">${Icons.settings}</button>
          <button class="btn btn-sm btn-danger" data-action="delete" title="Delete">${Icons.close}</button>
@@ -294,7 +294,8 @@ class SourceManager {
            const btn = document.querySelector(`.source-item[data-id="${id}"] [data-action="refresh"]`);
            if (btn) {
                btn.disabled = true;
-                btn.innerHTML = '<div class="loading-spinner" style="width:1em;height:1em;border-width:2px"></div>';
+                const icon = btn.querySelector('.icon');
+                if (icon) icon.classList.add('spin');
            }

            // Clear cache for this source first
@@ -322,7 +323,8 @@ class SourceManager {

            if (btn) {
                btn.disabled = false;
-                btn.innerHTML = Icons.play;
+                const icon = btn.querySelector('.icon');
+                if (icon) icon.classList.remove('spin');
            }
        } catch (err) {
            console.error('Error refreshing source:', err);
@@ -21,6 +21,10 @@ const Icons = {
    chevronRight: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>`,
    expandAll: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon"><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"/></svg>`, // Unfold More
    collapseAll: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon"><path d="M7.41 18.59L8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z"/></svg>`, // Unfold Less
+    refresh: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>`,
+    link: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>`,
+    check: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>`,
+    circle: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>`,
    close: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>`,
 };