From eb73faeee1ca342b16fb01d7fb0f9550b9e0703a Mon Sep 17 00:00:00 2001 From: kunalja Date: Tue, 10 Jun 2025 02:18:56 -0400 Subject: [PATCH] change modal styling --- src/modals/TextInputModal.ts | 63 +++++++++++++-------------- styles.css | 82 ++++++++++++++++++++++++++++++------ 2 files changed, 98 insertions(+), 47 deletions(-) diff --git a/src/modals/TextInputModal.ts b/src/modals/TextInputModal.ts index 8419479..aeea6c4 100644 --- a/src/modals/TextInputModal.ts +++ b/src/modals/TextInputModal.ts @@ -62,11 +62,16 @@ export class TextInputModal extends Modal { }, 0); } - // Change title based on whether we're editing an existing variant or creating a new one - const isEditing = this.variants.length > 1; - flexContainer.createEl('h2', {text: isEditing ? 'Edit Variants' : 'Create Variants'}); + // Create header container with title and close button inline + const headerContainer = flexContainer.createDiv({ + cls: 'variant-editor-header' + }); + + // Add the title - always use "Manage Variants" + headerContainer.createEl('h2', {text: 'Manage Variants'}); // Show the original text or selected variant + const isEditing = this.variants.length > 1; flexContainer.createEl('div', { text: isEditing ? `Selected variant: "${this.variants[this.activeVariantIndex]}"` : `Original text: "${this.originalText}"`, cls: 'variant-editor-original-text' @@ -113,23 +118,11 @@ export class TextInputModal extends Modal { addVariantButton.buttonEl.addClass('variant-editor-add-button'); - // Add explanation - flexContainer.createEl('div', { - text: 'Select which variant should be active with the radio buttons', - cls: 'variant-editor-hint' - }); - // Add buttons container const buttonsContainer = flexContainer.createDiv({ cls: 'variant-editor-buttons' }); - // Cancel button - new ButtonComponent(buttonsContainer) - .setButtonText('Cancel') - .onClick(() => this.close()) - .buttonEl.addClass('variant-editor-button'); - // Commit active variant button new ButtonComponent(buttonsContainer) .setButtonText('Commit Active Variant') @@ -283,33 +276,35 @@ export class TextInputModal extends Modal { // Create an input for each variant this.variants.forEach((variant, index) => { + // Add active class to the row if it's the active variant + const isActive = this.activeVariantIndex === index; + const variantRow = this.variantContainer.createDiv({ - cls: 'variant-editor-row' + cls: isActive ? 'variant-editor-row variant-editor-row-active' : 'variant-editor-row' }); - // Radio button for selecting active variant - const radioContainer = variantRow.createDiv({ - cls: 'variant-editor-radio-container' - }); - - const radioInput = radioContainer.createEl('input', { - cls: 'variant-editor-radio', - attr: { - type: 'radio', - name: 'active-variant', - id: `variant-${index}`, - checked: this.activeVariantIndex === index - } - }); - - radioInput.addEventListener('change', () => { - if (radioInput.checked) { + // Make the entire row clickable to select this variant + variantRow.addEventListener('click', (e) => { + // Don't trigger when clicking on input or delete button + if (!(e.target instanceof HTMLInputElement) && + !(e.target instanceof HTMLButtonElement)) { + // Set this as the active variant this.activeVariantIndex = index; - // Update the editor immediately when a radio button is clicked + + // Update all rows to reflect the new active state + this.renderVariantInputs(); + + // Update the editor immediately when a variant is selected this.updateVariantsInEditor(); } }); + // Drag handle icon for reordering (visual only for now) + const dragHandle = variantRow.createDiv({ + cls: 'variant-editor-drag-handle' + }); + dragHandle.innerHTML = '≡'; + // Label for the variant const variantLabel = variantRow.createDiv({ cls: 'variant-editor-label', diff --git a/styles.css b/styles.css index a2e301e..8c91da9 100644 --- a/styles.css +++ b/styles.css @@ -94,6 +94,19 @@ } /* Modal styles */ +/* Header with title and close button inline */ +.variant-editor-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 15px; +} + +.variant-editor-header h2 { + margin: 0; + padding: 0; +} + .variant-editor-container { margin-bottom: 15px; max-height: 300px; @@ -108,20 +121,63 @@ padding: 6px; border-radius: 4px; background-color: var(--background-primary-alt); -} - -.variant-editor-radio-container { - margin-right: 8px; - display: flex; - align-items: center; - justify-content: center; -} - -.variant-editor-radio { - width: 16px; - height: 16px; cursor: pointer; - accent-color: var(--interactive-accent); + position: relative; + transition: background-color 0.15s ease; +} + +.variant-editor-row:hover { + background-color: var(--background-modifier-hover); +} + +/* Rainbow border for active variant */ +.variant-editor-row-active { + position: relative; + background-color: var(--background-secondary); + margin-bottom: 8px; + border-radius: 4px; + /* Remove default border */ + border: none; +} + +/* Create rainbow border with pseudo-element */ +.variant-editor-row-active::before { + content: ''; + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + background: linear-gradient(45deg, #ff5e5e, #ffdb4d, #52fa5a, #4db8ff, #c878ff); + border-radius: 6px; + z-index: -1; +} + +/* Create inner background to make border appear as outline */ +.variant-editor-row-active::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: var(--background-secondary); + border-radius: 4px; + z-index: -1; +} + +/* Make sure the container doesn't clip the border */ +.variant-editor-container { + padding: 0; + overflow: visible; +} + +/* Drag handle styling */ +.variant-editor-drag-handle { + font-size: 18px; + margin-right: 8px; + color: var(--text-muted); + cursor: grab; } .variant-editor-label {