fix(calendar): polish dialog position (#277)

* fix(calendar/dialog): add dark system theme border

* fix(calendar): update dialog positioning logic

* fix(calendar/dialog): keep y-position within viewport

* fix(calendar/dialog): `max-height` at viewport height

* feat(calendar/dialog): increase width and margin

Author: nicholaschiang

components/calendar/dialog/page.module.scss

@@ -6,6 +6,7 @@
   position: relative;
   display: flex;
   height: 100%;
+  max-height: calc(100vh - 48px);
 
   .nav {
     display: flex;
@@ -81,8 +82,7 @@
   padding: 0 24px;
   overflow: auto;
   height: 100%;
-  width: 350px;
-  min-height: 350px;
+  width: 400px;
 }
 
 @mixin header() {

components/calendar/dialog/surface.module.scss

@@ -40,3 +40,11 @@
 :global(html.dark) .wrapper {
   border: 1px solid var(--accents-2);
 }
+
+:global(html.system) {
+  @media (prefers-color-scheme: dark) {
+    .wrapper {
+      border: 1px solid var(--accents-2);
+    }
+  }
+}

components/calendar/dialog/surface.tsx

@@ -34,7 +34,7 @@ export default function DialogSurface({
   offset,
   children,
 }: DialogSurfaceProps): JSX.Element {
-  const { editing, setDialog, dragging, setRnd } = useCalendarState();
+  const { editing, editingLeftPercent, editingWidthPercent, setDialog, dragging, setRnd } = useCalendarState();
 
   const measured = useRef<boolean>(false);
   const [visible, setVisible] = useState<boolean>(false);
@@ -57,8 +57,11 @@ export default function DialogSurface({
   const [measureRef, bounds] = useMeasure({ polyfill });
 
   const rndPosition = useMemo(
-    () => getPosition(editing.time.from, rndWidth + RND_MARGIN),
-    [editing.time.from, rndWidth]
+    () => {
+      const { x, y } = getPosition(editing.time.from, rndWidth + RND_MARGIN);
+      return { y, x: x + editingLeftPercent * rndWidth };
+    },
+    [editing.time.from, rndWidth, editingLeftPercent]
   );
   const rndHeight = useMemo(() => getHeight(editing.time), [editing.time]);
 
@@ -67,18 +70,10 @@ export default function DialogSurface({
     return visible && !dragging ? x : x + 12;
   }, [offset.x, dragging, visible, rndPosition.x, bounds.width]);
   const onRight = useMemo(() => {
-    const x = offset.x + rndPosition.x + rndWidth + PREVIEW_MARGIN;
+    const x = offset.x + rndPosition.x + rndWidth * editingWidthPercent + PREVIEW_MARGIN;
     return visible && !dragging ? x : x - 12;
-  }, [offset.x, dragging, visible, rndPosition.x, rndWidth]);
-
-  const alignedTop = useMemo(() => offset.y + rndPosition.y, [
-    offset.y,
-    rndPosition.y,
-  ]);
-  const alignedBottom = useMemo(
-    () => offset.y + rndPosition.y - bounds.height + rndHeight,
-    [offset.y, rndPosition.y, bounds.height, rndHeight]
-  );
+  }, [offset.x, dragging, visible, rndPosition.x, rndWidth, editingWidthPercent]);
+
   const alignedCenter = useMemo(
     () => offset.y + rndPosition.y - 0.5 * (bounds.height - rndHeight),
     [offset.y, rndPosition.y, bounds.height, rndHeight]
@@ -89,14 +84,14 @@ export default function DialogSurface({
       document.documentElement.clientHeight || 0,
       window.innerHeight || 0
     );
-    if (alignedCenter < 0) return alignedTop;
-    if (alignedCenter + bounds.height > vh) return alignedBottom;
+    if (alignedCenter < 24) return 24;
+    if (alignedCenter + bounds.height + 24 > vh) return vh - bounds.height - 24;
     return alignedCenter;
-  }, [alignedTop, alignedCenter, alignedBottom, bounds.height]);
+  }, [alignedCenter, bounds.height]);
 
   const props = useSpring({
     onRest: () => (!visible && measured.current ? setDialog(false) : undefined),
-    left: rndPosition.x < rndWidth * 3 ? onRight : onLeft,
+    left: onRight + bounds.width < window.innerWidth ? onRight : onLeft,
     config: { tension: 250, velocity: 50 },
     immediate: !measured.current || dragging,
     top,

components/calendar/index.tsx

@@ -202,6 +202,8 @@ export default function Calendar({
   // the body scrollbar disappear, moving the `fixed` position values).
   const [offset, setOffset] = useState<Position>({ x: 0, y: 0 });
   const [width, setWidth] = useState<number>(0);
+  const [editingLeftPercent, setEditingLeftPercent] = useState<number>(0);
+  const [editingWidthPercent, setEditingWidthPercent] = useState<number>(0);
 
   const onEditStop = useCallback(
     (evt?: FormEvent) => {
@@ -222,6 +224,10 @@ export default function Calendar({
       editing,
       setEditing,
       onEditStop,
+      editingLeftPercent,
+      setEditingLeftPercent,
+      editingWidthPercent,
+      setEditingWidthPercent,
       rnd,
       setRnd,
       dialog,
@@ -235,6 +241,10 @@ export default function Calendar({
       editing,
       setEditing,
       onEditStop,
+      editingLeftPercent,
+      setEditingLeftPercent,
+      editingWidthPercent,
+      setEditingWidthPercent,
       rnd,
       setRnd,
       dialog,

components/calendar/meetings/item.tsx

@@ -55,6 +55,8 @@ export default function MeetingItem({
   const {
     editing,
     setEditing,
+    setEditingLeftPercent,
+    setEditingWidthPercent,
     rnd,
     setRnd,
     dialog,
@@ -90,6 +92,8 @@ export default function MeetingItem({
           if (mouseMovement > 10) {
             removeListeners();
             setEditing(meeting);
+            setEditingLeftPercent(leftPercent);
+            setEditingWidthPercent(widthPercent);
             setEventTarget('middle');
             setEventData({
               screenX: e.screenX,
@@ -107,6 +111,8 @@ export default function MeetingItem({
           removeListeners();
           setRnd(false);
           setEditing(meeting);
+          setEditingLeftPercent(leftPercent);
+          setEditingWidthPercent(widthPercent);
           setDialogPage(DialogPage.Display);
           setDialog(true);
         };
@@ -126,6 +132,8 @@ export default function MeetingItem({
           onMouseDown={(evt) => {
             evt.stopPropagation();
             setEditing(meeting);
+            setEditingLeftPercent(leftPercent);
+            setEditingWidthPercent(widthPercent);
             setEventTarget('bottom');
             setEventData({
               screenX: evt.screenX,
@@ -143,6 +151,8 @@ export default function MeetingItem({
           onMouseDown={(evt) => {
             evt.stopPropagation();
             setEditing(meeting);
+            setEditingLeftPercent(leftPercent);
+            setEditingWidthPercent(widthPercent);
             setEventTarget('top');
             setEventData({
               screenX: evt.screenX,

components/calendar/state.ts

@@ -1,6 +1,6 @@
 import { FormEvent, createContext, useContext } from 'react';
 
-import { Callback, CallbackParam } from 'lib/model/callback';
+import { Callback } from 'lib/model/callback';
 import { Meeting } from 'lib/model/meeting';
 import { MeetingsQuery } from 'lib/model/query/meetings';
 
@@ -15,6 +15,10 @@ export interface CalendarState {
   editing: Meeting;
   setEditing: Callback<Meeting>;
   onEditStop: (evt?: FormEvent) => void;
+  editingLeftPercent: number;
+  setEditingLeftPercent: Callback<number>;
+  editingWidthPercent: number;
+  setEditingWidthPercent: Callback<number>;
   rnd: boolean;
   setRnd: Callback<boolean>;
   dialog: boolean;
@@ -27,15 +31,19 @@ export interface CalendarState {
 export const CalendarStateContext = createContext<CalendarState>({
   start: new MeetingsQuery().from,
   editing: new Meeting(),
-  setEditing: (param: CallbackParam<Meeting>) => {},
-  onEditStop: (evt?: FormEvent) => {},
+  setEditing: () => {},
+  onEditStop: () => {},
+  editingLeftPercent: 0,
+  setEditingLeftPercent: () => {},
+  editingWidthPercent: 0,
+  setEditingWidthPercent: () => {},
   rnd: false,
-  setRnd: (param: CallbackParam<boolean>) => {},
+  setRnd: () => {},
   dialog: false,
-  setDialog: (param: CallbackParam<boolean>) => {},
-  setDialogPage: (param: CallbackParam<DialogPage>) => {},
+  setDialog: () => {},
+  setDialogPage: () => {},
   dragging: false,
-  setDragging: (param: CallbackParam<boolean>) => {},
+  setDragging: () => {},
 });
 
 export const useCalendarState = (): CalendarState =>