popov/gogo2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui fixes

Browse Source
This commit is contained in:
Dobromir Popov
2025-11-22 15:25:57 +02:00
parent bccac9614d
commit 2f28fcc89a
7 changed files with 174 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
ANNOTATE/web/templates/components/chart_panel.html
View File

@@ -14,6 +14,9 @@
<button type="button" class="btn btn-outline-light" id="reset-zoom-btn" title="Reset Zoom">
<i class="fas fa-expand"></i>
</button>
<button type="button" class="btn btn-outline-light" id="maximize-btn" title="Maximize Chart Area">
<i class="fas fa-arrows-alt"></i>
</button>
<button type="button" class="btn btn-outline-light" id="fullscreen-btn" title="Fullscreen">
<i class="fas fa-expand-arrows-alt"></i>
</button>
@@ -110,6 +113,41 @@
}
});
document.getElementById('maximize-btn').addEventListener('click', function () {
const mainRow = document.querySelector('.row.mt-3');
const leftSidebar = mainRow.querySelector('.col-md-2:first-child');
const chartArea = mainRow.querySelector('.col-md-8');
const rightSidebar = mainRow.querySelector('.col-md-2:last-child');
const chartPanel = document.querySelector('.chart-panel');
const maximizeIcon = this.querySelector('i');
// Toggle maximize state
if (chartArea.classList.contains('chart-maximized')) {
// Restore normal view
leftSidebar.style.display = '';
rightSidebar.style.display = '';
chartArea.classList.remove('chart-maximized');
chartPanel.classList.remove('chart-panel-maximized');
maximizeIcon.className = 'fas fa-arrows-alt';
this.title = 'Maximize Chart Area';
} else {
// Maximize chart area
leftSidebar.style.display = 'none';
rightSidebar.style.display = 'none';
chartArea.classList.add('chart-maximized');
chartPanel.classList.add('chart-panel-maximized');
maximizeIcon.className = 'fas fa-compress-arrows-alt';
this.title = 'Restore Normal View';
}
// Update chart layouts after transition
setTimeout(() => {
if (window.appState && window.appState.chartManager) {
window.appState.chartManager.updateChartLayout();
}
}, 350);
});
document.getElementById('fullscreen-btn').addEventListener('click', function () {
const chartContainer = document.getElementById('chart-container');
if (chartContainer.requestFullscreen) {