Removed Floating timer -> Status Bar
This commit is contained in:
162
src/main.ts
162
src/main.ts
@@ -36,8 +36,8 @@ export default class FocusTaskPlugin extends Plugin {
|
||||
activeTaskId: string | null = null;
|
||||
pomodoroCount: number = 0;
|
||||
|
||||
// Floating timer element
|
||||
floatingTimerEl: HTMLElement | null = null;
|
||||
// Status Bar element
|
||||
statusBarEl: HTMLElement | null = null;
|
||||
|
||||
async onload() {
|
||||
await this.loadAllData();
|
||||
@@ -91,15 +91,13 @@ export default class FocusTaskPlugin extends Plugin {
|
||||
this.addSettingTab(new FocusTaskSettingTab(this.app, this));
|
||||
|
||||
// Create floating timer if enabled
|
||||
if (this.settings.showFloatingTimer) {
|
||||
this.createFloatingTimer();
|
||||
}
|
||||
this.createStatusBar();
|
||||
}
|
||||
|
||||
onunload() {
|
||||
this.stopTimer();
|
||||
this.removeFloatingTimer();
|
||||
}
|
||||
this.stopTimer();
|
||||
}
|
||||
|
||||
|
||||
async loadAllData() {
|
||||
const loaded = await this.loadData();
|
||||
@@ -272,7 +270,7 @@ export default class FocusTaskPlugin extends Plugin {
|
||||
}, 1000);
|
||||
|
||||
this.saveAllData();
|
||||
this.refreshView();
|
||||
this.updateTimerDisplay();
|
||||
this.updateFloatingTimer();
|
||||
}
|
||||
|
||||
@@ -304,7 +302,7 @@ export default class FocusTaskPlugin extends Plugin {
|
||||
}, 1000);
|
||||
|
||||
this.updateFloatingTimer();
|
||||
this.refreshView();
|
||||
this.updateTimerDisplay();
|
||||
}
|
||||
|
||||
handlePomodoroEnd() {
|
||||
@@ -357,7 +355,7 @@ export default class FocusTaskPlugin extends Plugin {
|
||||
}
|
||||
|
||||
this.updateFloatingTimer();
|
||||
this.refreshView();
|
||||
this.updateTimerDisplay();
|
||||
}
|
||||
|
||||
toggleTimer() {
|
||||
@@ -388,7 +386,7 @@ export default class FocusTaskPlugin extends Plugin {
|
||||
}
|
||||
|
||||
this.updateFloatingTimer();
|
||||
this.refreshView();
|
||||
this.updateTimerDisplay();
|
||||
}
|
||||
|
||||
stopTimer() {
|
||||
@@ -419,106 +417,38 @@ export default class FocusTaskPlugin extends Plugin {
|
||||
}
|
||||
}
|
||||
|
||||
// ============ Floating Timer ============
|
||||
// ============ Status Bar Timer ============
|
||||
|
||||
createFloatingTimer() {
|
||||
if (this.floatingTimerEl) return;
|
||||
|
||||
this.floatingTimerEl = document.body.createEl('div', {
|
||||
cls: 'focus-task-floating-timer',
|
||||
});
|
||||
|
||||
this.floatingTimerEl.innerHTML = `
|
||||
<div class="focus-task-floating-inner">
|
||||
<div class="focus-task-floating-task">No active task</div>
|
||||
<div class="focus-task-floating-time">00:00</div>
|
||||
<div class="focus-task-floating-controls">
|
||||
<button class="focus-task-float-btn play-pause">▶</button>
|
||||
<button class="focus-task-float-btn complete">✓</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Make draggable
|
||||
this.makeDraggable(this.floatingTimerEl);
|
||||
|
||||
// Add event listeners
|
||||
const playPauseBtn = this.floatingTimerEl.querySelector('.play-pause');
|
||||
const completeBtn = this.floatingTimerEl.querySelector('.complete');
|
||||
|
||||
playPauseBtn?.addEventListener('click', () => this.toggleTimer());
|
||||
completeBtn?.addEventListener('click', () => this.completeActiveTask());
|
||||
createStatusBar() {
|
||||
this.statusBarEl = this.addStatusBarItem();
|
||||
this.statusBarEl.addClass('focus-task-status-bar');
|
||||
this.updateStatusBar();
|
||||
|
||||
// Click to open panel
|
||||
this.statusBarEl.addEventListener('click', () => {
|
||||
this.activateView();
|
||||
});
|
||||
}
|
||||
|
||||
removeFloatingTimer() {
|
||||
if (this.floatingTimerEl) {
|
||||
this.floatingTimerEl.remove();
|
||||
this.floatingTimerEl = null;
|
||||
}
|
||||
}
|
||||
|
||||
updateFloatingTimer() {
|
||||
if (!this.floatingTimerEl) return;
|
||||
|
||||
const taskEl = this.floatingTimerEl.querySelector('.focus-task-floating-task');
|
||||
const timeEl = this.floatingTimerEl.querySelector('.focus-task-floating-time');
|
||||
const playPauseBtn = this.floatingTimerEl.querySelector('.play-pause');
|
||||
updateStatusBar() {
|
||||
if (!this.statusBarEl) return;
|
||||
|
||||
if (this.activeTaskId) {
|
||||
const task = this.data.tasks.find(t => t.id === this.activeTaskId);
|
||||
if (task && taskEl) {
|
||||
taskEl.textContent = this.isBreakMode ? '☕ Break Time' : task.text;
|
||||
}
|
||||
} else if (taskEl) {
|
||||
taskEl.textContent = 'No active task';
|
||||
}
|
||||
|
||||
if (timeEl) {
|
||||
timeEl.textContent = this.formatTime(this.currentTimerSeconds);
|
||||
timeEl.classList.toggle('focus-task-overtime', this.currentTimerSeconds < 0);
|
||||
}
|
||||
|
||||
if (playPauseBtn) {
|
||||
playPauseBtn.textContent = this.isTimerRunning ? '⏸' : '▶';
|
||||
}
|
||||
|
||||
// Update color based on state
|
||||
this.floatingTimerEl.classList.toggle('focus-task-break-mode', this.isBreakMode);
|
||||
this.floatingTimerEl.classList.toggle('focus-task-active', this.isTimerRunning);
|
||||
}
|
||||
|
||||
makeDraggable(el: HTMLElement) {
|
||||
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
|
||||
|
||||
el.onmousedown = dragMouseDown;
|
||||
|
||||
function dragMouseDown(e: MouseEvent) {
|
||||
if ((e.target as HTMLElement).tagName === 'BUTTON') return;
|
||||
e.preventDefault();
|
||||
pos3 = e.clientX;
|
||||
pos4 = e.clientY;
|
||||
document.onmouseup = closeDragElement;
|
||||
document.onmousemove = elementDrag;
|
||||
}
|
||||
|
||||
function elementDrag(e: MouseEvent) {
|
||||
e.preventDefault();
|
||||
pos1 = pos3 - e.clientX;
|
||||
pos2 = pos4 - e.clientY;
|
||||
pos3 = e.clientX;
|
||||
pos4 = e.clientY;
|
||||
el.style.top = (el.offsetTop - pos2) + "px";
|
||||
el.style.left = (el.offsetLeft - pos1) + "px";
|
||||
el.style.right = 'auto';
|
||||
el.style.bottom = 'auto';
|
||||
}
|
||||
|
||||
function closeDragElement() {
|
||||
document.onmouseup = null;
|
||||
document.onmousemove = null;
|
||||
const taskName = this.isBreakMode ? '☕ Break' : (task?.text.substring(0, 20) || 'Task');
|
||||
const timeStr = this.formatTime(this.currentTimerSeconds);
|
||||
const icon = this.isTimerRunning ? '▶' : '⏸';
|
||||
|
||||
this.statusBarEl.setText(`⚡ ${icon} ${timeStr} - ${taskName}${task && task.text.length > 20 ? '...' : ''}`);
|
||||
this.statusBarEl.addClass('focus-task-status-active');
|
||||
} else {
|
||||
this.statusBarEl.setText('⚡ Focus Task');
|
||||
this.statusBarEl.removeClass('focus-task-status-active');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ============ Sounds & Celebrations ============
|
||||
|
||||
showCelebration(task: FocusTask) {
|
||||
@@ -612,6 +542,16 @@ export default class FocusTaskPlugin extends Plugin {
|
||||
});
|
||||
}
|
||||
|
||||
// Light refresh - only updates timer display without rebuilding DOM
|
||||
updateTimerDisplay() {
|
||||
const leaves = this.app.workspace.getLeavesOfType(VIEW_TYPE_FOCUS_TASK);
|
||||
leaves.forEach(leaf => {
|
||||
if (leaf.view instanceof FocusTaskView) {
|
||||
leaf.view.updateTimerDisplay();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getTasksByList(listId: string): FocusTask[] {
|
||||
return this.data.tasks.filter(t => t.list === listId);
|
||||
}
|
||||
@@ -761,21 +701,7 @@ class FocusTaskSettingTab extends PluginSettingTab {
|
||||
await this.plugin.saveAllData();
|
||||
}));
|
||||
|
||||
new Setting(containerEl)
|
||||
.setName('Show Floating Timer')
|
||||
.setDesc('Display a draggable floating timer widget')
|
||||
.addToggle(toggle => toggle
|
||||
.setValue(this.plugin.settings.showFloatingTimer)
|
||||
.onChange(async value => {
|
||||
this.plugin.settings.showFloatingTimer = value;
|
||||
if (value) {
|
||||
this.plugin.createFloatingTimer();
|
||||
} else {
|
||||
this.plugin.removeFloatingTimer();
|
||||
}
|
||||
await this.plugin.saveAllData();
|
||||
}));
|
||||
|
||||
|
||||
// Lists Management
|
||||
containerEl.createEl('h2', { text: '📋 Lists' });
|
||||
|
||||
|
||||
Reference in New Issue
Block a user