grid update

2025-02-26 22:27:01 -07:00 · 2025-02-26 22:27:01 -07:00 · f364556f90
parent 238825c42e
commit f364556f90
6 changed files with 58 additions and 134 deletions
--- a/web/src/components/ui/grid/BusterResizeColumns.tsx
+++ b/web/src/components/ui/grid/BusterResizeColumns.tsx
@ -7,9 +7,8 @@ import { ResizeableGridDragItem } from './interfaces';
 import { useMemoizedFn, useMouse } from 'ahooks';
 import { BusterDragColumnMarkers } from './_BusterDragColumnMarkers';
 import { calculateColumnSpan, columnSpansToPercent } from './config';
-import { createStyles } from 'antd-style';
 import SplitPane, { Pane } from '../layout/AppSplitter/SplitPane';
-import { useDropzoneStyles } from './BusterResizeRows';
+import { cn } from '@/lib/classMerge';

 type ContainerProps = {
  rowId: string;
@ -30,9 +29,8 @@ export const BusterResizeColumns: React.FC<ContainerProps> = ({
  items = [],
  fluid = true
 }) => {
-  const { cx } = useStyles();
  const mouse = useMouse();
-  const { setNodeRef, isOver, active, over, ...rest } = useSortable({
+  const { setNodeRef, isOver, active, over } = useSortable({
    id: rowId,
    disabled: !allowEdit
  });
@ -161,7 +159,7 @@ export const BusterResizeColumns: React.FC<ContainerProps> = ({
          onChange={onChangeLayout}>
          {items.map((item, index) => (
            <Pane
-              className={cx(
+              className={cn(
                'overflow-visible!',
                index !== items.length - 1 ? 'pr-1.5' : 'pr-0',
                index !== 0 ? 'pl-1.5' : 'pl-0'
@ -200,37 +198,11 @@ export enum Position {
  After = 1
 }

-const useStyles = createStyles(({ token, css }) => ({
-  sash: css`
-    transition: background 0.2s ease-in-out;
-    border-radius: 15px;
-
-    &:hover {
-      background: ${token.colorBorder};
-    }
-    &.dragging {
-      background: ${token.colorPrimary} !important;
-    }
-    &.active {
-      background: ${token.colorBorder};
-    }
-
-    z-index: 1;
-  `,
-  pane: css`
-    &.space-pane {
-      margin-right: 10px;
-    }
-  `
-}));
-
 const DropzonePlaceholder: React.FC<{
  active: boolean;
  right: boolean;
  isDropzoneActives: boolean;
 }> = React.memo(({ active, right, isDropzoneActives }) => {
-  const { styles: dropzoneStyles, cx } = useDropzoneStyles();
-
  const memoizedStyle = useMemo(() => {
    return {
      right: right ? -7.5 : undefined,
@ -241,11 +213,11 @@ const DropzonePlaceholder: React.FC<{

  return (
    <div
-      className={cx(
+      className={cn(
        'pointer-events-none absolute top-0 bottom-0 h-full w-[4px] rounded-lg transition-opacity duration-200',
-        dropzoneStyles.dropzone,
+        'bg-nav-item-hover z-[1]',
        isDropzoneActives && 'placeholder',
-        active && 'active'
+        active && 'bg-primary! opacity-100'
      )}
      style={memoizedStyle}
    />
@ -259,16 +231,14 @@ const ColumnSash: React.FC<{
  isDraggingId: number | null;
  allowEdit: boolean;
 }> = React.memo(({ active, allowEdit, isDraggingId, index }) => {
-  const { cx, styles } = useStyles();
-
  return (
    <div
-      className={cx(
-        'grid-column-sash h-full w-[4px]',
-        allowEdit ? '' : 'hidden',
-        styles.sash,
-        active ? 'active' : '',
-        isDraggingId === index ? 'dragging' : ''
+      className={cn(
+        'grid-column-sash h-full w-[4px] rounded-lg',
+        'z-10 transition-colors duration-200 ease-in-out',
+        allowEdit ? 'hover:bg-border' : 'hidden',
+        active ? 'bg-border' : '',
+        isDraggingId === index ? 'bg-primary!' : ''
      )}
      id={index.toString()}
    />
--- a/web/src/components/ui/grid/BusterResizeRows.tsx
+++ b/web/src/components/ui/grid/BusterResizeRows.tsx
@ -10,6 +10,7 @@ import { createStyles } from 'antd-style';
 import clamp from 'lodash/clamp';
 import { useDebounceFn, useMemoizedFn, useUpdateLayoutEffect } from 'ahooks';
 import { useDroppable } from '@dnd-kit/core';
+import { cn } from '@/lib/classMerge';

 export const BusterResizeRows: React.FC<{
  rows: BusterResizeableGridRow[];
@ -107,60 +108,6 @@ export const BusterResizeRows: React.FC<{
  );
 };

-export const useDropzoneStyles = createStyles(({ css, token }) => ({
-  dropzone: css`
-    transition: background-color 0.2s ease;
-    background-color: ${token.colorBorderSecondary};
-
-    &.active {
-      opacity: 1;
-      z-index: 2;
-      background: ${token.colorPrimary} !important;
-    }
-  `
-}));
-
-const useStyles = createStyles(({ css, token }) => ({
-  dragger: css`
-    transition: background-color 0.2s ease;
-
-    &.dragger {
-      cursor: row-resize;
-      &:hover {
-        background-color: ${token.colorBorder};
-      }
-    }
-
-    &.active {
-      background-color: ${token.colorPrimary} !important;
-    }
-  `,
-  hitArea: css`
-    left: 0;
-    right: 0;
-    height: 54px; // Reduced from 54px to be more reasonable
-    position: absolute;
-    z-index: 9;
-    pointer-events: none;
-
-    // Remove background-color and opacity for production
-    // background-color: red;
-    opacity: 0;
-
-    // &.active {
-    //   opacity: 0;
-    // }
-
-    &.top {
-      top: -36px; // Position the hit area to straddle the dragger
-    }
-
-    &:not(.top) {
-      bottom: -15px; // Position the hit area to straddle the dragger
-    }
-  `
-}));
-
 const ResizeRowHandle: React.FC<{
  id: string;
  index?: number;
@ -173,8 +120,7 @@ const ResizeRowHandle: React.FC<{
  hideDropzone?: boolean;
 }> = React.memo(
  ({ hideDropzone, top, id, active, allowEdit, setIsDraggingResizeId, index, sizes, onResize }) => {
-    const { styles, cx } = useStyles();
-    const { styles: dropzoneStyles } = useDropzoneStyles();
+    const { styles } = useStyles();
    const { setNodeRef, isOver, over } = useDroppable({
      id: `${NEW_ROW_ID}_${id}}`,
      disabled: !allowEdit,
@ -221,18 +167,24 @@ const ResizeRowHandle: React.FC<{
      <div className="relative">
        <div
          id={id}
-          className={cx(
-            showDropzone && allowEdit && dropzoneStyles.dropzone,
-            'h-[4px] w-full rounded-sm select-none',
-            allowEdit && styles.dragger,
-            !top && 'dragger absolute',
-            showActive && 'active'
+          className={cn(
+            allowEdit && 'hover:bg-border cursor-row-resize',
+            showActive && 'bg-primary! z-10 opacity-100',
+            'h-[4px] w-full rounded-sm transition-colors duration-200 ease-in-out select-none',
+            !top && 'dragger absolute'
          )}
          style={memoizedStyle}
          onMouseDown={onMouseDown}
        />
        <div
-          className={cx(styles.hitArea, top && 'top', showActive && 'active')}
+          className={cn(
+            // 'pointer-events-none absolute right-0 left-0 z-50 h-[54px] bg-red-200 opacity-20',
+            // top ? '-top-[36px]' : '-bottom-[15px]',
+            // showActive && 'opacity-80',
+            // styles.hitArea
+            'pointer-events-all absolute right-0 left-0 z-50 h-[54px] opacity-0',
+            top ? '-top-[36px]' : '-bottom-[15px]'
+          )}
          ref={setNodeRef}
        />
      </div>
@ -241,3 +193,24 @@ const ResizeRowHandle: React.FC<{
 );

 ResizeRowHandle.displayName = 'ResizeRowHandle';
+
+const useStyles = createStyles(({ css, token }) => ({
+  hitArea: css`
+    left: 0;
+    right: 0;
+    height: 54px; // Reduced from 54px to be more reasonable
+    position: absolute;
+    z-index: 9;
+    pointer-events: none;
+
+    opacity: 0.2;
+
+    &.top {
+      top: -36px; // Position the hit area to straddle the dragger
+    }
+
+    &:not(.top) {
+      bottom: -15px; // Position the hit area to straddle the dragger
+    }
+  `
+}));
--- a/web/src/components/ui/grid/BusterResizeableGrid.tsx
+++ b/web/src/components/ui/grid/BusterResizeableGrid.tsx
@ -1,6 +1,6 @@
 'use client';

-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';

 import {
  closestCenter,
--- a/web/src/components/ui/grid/_BusterBusterNewItemDropzone.tsx
+++ b/web/src/components/ui/grid/_BusterBusterNewItemDropzone.tsx
@ -15,6 +15,7 @@ export const BusterNewItemDropzone: React.FC = () => {
      className={cn(
        'flex h-full w-full items-center justify-center rounded-sm border-dashed',
        'transition-colors duration-200 ease-in-out',
+        'text-base',
        'text-gray-dark border',
        isOver && 'bg-primary-light text-background border-solid'
      )}>
--- a/web/src/components/ui/grid/_BusterDragColumnMarkers.tsx
+++ b/web/src/components/ui/grid/_BusterDragColumnMarkers.tsx
@ -1,4 +1,3 @@
-import { createStyles } from 'antd-style';
 import React from 'react';
 import { NUMBER_OF_COLUMNS } from './config';
 import { cn } from '@/lib/utils';
@ -29,7 +28,7 @@ export const BusterDragColumnMarkers: React.FC<{
            key={index}
            className={cn(
              'bg-border',
-              snappedDot === index && 'bg-primary shadow-primary-light shadow-sm',
+              snappedDot === index && 'bg-primary shadow-primary-light',
              `snap-dot-${index} absolute h-2 w-2 rounded-full transition duration-500`
            )}
            style={{
--- a/web/src/components/ui/grid/_BusterSortableItemContent.tsx
+++ b/web/src/components/ui/grid/_BusterSortableItemContent.tsx
@ -1,23 +1,5 @@
 import React, { forwardRef } from 'react';
-import { createStyles } from 'antd-style';
-
-const useStyles = createStyles(({ css, token }) => ({
-  item: css`
-    transition: box-shadow transform 200ms ease !important;
-    box-shadow: var(--box-shadow);
-    --box-shadow: 0px 0px 0px rgb(148 148 148);
-    transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scale(var(--scale, 1));
-
-    &.dragging {
-      z-index: 1;
-      transition: none !important;
-    }
-
-    &.dragOverlay {
-      --box-shadow: ${token.boxShadow};
-    }
-  `
-}));
+import { cn } from '@/lib/utils';

 export const BusterSortableItemContent = React.memo(
  forwardRef<
@ -30,18 +12,17 @@ export const BusterSortableItemContent = React.memo(
      children?: React.ReactNode;
    }
  >(({ style, children, itemId, isDragging, isDragOverlay }, setNodeRef) => {
-    const { cx, styles } = useStyles();
-
    return (
      <div
        ref={setNodeRef}
        style={style}
-        className={cx(
+        className={cn(
          'relative h-full w-full overflow-hidden rounded-sm',
-          styles.item,
-          isDragOverlay && 'dragOverlay',
-          isDragging && 'dragging',
-          isDragging ? (isDragOverlay ? 'opacity-90' : 'opacity-40') : 'opacity-100'
+          'transition-shadow duration-200 ease-in-out',
+          isDragOverlay && 'shadow-lg',
+          isDragging && 'dragging z-10 transition-none',
+          isDragging ? (isDragOverlay ? 'opacity-90' : 'opacity-40') : 'opacity-100',
+          'translate-x-[var(--translate-x,0)] translate-y-[var(--translate-y,0)] scale-[var(--scale,1)]'
        )}>
        {children}
      </div>