1259/add compact view in opportunities (#2182)
* icons added * recoil family state added for checking compact view in each card * recoil state added for toggle button. Wether compact view show or not * menu item modifed for right side content * compact view toggle added in dropdown options * dropdown width increased because compact view text was overflowing * compact view added in boardcard * new animation added for in and out * compact view enabled state added * old state deleted * sizes added in toggle component * removed extra added code form navigation * toggle size added in menuitem toggle * MenuItemToggle added instead of MenuItemNavigate * Compact view improved
This commit is contained in:
Abhishek Thory
@ -6,11 +6,15 @@ import { FieldContext } from '@/ui/data/field/contexts/FieldContext';
|
||||
import { InlineCell } from '@/ui/data/inline-cell/components/InlineCell';
|
||||
import { InlineCellHotkeyScope } from '@/ui/data/inline-cell/types/InlineCellHotkeyScope';
|
||||
import { EntityChipVariant } from '@/ui/display/chip/components/EntityChip';
|
||||
import { IconEye } from '@/ui/display/icon/index';
|
||||
import { Checkbox, CheckboxVariant } from '@/ui/input/components/Checkbox';
|
||||
import { BoardCardIdContext } from '@/ui/layout/board/contexts/BoardCardIdContext';
|
||||
import { useBoardContext } from '@/ui/layout/board/hooks/useBoardContext';
|
||||
import { useCurrentCardSelected } from '@/ui/layout/board/hooks/useCurrentCardSelected';
|
||||
import { isCardInCompactViewState } from '@/ui/layout/board/states/isCardInCompactViewState';
|
||||
import { isCompactViewEnabledState } from '@/ui/layout/board/states/isCompactViewEnabledState';
|
||||
import { visibleBoardCardFieldsScopedSelector } from '@/ui/layout/board/states/selectors/visibleBoardCardFieldsScopedSelector';
|
||||
import { AnimatedEaseInOut } from '@/ui/utilities/animation/components/AnimatedEaseInOut';
|
||||
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
|
||||
import { useUpdateOnePipelineProgressMutation } from '~/generated/graphql';
|
||||
import { getLogoUrlFromDomainName } from '~/utils';
|
||||
@ -38,12 +42,21 @@ const StyledBoardCard = styled.div<{ selected: boolean }>`
|
||||
cursor: pointer;
|
||||
|
||||
.checkbox-container {
|
||||
transition: all ease-in-out 160ms;
|
||||
opacity: ${({ selected }) => (selected ? 1 : 0)};
|
||||
}
|
||||
|
||||
&:hover .checkbox-container {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.compact-icon-container {
|
||||
transition: all ease-in-out 160ms;
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover .compact-icon-container {
|
||||
opacity: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledBoardCardWrapper = styled.div`
|
||||
@ -51,16 +64,21 @@ const StyledBoardCardWrapper = styled.div`
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const StyledBoardCardHeader = styled.div`
|
||||
const StyledBoardCardHeader = styled.div<{
|
||||
showCompactView: boolean;
|
||||
}>`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-weight: ${({ theme }) => theme.font.weight.medium};
|
||||
height: 24px;
|
||||
padding-bottom: ${({ theme }) => theme.spacing(1)};
|
||||
padding-bottom: ${({ theme, showCompactView }) =>
|
||||
theme.spacing(showCompactView ? 0 : 1)};
|
||||
padding-left: ${({ theme }) => theme.spacing(2)};
|
||||
padding-right: ${({ theme }) => theme.spacing(2)};
|
||||
padding-top: ${({ theme }) => theme.spacing(2)};
|
||||
transition: padding ease-in-out 160ms;
|
||||
|
||||
img {
|
||||
height: ${({ theme }) => theme.icon.size.md}px;
|
||||
margin-right: ${({ theme }) => theme.spacing(2)};
|
||||
@ -99,6 +117,27 @@ const StyledFieldContainer = styled.div`
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const StyledCompactIconContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
`;
|
||||
|
||||
const StyledIconEye = styled(IconEye)`
|
||||
color: ${({ theme }) => theme.font.color.tertiary};
|
||||
height: 24px;
|
||||
padding-bottom: ${({ theme }) => theme.spacing(0.2)};
|
||||
padding-left: ${({ theme }) => theme.spacing(0.5)};
|
||||
padding-right: ${({ theme }) => theme.spacing(0.5)};
|
||||
|
||||
padding-top: ${({ theme }) => theme.spacing(0.2)};
|
||||
|
||||
&:hover {
|
||||
background-color: ${({ theme }) => theme.background.transparent.medium};
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
}
|
||||
`;
|
||||
|
||||
export const CompanyBoardCard = () => {
|
||||
const { BoardRecoilScopeContext } = useBoardContext();
|
||||
|
||||
@ -109,6 +148,15 @@ export const CompanyBoardCard = () => {
|
||||
const [companyProgress] = useRecoilState(
|
||||
companyProgressesFamilyState(boardCardId ?? ''),
|
||||
);
|
||||
|
||||
const [isCompactViewEnabled] = useRecoilState(isCompactViewEnabledState);
|
||||
|
||||
const [isCardInCompactView, setIsCardInCompactView] = useRecoilState(
|
||||
isCardInCompactViewState(boardCardId ?? ''),
|
||||
);
|
||||
|
||||
const showCompactView = isCompactViewEnabled && isCardInCompactView;
|
||||
|
||||
const { pipelineProgress, company } = companyProgress ?? {};
|
||||
|
||||
const visibleBoardCardFields = useRecoilScopedValue(
|
||||
@ -135,19 +183,34 @@ export const CompanyBoardCard = () => {
|
||||
</StyledFieldContainer>
|
||||
);
|
||||
|
||||
const OnMouseLeaveBoard = () => {
|
||||
setIsCardInCompactView(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledBoardCardWrapper>
|
||||
<StyledBoardCard
|
||||
selected={currentCardSelected}
|
||||
onMouseLeave={OnMouseLeaveBoard}
|
||||
onClick={() => setCurrentCardSelected(!currentCardSelected)}
|
||||
>
|
||||
<StyledBoardCardHeader>
|
||||
<StyledBoardCardHeader showCompactView={showCompactView}>
|
||||
<CompanyChip
|
||||
id={company.id}
|
||||
name={company.name}
|
||||
pictureUrl={getLogoUrlFromDomainName(company.domainName)}
|
||||
variant={EntityChipVariant.Transparent}
|
||||
/>
|
||||
{showCompactView && (
|
||||
<StyledCompactIconContainer className="compact-icon-container">
|
||||
<StyledIconEye
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsCardInCompactView(false);
|
||||
}}
|
||||
/>
|
||||
</StyledCompactIconContainer>
|
||||
)}
|
||||
<StyledCheckboxContainer className="checkbox-container">
|
||||
<Checkbox
|
||||
checked={currentCardSelected}
|
||||
@ -157,28 +220,32 @@ export const CompanyBoardCard = () => {
|
||||
</StyledCheckboxContainer>
|
||||
</StyledBoardCardHeader>
|
||||
<StyledBoardCardBody>
|
||||
{visibleBoardCardFields.map((viewField) => (
|
||||
<PreventSelectOnClickContainer key={viewField.key}>
|
||||
<FieldContext.Provider
|
||||
value={{
|
||||
entityId: boardCardId,
|
||||
recoilScopeId: boardCardId + viewField.key,
|
||||
fieldDefinition: {
|
||||
key: viewField.key,
|
||||
name: viewField.name,
|
||||
Icon: viewField.Icon,
|
||||
type: viewField.type,
|
||||
metadata: viewField.metadata,
|
||||
entityChipDisplayMapper: viewField.entityChipDisplayMapper,
|
||||
},
|
||||
useUpdateEntityMutation: useUpdateOnePipelineProgressMutation,
|
||||
hotkeyScope: InlineCellHotkeyScope.InlineCell,
|
||||
}}
|
||||
>
|
||||
<InlineCell />
|
||||
</FieldContext.Provider>
|
||||
</PreventSelectOnClickContainer>
|
||||
))}
|
||||
<AnimatedEaseInOut isOpen={!showCompactView}>
|
||||
{visibleBoardCardFields.map((viewField) => (
|
||||
<PreventSelectOnClickContainer key={viewField.key}>
|
||||
<FieldContext.Provider
|
||||
value={{
|
||||
entityId: boardCardId,
|
||||
recoilScopeId: boardCardId + viewField.key,
|
||||
fieldDefinition: {
|
||||
key: viewField.key,
|
||||
name: viewField.name,
|
||||
Icon: viewField.Icon,
|
||||
type: viewField.type,
|
||||
metadata: viewField.metadata,
|
||||
entityChipDisplayMapper:
|
||||
viewField.entityChipDisplayMapper,
|
||||
},
|
||||
useUpdateEntityMutation:
|
||||
useUpdateOnePipelineProgressMutation,
|
||||
hotkeyScope: InlineCellHotkeyScope.InlineCell,
|
||||
}}
|
||||
>
|
||||
<InlineCell />
|
||||
</FieldContext.Provider>
|
||||
</PreventSelectOnClickContainer>
|
||||
))}
|
||||
</AnimatedEaseInOut>
|
||||
</StyledBoardCardBody>
|
||||
</StyledBoardCard>
|
||||
</StyledBoardCardWrapper>
|
||||
|
||||
Reference in New Issue
Block a user