diff --git a/main.ts b/main.ts index a63305a..37884b1 100644 --- a/main.ts +++ b/main.ts @@ -78,6 +78,9 @@ export default class StreamsPlugin extends Plugin { styleEl.id = 'streams-calendar-styles'; document.head.appendChild(styleEl); + // Load CSS styles from styles.css + await this.loadStyles(); + this.log.info('Streams plugin loaded'); } @@ -629,6 +632,33 @@ export default class StreamsPlugin extends Plugin { this.log.debug("=========================="); } + private loadStyles(): Promise { + return new Promise((resolve, reject) => { + try { + this.log.debug("Loading styles from styles.css"); + this.app.vault.adapter.readBinary( + `${this.app.vault.configDir}/plugins/streams/styles.css` + ).then(data => { + // Convert ArrayBuffer to string + const decoder = new TextDecoder('utf-8'); + const cssContent = decoder.decode(data); + + // Add styles + const styleEl = document.createElement('style'); + styleEl.textContent = cssContent; + document.head.appendChild(styleEl); + resolve(); + }).catch(error => { + this.log.error("Error reading styles.css:", error); + reject(error); + }); + } catch (error) { + this.log.error("Error loading styles:", error); + reject(error); + } + }); + } + public toggleStreamCommand(stream: Stream) { // Remove existing command first this.removeStreamCommand(stream.id); diff --git a/src/Widgets/CalendarWidget.ts b/src/Widgets/CalendarWidget.ts index 06270e2..108b465 100644 --- a/src/Widgets/CalendarWidget.ts +++ b/src/Widgets/CalendarWidget.ts @@ -69,6 +69,13 @@ export class CalendarWidget { } contentContainer.style.position = 'relative'; + + // I don't like these here, but moving them to styles.css caused breaks + this.widget.style.position = 'absolute'; + this.widget.style.zIndex = '1000'; + this.widget.style.top = '32px'; + this.widget.style.right = '0'; + contentContainer.appendChild(this.widget); this.fileModifyHandler = this.handleFileModify.bind(this); diff --git a/styles.css b/styles.css index f92dfa6..a2b204c 100644 --- a/styles.css +++ b/styles.css @@ -114,10 +114,11 @@ .stream-calendar-widget { position: absolute; top: 32px; - right: 100%; + right: 0; z-index: 1000; font-size: 12px; margin-right: 8px; + pointer-events: auto; } /* Mobile-specific positioning for the calendar widget */ @@ -128,6 +129,7 @@ z-index: 1000; font-size: 12px; margin-right: 0; + pointer-events: auto; } .is-phone .stream-calendar-widget { @@ -155,6 +157,8 @@ text-align: center; white-space: nowrap; user-select: none; + z-index: 1000; + pointer-events: auto; } .stream-calendar-expanded { @@ -169,15 +173,45 @@ opacity: 0; transform: scale(0.95); transition: all 0.3s ease; + z-index: 1005; + pointer-events: none; } .calendar-expanded { opacity: 1; transform: scale(1); + pointer-events: auto; } .stream-calendar-header { margin: 12px 0; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} + +.stream-calendar-nav { + cursor: pointer; + color: var(--text-muted); + padding: 4px; + display: flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; +} + +.stream-calendar-nav:hover { + color: var(--text-normal); + background-color: var(--background-modifier-hover); + border-radius: 4px; +} + +.stream-calendar-date { + font-weight: 600; + text-align: center; + flex: 1; } .calendar-day { @@ -323,20 +357,6 @@ border-left: 2px solid var(--stream-view-border-color, var(--text-success)); } -.stream-calendar-nav { - cursor: pointer; - color: var(--text-muted); - padding: 4px; -} - -.stream-calendar-nav:hover { - color: var(--text-normal); -} - -.stream-calendar-date { - font-weight: 600; -} - .today-button-expanded { opacity: 0; }