gsadmin/pulse
1
0
Fork 0
mirror of https://github.com/rcourtman/Pulse.git synced 2026-09-11 22:12:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add UI scale slider

Browse Source
This commit is contained in:
courtmanr@gmail.com
2025-04-27 20:58:10 +01:00
parent d807df8930
commit 7ed23f232b
2 changed files with 48 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/public/app.js
+42 -2
View File
@@ -456,7 +456,6 @@ document.addEventListener('DOMContentLoaded', function() {
return isNaN(numericVal) ? 0 : numericVal; // Default to 0 if parsing fails unexpectedly
}
// --- End Special Handling ---
// Handle specific column logic if needed
if (type === 'main' && col === 'id') val = parseInt(item.vmid || item.id || 0);
else if (type === 'nodes' && col === 'id') val = item.node;
@@ -2558,4 +2557,45 @@ document.addEventListener('DOMContentLoaded', function() {
}
// ---> END NEW Function <---
}); // End DOMContentLoaded
// --- START: UI Scale Slider Logic ---
const uiScaleSlider = document.getElementById('ui-scale-slider');
// Target the root <html> element for font-size adjustment
// REUSE existing variable declared earlier
const applyRootFontSize = (sliderValue) => {
// Map slider value (0.75-1.25) to root font size (e.g., 12px-20px, centered around 16px)
const baseSize = 16; // Assuming default browser root font size is 16px
const newSizePx = baseSize * sliderValue;
if (htmlElement) {
htmlElement.style.fontSize = `${newSizePx}px`;
}
if (uiScaleSlider) {
uiScaleSlider.value = sliderValue;
}
};
const loadRootFontSize = () => {
const savedMultiplier = localStorage.getItem('uiFontMultiplier');
if (savedMultiplier) {
applyRootFontSize(parseFloat(savedMultiplier));
} else {
applyRootFontSize(1.0); // Default multiplier (maps to 16px)
}
};
if (uiScaleSlider && htmlElement) {
uiScaleSlider.addEventListener('input', (event) => {
const newMultiplier = parseFloat(event.target.value);
applyRootFontSize(newMultiplier);
localStorage.setItem('uiFontMultiplier', newMultiplier.toString());
});
// Load initial font size
loadRootFontSize();
} else {
console.error('Could not find UI scale slider or HTML element.');
}
// --- END: UI Scale Slider Logic ---
}); // End DOMContentLoaded
src/public/index.html
+6
View File
@@ -60,6 +60,12 @@
<path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
</button>
<!-- Start: UI Scale Slider -->
<div class="ui-scale-slider flex items-center opacity-50 hover:opacity-100 focus-within:opacity-100 transition-opacity duration-300" title="Adjust UI Scale" style="gap: 4px;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-500 dark:text-gray-400 flex-shrink-0"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="4"></circle><line x1="21.17" y1="8" x2="12" y2="8"></line><line x1="3.95" y1="6.06" x2="8.54" y2="14"></line><line x1="10.88" y1="21.94" x2="15.46" y2="14"></line></svg> <!-- Target icon -->
<input type="range" id="ui-scale-slider" min="0.75" max="1.25" step="0.05" value="1.0" class="cursor-pointer accent-blue-600 dark:accent-blue-500" style="width: 80px; height: 16px;">
</div>
<!-- End: UI Scale Slider -->
<div id="connection-status" class="status disconnected text-xs px-2 py-1 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400">Disconnected</div>
<!-- JS will need to toggle classes like 'bg-red-100 dark:bg-red-800/30 text-red-700 dark:text-red-300' for disconnected -->
<!-- and 'bg-green-100 dark:bg-green-800/30 text-green-700 dark:text-green-300' for connected -->