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

Fix overflowing aggregate value on kanban header (#9614)

Browse Source 
before


![image](https://github.com/user-attachments/assets/d7a98f27-ec66-4341-8c49-1b0626e923db)

after

<img width="232" alt="image"
src="https://github.com/user-attachments/assets/5bdd286e-b60c-42f1-aaca-d1d6ee6e82aa"
/>
This commit is contained in:
Marie
2025-01-14 17:46:47 +01:00
committed by GitHub
parent 8fb9cb4f5f
commit 3e8fee7ff7
3 changed files with 53 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx
View File

@ -28,6 +28,7 @@ const StyledHeaderActions = styled.div`
display: flex; display: flex;
margin-left: auto; margin-left: auto;
`; `;
const StyledHeaderContainer = styled.div` const StyledHeaderContainer = styled.div`
background: ${({ theme }) => theme.background.primary}; background: ${({ theme }) => theme.background.primary};
display: flex; display: flex;
@ -38,6 +39,7 @@ const StyledLeftContainer = styled.div`
align-items: center; align-items: center;
display: flex; display: flex;
gap: ${({ theme }) => theme.spacing(1)}; gap: ${({ theme }) => theme.spacing(1)};
overflow: hidden;
`; `;
const StyledRightContainer = styled.div` const StyledRightContainer = styled.div`
@ -57,6 +59,10 @@ const StyledColumn = styled.div`
position: relative; position: relative;
`; `;
const StyledTag = styled(Tag)`
flex-shrink: 0;
`;
export const RecordBoardColumnHeader = () => { export const RecordBoardColumnHeader = () => {
const { columnDefinition } = useContext(RecordBoardColumnContext); const { columnDefinition } = useContext(RecordBoardColumnContext);
const [isBoardColumnMenuOpen, setIsBoardColumnMenuOpen] = useState(false); const [isBoardColumnMenuOpen, setIsBoardColumnMenuOpen] = useState(false);
@ -106,7 +112,7 @@ export const RecordBoardColumnHeader = () => {
> >
<StyledHeaderContainer> <StyledHeaderContainer>
<StyledLeftContainer> <StyledLeftContainer>
<Tag <StyledTag
onClick={handleBoardColumnMenuOpen} onClick={handleBoardColumnMenuOpen}
variant={ variant={
columnDefinition.type === RecordGroupDefinitionType.Value columnDefinition.type === RecordGroupDefinitionType.Value

67
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdown.tsx
View File

@ -9,6 +9,7 @@ import { RecordBoardColumnHeaderAggregateDropdownContext } from '@/object-record
import { RecordBoardColumnHotkeyScope } from '@/object-record/record-board/types/BoardColumnHotkeyScope'; import { RecordBoardColumnHotkeyScope } from '@/object-record/record-board/types/BoardColumnHotkeyScope';
import { RecordBoardColumnHeaderAggregateContentId } from '@/object-record/record-board/types/RecordBoardColumnHeaderAggregateContentId'; import { RecordBoardColumnHeaderAggregateContentId } from '@/object-record/record-board/types/RecordBoardColumnHeaderAggregateContentId';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import styled from '@emotion/styled';
type RecordBoardColumnHeaderAggregateDropdownProps = { type RecordBoardColumnHeaderAggregateDropdownProps = {
aggregateValue?: string | number; aggregateValue?: string | number;
@ -17,6 +18,10 @@ type RecordBoardColumnHeaderAggregateDropdownProps = {
dropdownId: string; dropdownId: string;
}; };
const StyledContainer = styled.div`
overflow: hidden;
`;
export const RecordBoardColumnHeaderAggregateDropdown = ({ export const RecordBoardColumnHeaderAggregateDropdown = ({
objectMetadataItem, objectMetadataItem,
aggregateValue, aggregateValue,
@ -34,36 +39,38 @@ export const RecordBoardColumnHeaderAggregateDropdown = ({
<RecordBoardColumnHeaderAggregateDropdownComponentInstanceContext.Provider <RecordBoardColumnHeaderAggregateDropdownComponentInstanceContext.Provider
value={{ instanceId: dropdownId }} value={{ instanceId: dropdownId }}
> >
<Dropdown <StyledContainer>
onClose={handleResetContent} <Dropdown
dropdownId={dropdownId} onClose={handleResetContent}
dropdownHotkeyScope={{ dropdownId={dropdownId}
scope: RecordBoardColumnHotkeyScope.ColumnHeader, dropdownHotkeyScope={{
}} scope: RecordBoardColumnHotkeyScope.ColumnHeader,
dropdownMenuWidth={DROPDOWN_WIDTH} }}
dropdownOffset={{ y: DROPDOWN_OFFSET_Y }} dropdownMenuWidth={DROPDOWN_WIDTH}
clickableComponent={ dropdownOffset={{ y: DROPDOWN_OFFSET_Y }}
<RecordBoardColumnHeaderAggregateDropdownButton clickableComponent={
dropdownId={dropdownId} <RecordBoardColumnHeaderAggregateDropdownButton
value={aggregateValue} dropdownId={dropdownId}
tooltip={aggregateLabel} value={aggregateValue}
/> tooltip={aggregateLabel}
} />
dropdownComponents={ }
<RecordBoardColumnHeaderAggregateDropdownContext.Provider dropdownComponents={
value={{ <RecordBoardColumnHeaderAggregateDropdownContext.Provider
currentContentId, value={{
onContentChange: handleContentChange, currentContentId,
resetContent: handleResetContent, onContentChange: handleContentChange,
previousContentId, resetContent: handleResetContent,
objectMetadataItem: objectMetadataItem, previousContentId,
dropdownId: dropdownId, objectMetadataItem: objectMetadataItem,
}} dropdownId: dropdownId,
> }}
<AggregateDropdownContent /> >
</RecordBoardColumnHeaderAggregateDropdownContext.Provider> <AggregateDropdownContent />
} </RecordBoardColumnHeaderAggregateDropdownContext.Provider>
/> }
/>
</StyledContainer>
</RecordBoardColumnHeaderAggregateDropdownComponentInstanceContext.Provider> </RecordBoardColumnHeaderAggregateDropdownComponentInstanceContext.Provider>
); );
}; };

14
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownButton.tsx
View File

@ -1,9 +1,12 @@
import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { AppTooltip, Tag, TooltipDelay } from 'twenty-ui'; import { AppTooltip, Tag, TooltipDelay } from 'twenty-ui';
const StyledButton = styled(StyledHeaderDropdownButton)` const StyledTag = styled(Tag)`
width: 100%;
`;
const StyledContainer = styled.div`
padding: 0; padding: 0;
`; `;
@ -17,10 +20,11 @@ export const RecordBoardColumnHeaderAggregateDropdownButton = ({
tooltip?: string; tooltip?: string;
}) => { }) => {
const { isDropdownOpen } = useDropdown(dropdownId); const { isDropdownOpen } = useDropdown(dropdownId);
return ( return (
<div id={dropdownId}> <div id={dropdownId}>
<StyledButton> <StyledContainer>
<Tag <StyledTag
text={value ? value.toString() : '-'} text={value ? value.toString() : '-'}
color={'transparent'} color={'transparent'}
weight={'regular'} weight={'regular'}
@ -35,7 +39,7 @@ export const RecordBoardColumnHeaderAggregateDropdownButton = ({
delay={TooltipDelay.mediumDelay} delay={TooltipDelay.mediumDelay}
/> />
)} )}
</StyledButton> </StyledContainer>
</div> </div>
); );
}; };