remove inline css

This commit is contained in:
Ben Floyd 2025-09-28 19:37:45 -06:00
parent 66fd508899
commit 5f40ca5227
2 changed files with 56 additions and 30 deletions

View file

@ -143,17 +143,8 @@ export class CalendarComponent extends Component {
const viewHeader = viewHeaders[viewHeaders.length - 1]; // Get the last one (most likely the active one)
if (viewHeader) {
this.component.style.position = 'relative';
this.component.style.display = 'block';
this.component.style.width = '100%';
this.component.style.margin = '0 0 10px 0';
this.component.style.backgroundColor = 'var(--background-primary)';
this.component.style.border = '1px solid var(--background-modifier-border)';
this.component.style.borderRadius = '6px';
this.component.style.padding = '8px';
this.component.style.fontSize = '14px';
this.component.style.lineHeight = '1.4';
// Apply standard calendar component styling
this.component.addClass('streams-calendar-component');
// Insert after the view-header instead of inside it
if (viewHeader.parentElement) {
@ -162,16 +153,8 @@ export class CalendarComponent extends Component {
viewHeader.appendChild(this.component);
}
} else {
this.component.style.position = 'fixed';
this.component.style.top = '60px';
this.component.style.right = '20px';
this.component.style.zIndex = '1000';
this.component.style.backgroundColor = 'var(--background-primary)';
this.component.style.border = '1px solid var(--background-modifier-border)';
this.component.style.borderRadius = '6px';
this.component.style.padding = '8px';
this.component.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
// Apply fallback positioning styling
this.component.addClass('streams-calendar-component--fallback');
document.body.appendChild(this.component);
}
@ -253,8 +236,7 @@ export class CalendarComponent extends Component {
this.toggleStreamsDropdown();
});
this.streamsDropdown = changeStreamSection.createDiv('streams-calendar-streams-dropdown');
this.streamsDropdown.style.display = 'none';
this.streamsDropdown = changeStreamSection.createDiv('streams-calendar-streams-dropdown streams-dropdown');
this.populateStreamsDropdown();
const topNav = expandedView.createDiv('streams-calendar-top-nav');
@ -321,7 +303,7 @@ export class CalendarComponent extends Component {
this.toggleExpanded(collapsedView, expandedView);
}
if (this.streamsDropdown && this.streamsDropdown.style.display !== 'none' && !this.component.contains(e.target as Node)) {
if (this.streamsDropdown && !this.streamsDropdown.hasClass('streams-dropdown--visible') && !this.component.contains(e.target as Node)) {
this.toggleStreamsDropdown();
}
});
@ -338,9 +320,7 @@ export class CalendarComponent extends Component {
this.component.offsetHeight; // Force layout
// Also try to make sure the component is visible
this.component.style.display = 'block';
this.component.style.visibility = 'visible';
this.component.style.opacity = '1';
this.component.addClass('streams-calendar-component--visible');
}
@ -581,8 +561,12 @@ export class CalendarComponent extends Component {
private toggleStreamsDropdown() {
if (this.streamsDropdown) {
const isVisible = this.streamsDropdown.style.display !== 'none';
this.streamsDropdown.style.display = isVisible ? 'none' : 'block';
const isVisible = this.streamsDropdown.hasClass('streams-dropdown--visible');
if (isVisible) {
this.streamsDropdown.removeClass('streams-dropdown--visible');
} else {
this.streamsDropdown.addClass('streams-dropdown--visible');
}
}
}
@ -639,7 +623,7 @@ export class CalendarComponent extends Component {
}
if (this.streamsDropdown) {
this.streamsDropdown.style.display = 'none';
this.streamsDropdown.removeClass('streams-dropdown--visible');
}
if (this.plugin && this.plugin.setActiveStream) {

View file

@ -811,3 +811,45 @@
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
}
/* Calendar Component Positioning Styles */
.streams-calendar-component {
position: relative;
display: block;
width: 100%;
margin: 0 0 10px 0;
background-color: var(--background-primary);
border: 1px solid var(--background-modifier-border);
border-radius: 6px;
padding: 8px;
font-size: 14px;
line-height: 1.4;
}
.streams-calendar-component--fallback {
position: fixed;
top: 60px;
right: 20px;
z-index: 1000;
background-color: var(--background-primary);
border: 1px solid var(--background-modifier-border);
border-radius: 6px;
padding: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Calendar Component Dropdown Styles */
.streams-calendar-component .streams-dropdown {
display: none;
}
.streams-calendar-component .streams-dropdown--visible {
display: block;
}
/* Calendar Component Visibility States */
.streams-calendar-component--visible {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}