Fix minor UI problems

ShortestPathLab · Feb 28, 2024 · 8dc97c1 · 8dc97c1
1 parent 28d4b97
commit 8dc97c1
Show file tree

Hide file tree

Showing 12 changed files with 130 additions and 73 deletions.
diff --git a/client/src/components/breakpoint-editor/BreakpointEditor.tsx b/client/src/components/breakpoint-editor/BreakpointEditor.tsx
@@ -23,7 +23,7 @@ export function BreakpointEditor({
     onChange?.({ ...value, ...next });
   }
   return (
-    <Flex sx={{ mx: -2 }}>
+    <Flex sx={{ py: 1 }}>
       <Select
         placeholder="Event"
         sx={{ minWidth: 160 }}
@@ -84,7 +84,7 @@ export function BreakpointEditor({
       <Switch
         checked={!!value.active}
         onChange={(_, v) => handleChange({ active: v })}
-        sx={{ mr: -2 }}
+        sx={{ mr: -4 }}
       />
     </Flex>
   );

diff --git a/client/src/components/breakpoint-editor/BreakpointListEditor.tsx b/client/src/components/breakpoint-editor/BreakpointListEditor.tsx
@@ -7,6 +7,7 @@ import { useMemo } from "react";
 import { useLayer } from "slices/layers";
 import { BreakpointEditor } from "./BreakpointEditor";
 import { comparators } from "./comparators";
+import { Scroll } from "components/generic/Scrollbars";
 
 type BreakpointListEditorProps = {
   breakpoints?: Breakpoint[];
@@ -42,27 +43,33 @@ export function BreakpointListEditor({
 
   return (
     <Box sx={{ overflow: "auto hidden", width: "100%" }}>
-      <Box sx={{ minWidth: 720, mb: 2 }}>
-        <ListEditor<Breakpoint>
-          icon={null}
-          value={breakpoints}
-          deletable
-          editable={false}
-          editor={(v) => <BreakpointEditor value={v} properties={properties} />} //v = a breakpoint
-          create={() => ({
-            active: true,
-            property: properties?.[0],
-            condition: comparators?.[0],
-            type: undefined,
-            reference: 0,
-          })}
-          onChange={(updatedBreakpoints) =>
-            handleBreakpointsChange(updatedBreakpoints)
-          }
-          addItemLabel="Breakpoint"
-          placeholder="Click the button below to add a breakpoint."
-        />
-      </Box>
+      <Scroll x>
+        <Box sx={{ minWidth: 720, mb: 2 }}>
+          <ListEditor<Breakpoint>
+            sortable
+            button={false}
+            icon={null}
+            value={breakpoints}
+            deletable
+            editable={false}
+            editor={(v) => (
+              <BreakpointEditor value={v} properties={properties} />
+            )} //v = a breakpoint
+            create={() => ({
+              active: true,
+              property: properties?.[0],
+              condition: comparators?.[0],
+              type: undefined,
+              reference: 0,
+            })}
+            onChange={(updatedBreakpoints) =>
+              handleBreakpointsChange(updatedBreakpoints)
+            }
+            addItemLabel="Breakpoint"
+            placeholder="No breakpoints."
+          />
+        </Box>
+      </Scroll>
     </Box>
   );
 }
diff --git a/client/src/components/generic/LazyList.tsx b/client/src/components/generic/LazyList.tsx
@@ -44,6 +44,7 @@ const Scroller = forwardRef<HTMLDivElement, ComponentProps<"div">>(
     const containerRef = useRef<HTMLDivElement | null>(null);
     const { palette, spacing } = useTheme();
     const cls = useCss({
+      "--os-padding-perpendicular": "2px",
       ".os-scrollbar": { visibility: "visible", opacity: 1 },
       ".os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle": {
         "min-height": spacing(12),
@@ -52,6 +53,16 @@ const Scroller = forwardRef<HTMLDivElement, ComponentProps<"div">>(
         height: `calc(100% - ${spacing(6)})`,
         marginTop: spacing(6),
       },
+      "div > div.os-scrollbar-track": {
+        "--os-handle-perpendicular-size": "2px",
+        "--os-handle-perpendicular-size-hover": "6px",
+        "--os-handle-perpendicular-size-active": "6px",
+        "> div.os-scrollbar-handle": {
+          borderRadius: 0,
+          opacity: 0.5,
+          "&:hover": { opacity: 0.8 },
+        },
+      },
     });
     const [initialize] = useOverlayScrollbars({
       options: {

diff --git a/client/src/components/generic/ListEditor.tsx b/client/src/components/generic/ListEditor.tsx
@@ -64,6 +64,7 @@ type Item<T = any> = {
 };
 
 type Props<T = any> = {
+  button?: boolean;
   UNSAFE_label?: ReactNode;
   UNSAFE_text?: ReactNode;
   UNSAFE_extrasPlacement?: "flex-start" | "center" | "flex-end";
@@ -121,10 +122,9 @@ const defaultEditorRenderer: Props["renderEditor"] = ({
 );
 
 export function ListEditorField({
-  icon = <LabelIcon />,
-  toggleable: useSwitch,
-  deletable: useDelete,
-  editable: useEditButton = true,
+  toggleable,
+  deletable,
+  editable = true,
   onChangeItem = () => {},
   onDeleteItem = () => {},
   extras: getExtras,
@@ -135,11 +135,13 @@ export function ListEditorField({
   i = 0,
   autoFocus,
   sortable,
+  button = true,
   renderEditor = defaultEditorRenderer,
 }: Props & ListEditorFieldProps & Item) {
   const acrylic = useAcrylic();
   const paper = usePaper();
   const [field, setField] = useState<HTMLElement | null>(null);
+  const ListElement = (button ? ButtonBase : Box) as typeof Box;
   return (
     <Draggable index={i} draggableId={`${id}`}>
       {(provided, snapshot) => (
@@ -148,10 +150,14 @@ export function ListEditorField({
             direction="row"
             alignItems="center"
             sx={{
-              transition: (t) => t.transitions.create("background"),
-              "&:hover": {
-                background: (t) => t.palette.action.hover,
-              },
+              ...(button
+                ? {
+                    transition: (t) => t.transitions.create("background"),
+                    "&:hover": {
+                      background: (t) => t.palette.action.hover,
+                    },
+                  }
+                : undefined),
               ...(snapshot.isDragging
                 ? ({
                     ...paper(1),
@@ -176,7 +182,7 @@ export function ListEditorField({
                 </Flex>
               ),
               content: (
-                <ButtonBase
+                <ListElement
                   sx={{
                     flex: 1,
                     display: "block",
@@ -195,19 +201,19 @@ export function ListEditorField({
                       onChangeItem(id ?? i, e.target.value, enabled),
                     ref: (e: HTMLElement | null) => setField(e),
                   })}
-                </ButtonBase>
+                </ListElement>
               ),
               extras: (
                 <Flex sx={{ flex: 0, px: 1 }}>
-                  {useSwitch && (
+                  {toggleable && (
                     <Switch
                       color="primary"
                       edge="end"
                       onChange={(_, v) => onChangeItem(id ?? i, value, v)}
                       checked={enabled}
                     />
                   )}
-                  {useEditButton && (
+                  {editable && (
                     <IconButton
                       edge="end"
                       onClick={() => {
@@ -219,7 +225,7 @@ export function ListEditorField({
                       <EditIcon />
                     </IconButton>
                   )}
-                  {useDelete && (
+                  {deletable && (
                     <IconButton onClick={() => onDeleteItem(id ?? i)}>
                       <DeleteIcon />
                     </IconButton>

diff --git a/client/src/components/generic/Modal.tsx b/client/src/components/generic/Modal.tsx
@@ -305,7 +305,15 @@ export function ManagedModal({
               <Popover
                 {...merge(
                   bindPopover(state),
-                  { slotProps: { paper: { sx: acrylic } } },
+                  {
+                    slotProps: {
+                      paper: {
+                        sx: {
+                          ...acrylic,
+                        },
+                      },
+                    },
+                  },
                   slotProps?.popover
                 )}
               >

diff --git a/client/src/components/generic/Scrollbars.tsx b/client/src/components/generic/Scrollbars.tsx
@@ -29,6 +29,7 @@ export const Scroll = forwardRef(
   ) => {
     const { palette, spacing } = useTheme();
     const cls = useCss({
+      "--os-padding-perpendicular": "2px",
       "div.os-scrollbar-vertical > div.os-scrollbar-track": {
         height: `calc(100% - ${spacing(px)})`,
         marginTop: spacing(px),
@@ -37,6 +38,16 @@ export const Scroll = forwardRef(
         width: `calc(100% - ${spacing(py * 2)})`,
         marginLeft: spacing(py),
       },
+      "div > div.os-scrollbar-track": {
+        "--os-handle-perpendicular-size": "2px",
+        "--os-handle-perpendicular-size-hover": "6px",
+        "--os-handle-perpendicular-size-active": "6px",
+        "> div.os-scrollbar-handle": {
+          borderRadius: 0,
+          opacity: 0.5,
+          "&:hover": { opacity: 0.8 },
+        },
+      },
     });
     const handleRef = useCallback(
       (instance: OverlayScrollbars) => {

diff --git a/client/src/components/inspector/FileDropZone.tsx b/client/src/components/inspector/FileDropZone.tsx
@@ -5,7 +5,7 @@ import { useWorkspace } from "hooks/useWorkspace";
 import { layerHandlers } from "layers/layerHandlers";
 import { entries, head } from "lodash";
 import { nanoid as id } from "nanoid";
-import pluralize, { plural } from "pluralize";
+import pluralize from "pluralize";
 import { producify } from "produce";
 import { useState } from "react";
 import { FileDrop } from "react-file-drop";
@@ -16,7 +16,7 @@ import { useAcrylic } from "theme";
 export function FileDropZone() {
   const acrylic = useAcrylic() as any;
   const { load: loadWorkspace } = useWorkspace();
-  const [open, setOpen] = useState(false);
+  const [itemCount, setItemCount] = useState<number>(0);
   const [, setLayers] = useLayers();
   const usingBusyState = useBusyState("file-drop-import");
   const notify = useSnackbar();
@@ -37,7 +37,7 @@ export function FileDropZone() {
                 })
               )
             );
-          }, `${i + 1} of ${fs.length}: Opening ${type} (${formatByte(file.size)})`);
+          }, `${i + 1} of ${fs.length}: Importing ${type} (${formatByte(file.size)})`);
           totalClaimed += 1;
           continue;
         }
@@ -55,23 +55,25 @@ export function FileDropZone() {
   return (
     <>
       <FileDrop
-        onFrameDragLeave={() => setOpen(false)}
-        onFrameDragEnter={() => setOpen(true)}
-        onFrameDrop={() => setOpen(false)}
-        onDragLeave={() => setOpen(false)}
+        onFrameDragLeave={() => setItemCount(0)}
+        onFrameDragEnter={(e) =>
+          setItemCount(e?.dataTransfer?.items.length ?? 0)
+        }
+        onFrameDrop={() => setItemCount(0)}
+        onDragLeave={() => setItemCount(0)}
         onDrop={(f) => f && importFiles(Array.from(f as any))}
       >
         <Backdrop
           sx={{
             ...acrylic,
             zIndex: (t) => t.zIndex.tooltip + 1,
           }}
-          open={open}
+          open={!!itemCount}
         >
           <Stack alignItems="center" spacing={4}>
             <WorkspacesOutlined />
             <Type variant="body2" color="text.secondary">
-              Import
+              {itemCount ? `Import ${pluralize("item", itemCount, true)}` : ""}
             </Type>
           </Stack>
         </Backdrop>

diff --git a/client/src/components/layer-editor/LayerListEditor.tsx b/client/src/components/layer-editor/LayerListEditor.tsx
@@ -69,10 +69,12 @@ export function LayerListEditor() {
             source: { type: "trace", trace: {} },
           })}
           onChange={(v) =>
-            requestIdleCallback(() => setLayers(() => ({ layers: v })))
+            requestIdleCallback(() => setLayers(() => ({ layers: v })), {
+              timeout: 300,
+            })
           }
           addItemLabel="Layer"
-          placeholder={<Box pt={2}>Click the button below to add a layer.</Box>}
+          placeholder={<Box pt={2}>Get started by adding a layer.</Box>}
           onFocus={(key) => {
             const element = head(document.getElementsByClassName(key));
             if (

diff --git a/client/src/components/settings-editor/RendererListEditor.tsx b/client/src/components/settings-editor/RendererListEditor.tsx
@@ -13,6 +13,7 @@ export function RendererListEditor() {
     <Box sx={{ mx: -2 }}>
       <ListEditor<Renderer>
         sortable
+        button={false}
         editor={(v) => <RendererEditor value={v} />}
         icon={null}
         value={renderer}

diff --git a/client/src/components/settings-editor/ServerListEditor.tsx b/client/src/components/settings-editor/ServerListEditor.tsx
@@ -13,6 +13,7 @@ export function ServerListEditor() {
     <Box sx={{ mx: -2 }}>
       <ListEditor<Remote>
         sortable
+        button={false}
         editor={(v) => <ServerEditor value={v} />}
         icon={null}
         value={remote}