obsidian-plugin/kunalja_VariantEditor
1
0
Fork 0
mirror of https://github.com/kunalja/VariantEditor.git synced 2026-07-22 13:00:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

use as few javascript set styles as possible, so that we can be themed

Browse source
This commit is contained in:
kunalja 2025-06-15 18:15:41 -04:00
parent 0b9bfa04cc
commit 040e4e9739
2 changed files with 36 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/modals/TextInputModal.ts
View file

@ -101,8 +101,8 @@ export class TextInputModal extends Modal {
// Apply the new position
const modalEl = this.modalEl;
modalEl.style.left = `${newX}px`;
modalEl.style.top = `${newY}px`;
modalEl.style.setProperty('--modal-left', `${newX}px`);
modalEl.style.setProperty('--modal-top', `${newY}px`);
}
// Handle modal release
@ -154,8 +154,7 @@ export class TextInputModal extends Modal {
// Hide the modal initially to prevent flashing
if (this.cursorPosition) {
modalEl.style.opacity = '0';
modalEl.style.transition = 'opacity 150ms ease-in-out';
modalEl.addClass('variant-editor-modal-hidden');
}
// Set the title using Obsidian's built-in functionality
@ -164,6 +163,7 @@ export class TextInputModal extends Modal {
// Add classes for styling
modalEl.addClass('variant-editor-modal');
modalEl.addClass('variant-editor-no-dim'); // Class to remove background dimming
modalEl.addClass('variant-editor-modal-dynamic'); // Add dynamic positioning class
// Make the modal header draggable
const titleEl = modalEl.querySelector('.modal-title');
@ -183,7 +183,8 @@ export class TextInputModal extends Modal {
queueMicrotask(() => {
this.positionModalRelativeToCursor(modalEl);
// Fade in the modal after positioning
modalEl.style.opacity = '1';
modalEl.removeClass('variant-editor-modal-hidden');
modalEl.addClass('variant-editor-modal-visible');
});
}
@ -324,23 +325,22 @@ export class TextInputModal extends Modal {
}
// Apply the position
modalEl.style.position = 'fixed';
modalEl.style.transform = 'none'; // Remove default centering
modalEl.style.setProperty('--modal-transform', 'none');
if (positionAbove) {
// When positioned above, set explicit top position
modalEl.style.top = `${Math.max(0, top)}px`;
modalEl.style.bottom = 'auto';
modalEl.classList.add('variant-editor-modal-above');
modalEl.style.setProperty('--modal-top', `${Math.max(0, top)}px`);
modalEl.style.setProperty('--modal-bottom', 'auto');
modalEl.addClass('variant-editor-modal-above');
} else {
// When positioned below, set explicit top position
modalEl.style.top = `${Math.max(0, top)}px`;
modalEl.style.bottom = 'auto';
modalEl.classList.remove('variant-editor-modal-above');
modalEl.style.setProperty('--modal-top', `${Math.max(0, top)}px`);
modalEl.style.setProperty('--modal-bottom', 'auto');
modalEl.removeClass('variant-editor-modal-above');
}
// Set the left position
modalEl.style.left = `${Math.max(0, left)}px`;
modalEl.style.setProperty('--modal-left', `${Math.max(0, left)}px`);
}
/**

32
styles.css
View file

@ -68,7 +68,7 @@
/* Show a small indicator for hidden parts when hovered */
.variant-syntax-start:hover,
.variant-syntax-end:hover,
.variant-inactive-option:hover {
.variant-syntax-inactive-option:hover {
background-color: rgba(121, 184, 255, 0.3);
}
@ -311,7 +311,6 @@
/* Higher z-index to appear above the rainbow border */
}
/* Delete button styling */
.variant-editor-delete-button {
background: none !important;
@ -378,8 +377,6 @@
/* Reduced height by 10px */
}
.variant-editor-commit-button {
background-color: #7E6BDC !important;
/* Obsidian purple */
@ -422,6 +419,11 @@
border: 1px solid var(--background-modifier-border) !important;
border-radius: 12px !important;
background-color: var(--background-primary) !important;
position: fixed !important;
left: var(--modal-left, 50%) !important;
top: var(--modal-top, 50%) !important;
bottom: var(--modal-bottom, auto) !important;
transform: var(--modal-transform, translate(-50%, -50%)) !important;
}
/* Style the modal title */
@ -458,6 +460,22 @@
user-select: none;
}
.variant-editor-modal-hidden {
opacity: 0;
transition: opacity 150ms ease-in-out;
}
.variant-editor-modal-visible {
opacity: 1;
transition: opacity 150ms ease-in-out;
}
.variant-editor-textarea:focus {
outline: none;
border-color: var(--interactive-accent);
box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
}
/* When modal is positioned above the highlighted line, we no longer reorder elements */
.variant-editor-modal-above .variant-editor-flex-container {
/* Keep normal flow, just position the modal differently */
@ -475,10 +493,4 @@ body:has(.variant-editor-modal) .modal-bg {
background-color: transparent !important;
backdrop-filter: none !important;
opacity: 0 !important;
}
.variant-editor-textarea:focus {
outline: none;
border-color: var(--interactive-accent);
box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
}