110d0157de
An open sidebar panel (a web app or an extension panel) now has a bar on top with its name, Maximize/Restore (it covers the page, up to the right sidebar) and Close. How panels sit next to the page is a choice, in the new gear above + on the strip and in Settings > Sidebar: over the page, where it floats on the left of a page that keeps its width and a click in the page closes it; or pushing the page aside, where it stays open until closed. That choice replaces the pin, which only existed to keep a panel open on a page click. Also: a window laid out while minimized reads a zero-size area, so every view was left at 0x0 and the window came back blank until resized. Layout now skips a minimized window and runs again on restore.
48 lines
2.8 KiB
HTML
48 lines
2.8 KiB
HTML
<!doctype html>
|
|
<html><head><meta charset="utf-8">
|
|
<style>
|
|
/* The bar over an open sidebar panel (a web app or an extension's panel):
|
|
its name, then Maximize/Restore and Close at the top right. */
|
|
:root {
|
|
color-scheme: light dark;
|
|
--bg:#121826; --ink:#e7eaf1; --mut:#8b98a9; --line2:rgba(255,255,255,.10);
|
|
--acid:#d6ff3d; --hover: rgba(255,255,255,.08);
|
|
}
|
|
@media (prefers-color-scheme: light) {
|
|
:root { --bg:#e4e8ee; --ink:#1a1f28; --mut:#5c6676; --line2:rgba(0,0,0,.10); --acid:#0AC18E; --hover: rgba(0,0,0,.06); }
|
|
}
|
|
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; user-select: none;
|
|
font: 600 12.5px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
|
|
.bar { display: flex; align-items: center; height: 100%; padding: 0 4px 0 12px; box-sizing: border-box;
|
|
border-bottom: 1px solid var(--line2); gap: 2px; }
|
|
.title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
button { width: 26px; height: 24px; border: none; border-radius: 6px; background: transparent; color: var(--mut);
|
|
display: grid; place-items: center; cursor: pointer; padding: 0; }
|
|
button:hover { background: var(--hover); color: var(--ink); }
|
|
button svg { width: 14px; height: 14px; display: block; }
|
|
</style></head>
|
|
<body>
|
|
<div class="bar">
|
|
<span class="title" id="title"></span>
|
|
<button id="max" title="Maximize"></button>
|
|
<button id="close" title="Close"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
|
|
</div>
|
|
<script>
|
|
const H = window.panelHeader;
|
|
const ICON_MAX = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/></svg>';
|
|
const ICON_RESTORE = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="8" width="12" height="12" rx="2"/><path d="M8 8V6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2"/></svg>';
|
|
const title = document.getElementById("title"), max = document.getElementById("max");
|
|
function render(s) {
|
|
title.textContent = (s && s.title) || "";
|
|
const isMax = !!(s && s.max);
|
|
max.innerHTML = isMax ? ICON_RESTORE : ICON_MAX;
|
|
max.title = isMax ? "Restore" : "Maximize";
|
|
}
|
|
max.onclick = () => H && H.toggleMax();
|
|
document.getElementById("close").onclick = () => H && H.close();
|
|
// Double-click the bar: maximize / restore, like a window title bar.
|
|
document.querySelector(".bar").addEventListener("dblclick", (e) => { if (e.target.closest("button")) return; H && H.toggleMax(); });
|
|
H && H.getState().then(render).catch(() => {});
|
|
H && H.onState(render);
|
|
</script>
|
|
</body></html>
|