From 3116f4de1bbde3ae057ec47e2d62de155a751f71 Mon Sep 17 00:00:00 2001 From: Andrew Zambazos Date: Sat, 6 Sep 2025 21:55:21 +1200 Subject: [PATCH] Home fixes - Greeting given movement options - Cancel / Save moves according to AAG location --- renderer/home.css | 10 ++++++++-- renderer/home.js | 29 +++++++++++++++++++++++++++-- 2 files changed, 35 insertions(+), 4 deletions(-) diff --git a/renderer/home.css b/renderer/home.css index e2cd2d9..6f9e868 100644 --- a/renderer/home.css +++ b/renderer/home.css @@ -14,7 +14,7 @@ --primary: #7B2EFF; --accent: #00C6FF; --text: #E0E0E0; - --home-greeting-y: 12vh; /* user adjustable */ + --home-greeting-y: 12vh; /* fixed vertical baseline */ --home-search-y: 22vh; /* user adjustable */ --home-bookmarks-y: 40vh; /* user adjustable */ } @@ -49,7 +49,7 @@ body, html { padding: 4rem 2rem 2rem; } -.edit-btn { position: absolute; top: 16px; right: 16px; z-index: 5; background: rgba(255,255,255,0.1); color:#fff; border:1px solid rgba(255,255,255,0.2); border-radius:8px; padding:6px 10px; cursor:pointer; backdrop-filter: blur(6px); } +.edit-btn { position: fixed; top: 16px; right: 16px; z-index: 5; background: rgba(255,255,255,0.1); color:#fff; border:1px solid rgba(255,255,255,0.2); border-radius:8px; padding:6px 10px; cursor:pointer; backdrop-filter: blur(6px); } .edit-btn[aria-pressed="true"] { background: rgba(255,255,255,0.22); } .edit-mode .edit-btn { display:none; } .edit-mode .greeting-title, .edit-mode .search-container, .edit-mode .top-sites-card, .edit-mode .glance { outline: 2px dashed rgba(255,255,255,0.35); outline-offset: 4px; cursor: grab; } @@ -59,6 +59,12 @@ body, html { .edit-toolbar { position: fixed; top: 16px; right: 16px; display:none; gap:10px; z-index:6; backdrop-filter: blur(8px); background: rgba(8,10,16,0.5); border:1px solid rgba(255,255,255,0.15); padding:8px 10px; border-radius:12px; box-shadow: 0 12px 30px -14px rgba(0,0,0,.7); } .edit-mode .edit-toolbar { display:flex; } .edit-toolbar[hidden] { display: none !important; } + +/* Corner helpers for edit controls */ +.edit-btn.pos-br, .edit-toolbar.pos-br { right:16px; bottom:16px; left:auto; top:auto; } +.edit-btn.pos-bl, .edit-toolbar.pos-bl { left:16px; bottom:16px; right:auto; top:auto; } +.edit-btn.pos-tr, .edit-toolbar.pos-tr { right:16px; top:16px; left:auto; bottom:auto; } +.edit-btn.pos-tl, .edit-toolbar.pos-tl { left:16px; top:16px; right:auto; bottom:auto; } .edit-toolbar .btn { min-width:90px; padding:8px 12px; border-radius:8px; border:1px solid transparent; color:#fff; cursor:pointer; } .edit-toolbar .btn.primary { background: linear-gradient(135deg, var(--accent), var(--primary)); } .edit-toolbar .btn.secondary { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.2); } diff --git a/renderer/home.js b/renderer/home.js index fabb0cb..110fbaf 100644 --- a/renderer/home.js +++ b/renderer/home.js @@ -707,6 +707,14 @@ function applyHomeLayoutPrefs() { glanceEl.classList.remove('pos-br','pos-bl','pos-tr','pos-tl'); glanceEl.classList.add(`pos-${corner}`); } + // Position edit controls at the opposite horizontal side of glance (X-only move) + const oppositeHorizontal = (c) => ({ br:'bl', bl:'br', tr:'tl', tl:'tr' }[c] || 'tr'); + const editCorner = oppositeHorizontal(corner); + [editBtn, editToolbar].forEach(ctrl => { + if (!ctrl) return; + ctrl.classList.remove('pos-br','pos-bl','pos-tr','pos-tl'); + ctrl.classList.add(`pos-${editCorner}`); + }); } catch (e) { console.warn('applyHomeLayoutPrefs failed', e); } } @@ -728,6 +736,14 @@ if (window.electronAPI && typeof window.electronAPI.on === 'function') { if (payload.glanceCorner && glanceEl) { glanceEl.classList.remove('pos-br','pos-bl','pos-tr','pos-tl'); glanceEl.classList.add(`pos-${payload.glanceCorner}`); + // Update edit controls to opposite horizontal side (X-only) + const oppositeHorizontal = (c) => ({ br:'bl', bl:'br', tr:'tl', tl:'tr' }[c] || 'tr'); + const editCorner = oppositeHorizontal(payload.glanceCorner); + [editBtn, editToolbar].forEach(ctrl => { + if (!ctrl) return; + ctrl.classList.remove('pos-br','pos-bl','pos-tr','pos-tl'); + ctrl.classList.add(`pos-${editCorner}`); + }); } }); } @@ -743,7 +759,7 @@ function setEditMode(on) { if (editMode) { // Take a snapshot of current persisted values snapshot = { - greetY: Number(localStorage.getItem('nebula-home-greeting-y') || 12), + greetY: Number(localStorage.getItem('nebula-home-greeting-y') || 12), searchY: Number(localStorage.getItem('nebula-home-search-y') || 22), bmY: Number(localStorage.getItem('nebula-home-bookmarks-y') || 40), corner: localStorage.getItem('nebula-home-glance-corner') || 'br' @@ -823,6 +839,14 @@ function makeDragGlance(el) { // Stash pending corner choice on the element during edit mode glanceEl.dataset.pendingCorner = corner; } + // Also move edit controls to opposite corner during preview + const opposite = (c) => ({ br:'tl', bl:'tr', tr:'bl', tl:'br' }[c] || 'tl'); + const editCorner = opposite(corner); + [editBtn, editToolbar].forEach(ctrl => { + if (!ctrl) return; + ctrl.classList.remove('pos-br','pos-bl','pos-tr','pos-tl'); + ctrl.classList.add(`pos-${editCorner}`); + }); }; el.addEventListener('mousedown', onDown); el.addEventListener('touchstart', onDown, { passive:false }); @@ -835,6 +859,7 @@ function makeDragGlance(el) { makeDragY(searchContainerEl, 'nebula-home-search-y', '--home-search-y'); makeDragY(topSitesEl, 'nebula-home-bookmarks-y', '--home-bookmarks-y'); makeDragGlance(glanceEl); +// Restore greeting to Y-only drag makeDragY(greetingTitleEl, 'nebula-home-greeting-y', '--home-greeting-y'); // Save/Cancel handlers @@ -859,7 +884,7 @@ if (saveEditBtn) saveEditBtn.addEventListener('click', () => { if (cancelEditBtn) cancelEditBtn.addEventListener('click', () => { // Revert CSS vars and glance corner to snapshot if (snapshot) { - document.documentElement.style.setProperty('--home-greeting-y', `${snapshot.greetY}vh`); + document.documentElement.style.setProperty('--home-greeting-y', `${snapshot.greetY}vh`); document.documentElement.style.setProperty('--home-search-y', `${snapshot.searchY}vh`); document.documentElement.style.setProperty('--home-bookmarks-y', `${snapshot.bmY}vh`); if (glanceEl) {