scottk/twenty
1
0
Fork 0
mirror of https://github.com/lingble/twenty.git synced 2025-10-30 12:22:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Feat : Toggle Eye Icon to Expand/Collapse Kanban Card (#7396)

Browse Source 
This pull request implements the functionality to toggle the eye icon in
Kanban cards to expand or collapse the card details.

#7389 


[toogle-button-in-kanban-card.webm](https://github.com/user-attachments/assets/3bc1a31c-4053-429a-95e7-aa98188c39e4)

---------

Co-authored-by: Nitin Koche <nitinkoche03@gmail.com>
Co-authored-by: Félix Malfait <felix@twenty.com>
This commit is contained in:
Vardhaman Bhandari
2024-10-05 14:34:06 +05:30
committed by GitHub
parent 316b80ed78
commit 16f2033170
1 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
View File

@@ -25,7 +25,8 @@ import styled from '@emotion/styled';
import { ReactNode, useContext, useState } from 'react'; import { ReactNode, useContext, useState } from 'react';
import { useInView } from 'react-intersection-observer'; import { useInView } from 'react-intersection-observer';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import { AvatarChipVariant, IconEye } from 'twenty-ui'; import { AvatarChipVariant, IconEye, IconEyeOff } from 'twenty-ui';
import { useDebouncedCallback } from 'use-debounce';
import { useAddNewCard } from '../../record-board-column/hooks/useAddNewCard'; import { useAddNewCard } from '../../record-board-column/hooks/useAddNewCard';
const StyledBoardCard = styled.div<{ selected: boolean }>` const StyledBoardCard = styled.div<{ selected: boolean }>`
@@ -162,7 +163,7 @@ export const RecordBoardCard = ({
} = useRecordBoardStates(); } = useRecordBoardStates();
const isCompactModeActive = useRecoilValue(isCompactModeActiveState); const isCompactModeActive = useRecoilValue(isCompactModeActiveState);
const [isCardInCompactMode, setIsCardInCompactMode] = useState(true); const [isCardExpanded, setIsCardExpanded] = useState(false);
const [isCurrentCardSelected, setIsCurrentCardSelected] = useRecoilState( const [isCurrentCardSelected, setIsCurrentCardSelected] = useRecoilState(
isRecordBoardCardSelectedFamilyState(recordId), isRecordBoardCardSelectedFamilyState(recordId),
@@ -201,11 +202,11 @@ export const RecordBoardCard = ({
</StyledFieldContainer> </StyledFieldContainer>
); );
const onMouseLeaveBoard = () => { const onMouseLeaveBoard = useDebouncedCallback(() => {
if (isCompactModeActive) { if (isCompactModeActive && isCardExpanded) {
setIsCardInCompactMode(true); setIsCardExpanded(false);
} }
}; }, 800);
const useUpdateOneRecordHook: RecordUpdateHook = () => { const useUpdateOneRecordHook: RecordUpdateHook = () => {
const updateEntity = ({ variables }: RecordUpdateHookParams) => { const updateEntity = ({ variables }: RecordUpdateHookParams) => {
@@ -285,11 +286,11 @@ export const RecordBoardCard = ({
{isCompactModeActive && ( {isCompactModeActive && (
<StyledCompactIconContainer className="compact-icon-container"> <StyledCompactIconContainer className="compact-icon-container">
<LightIconButton <LightIconButton
Icon={IconEye} Icon={isCardExpanded ? IconEyeOff : IconEye}
accent="tertiary" accent="tertiary"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setIsCardInCompactMode(false); setIsCardExpanded((prev) => !prev);
}} }}
/> />
</StyledCompactIconContainer> </StyledCompactIconContainer>
@@ -310,7 +311,7 @@ export const RecordBoardCard = ({
</StyledBoardCardHeader> </StyledBoardCardHeader>
<AnimatedEaseInOut <AnimatedEaseInOut
isOpen={!isCardInCompactMode || !isCompactModeActive} isOpen={isCardExpanded || !isCompactModeActive}
initial={false} initial={false}
> >
<StyledBoardCardBody> <StyledBoardCardBody>