Feat: only display 'reset' and 'apply' buttons when necessary

Author: Leogendra

scripts/png.js

@@ -115,6 +115,8 @@ async function setup_palette_settings() {
             const svg = await load_colored_score_SVG(score);
             input.addEventListener("input", () => {
                 update_svg_color(score, input.value);
+                btn_save_palette_settings.style.display = "flex";
+                btn_reset_palette_settings.style.display = "flex";
             });
 
             cell.appendChild(svg);
@@ -1137,11 +1139,14 @@ btn_open_dialog_settings.addEventListener("click", () => {
 
 btn_reset_palette_settings.addEventListener("click", () => {
     png_settings.colors = { ...png_default_settings.colors };
+    btn_save_palette_settings.style.display = "none";
+    btn_reset_palette_settings.style.display = "none";
     close_dialog_settings();
 });
 
 btn_save_palette_settings.addEventListener("click", () => {
     close_dialog_settings(save = true);
+    btn_save_palette_settings.style.display = "none";
     show_popup_message("Palette settings saved", "success", 3000);
 });
 

styles/main.css

@@ -364,6 +364,14 @@ a {
     }
 }
 
+#savePaletteSettings {
+    display: none;
+}
+
+#resetPaletteSettings {
+    display: none;
+}
+
 
 .filter-stats-display {
     display: none;
@@ -396,6 +404,10 @@ a {
         }
     }
 
+    #paletteContainer {
+        padding: 1rem;
+    }
+
     .grid-charts {
         grid-template-columns: 1fr !important;
     }