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;
margin-left: auto;
`;
const StyledHeaderContainer = styled.div`
background: ${({ theme }) => theme.background.primary};
display: flex;
@ -38,6 +39,7 @@ const StyledLeftContainer = styled.div`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
overflow: hidden;
`;
const StyledRightContainer = styled.div`
@ -57,6 +59,10 @@ const StyledColumn = styled.div`
position: relative;
`;
const StyledTag = styled(Tag)`
flex-shrink: 0;
`;
export const RecordBoardColumnHeader = () => {
const { columnDefinition } = useContext(RecordBoardColumnContext);
const [isBoardColumnMenuOpen, setIsBoardColumnMenuOpen] = useState(false);
@ -106,7 +112,7 @@ export const RecordBoardColumnHeader = () => {
>
<StyledHeaderContainer>
<StyledLeftContainer>
<Tag
<StyledTag
onClick={handleBoardColumnMenuOpen}
variant={
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 { RecordBoardColumnHeaderAggregateContentId } from '@/object-record/record-board/types/RecordBoardColumnHeaderAggregateContentId';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import styled from '@emotion/styled';
type RecordBoardColumnHeaderAggregateDropdownProps = {
aggregateValue?: string | number;
@ -17,6 +18,10 @@ type RecordBoardColumnHeaderAggregateDropdownProps = {
dropdownId: string;
};
const StyledContainer = styled.div`
overflow: hidden;
`;
export const RecordBoardColumnHeaderAggregateDropdown = ({
objectMetadataItem,
aggregateValue,
@ -34,36 +39,38 @@ export const RecordBoardColumnHeaderAggregateDropdown = ({
<RecordBoardColumnHeaderAggregateDropdownComponentInstanceContext.Provider
value={{ instanceId: dropdownId }}
>
<Dropdown
onClose={handleResetContent}
dropdownId={dropdownId}
dropdownHotkeyScope={{
scope: RecordBoardColumnHotkeyScope.ColumnHeader,
}}
dropdownMenuWidth={DROPDOWN_WIDTH}
dropdownOffset={{ y: DROPDOWN_OFFSET_Y }}
clickableComponent={
<RecordBoardColumnHeaderAggregateDropdownButton
dropdownId={dropdownId}
value={aggregateValue}
tooltip={aggregateLabel}
/>
}
dropdownComponents={
<RecordBoardColumnHeaderAggregateDropdownContext.Provider
value={{
currentContentId,
onContentChange: handleContentChange,
resetContent: handleResetContent,
previousContentId,
objectMetadataItem: objectMetadataItem,
dropdownId: dropdownId,
}}
>
<AggregateDropdownContent />
</RecordBoardColumnHeaderAggregateDropdownContext.Provider>
}
/>
<StyledContainer>
<Dropdown
onClose={handleResetContent}
dropdownId={dropdownId}
dropdownHotkeyScope={{
scope: RecordBoardColumnHotkeyScope.ColumnHeader,
}}
dropdownMenuWidth={DROPDOWN_WIDTH}
dropdownOffset={{ y: DROPDOWN_OFFSET_Y }}
clickableComponent={
<RecordBoardColumnHeaderAggregateDropdownButton
dropdownId={dropdownId}
value={aggregateValue}
tooltip={aggregateLabel}
/>
}
dropdownComponents={
<RecordBoardColumnHeaderAggregateDropdownContext.Provider
value={{
currentContentId,
onContentChange: handleContentChange,
resetContent: handleResetContent,
previousContentId,
objectMetadataItem: objectMetadataItem,
dropdownId: dropdownId,
}}
>
<AggregateDropdownContent />
</RecordBoardColumnHeaderAggregateDropdownContext.Provider>
}
/>
</StyledContainer>
</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 styled from '@emotion/styled';
import { AppTooltip, Tag, TooltipDelay } from 'twenty-ui';
const StyledButton = styled(StyledHeaderDropdownButton)`
const StyledTag = styled(Tag)`
width: 100%;
`;
const StyledContainer = styled.div`
padding: 0;
`;
@ -17,10 +20,11 @@ export const RecordBoardColumnHeaderAggregateDropdownButton = ({
tooltip?: string;
}) => {
const { isDropdownOpen } = useDropdown(dropdownId);
return (
<div id={dropdownId}>
<StyledButton>
<Tag
<StyledContainer>
<StyledTag
text={value ? value.toString() : '-'}
color={'transparent'}
weight={'regular'}
@ -35,7 +39,7 @@ export const RecordBoardColumnHeaderAggregateDropdownButton = ({
delay={TooltipDelay.mediumDelay}
/>
)}
</StyledButton>
</StyledContainer>
</div>
);
};