p1otek/winterfail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: update chart type icons and header layout for better mobile/desktop experience

Browse Source
This commit is contained in:
DiTus
2026-03-23 10:49:08 +01:00
parent bde7945a1b
commit c3ca5670e3
2 changed files with 44 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
js/ui/chart.js
View File

@ -303,9 +303,21 @@ export class TradingDashboard {
if (!container) return;
const chartTypes = [
{ type: 'candlestick', icon: 'show_chart', name: 'Candlestick' },
{ type: 'line', icon: 'insert_chart', name: 'Line' },
{ type: 'bar', icon: 'scatter_plot', name: 'Bar' }
{
type: 'candlestick',
icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 5v3M7 16v3M17 3v2M17 11v4"/><rect x="5" y="8" width="4" height="8" rx="0.5"/><rect x="15" y="5" width="4" height="6" rx="0.5"/></svg>`,
name: 'Candlestick'
},
{
type: 'line',
icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17l6-6 4 4 8-8"/></svg>`,
name: 'Line'
},
{
type: 'bar',
icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 5v14M7 10H5M7 15h2M17 5v14M17 7h-2M17 12h2"/></svg>`,
name: 'Bar'
}
];
container.innerHTML = '';
@ -313,11 +325,10 @@ export class TradingDashboard {
const btn = document.createElement('button');
btn.className = 'chart-type-btn w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded transition-colors';
btn.dataset.chartType = chartType.type;
btn.innerHTML = `<span class="material-symbols-outlined text-sm">${chartType.icon}</span>`;
btn.innerHTML = chartType.icon;
btn.title = chartType.name;
if (chartType.type === this.currentChartType) {
btn.style.backgroundColor = '#2d3a4f';
btn.classList.add('text-blue-400');
btn.classList.add('active');
}
btn.addEventListener('click', () => this.switchChartType(chartType.type));
container.appendChild(btn);
@ -1361,11 +1372,9 @@ export class TradingDashboard {
updateChartTypeButtons() {
const buttons = document.querySelectorAll('.chart-type-btn');
buttons.forEach(btn => {
btn.classList.remove('text-blue-400');
btn.style.backgroundColor = '';
btn.classList.remove('active');
if (btn.dataset.chartType === this.currentChartType) {
btn.style.backgroundColor = '#2d3a4f';
btn.classList.add('text-blue-400');
btn.classList.add('active');
}
});
}