lukasandClaude Opus 4.8
0f686bbd5c
- Panel resize handles: replace the tall bar with a small centered pill/capsule (elevated fill + border, accent on hover) across Mail, Calendar and Contacts. - Calendar month/week/3-day views: brighten a day block on hover. - Calendar month grid: shade the current month's days theme-aware — a subtle dark overlay in light mode (they were only distinguished in dark mode before), white overlay in dark mode. - Calendar event form: replace the native <input type=date> (whose order follows the browser locale) with a custom field driven by the 24h/12h preference — an editable text box (typed dd/mm/yyyy for 24h) backed by a hidden ISO input, plus a popup month picker. Applies to the start date and the recurrence "Ends on date". Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01U72FZiF1W1pb8XxyWBTREA
35 lines
1.4 KiB
TypeScript
35 lines
1.4 KiB
TypeScript
// A vertical drag handle for adjusting the width of the panel to its left.
|
|
export function Resizer({ onDelta }: { onDelta: (deltaX: number) => void }) {
|
|
const onMouseDown = (e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
let lastX = e.clientX;
|
|
const onMove = (ev: MouseEvent) => {
|
|
onDelta(ev.clientX - lastX);
|
|
lastX = ev.clientX;
|
|
};
|
|
const onUp = () => {
|
|
document.removeEventListener("mousemove", onMove);
|
|
document.removeEventListener("mouseup", onUp);
|
|
document.body.style.userSelect = "";
|
|
document.body.style.cursor = "";
|
|
};
|
|
document.addEventListener("mousemove", onMove);
|
|
document.addEventListener("mouseup", onUp);
|
|
document.body.style.userSelect = "none";
|
|
document.body.style.cursor = "col-resize";
|
|
};
|
|
|
|
return (
|
|
<div
|
|
onMouseDown={onMouseDown}
|
|
className="group relative z-20 -mx-0.5 w-1 shrink-0 cursor-col-resize"
|
|
role="separator"
|
|
aria-orientation="vertical"
|
|
>
|
|
<div className="absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-transparent group-hover:bg-app-accent" />
|
|
{/* Small pill grab handle in the middle for easier grabbing. */}
|
|
<div className="absolute left-1/2 top-1/2 h-7 w-[5px] -translate-x-1/2 -translate-y-1/2 rounded-full border border-app-border bg-app-elevated group-hover:border-app-accent group-hover:bg-app-accent" />
|
|
</div>
|
|
);
|
|
}
|