admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

In navigation drawer, cursor should not be drag on hover and some enhancements (#8975)

Browse Source 
as per the title- on hover, the draggable items had a grab cursor.
Couldn't change it to a pointer, because then onClick would have a weird
behavior of grab which causes lag onClick.
This commit is contained in:
nitin
2024-12-13 19:07:46 +05:30
committed by GitHub
parent 9579f22bc2
commit 257834ea71
5 changed files with 47 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx
View File

@ -16,6 +16,7 @@ import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/componen
import { NavigationDrawerItemsCollapsableContainer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer';
import { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem';
import { getNavigationSubItemLeftAdornment } from '@/ui/navigation/navigation-drawer/utils/getNavigationSubItemLeftAdornment';
import { DragStart, DropResult, ResponderProvided } from '@hello-pangea/dnd';
import { useState } from 'react';
import { createPortal } from 'react-dom';
import { useLocation } from 'react-router-dom';
@ -42,6 +43,7 @@ export const CurrentWorkspaceMemberFavorites = ({
}: CurrentWorkspaceMemberFavoritesProps) => {
const currentPath = useLocation().pathname;
const currentViewPath = useLocation().pathname + useLocation().search;
const [isDragging, setIsDragging] = useState(false);
const [isFavoriteFolderRenaming, setIsFavoriteFolderRenaming] =
useState(false);
@ -113,6 +115,15 @@ export const CurrentWorkspaceMemberFavorites = ({
setIsDeleteModalOpen(false);
};
const handleDragStart = (_: DragStart) => {
setIsDragging(true);
};
const handleDragEnd = (result: DropResult, provided: ResponderProvided) => {
setIsDragging(false);
handleReorderFavorite(result, provided);
};
const rightOptions = (
<FavoriteFolderNavigationDrawerItemDropdown
folderId={folder.folderId}
@ -152,7 +163,8 @@ export const CurrentWorkspaceMemberFavorites = ({
{isOpen && (
<DraggableList
onDragEnd={handleReorderFavorite}
onDragEnd={handleDragEnd}
onDragStart={handleDragStart}
draggableItems={
<>
{folder.favorites.map((favorite, index) => (
@ -180,7 +192,7 @@ export const CurrentWorkspaceMemberFavorites = ({
accent="tertiary"
/>
}
isDraggable
isDragging={isDragging}
/>
}
/>

19
packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx
View File

@ -26,8 +26,12 @@ import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/compo
import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/useNavigationSection';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { DragStart, DropResult, ResponderProvided } from '@hello-pangea/dnd';
import { useState } from 'react';
export const CurrentWorkspaceMemberFavoritesFolders = () => {
const [isDragging, setIsDragging] = useState(false);
const currentPath = useLocation().pathname;
const currentViewPath = useLocation().pathname + useLocation().search;
const theme = useTheme();
@ -54,6 +58,16 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
openNavigationSection();
setIsFavoriteFolderCreating((current) => !current);
};
const handleDragStart = (_: DragStart) => {
setIsDragging(true);
};
const handleDragEnd = (result: DropResult, provided: ResponderProvided) => {
setIsDragging(false);
handleReorderFavorite(result, provided);
};
const shouldDisplayFavoritesWithFeatureFlagEnabled = true;
//todo: remove this logic once feature flag gating is removed
@ -103,7 +117,8 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
{orphanFavorites.length > 0 && (
<DraggableList
onDragEnd={handleReorderFavorite}
onDragEnd={handleDragEnd}
onDragStart={handleDragStart}
draggableItems={orphanFavorites.map((favorite, index) => (
<DraggableItem
key={favorite.id}
@ -129,7 +144,7 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
accent="tertiary"
/>
}
isDraggable={true}
isDragging={isDragging}
/>
}
/>