From 341c22223170c1ccf2d9c29014f3637f7616cc20 Mon Sep 17 00:00:00 2001 From: dralkh Date: Sat, 20 Dec 2025 18:30:55 +0300 Subject: [PATCH] fix: restore pomodoro timer visibility and functionality --- styles/pomodoro.css | 10 ++++---- ui/sidebar/list-view-renderer.ts | 38 +++++++++++++++++++------------ ui/sidebar/pomodoro-ui-manager.ts | 18 +++++++-------- 3 files changed, 37 insertions(+), 29 deletions(-) diff --git a/styles/pomodoro.css b/styles/pomodoro.css index d31ede5..6560b40 100644 --- a/styles/pomodoro.css +++ b/styles/pomodoro.css @@ -144,7 +144,7 @@ border-radius: 0 0 var(--radius-m) var(--radius-m); /* Rounded bottom corners */ box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Modern shadow */ padding: 0; /* Initial padding for transition */ - /* display: flex; is handled by JS */ + display: flex; /* Always flex to allow transition of other properties */ flex-direction: column; gap: 8px; /* Increased gap for better spacing */ overflow: hidden; /* Crucial for max-height transition */ @@ -154,14 +154,16 @@ opacity 0.3s ease-out, padding 0.35s cubic-bezier(0.25, 0.1, 0.25, 1); /* margin-top: 0; /* Removed original margin-top */ + pointer-events: none; /* Prevent interaction when closed */ } -/* Styles when the panel is open (display: flex is set by JS) */ -.pomodoro-quick-settings-panel[style*="display: flex"] { +/* Styles when the panel is open */ +.pomodoro-quick-settings-panel.is-open { padding: 12px; /* Restored padding */ - max-height: 500px; /* Large enough to fit content */ + max-height: 800px; /* Large enough to fit content */ opacity: 1; border-top: 1px solid var(--background-modifier-border); /* Add a separator line when open */ + pointer-events: auto; /* Allow interaction when open */ } .pomodoro-quick-setting { /* Added for individual setting item styling */ diff --git a/ui/sidebar/list-view-renderer.ts b/ui/sidebar/list-view-renderer.ts index 64b4b11..194bc66 100644 --- a/ui/sidebar/list-view-renderer.ts +++ b/ui/sidebar/list-view-renderer.ts @@ -130,25 +130,33 @@ export class ListViewRenderer { let pomodoroContainer = container.querySelector(".sidebar-pomodoro-section") as HTMLElement; if (!pomodoroContainer) { pomodoroContainer = container.createDiv("sidebar-pomodoro-section"); - pomodoroContainer.createDiv("pomodoro-section-container"); + } + + let pomodoroSectionContainerEl = pomodoroContainer.querySelector(".sidebar-pomodoro-section-container") as HTMLElement; + if (!pomodoroSectionContainerEl) { + // Check for legacy class names and migrate if found + const legacyEl = pomodoroContainer.querySelector(".pomodoro-section-container, .sidebar-pomodoro-button-container") as HTMLElement; + if (legacyEl) { + legacyEl.className = "sidebar-pomodoro-section-container"; + pomodoroSectionContainerEl = legacyEl; + } else { + pomodoroSectionContainerEl = pomodoroContainer.createDiv("sidebar-pomodoro-section-container"); + } } // Update Pomodoro section visibility and content - if (this.pomodoroUIManager && pomodoroContainer) { - const pomodoroSectionContainerEl = pomodoroContainer.querySelector(".sidebar-pomodoro-button-container") as HTMLElement; - if (pomodoroSectionContainerEl) { - this.pomodoroUIManager.attachAndRender(pomodoroSectionContainerEl); - if (this.plugin.settings.pomodoroEnabled) { - pomodoroContainer.classList.remove('sf-hidden'); - this.pomodoroUIManager.showPomodoroSection(true); - this.pomodoroUIManager.updatePomodoroUI(); + if (this.pomodoroUIManager && pomodoroContainer && pomodoroSectionContainerEl) { + this.pomodoroUIManager.attachAndRender(pomodoroSectionContainerEl); + if (this.plugin.settings.pomodoroEnabled) { + pomodoroContainer.classList.remove('sf-hidden'); + this.pomodoroUIManager.showPomodoroSection(true); + this.pomodoroUIManager.updatePomodoroUI(); - // Automatically calculate estimation for current notes - void this.pomodoroUIManager.calculateAndDisplayEstimation(); - } else { - pomodoroContainer.classList.add('sf-hidden'); - this.pomodoroUIManager.showPomodoroSection(false); - } + // Automatically calculate estimation for current notes + void this.pomodoroUIManager.calculateAndDisplayEstimation(); + } else { + pomodoroContainer.classList.add('sf-hidden'); + this.pomodoroUIManager.showPomodoroSection(false); } } diff --git a/ui/sidebar/pomodoro-ui-manager.ts b/ui/sidebar/pomodoro-ui-manager.ts index 774d1c9..b3d6de6 100644 --- a/ui/sidebar/pomodoro-ui-manager.ts +++ b/ui/sidebar/pomodoro-ui-manager.ts @@ -148,7 +148,7 @@ export class PomodoroUIManager { setIcon(this.pomodoroStopBtn, "pause"); this.pomodoroStopBtn.addEventListener("click", () => this.plugin.pomodoroService.stop()); } - this.pomodoroStopBtn.hide(); // Initial state, updatePomodoroUI will manage visibility + // this.pomodoroStopBtn.hide(); // Initial state, updatePomodoroUI will manage visibility // Timer Display if (!this.pomodoroTimerDisplayEl || this.pomodoroTimerDisplayEl.parentElement !== mainControlsRow) { @@ -293,7 +293,7 @@ export class PomodoroUIManager { if (!this.pomodoroQuickSettingsPanelEl || this.pomodoroQuickSettingsPanelEl.parentElement !== settingsPanelContainer) { this.pomodoroQuickSettingsPanelEl?.remove(); this.pomodoroQuickSettingsPanelEl = settingsPanelContainer.createDiv("pomodoro-quick-settings-panel"); - this.pomodoroQuickSettingsPanelEl.classList.add('sf-hidden'); // Initial state + // this.pomodoroQuickSettingsPanelEl.classList.add('sf-hidden'); // Initial state // Recreate inputs and buttons if panel is new const panel = this.pomodoroQuickSettingsPanelEl; @@ -469,16 +469,14 @@ export class PomodoroUIManager { private toggleSettingsPanel(): void { const panel = this.pomodoroQuickSettingsPanelEl; if (!panel) return; - const isCurrentlyHidden = panel.classList.contains('sf-hidden') || !panel.classList.contains('sf-visible'); - if (isCurrentlyHidden) { - panel.classList.remove('sf-hidden'); - panel.classList.add('sf-visible'); + const isCurrentlyOpen = panel.classList.contains('is-open'); + if (!isCurrentlyOpen) { + panel.classList.add('is-open'); } else { - panel.classList.remove('sf-visible'); - panel.classList.add('sf-hidden'); + panel.classList.remove('is-open'); } - if (isCurrentlyHidden) { // Populate inputs when opening + if (!isCurrentlyOpen) { // Populate inputs when opening if (this.pomodoroQuickWorkInput) this.pomodoroQuickWorkInput.value = String(this.plugin.settings.pomodoroWorkDuration); if (this.pomodoroQuickShortInput) this.pomodoroQuickShortInput.value = String(this.plugin.settings.pomodoroShortBreakDuration); if (this.pomodoroQuickLongInput) this.pomodoroQuickLongInput.value = String(this.plugin.settings.pomodoroLongBreakDuration); @@ -567,7 +565,7 @@ export class PomodoroUIManager { this.pomodoroRootEl.toggleClass('is-idle', state.pomodoroCurrentMode === 'idle'); // Hide calculation result if quick settings panel is closed - if (this.pomodoroCalculationResultEl && this.pomodoroQuickSettingsPanelEl?.style.display === 'none') { + if (this.pomodoroCalculationResultEl && this.pomodoroQuickSettingsPanelEl && !this.pomodoroQuickSettingsPanelEl.classList.contains('is-open')) { this.pomodoroCalculationResultEl.addClass('sf-hidden'); }