fix(grid): repair muuri drag&drop and visual styles
- Fix Muuri integration: add data-draggable and improve DOM sync - Fix Drag Visuals: remove opacity/rotation/scale in NoteCard and CSS to prevent 'gray/crooked' look - Feat(layout): switch to padding-based spacing strategy (16px gap) - Fix(css): correct media queries to maintain consistent spacing
This commit is contained in:
parent
ddb67ba9e5
commit
d59ec592eb
@ -8,14 +8,8 @@
|
||||
/* Masonry Container */
|
||||
.masonry-container {
|
||||
width: 100%;
|
||||
padding: 0 16px 24px 16px;
|
||||
}
|
||||
|
||||
/* Grid containers for pinned and others sections */
|
||||
.masonry-container > div > div[ref*="GridRef"] {
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
position: relative;
|
||||
/* Reduced to compensate for item padding */
|
||||
padding: 0 20px 40px 20px;
|
||||
}
|
||||
|
||||
/* Masonry Item Base Styles - Width is managed by Muuri */
|
||||
@ -24,8 +18,8 @@
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
box-sizing: border-box;
|
||||
padding: 8px 0;
|
||||
width: auto; /* Width will be set by JS based on container */
|
||||
padding: 8px;
|
||||
/* 8px * 2 = 16px gap (Tighter spacing) */
|
||||
}
|
||||
|
||||
/* Masonry Item Content Wrapper */
|
||||
@ -44,39 +38,38 @@
|
||||
|
||||
/* Note Card - Base styles */
|
||||
.note-card {
|
||||
width: 100% !important; /* Force full width within grid cell */
|
||||
min-width: 0; /* Prevent overflow */
|
||||
height: auto !important; /* Let content determine height like Google Keep */
|
||||
max-height: none !important; /* No max-height restriction */
|
||||
width: 100% !important;
|
||||
/* Force full width within grid cell */
|
||||
min-width: 0;
|
||||
/* Prevent overflow */
|
||||
}
|
||||
|
||||
/* Note Size Styles - Desktop Default */
|
||||
.note-card[data-size="small"] {
|
||||
min-height: 150px !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.note-card[data-size="medium"] {
|
||||
min-height: 200px !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.note-card[data-size="large"] {
|
||||
min-height: 300px !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* Drag State Styles - Improved for Google Keep-like behavior */
|
||||
/* Drag State Styles - Clean and flat behavior requested by user */
|
||||
.masonry-item.muuri-item-dragging {
|
||||
z-index: 1000;
|
||||
opacity: 0.6;
|
||||
transition: none; /* No transition during drag for better performance */
|
||||
opacity: 1 !important;
|
||||
/* Force opacity to 100% */
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.masonry-item.muuri-item-dragging .note-card {
|
||||
transform: scale(1.05) rotate(2deg);
|
||||
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
|
||||
transition: none; /* No transition during drag */
|
||||
transform: none !important;
|
||||
/* Force "straight" - no rotation, no scale */
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.masonry-item.muuri-item-releasing {
|
||||
@ -122,27 +115,25 @@
|
||||
/* Mobile Styles (< 640px) */
|
||||
@media (max-width: 639px) {
|
||||
.masonry-container {
|
||||
padding: 0 12px 16px 12px;
|
||||
padding: 0 20px 16px 20px;
|
||||
}
|
||||
|
||||
.masonry-item {
|
||||
padding: 6px 0;
|
||||
padding: 8px;
|
||||
/* 16px gap on mobile */
|
||||
}
|
||||
|
||||
/* Smaller note sizes on mobile - keep same ratio */
|
||||
.note-card[data-size="small"] {
|
||||
min-height: 120px !important;
|
||||
height: auto !important;
|
||||
/* Smaller note sizes on mobile */
|
||||
.masonry-item-content .note-card[data-size="small"] {
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.note-card[data-size="medium"] {
|
||||
min-height: 160px !important;
|
||||
height: auto !important;
|
||||
.masonry-item-content .note-card[data-size="medium"] {
|
||||
min-height: 160px;
|
||||
}
|
||||
|
||||
.note-card[data-size="large"] {
|
||||
min-height: 240px !important;
|
||||
height: auto !important;
|
||||
.masonry-item-content .note-card[data-size="large"] {
|
||||
min-height: 240px;
|
||||
}
|
||||
|
||||
/* Reduced drag effect on mobile */
|
||||
@ -155,31 +146,36 @@
|
||||
/* Tablet Styles (640px - 1023px) */
|
||||
@media (min-width: 640px) and (max-width: 1023px) {
|
||||
.masonry-container {
|
||||
padding: 0 16px 20px 16px;
|
||||
padding: 0 24px 20px 24px;
|
||||
}
|
||||
|
||||
.masonry-item {
|
||||
padding: 8px 0;
|
||||
padding: 8px;
|
||||
/* 16px gap */
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop Styles (1024px - 1279px) */
|
||||
@media (min-width: 1024px) and (max-width: 1279px) {
|
||||
.masonry-container {
|
||||
padding: 0 20px 24px 20px;
|
||||
padding: 0 28px 24px 28px;
|
||||
}
|
||||
|
||||
.masonry-item {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large Desktop Styles (1280px+) */
|
||||
@media (min-width: 1280px) {
|
||||
.masonry-container {
|
||||
padding: 0 24px 32px 24px;
|
||||
/* max-width removed for infinite columns */
|
||||
width: 100%;
|
||||
padding: 0 28px 32px 28px;
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.masonry-item {
|
||||
padding: 10px 0;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -204,6 +200,7 @@ body.muuri-dragging {
|
||||
|
||||
/* Optimize for reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
.masonry-item,
|
||||
.masonry-item-content,
|
||||
.note-card {
|
||||
@ -218,6 +215,7 @@ body.muuri-dragging {
|
||||
|
||||
/* Print styles */
|
||||
@media print {
|
||||
|
||||
.masonry-item.muuri-item-dragging,
|
||||
.muuri-item-placeholder {
|
||||
display: none !important;
|
||||
|
||||
@ -9,7 +9,7 @@ import { useResizeObserver } from '@/hooks/use-resize-observer';
|
||||
import { useNotebookDrag } from '@/context/notebook-drag-context';
|
||||
import { useLanguage } from '@/lib/i18n';
|
||||
import { DEFAULT_LAYOUT, calculateColumns, calculateItemWidth, isMobileViewport } from '@/config/masonry-layout';
|
||||
import './masonry-grid.css';
|
||||
import './masonry-grid.css'; // Force rebuild: Spacing update verification
|
||||
|
||||
interface MasonryGridProps {
|
||||
notes: Note[];
|
||||
@ -22,9 +22,10 @@ interface MasonryItemProps {
|
||||
onResize: () => void;
|
||||
onDragStart?: (noteId: string) => void;
|
||||
onDragEnd?: () => void;
|
||||
isDragging?: boolean;
|
||||
}
|
||||
|
||||
const MasonryItem = memo(function MasonryItem({ note, onEdit, onResize, onDragStart, onDragEnd }: MasonryItemProps) {
|
||||
const MasonryItem = memo(function MasonryItem({ note, onEdit, onResize, onDragStart, onDragEnd, isDragging }: MasonryItemProps) {
|
||||
const resizeRef = useResizeObserver(onResize);
|
||||
|
||||
return (
|
||||
@ -41,13 +42,14 @@ const MasonryItem = memo(function MasonryItem({ note, onEdit, onResize, onDragSt
|
||||
onEdit={onEdit}
|
||||
onDragStart={onDragStart}
|
||||
onDragEnd={onDragEnd}
|
||||
isDragging={isDragging}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}, (prev, next) => {
|
||||
// Custom comparison to avoid re-render on function prop changes if note data is same
|
||||
return prev.note.id === next.note.id; // Removed isDragging comparison
|
||||
return prev.note.id === next.note.id && prev.isDragging === next.isDragging;
|
||||
});
|
||||
|
||||
export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
|
||||
@ -55,14 +57,7 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
|
||||
const [editingNote, setEditingNote] = useState<{ note: Note; readOnly?: boolean } | null>(null);
|
||||
const { startDrag, endDrag, draggedNoteId } = useNotebookDrag();
|
||||
|
||||
const lastDragEndTime = useRef<number>(0);
|
||||
|
||||
const handleEdit = useCallback((note: Note, readOnly?: boolean) => {
|
||||
// Prevent opening note if it was just dragged (within 200ms)
|
||||
if (Date.now() - lastDragEndTime.current < 200) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (onEdit) {
|
||||
onEdit(note, readOnly);
|
||||
} else {
|
||||
@ -86,9 +81,6 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
|
||||
);
|
||||
|
||||
const handleDragEnd = useCallback(async (grid: any) => {
|
||||
// Record drag end time to prevent accidental clicks
|
||||
lastDragEndTime.current = Date.now();
|
||||
|
||||
if (!grid) return;
|
||||
|
||||
const items = grid.getItems();
|
||||
@ -105,14 +97,7 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
|
||||
}
|
||||
}, []);
|
||||
|
||||
const layoutTimeoutRef = useRef<NodeJS.Timeout>();
|
||||
|
||||
const refreshLayout = useCallback((_?: any) => {
|
||||
if (layoutTimeoutRef.current) {
|
||||
clearTimeout(layoutTimeoutRef.current);
|
||||
}
|
||||
|
||||
layoutTimeoutRef.current = setTimeout(() => {
|
||||
const refreshLayout = useCallback(() => {
|
||||
requestAnimationFrame(() => {
|
||||
if (pinnedMuuri.current) {
|
||||
pinnedMuuri.current.refreshItems().layout();
|
||||
@ -121,16 +106,12 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
|
||||
othersMuuri.current.refreshItems().layout();
|
||||
}
|
||||
});
|
||||
}, 100); // 100ms debounce
|
||||
}, []);
|
||||
|
||||
// Ref for container to use with ResizeObserver
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Centralized function to apply item dimensions based on container width
|
||||
const applyItemDimensions = useCallback((grid: any, containerWidth: number) => {
|
||||
if (!grid) return;
|
||||
|
||||
// Calculate columns and item width based on container width
|
||||
const columns = calculateColumns(containerWidth);
|
||||
const itemWidth = calculateItemWidth(containerWidth, columns);
|
||||
|
||||
@ -139,11 +120,12 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
|
||||
const el = item.getElement();
|
||||
if (el) {
|
||||
el.style.width = `${itemWidth}px`;
|
||||
// Height is auto - determined by content (Google Keep style)
|
||||
// Height is auto (determined by content) - Google Keep style
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Initialize Muuri grids once on mount and sync when needed
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
let muuriInitialized = false;
|
||||
@ -172,34 +154,12 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
|
||||
|
||||
console.log(`[Masonry] Container width: ${containerWidth}px, Columns: ${columns}, Item width: ${itemWidth}px`);
|
||||
|
||||
// Calculate item dimensions based on note size
|
||||
const getItemDimensions = (note: Note) => {
|
||||
const baseWidth = itemWidth;
|
||||
let baseHeight = 200; // Default medium height
|
||||
|
||||
switch (note.size) {
|
||||
case 'small':
|
||||
baseHeight = 150;
|
||||
break;
|
||||
case 'medium':
|
||||
baseHeight = 200;
|
||||
break;
|
||||
case 'large':
|
||||
baseHeight = 300;
|
||||
break;
|
||||
default:
|
||||
baseHeight = 200;
|
||||
}
|
||||
|
||||
return { width: baseWidth, height: baseHeight };
|
||||
};
|
||||
|
||||
const layoutOptions = {
|
||||
dragEnabled: true,
|
||||
// Use drag handle for mobile devices to allow smooth scrolling
|
||||
// On desktop, whole card is draggable (no handle needed)
|
||||
dragHandle: isMobile ? '.muuri-drag-handle' : undefined,
|
||||
// dragContainer: document.body, // REMOVED: Keep item in grid to prevent React conflict
|
||||
dragContainer: document.body,
|
||||
dragStartPredicate: {
|
||||
distance: 10,
|
||||
delay: 0,
|
||||
@ -208,10 +168,8 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
|
||||
enabled: true,
|
||||
createElement: (item: any) => {
|
||||
const el = item.getElement().cloneNode(true);
|
||||
el.style.opacity = '0.4';
|
||||
el.style.transform = 'scale(1.05)';
|
||||
el.style.boxShadow = '0 20px 40px rgba(0, 0, 0, 0.3)';
|
||||
el.classList.add('muuri-item-placeholder');
|
||||
// Styles are now handled purely by CSS (.muuri-item-placeholder)
|
||||
// to avoid inline style conflicts and "grayed out/tilted" look
|
||||
return el;
|
||||
},
|
||||
},
|
||||
@ -223,113 +181,35 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
|
||||
threshold: 50, // Start auto-scroll earlier (50px from edge)
|
||||
smoothStop: true, // Smooth deceleration
|
||||
},
|
||||
// IMPROVED: Configuration for drag release handling
|
||||
dragRelease: {
|
||||
duration: 300,
|
||||
easing: 'cubic-bezier(0.25, 1, 0.5, 1)',
|
||||
useDragContainer: false, // REMOVED: Keep item in grid
|
||||
},
|
||||
dragCssProps: {
|
||||
touchAction: 'none',
|
||||
userSelect: 'none',
|
||||
userDrag: 'none',
|
||||
tapHighlightColor: 'rgba(0, 0, 0, 0)',
|
||||
touchCallout: 'none',
|
||||
contentZooming: 'none',
|
||||
},
|
||||
// CRITICAL: Grid layout configuration for fixed width items
|
||||
layoutDuration: 30, // Much faster layout for responsiveness
|
||||
layoutEasing: 'ease-out',
|
||||
// Use grid layout for better control over item placement
|
||||
layout: {
|
||||
// Enable true masonry layout - items can be different heights
|
||||
// LAYOUT OPTIONS - Configure masonry grid behavior
|
||||
// These options are critical for proper masonry layout with different item sizes
|
||||
layoutDuration: 300,
|
||||
layoutEasing: 'cubic-bezier(0.25, 1, 0.5, 1)',
|
||||
fillGaps: true,
|
||||
horizontal: false,
|
||||
alignRight: false,
|
||||
alignBottom: false,
|
||||
rounding: false,
|
||||
// CRITICAL: Enable true masonry layout for different item sizes
|
||||
layout: {
|
||||
fillGaps: true,
|
||||
horizontal: false,
|
||||
alignRight: false,
|
||||
alignBottom: false,
|
||||
rounding: false,
|
||||
// Set fixed width and let height be determined by content
|
||||
// This creates a Google Keep-like masonry layout
|
||||
itemPositioning: {
|
||||
onLayout: true,
|
||||
onResize: true,
|
||||
onInit: true,
|
||||
},
|
||||
},
|
||||
dragSort: true,
|
||||
dragSortInterval: 50,
|
||||
// Enable drag and drop with proper drag handling
|
||||
dragSortHeuristics: {
|
||||
sortInterval: 0, // Zero interval for immediate sorting
|
||||
minDragDistance: 5,
|
||||
minBounceBackAngle: 1,
|
||||
},
|
||||
// Grid configuration for responsive columns
|
||||
visibleStyles: {
|
||||
opacity: '1',
|
||||
transform: 'scale(1)',
|
||||
},
|
||||
hiddenStyles: {
|
||||
opacity: '0',
|
||||
transform: 'scale(0.5)',
|
||||
},
|
||||
};
|
||||
|
||||
// Initialize pinned grid
|
||||
if (pinnedGridRef.current && !pinnedMuuri.current) {
|
||||
// Set container width explicitly
|
||||
pinnedGridRef.current.style.width = '100%';
|
||||
pinnedGridRef.current.style.position = 'relative';
|
||||
|
||||
// Get all items in the pinned grid and set their dimensions
|
||||
const pinnedItems = Array.from(pinnedGridRef.current.children);
|
||||
pinnedItems.forEach((item) => {
|
||||
const noteId = item.getAttribute('data-id');
|
||||
const note = pinnedNotes.find(n => n.id === noteId);
|
||||
if (note) {
|
||||
const dims = getItemDimensions(note);
|
||||
(item as HTMLElement).style.width = `${dims.width}px`;
|
||||
// Don't set height - let content determine it like Google Keep
|
||||
}
|
||||
});
|
||||
|
||||
pinnedMuuri.current = new MuuriClass(pinnedGridRef.current, layoutOptions)
|
||||
.on('dragEnd', () => handleDragEnd(pinnedMuuri.current))
|
||||
.on('dragStart', () => {
|
||||
// Optional: visual feedback or state update
|
||||
});
|
||||
|
||||
// Initial layout
|
||||
requestAnimationFrame(() => {
|
||||
pinnedMuuri.current?.refreshItems().layout();
|
||||
});
|
||||
.on('dragEnd', () => handleDragEnd(pinnedMuuri.current));
|
||||
}
|
||||
|
||||
// Initialize others grid
|
||||
if (othersGridRef.current && !othersMuuri.current) {
|
||||
// Set container width explicitly
|
||||
othersGridRef.current.style.width = '100%';
|
||||
othersGridRef.current.style.position = 'relative';
|
||||
|
||||
// Get all items in the others grid and set their dimensions
|
||||
const othersItems = Array.from(othersGridRef.current.children);
|
||||
othersItems.forEach((item) => {
|
||||
const noteId = item.getAttribute('data-id');
|
||||
const note = othersNotes.find(n => n.id === noteId);
|
||||
if (note) {
|
||||
const dims = getItemDimensions(note);
|
||||
(item as HTMLElement).style.width = `${dims.width}px`;
|
||||
// Don't set height - let content determine it like Google Keep
|
||||
}
|
||||
});
|
||||
|
||||
othersMuuri.current = new MuuriClass(othersGridRef.current, layoutOptions)
|
||||
.on('dragEnd', () => handleDragEnd(othersMuuri.current));
|
||||
|
||||
// Initial layout
|
||||
requestAnimationFrame(() => {
|
||||
othersMuuri.current?.refreshItems().layout();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@ -346,16 +226,14 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
// Synchronize items when notes change (e.g. searching, adding, removing)
|
||||
// Container ref for ResizeObserver
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Synchronize items when notes change (e.g. searching, adding)
|
||||
useEffect(() => {
|
||||
const syncGridItems = (
|
||||
grid: any,
|
||||
gridRef: React.RefObject<HTMLDivElement | null>,
|
||||
notesArray: Note[]
|
||||
) => {
|
||||
const syncGridItems = (grid: any, gridRef: React.RefObject<HTMLDivElement | null>, notesArray: Note[]) => {
|
||||
if (!grid || !gridRef.current) return;
|
||||
|
||||
// Get container width for dimension calculation
|
||||
const containerWidth = containerRef.current?.getBoundingClientRect().width || window.innerWidth - 32;
|
||||
const columns = calculateColumns(containerWidth);
|
||||
const itemWidth = calculateItemWidth(containerWidth, columns);
|
||||
@ -363,94 +241,80 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
|
||||
// Get current DOM elements and Muuri items
|
||||
const domElements = Array.from(gridRef.current.children) as HTMLElement[];
|
||||
const muuriItems = grid.getItems();
|
||||
|
||||
// Map Muuri items to their elements for comparison
|
||||
const muuriElements = muuriItems.map((item: any) => item.getElement());
|
||||
|
||||
// Find new elements to add (in DOM but not in Muuri)
|
||||
const newElements = domElements.filter(el => !muuriElements.includes(el));
|
||||
|
||||
// Find removed items (in Muuri but not in DOM)
|
||||
// Find elements to remove (in Muuri but not in DOM)
|
||||
const removedItems = muuriItems.filter((item: any) =>
|
||||
!domElements.includes(item.getElement())
|
||||
);
|
||||
|
||||
// Remove old items from Muuri
|
||||
// Remove old items
|
||||
if (removedItems.length > 0) {
|
||||
console.log(`[Masonry Sync] Removing ${removedItems.length} items`);
|
||||
grid.remove(removedItems, { layout: false });
|
||||
}
|
||||
|
||||
// Add new items to Muuri with correct width
|
||||
// Add new items with correct width
|
||||
if (newElements.length > 0) {
|
||||
console.log(`[Masonry Sync] Adding ${newElements.length} new items`);
|
||||
newElements.forEach(el => {
|
||||
el.style.width = `${itemWidth}px`;
|
||||
});
|
||||
grid.add(newElements, { layout: false });
|
||||
}
|
||||
|
||||
// Update all existing item widths
|
||||
// Update all item widths to ensure consistency
|
||||
domElements.forEach(el => {
|
||||
el.style.width = `${itemWidth}px`;
|
||||
});
|
||||
|
||||
// Refresh and layout - CRITICAL: Always refresh items to catch content size changes
|
||||
// Use requestAnimationFrame to ensure DOM has painted
|
||||
requestAnimationFrame(() => {
|
||||
// Refresh and layout
|
||||
grid.refreshItems().layout();
|
||||
});
|
||||
};
|
||||
|
||||
// Use setTimeout to ensure React has finished rendering DOM elements
|
||||
const timeoutId = setTimeout(() => {
|
||||
// Use requestAnimationFrame to ensure DOM is updated before syncing
|
||||
requestAnimationFrame(() => {
|
||||
syncGridItems(pinnedMuuri.current, pinnedGridRef, pinnedNotes);
|
||||
syncGridItems(othersMuuri.current, othersGridRef, othersNotes);
|
||||
}, 50); // Increased timeout slightly to ensure DOM stability
|
||||
});
|
||||
}, [pinnedNotes, othersNotes]); // Re-run when notes change
|
||||
|
||||
return () => clearTimeout(timeoutId);
|
||||
}, [pinnedNotes, othersNotes]);
|
||||
|
||||
// Handle container resize with ResizeObserver for responsive layout
|
||||
// Handle container resize to update responsive layout
|
||||
useEffect(() => {
|
||||
if (!containerRef.current) return;
|
||||
if (!containerRef.current || (!pinnedMuuri.current && !othersMuuri.current)) return;
|
||||
|
||||
let resizeTimeout: NodeJS.Timeout;
|
||||
|
||||
const handleResize = (entries: ResizeObserverEntry[]) => {
|
||||
clearTimeout(resizeTimeout);
|
||||
resizeTimeout = setTimeout(() => {
|
||||
// Get precise width from ResizeObserver
|
||||
const containerWidth = entries[0]?.contentRect.width || window.innerWidth - 32;
|
||||
const columns = calculateColumns(containerWidth);
|
||||
|
||||
console.log(`[Masonry Resize] Width: ${containerWidth}px, Columns: ${columns}`);
|
||||
|
||||
// Apply dimensions to both grids using centralized function
|
||||
// Apply dimensions to both grids
|
||||
applyItemDimensions(pinnedMuuri.current, containerWidth);
|
||||
applyItemDimensions(othersMuuri.current, containerWidth);
|
||||
|
||||
// Refresh both grids with new layout
|
||||
// Refresh layouts
|
||||
requestAnimationFrame(() => {
|
||||
if (pinnedMuuri.current) {
|
||||
pinnedMuuri.current.refreshItems().layout();
|
||||
}
|
||||
if (othersMuuri.current) {
|
||||
othersMuuri.current.refreshItems().layout();
|
||||
}
|
||||
pinnedMuuri.current?.refreshItems().layout();
|
||||
othersMuuri.current?.refreshItems().layout();
|
||||
});
|
||||
}, 150);
|
||||
}, 150); // Debounce
|
||||
};
|
||||
|
||||
const observer = new ResizeObserver(handleResize);
|
||||
observer.observe(containerRef.current);
|
||||
|
||||
// Initial layout calculation
|
||||
// Initial layout check
|
||||
if (containerRef.current) {
|
||||
const initialWidth = containerRef.current.getBoundingClientRect().width || window.innerWidth - 32;
|
||||
applyItemDimensions(pinnedMuuri.current, initialWidth);
|
||||
applyItemDimensions(othersMuuri.current, initialWidth);
|
||||
requestAnimationFrame(() => {
|
||||
pinnedMuuri.current?.refreshItems().layout();
|
||||
othersMuuri.current?.refreshItems().layout();
|
||||
});
|
||||
handleResize([{ contentRect: containerRef.current.getBoundingClientRect() } as ResizeObserverEntry]);
|
||||
}
|
||||
|
||||
return () => {
|
||||
@ -473,6 +337,7 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
|
||||
onResize={refreshLayout}
|
||||
onDragStart={startDrag}
|
||||
onDragEnd={endDrag}
|
||||
isDragging={draggedNoteId === note.id}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
@ -493,6 +358,7 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
|
||||
onResize={refreshLayout}
|
||||
onDragStart={startDrag}
|
||||
onDragEnd={endDrag}
|
||||
isDragging={draggedNoteId === note.id}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -102,7 +102,7 @@ function getInitials(name: string): string {
|
||||
// Helper function to get avatar color based on name hash
|
||||
function getAvatarColor(name: string): string {
|
||||
const colors = [
|
||||
'bg-blue-500',
|
||||
'bg-primary',
|
||||
'bg-purple-500',
|
||||
'bg-green-500',
|
||||
'bg-orange-500',
|
||||
@ -288,7 +288,8 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver, onDragStart, on
|
||||
colorClasses.bg,
|
||||
colorClasses.card,
|
||||
colorClasses.hover,
|
||||
isDragging && 'opacity-60 scale-105 shadow-2xl rotate-1'
|
||||
colorClasses.hover,
|
||||
isDragging && 'shadow-2xl' // Removed opacity, scale, and rotation for clean drag
|
||||
)}
|
||||
onClick={(e) => {
|
||||
// Only trigger edit if not clicking on buttons
|
||||
@ -315,7 +316,7 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver, onDragStart, on
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8 w-8 p-0 bg-blue-100 dark:bg-blue-900/30 hover:bg-blue-200 dark:hover:bg-blue-900/50 text-blue-600 dark:text-blue-400"
|
||||
className="h-8 w-8 p-0 bg-primary/10 dark:bg-primary/20 hover:bg-primary/20 dark:hover:bg-primary/30 text-primary dark:text-primary-foreground"
|
||||
title={t('notebookSuggestion.moveToNotebook')}
|
||||
>
|
||||
<FolderOpen className="h-4 w-4" />
|
||||
@ -417,7 +418,7 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver, onDragStart, on
|
||||
'mb-2 text-xs',
|
||||
optimisticNote.matchType === 'exact'
|
||||
? 'bg-green-100 text-green-800 border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-800'
|
||||
: 'bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-800'
|
||||
: 'bg-primary/10 text-primary border-primary/20 dark:bg-primary/20 dark:text-primary-foreground'
|
||||
)}
|
||||
>
|
||||
{t(`semanticSearch.${optimisticNote.matchType === 'exact' ? 'exactMatch' : 'related'}`)}
|
||||
@ -427,7 +428,7 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver, onDragStart, on
|
||||
{/* Shared badge */}
|
||||
{isSharedNote && owner && (
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs text-blue-600 dark:text-blue-400 font-medium">
|
||||
<span className="text-xs text-primary dark:text-primary-foreground font-medium">
|
||||
{t('notes.sharedBy')} {owner.name || owner.email}
|
||||
</span>
|
||||
<Button
|
||||
@ -466,7 +467,7 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver, onDragStart, on
|
||||
<div className="p-2">
|
||||
<h4 className="font-medium text-xs truncate text-gray-900 dark:text-gray-100">{link.title || link.url}</h4>
|
||||
{link.description && <p className="text-xs text-gray-500 dark:text-gray-400 line-clamp-2 mt-0.5">{link.description}</p>}
|
||||
<span className="text-[10px] text-blue-500 mt-1 block">
|
||||
<span className="text-[10px] text-primary mt-1 block">
|
||||
{new URL(link.url).hostname}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -69,8 +69,8 @@ export const DEFAULT_LAYOUT: MasonryLayoutConfig = {
|
||||
medium: { minHeight: 200, width: 240 },
|
||||
large: { minHeight: 300, width: 240 },
|
||||
},
|
||||
gap: 10, // Tighter gap closer to Google Keep
|
||||
gutter: 10,
|
||||
gap: 24, // Further increased horizontal gap
|
||||
gutter: 24,
|
||||
};
|
||||
|
||||
/**
|
||||
@ -103,8 +103,9 @@ export function calculateColumns(width: number): number {
|
||||
* @returns Item width in pixels
|
||||
*/
|
||||
export function calculateItemWidth(containerWidth: number, columns: number): number {
|
||||
const { gap } = DEFAULT_LAYOUT;
|
||||
return (containerWidth - (columns - 1) * gap) / columns;
|
||||
// Return full column width
|
||||
// Gaps are now handled by padding inside the masonry-item CSS
|
||||
return containerWidth / columns;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
82
keep-notes/tests/layout-spacing.spec.ts
Normal file
82
keep-notes/tests/layout-spacing.spec.ts
Normal file
@ -0,0 +1,82 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test.describe('Masonry Grid Spacing', () => {
|
||||
test('should have correct spacing between notes', async ({ page }) => {
|
||||
// Go to home page
|
||||
await page.goto('/');
|
||||
|
||||
// Create two notes to ensure we have content
|
||||
await page.click('input[placeholder="Take a note..."]');
|
||||
await page.fill('input[placeholder="Title"]', 'Note A');
|
||||
await page.click('button:has-text("Add")');
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
await page.click('input[placeholder="Take a note..."]');
|
||||
await page.fill('input[placeholder="Title"]', 'Note B');
|
||||
await page.click('button:has-text("Add")');
|
||||
await page.waitForTimeout(1000);
|
||||
|
||||
// Get the first two masonry items
|
||||
const items = page.locator('.masonry-item');
|
||||
const count = await items.count();
|
||||
expect(count).toBeGreaterThanOrEqual(2);
|
||||
|
||||
const item1 = items.nth(0);
|
||||
const item2 = items.nth(1);
|
||||
|
||||
// Get bounding boxes
|
||||
const box1 = await item1.boundingBox();
|
||||
const box2 = await item2.boundingBox();
|
||||
|
||||
if (!box1 || !box2) throw new Error('Could not get bounding boxes');
|
||||
|
||||
console.log('Box 1:', box1);
|
||||
console.log('Box 2:', box2);
|
||||
|
||||
// Calculate horizontal distance between centers or edges?
|
||||
// Assuming they are side-by-side in a multi-column layout on desktop
|
||||
|
||||
// Check viewport size
|
||||
const viewport = page.viewportSize();
|
||||
console.log('Viewport:', viewport);
|
||||
|
||||
if (viewport && viewport.width >= 1024) {
|
||||
// Should be at least 2 columns
|
||||
// Distance between left edges
|
||||
const distance = Math.abs(box2.x - box1.x);
|
||||
console.log('Distance betweeen left edges:', distance);
|
||||
|
||||
// Item width
|
||||
console.log('Item 1 width:', box1.width);
|
||||
|
||||
// The visual gap depends on padding if we are using the padding strategy
|
||||
// We can check the computed padding using evaluate
|
||||
const padding = await item1.evaluate((el) => {
|
||||
const style = window.getComputedStyle(el);
|
||||
return style.padding;
|
||||
});
|
||||
console.log('Computed Padding:', padding);
|
||||
}
|
||||
});
|
||||
|
||||
test('should adjust columns on resize', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await page.waitForSelector('.masonry-item');
|
||||
|
||||
// Desktop
|
||||
await page.setViewportSize({ width: 1280, height: 800 });
|
||||
await page.waitForTimeout(1000);
|
||||
let items = page.locator('.masonry-item');
|
||||
let box1 = await items.nth(0).boundingBox();
|
||||
console.log('1280px width - Item width:', box1?.width);
|
||||
|
||||
// Mobile
|
||||
await page.setViewportSize({ width: 375, height: 667 });
|
||||
await page.waitForTimeout(1000); // Wait for resize observer
|
||||
items = page.locator('.masonry-item');
|
||||
box1 = await items.nth(0).boundingBox();
|
||||
console.log('375px width - Item width:', box1?.width);
|
||||
|
||||
// Calculate expectation logic here if needed
|
||||
});
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user