mirror of
https://github.com/twentyhq/twenty.git
synced 2024-12-21 02:41:33 +03:00
* Add the number of oppurtunities on each stage * Remove excess css properties in Boardcolumn.tsx and use theme * Remove padding from oppurnities counters
This commit is contained in:
parent
3807d62aeb
commit
bfd748e175
front/src/modules
@ -104,6 +104,7 @@ export function EntityBoardColumn({
|
|||||||
pipelineStageId={column.pipelineStageId}
|
pipelineStageId={column.pipelineStageId}
|
||||||
totalAmount={boardColumnTotal}
|
totalAmount={boardColumnTotal}
|
||||||
isFirstColumn={column.index === 0}
|
isFirstColumn={column.index === 0}
|
||||||
|
numChildren={column.pipelineProgressIds.length}
|
||||||
>
|
>
|
||||||
<BoardColumnCardsContainer droppableProvided={droppableProvided}>
|
<BoardColumnCardsContainer droppableProvided={droppableProvided}>
|
||||||
{column.pipelineProgressIds.map((pipelineProgressId, index) => (
|
{column.pipelineProgressIds.map((pipelineProgressId, index) => (
|
||||||
|
@ -60,6 +60,19 @@ const StyledAmount = styled.div`
|
|||||||
margin-left: ${({ theme }) => theme.spacing(2)};
|
margin-left: ${({ theme }) => theme.spacing(2)};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const StyledNumChildren = styled.div`
|
||||||
|
align-items: center;
|
||||||
|
background-color: ${({ theme }) => theme.background.tertiary};
|
||||||
|
border-radius: ${({ theme }) => theme.border.radius.rounded};
|
||||||
|
color: ${({ theme }) => theme.font.color.tertiary};
|
||||||
|
display: flex;
|
||||||
|
height: 20px;
|
||||||
|
justify-content: center;
|
||||||
|
line-height: ${({ theme }) => theme.text.lineHeight.lg};
|
||||||
|
margin-left: auto;
|
||||||
|
width: 16px;
|
||||||
|
`;
|
||||||
|
|
||||||
type OwnProps = {
|
type OwnProps = {
|
||||||
color?: string;
|
color?: string;
|
||||||
title: string;
|
title: string;
|
||||||
@ -69,6 +82,7 @@ type OwnProps = {
|
|||||||
totalAmount?: number;
|
totalAmount?: number;
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
isFirstColumn: boolean;
|
isFirstColumn: boolean;
|
||||||
|
numChildren: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
export function BoardColumn({
|
export function BoardColumn({
|
||||||
@ -79,6 +93,7 @@ export function BoardColumn({
|
|||||||
totalAmount,
|
totalAmount,
|
||||||
children,
|
children,
|
||||||
isFirstColumn,
|
isFirstColumn,
|
||||||
|
numChildren,
|
||||||
}: OwnProps) {
|
}: OwnProps) {
|
||||||
const [isBoardColumnMenuOpen, setIsBoardColumnMenuOpen] =
|
const [isBoardColumnMenuOpen, setIsBoardColumnMenuOpen] =
|
||||||
React.useState(false);
|
React.useState(false);
|
||||||
@ -112,6 +127,7 @@ export function BoardColumn({
|
|||||||
<StyledHeader>
|
<StyledHeader>
|
||||||
<Tag onClick={handleTitleClick} color={color} text={title} />
|
<Tag onClick={handleTitleClick} color={color} text={title} />
|
||||||
{!!totalAmount && <StyledAmount>${totalAmount}</StyledAmount>}
|
{!!totalAmount && <StyledAmount>${totalAmount}</StyledAmount>}
|
||||||
|
<StyledNumChildren>{numChildren}</StyledNumChildren>
|
||||||
</StyledHeader>
|
</StyledHeader>
|
||||||
{isBoardColumnMenuOpen && (
|
{isBoardColumnMenuOpen && (
|
||||||
<BoardColumnMenu
|
<BoardColumnMenu
|
||||||
|
Loading…
Reference in New Issue
Block a user