A pin on the title bar, and no more notch
Pointing at a tile's top edge already brings its bar back, which left the notch doing half a job: it could still hide a bar, but hiding one tile at a time stopped being the interesting question once the whole dashboard could fold its bars at once. It is gone. In its place, a pin beside each tile's label. Pinned, that tile keeps its bar while auto-hide is on — for the one or two tiles whose controls are wanted at a glance. It sits next to the label rather than out with the gear and ✕ because it is about the bar, not about the tile's contents, and it stays faint until the tile is pointed at or the pin is on, so a wall of unpinned tiles is not a wall of pins. Fullscreen keeps its own rule: every bar folds, pinned or not, because that is a mode for watching. What it loses with the notch it gets back better — the same hover at a tile's top edge peeks a bar there too, and now as an overlay, so peeking no longer pushes the tile's content down and disturbs the auto-fit. The peek timer the notch needed goes with it. Per-tile `headHidden` gives way to `headPinned` in the layout, on disk and on the server. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Waters Church
co-authored by
Claude Opus 5
Claude Opus 5
parent
68f0ba806d
commit
7f50fa0ba9
+42
-76
@@ -193,7 +193,7 @@ function sanitizeTile(t) {
|
||||
w,
|
||||
h: Math.max(1, Number(t.h) || 2),
|
||||
settings: (t.settings && typeof t.settings === 'object') ? t.settings : {},
|
||||
headHidden: Boolean(t.headHidden),
|
||||
headPinned: Boolean(t.headPinned),
|
||||
// set when the tile was added from a module's tile list (multi-tile modules)
|
||||
variant: t.variant ? String(t.variant) : '',
|
||||
title: t.title ? String(t.title) : '',
|
||||
@@ -259,10 +259,10 @@ function minSizeOf(tile) {
|
||||
|
||||
/* ── title bars that fold away ──────────────────────────────────────── */
|
||||
|
||||
/* A bar is "off" when it is folded out of sight but the tile is still being
|
||||
worked on — either this tile's own notch hid it, or the dashboard has
|
||||
auto-hide switched on. Fullscreen is not one of these: there the bars fold
|
||||
away for watching, and arranging is switched off entirely. */
|
||||
/* A bar is "off" when it is folded out of sight: the dashboard has auto-hide
|
||||
on and this tile is not pinned, or the screen is in fullscreen, which folds
|
||||
every bar for watching whatever the tiles say. Off is never gone — the top
|
||||
edge of the tile brings it back for as long as the pointer is there. */
|
||||
|
||||
/** How close to the tile's top edge the pointer opens a folded-away bar. */
|
||||
const HEAD_REVEAL_PX = 22;
|
||||
@@ -270,8 +270,8 @@ const HEAD_REVEAL_PX = 22;
|
||||
const HEAD_HOLD_PX = 38;
|
||||
|
||||
function headIsOff(tile) {
|
||||
if (document.body.classList.contains('fullscreen')) return false;
|
||||
return autoHideHeads || Boolean(tile.headHidden);
|
||||
if (document.body.classList.contains('fullscreen')) return true;
|
||||
return autoHideHeads && !tile.headPinned;
|
||||
}
|
||||
|
||||
function applyHeadState(tile, el = tileEls.get(tile.id)?.el) {
|
||||
@@ -298,6 +298,7 @@ function setAutoHideHeads(on, { save = true } = {}) {
|
||||
/* ── tile DOM ───────────────────────────────────────────────────────── */
|
||||
|
||||
const CLOSE_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>';
|
||||
const PIN_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 16.5V22"/><path class="pin-head" d="M8.5 3h7l-1.2 7 3.2 3.2H6.5L9.7 10 8.5 3z"/></svg>';
|
||||
const GEAR_SVG = '<svg viewBox="0 0 90 90" fill="currentColor" aria-hidden="true"><path d="M 82.94 32.538 c -2.685 0 -5.093 -1.545 -6.327 -3.929 c -0.245 -0.476 -0.504 -0.948 -0.774 -1.416 c -0.27 -0.468 -0.55 -0.928 -0.84 -1.378 c -1.448 -2.26 -1.582 -5.117 -0.239 -7.443 c 1.951 -3.378 0.792 -7.696 -2.584 -9.645 l -9.352 -5.4 c -3.378 -1.951 -7.696 -0.792 -9.645 2.584 l -0.002 0.003 c -1.322 2.291 -3.815 3.641 -6.456 3.512 c -1.149 -0.056 -2.301 -0.057 -3.455 0 c -2.638 0.128 -5.124 -1.226 -6.444 -3.513 l -0.002 -0.002 c -1.951 -3.378 -6.269 -4.535 -9.645 -2.584 l -9.352 5.4 c -3.378 1.951 -4.535 6.269 -2.584 9.645 l 0.002 0.002 c 1.321 2.286 1.25 5.117 -0.18 7.336 c -0.625 0.972 -1.201 1.97 -1.726 2.993 c -1.209 2.353 -3.625 3.836 -6.269 3.836 H 7.063 c -3.9 0 -7.061 3.162 -7.061 7.061 v 10.801 c 0 3.9 3.162 7.061 7.061 7.061 l 0 0 c 2.685 0 5.093 1.545 6.327 3.929 c 0.245 0.475 0.504 0.948 0.774 1.416 c 0.27 0.468 0.55 0.928 0.84 1.378 c 1.448 2.26 1.582 5.117 0.239 7.443 c -1.951 3.378 -0.792 7.696 2.584 9.645 l 9.352 5.4 c 3.378 1.951 7.696 0.792 9.645 -2.584 l 0.002 -0.003 c 1.322 -2.291 3.815 -3.641 6.456 -3.512 c 1.149 0.056 2.301 0.057 3.455 0 c 2.638 -0.128 5.124 1.226 6.444 3.513 l 0.002 0.002 c 1.951 3.378 6.268 4.535 9.645 2.584 l 9.352 -5.4 c 3.378 -1.949 4.535 -6.268 2.584 -9.645 l -0.002 -0.002 c -1.321 -2.286 -1.25 -5.117 0.18 -7.336 c 0.625 -0.972 1.201 -1.97 1.726 -2.993 c 1.209 -2.353 3.625 -3.836 6.269 -3.836 h 0.003 c 3.9 0 7.061 -3.162 7.061 -7.061 V 39.599 C 90.001 35.7 86.84 32.538 82.94 32.538 z M 54.998 62.318 c -9.565 5.523 -21.796 2.245 -27.317 -7.32 c -5.523 -9.565 -2.245 -21.796 7.32 -27.317 s 21.796 -2.245 27.317 7.32 C 67.841 44.566 64.563 56.797 54.998 62.318 z"/></svg>';
|
||||
|
||||
function buildTile(tile) {
|
||||
@@ -324,7 +325,34 @@ function buildTile(tile) {
|
||||
const controls = document.createElement('span');
|
||||
controls.className = 'tile-controls';
|
||||
|
||||
head.append(dot, title, controls);
|
||||
/* Pinned tiles keep their bar through auto-hide. The switch sits right
|
||||
beside the label rather than out with the actions, because it is about
|
||||
this bar rather than about the tile's contents. */
|
||||
const pin = document.createElement('button');
|
||||
pin.className = 'tile-btn pin';
|
||||
pin.innerHTML = PIN_SVG;
|
||||
const paintPin = () => {
|
||||
const on = Boolean(tile.headPinned);
|
||||
pin.classList.toggle('is-pinned', on);
|
||||
pin.setAttribute('aria-pressed', on ? 'true' : 'false');
|
||||
// Instant tooltips read `title` the first time and `data-tip` after.
|
||||
pin.title = on ? 'Unpin bar' : 'Pin bar';
|
||||
pin.setAttribute('data-tip', pin.title);
|
||||
};
|
||||
paintPin();
|
||||
pin.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
tile.headPinned = !tile.headPinned;
|
||||
paintPin();
|
||||
applyHeadState(tile, el);
|
||||
saveLayout();
|
||||
});
|
||||
|
||||
// Keeps the label hugging the pin however wide the tile gets.
|
||||
const gap = document.createElement('span');
|
||||
gap.className = 'tile-head-gap';
|
||||
|
||||
head.append(dot, title, pin, gap, controls);
|
||||
|
||||
// Every tile has something to set: its own settings when the module
|
||||
// offers any, and the tint either way.
|
||||
@@ -371,23 +399,6 @@ function buildTile(tile) {
|
||||
const edgeRight = grip('tile-resize-right');
|
||||
const edgeLeft = grip('tile-resize-side');
|
||||
|
||||
// notch on the title bar's bottom edge: hides/shows the bar
|
||||
const notch = document.createElement('button');
|
||||
notch.className = 'tile-notch';
|
||||
notch.title = 'Hide / show the title bar';
|
||||
notch.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
// In fullscreen the bars are all folded away for watching; the notch
|
||||
// peeks one open for a moment without touching what this tile saved.
|
||||
if (document.body.classList.contains('fullscreen')) {
|
||||
peekHead(tile, el, !el.classList.contains('head-peek'));
|
||||
return;
|
||||
}
|
||||
tile.headHidden = !tile.headHidden;
|
||||
applyHeadState(tile, el);
|
||||
saveLayout();
|
||||
});
|
||||
|
||||
// A folded-away bar is still reachable: point at the tile's top edge and it
|
||||
// slides in over the content, where its buttons click and its whole width
|
||||
// drags the tile exactly as when it is showing.
|
||||
@@ -404,20 +415,12 @@ function buildTile(tile) {
|
||||
else if (shown && y > HEAD_HOLD_PX) el.classList.remove('head-peek');
|
||||
});
|
||||
|
||||
// A peeked title bar stays while the pointer is on its tile, and starts
|
||||
// counting down as soon as it leaves.
|
||||
el.addEventListener('pointerenter', () => clearPeekTimer(tile.id));
|
||||
el.addEventListener('pointerleave', () => {
|
||||
if (!el.classList.contains('head-peek')) return;
|
||||
if (el.classList.contains('dragging') || el.classList.contains('resizing')) return;
|
||||
// Windowed, the bar is a hover-reveal and goes the moment the pointer
|
||||
// does. In fullscreen it was opened deliberately from the notch, so it
|
||||
// lingers (PEEK_HIDE_MS) before folding away again.
|
||||
if (document.body.classList.contains('fullscreen')) schedulePeekHide(tile.id, el);
|
||||
else el.classList.remove('head-peek');
|
||||
el.classList.remove('head-peek');
|
||||
});
|
||||
|
||||
el.append(head, body, resize, resizeLeft, resizeBottom, edgeTop, edgeRight, edgeLeft, notch);
|
||||
el.append(head, body, resize, resizeLeft, resizeBottom, edgeTop, edgeRight, edgeLeft);
|
||||
applyHeadState(tile, el);
|
||||
grid.appendChild(el);
|
||||
|
||||
@@ -445,7 +448,7 @@ function refreshEmptyState() {
|
||||
|
||||
function wireDrag(tile, el, handle) {
|
||||
handle.addEventListener('pointerdown', (ev) => {
|
||||
if (ev.target.closest('.tile-btn') || ev.target.closest('.tile-menu') || ev.target.closest('.tile-notch')) return;
|
||||
if (ev.target.closest('.tile-btn') || ev.target.closest('.tile-menu')) return;
|
||||
if (ev.button !== 0 && ev.pointerType === 'mouse') return;
|
||||
if (document.body.classList.contains('fullscreen')) return;
|
||||
ev.preventDefault();
|
||||
@@ -867,7 +870,7 @@ function addTile(moduleId, entry = null) {
|
||||
if (spec && 'default' in spec) settings[key] = spec.default;
|
||||
}
|
||||
Object.assign(settings, entry?.settings || {});
|
||||
const tile = { id: newId(), module: moduleId, ...spot, ...size, settings };
|
||||
const tile = { id: newId(), module: moduleId, ...spot, ...size, settings, headPinned: false };
|
||||
if (entry) {
|
||||
tile.variant = String(entry.id);
|
||||
tile.title = String(entry.name || '');
|
||||
@@ -883,7 +886,6 @@ function addTile(moduleId, entry = null) {
|
||||
function removeTile(id) {
|
||||
const idx = tiles.findIndex((t) => t.id === id);
|
||||
if (idx < 0) return;
|
||||
clearPeekTimer(id);
|
||||
unmountModule(tiles[idx]);
|
||||
tiles.splice(idx, 1);
|
||||
const entry = tileEls.get(id);
|
||||
@@ -1137,7 +1139,7 @@ function buildModuleApi(tile, man, entry) {
|
||||
/**
|
||||
* The tile's title bar. Controls added here live next to the gear/close
|
||||
* buttons and are removed automatically when the instance stops. The
|
||||
* whole bar can be hidden by the user via the notch, so nothing
|
||||
* whole bar folds away when the dashboard auto-hides it, so nothing
|
||||
* essential should exist ONLY as a header control.
|
||||
*/
|
||||
header: {
|
||||
@@ -1994,7 +1996,7 @@ wireDropdown('layout-btn', 'layout-menu', async (menu, stillOpen) => {
|
||||
menu.insertBefore(block, reset);
|
||||
});
|
||||
|
||||
/* ── menu bar show/hide (notch, like the tile title bars) ───────────── */
|
||||
/* ── menu bar show/hide (its own notch, at the top-left) ────────────── */
|
||||
|
||||
const topbar = document.getElementById('topbar');
|
||||
const topbarNotch = document.getElementById('topbar-notch');
|
||||
@@ -2021,41 +2023,6 @@ try {
|
||||
if (localStorage.getItem(LS_MENU) === '1') setMenuHidden(true, { persist: false });
|
||||
} catch { /* fine */ }
|
||||
|
||||
/* ── fullscreen: peeking at a tile's title bar ──────────────────────── */
|
||||
|
||||
/** How long a peeked title bar stays after the pointer leaves its tile. */
|
||||
const PEEK_HIDE_MS = 10000;
|
||||
const peekTimers = new Map(); // tile id → timeout
|
||||
|
||||
function clearPeekTimer(id) {
|
||||
const timer = peekTimers.get(id);
|
||||
if (timer === undefined) return;
|
||||
clearTimeout(timer);
|
||||
peekTimers.delete(id);
|
||||
}
|
||||
|
||||
function schedulePeekHide(id, el) {
|
||||
clearPeekTimer(id);
|
||||
peekTimers.set(id, setTimeout(() => {
|
||||
peekTimers.delete(id);
|
||||
el.classList.remove('head-peek');
|
||||
}, PEEK_HIDE_MS));
|
||||
}
|
||||
|
||||
function peekHead(tile, el, on) {
|
||||
el.classList.toggle('head-peek', on);
|
||||
clearPeekTimer(tile.id);
|
||||
// Opened from a click the pointer is on the tile, so the countdown waits
|
||||
// for it to leave — unless it already has (a keyboard or touch open).
|
||||
if (on && !el.matches(':hover')) schedulePeekHide(tile.id, el);
|
||||
}
|
||||
|
||||
/** Back to a plain screen: no peeks left open, no timers left running. */
|
||||
function clearPeeks() {
|
||||
for (const id of [...peekTimers.keys()]) clearPeekTimer(id);
|
||||
document.querySelectorAll('.tile.head-peek').forEach((el) => el.classList.remove('head-peek'));
|
||||
}
|
||||
|
||||
/* ── fullscreen: auto-fit the layout to the screen ──────────────────── */
|
||||
|
||||
/* Fullscreen is a viewing mode. The occupied columns stretch proportionally
|
||||
@@ -2197,7 +2164,6 @@ document.addEventListener('fullscreenchange', () => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(applyFullscreenFit));
|
||||
} else {
|
||||
setMenuHidden(menuHiddenBeforeFs, { persist: false });
|
||||
clearPeeks();
|
||||
clearFullscreenFit();
|
||||
applyAllHeadStates();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user