nebula-project/NebulaBrowser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Add customizable home layout editing and settings

Browse Source 
Introduces an edit mode on the home page allowing users to drag and reposition the greeting, search bar, top sites, and 'at a glance' widget. Adds persistent storage for these layout preferences and a settings panel for fine-tuning positions and widget corner. Updates CSS, HTML, and JS to support edit UI, drag logic, and settings integration.
This commit is contained in:
Andrew Zambazos
2025-09-06 21:46:08 +12:00
parent 285fc44124
commit 5e3b99fdd6
5 changed files with 302 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
renderer/settings.html
+20
View File
@@ -409,6 +409,26 @@
<input type="radio" name="layout" value="compact">
<span>Compact View</span>
</label>
<hr style="opacity:.2; margin:10px 0;">
<div style="display:grid; grid-template-columns: 1fr; gap:10px;">
<label style="display:flex; align-items:center; gap:10px;">
<span style="min-width:160px;">Search Y position</span>
<input type="range" id="home-search-y" min="5" max="85" step="1" value="22">
<span id="home-search-y-val" style="opacity:.8; width:48px; text-align:right;">22vh</span>
</label>
<label style="display:flex; align-items:center; gap:10px;">
<span style="min-width:160px;">Top Sites Y position</span>
<input type="range" id="home-bookmarks-y" min="10" max="90" step="1" value="40">
<span id="home-bookmarks-y-val" style="opacity:.8; width:48px; text-align:right;">40vh</span>
</label>
</div>
<div style="margin-top:8px;">
<div style="margin-bottom:6px;">At a glance corner</div>
<label style="margin-right:12px;"><input type="radio" name="home-glance-corner" value="br" checked> Bottom‑Right</label>
<label style="margin-right:12px;"><input type="radio" name="home-glance-corner" value="bl"> Bottom‑Left</label>
<label style="margin-right:12px;"><input type="radio" name="home-glance-corner" value="tr"> Top‑Right</label>
<label style="margin-right:12px;"><input type="radio" name="home-glance-corner" value="tl"> Top‑Left</label>
</div>
</div>
</div>