29b346250f
Web apps in the left panel were a fixed 380 px, too narrow for WhatsApp, and add-on panels a fixed 400. A grip on the panel's right edge now resizes it, each app keeps its own width (settings.leftPanelWidths), a double-click resets it, and the page always keeps at least 320 px. The grip is a small view of Theseus's own laid over the edge, since the panel may be a third-party page; while dragging it covers the window so the drag keeps its events. Like Opera's sidebar, the left panel now hides when a new tab is opened or the right sidebar opens. It is only hidden, so reopening lands where the user left off. Add-on panels on the left used to get the right sidebar's grip on their left edge, where dragging resized the right sidebar; that grip is hidden there and its drags are ignored.
37 lines
1.5 KiB
HTML
37 lines
1.5 KiB
HTML
<!doctype html>
|
|
<html><head><meta charset="utf-8">
|
|
<style>
|
|
/* Transparent everywhere except the thin line at the panel edge. At rest
|
|
the view is a few pixels wide and sits on the boundary; while dragging
|
|
main widens it to the whole window and the line follows the pointer. */
|
|
html, body { margin: 0; height: 100%; background: transparent; overflow: hidden; cursor: col-resize; user-select: none; }
|
|
#line { position: fixed; top: 0; bottom: 0; width: 2px; left: 50%; transform: translateX(-1px);
|
|
background: rgba(140,150,170,.45); transition: background .12s; }
|
|
body:hover #line { background: rgba(214,255,61,.45); }
|
|
body.drag #line { display: none; }
|
|
</style></head>
|
|
<body title="Drag to resize · double-click to reset">
|
|
<div id="line"></div>
|
|
<script>
|
|
let dragging = false;
|
|
document.addEventListener("mousedown", (e) => {
|
|
if (e.button !== 0) return;
|
|
e.preventDefault();
|
|
dragging = true;
|
|
document.body.classList.add("drag");
|
|
window.grip.start();
|
|
});
|
|
// While dragging, this view covers the window from its left edge, so clientX
|
|
// is the pointer's x in the window.
|
|
document.addEventListener("mousemove", (e) => { if (dragging) window.grip.move(e.clientX); });
|
|
const stop = () => {
|
|
if (!dragging) return;
|
|
dragging = false;
|
|
document.body.classList.remove("drag");
|
|
window.grip.end();
|
|
};
|
|
document.addEventListener("mouseup", stop);
|
|
window.addEventListener("blur", stop);
|
|
document.addEventListener("dblclick", () => window.grip.reset());
|
|
</script>
|
|
</body></html>
|