fixed modal buttons

Unreal-Dan · Feb 7, 2025 · 8ea4ef5 · 8ea4ef5
1 parent b1eb253
commit 8ea4ef5
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 83 deletions.
diff --git a/css/modal.css b/css/modal.css
@@ -64,42 +64,10 @@
   justify-content: center;
   margin-top: 20px;
   gap: 20%;
+  width: 100%;
+  max-width: 100%;
 }
 
-.modal-button {
-  width: auto;
-  height: auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 2px solid transparent;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 20px;
-  transition: all 0.3s;
-}
-
-/* Cancel button */
-.cancel-button {
-  width: auto;
-}
-
-.cancel-button:hover {
-  background-color: #b02a37; /* Darker red */
-  border-color: #b02a37;
-}
-
-/* Proceed button */
-.proceed-button {
-  width: auto;
-}
-
-.proceed-button:hover {
-  background-color: #218838; /* Darker green */
-  border-color: #218838;
-}
-
-
 .modal-device-container {
   display: flex;
   justify-content: space-between;
@@ -138,40 +106,62 @@
   margin-bottom: 10px;
 }
 
-.modal-buttons {
+.modal-button {
+  min-width: 80px; /* Ensures they are not too small */
+  min-height: 40px; /* Prevents shrinking */
+  padding: 10px 15px;
+  font-size: 14px;
+  font-weight: bold;
+  text-align: center;
+  border: none;
+  cursor: pointer;
+  transition: background 0.2s ease-in-out;
   display: flex;
   justify-content: center;
-  gap: 40px; /* Keep buttons balanced */
-  margin-top: 30px; /* More vertical spacing */
-  width: 100%;
-  max-width: 100%;
+  align-items: center;
+  color: white !important; /* Ensure the text is visible */
+}
+
+/* ------------------------------------ */
+/* flash firmware dialogues have yes/no */
+.modal-button.cancel-button {
+  background-color: #b02a37;
 }
 
+.modal-button.cancel-button:hover {
+  background-color: #8f1f2a;
+}
 
-.primary-button {
+.modal-button.proceed-button {
   background-color: #218838;
-  color: white;
 }
 
-.primary-button:hover {
+.modal-button.proceed-button:hover {
   background-color: #1a6d2d;
 }
 
-.switch-button {
+/* --------------------------------------- */
+/* import mode dialogue has switch/convert */
+
+.modal-button.switch-button {
   background-color: #0066cc;
   color: white;
+  height: 50px;
+  width: auto;
 }
 
-.switch-button:hover {
+.modal-button.switch-button:hover {
   background-color: #005bb5;
 }
 
-.secondary-button {
-  background-color: #b02a37;
+.modal-button.convert-button {
+  background-color: #218838;
   color: white;
+  height: 50px;
+  width: auto;
 }
 
-.secondary-button:hover {
-  background-color: #8f1f2a;
+.modal-button.convert-button:hover {
+  background-color: #1a6d2d;
 }
 
diff --git a/js/Modal.js b/js/Modal.js
@@ -130,10 +130,24 @@ export default class Modal {
     this.clearButtons(); // Clear previous buttons
 
     buttonConfigs.forEach(config => {
-      const button = document.createElement('button'); // Use <button> element
-      button.textContent = config.label;
-      button.className = `modal-button ${config.class || ''}`; // Apply button class
-      button.addEventListener('click', config.onClick);
+      let button;
+
+      if (config.customHtml) {
+        // Use the provided HTML if it exists
+        const tempContainer = document.createElement('div');
+        tempContainer.innerHTML = config.customHtml.trim();
+        button = tempContainer.firstChild;
+      } else {
+        // Otherwise, create a default <button> element
+        button = document.createElement('button');
+        button.textContent = config.label || 'Button'; // Default label fallback
+        button.className = `modal-button ${config.class || ''}`;
+      }
+
+      // Ensure onClick works
+      if (config.onClick) {
+        button.addEventListener('click', config.onClick);
+      }
 
       this.modalButtons.appendChild(button);
     });

diff --git a/js/ModesPanel.js b/js/ModesPanel.js
@@ -452,38 +452,26 @@ export default class ModesPanel extends Panel {
     // Determine which buttons to show
     const buttons = [];
 
-    if (currentDevice === 'None' || importedDevice === currentDevice) {
-      // Single "Import Mode" button when devices match
-      buttons.push({
-        label: 'Import Mode',
-        class: 'modal-button primary-button',
-        onClick: () => {
-          this.deviceSelectionModal.hide();
-          this.finalizeModeImport(modeData, addNew);
-        }
-      });
-    } else {
-      // Two options when devices don't match
-      buttons.push({
-        label: `Switch to ${importedDevice}`,
-        class: 'modal-button switch-button',
-        onClick: async () => {
-          this.deviceSelectionModal.hide();
-          this.editor.lightshow.setLedCount(modeData.num_leds);
-          await this.editor.devicePanel.updateSelectedDevice(importedDevice, true);
-          this.finalizeModeImport(modeData, addNew);
-        }
-      });
+    // Two options when devices don't match
+    buttons.push({
+      label: `Switch to ${importedDevice}`,
+      class: 'modal-button switch-button',
+      onClick: async () => {
+        this.deviceSelectionModal.hide();
+        this.editor.lightshow.setLedCount(modeData.num_leds);
+        await this.editor.devicePanel.updateSelectedDevice(importedDevice, true);
+        this.finalizeModeImport(modeData, addNew);
+      }
+    });
 
-      buttons.push({
-        label: `Convert to ${currentDevice}`,
-        class: 'modal-button secondary-button',
-        onClick: () => {
-          this.deviceSelectionModal.hide();
-          this.finalizeModeImport(modeData, addNew);
-        }
-      });
-    }
+    buttons.push({
+      label: `Convert to ${currentDevice}`,
+      class: 'modal-button convert-button',
+      onClick: () => {
+        this.deviceSelectionModal.hide();
+        this.finalizeModeImport(modeData, addNew);
+      }
+    });
 
     // Show the modal
     this.deviceSelectionModal.show({