fix: restore gear icon toggle and fix chart settings persistence

This commit is contained in:
DiTus
2026-03-21 08:31:44 +01:00
parent ee58df6169
commit b79b82368d
3 changed files with 87 additions and 94 deletions

View File

@ -114,37 +114,53 @@
<button class="w-8 h-8 bg-[#1e222d] border border-[#2d3a4f] text-gray-300 flex items-center justify-center rounded hover:bg-[#2d3a4f] transition-colors shadow-lg" id="btnLogScale" title="Log Scale">L</button>
<!-- Settings Popup -->
<div class="hidden absolute bottom-10 right-0 bg-[#1e222d] border border-[#2d3a4f] rounded-lg p-3 z-50 w-56 shadow-xl" id="settingsPopup">
<div class="mb-3">
<label class="block text-[10px] text-[#8fa2b3] mb-1 uppercase tracking-wider">Candle Colors</label>
<div class="hidden absolute bottom-10 right-0 bg-[#1a2333] border border-[#2d3a4f] rounded-lg py-2 z-50 w-64 shadow-xl text-sm" id="settingsPopup">
<!-- Reset Scale -->
<div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer flex items-center gap-3" onclick="window.dashboard.chart.timeScale().fitContent()">
<span class="material-symbols-outlined text-sm">refresh</span> Reset price scale
</div>
<hr class="border-[#2d3a4f] my-1">
<!-- Scale Toggles -->
<div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer" onclick="window.toggleScaleOption('autoScale')">
<span id="autoScaleCheck"></span> Auto (fits data to screen)
</div>
<div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer" onclick="window.toggleScaleOption('invertScale')">
<span id="invertScaleCheck"></span> Invert scale
</div>
<hr class="border-[#2d3a4f] my-1">
<!-- Scale Modes -->
<div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer" onclick="window.setScaleMode(0)">
<span id="modeNormalCheck"></span> Regular
</div>
<div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer" onclick="window.setScaleMode(2)">
<span id="modePercentCheck"></span> Percent
</div>
<div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer" onclick="window.setScaleMode(3)">
<span id="modeIndexedCheck"></span> Indexed to 100
</div>
<div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer" onclick="window.setScaleMode(1)">
<span id="modeLogCheck"></span> Logarithmic
</div>
<hr class="border-[#2d3a4f] my-1">
<!-- Candle Colors -->
<div class="px-4 py-2">
<label class="text-[10px] text-[#8fa2b3] uppercase tracking-wider mb-1 block">Candle Colors</label>
<div class="flex gap-2">
<div class="flex-1">
<label class="text-[9px] text-[#8fa2b3] block mb-0.5">Up</label>
<div class="h-6 w-full rounded border border-[#2d3a4f] relative overflow-hidden">
<input type="color" id="candleUpColor" value="#ff9800" class="absolute -top-2 -left-2 w-[200%] h-[200%] cursor-pointer p-0 m-0 border-0">
</div>
</div>
<div class="flex-1">
<label class="text-[9px] text-[#8fa2b3] block mb-0.5">Down</label>
<div class="h-6 w-full rounded border border-[#2d3a4f] relative overflow-hidden">
<input type="color" id="candleDownColor" value="#ff9800" class="absolute -top-2 -left-2 w-[200%] h-[200%] cursor-pointer p-0 m-0 border-0">
</div>
</div>
<input type="color" id="candleUpColor" value="#ff9800" class="flex-1 h-6 cursor-pointer">
<input type="color" id="candleDownColor" value="#ff9800" class="flex-1 h-6 cursor-pointer">
</div>
</div>
<div class="grid grid-cols-[1fr_auto] items-center gap-2 mb-3">
<label class="text-[10px] text-[#8fa2b3] uppercase tracking-wider">Decimals</label>
<input type="number" id="priceFormatInput" min="0" max="8" value="2" class="w-16 bg-[#0d1421] border border-[#2d3a4f] text-gray-300 text-xs rounded p-1.5 text-center focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
</div>
<div class="grid grid-cols-[auto_1fr] items-center gap-2 mb-0">
<label class="text-[10px] text-[#8fa2b3] uppercase tracking-wider whitespace-nowrap">Timezone</label>
<select class="w-full bg-[#0d1421] border border-[#2d3a4f] text-gray-300 text-[10px] rounded p-1.5 focus:ring-1 focus:ring-blue-500 focus:border-blue-500" id="timezoneSelect">
<option value="UTC">UTC</option>
<option value="Europe/Warsaw" selected>Warsaw</option>
<option value="America/New_York">New York</option>
</select>
<!-- Decimals -->
<div class="px-4 py-2 flex items-center justify-between">
<label class="text-sm text-gray-300">Decimals</label>
<input type="number" id="priceFormatInput" min="0" max="8" value="2" class="w-16 bg-[#0d1421] border border-[#2d3a4f] text-center rounded text-xs">
</div>
</div>
</div>