twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-26 13:31:45 +03:00
Code Issues Packages Projects Releases Wiki Activity

2503-feat(front): hover icons added; commandmenu open added (#2622)

Browse Source 
* 2503-feat(front): hover icons added; commandmenu open added

* 2503-feat(front): LightIconButtonGroup added; BoardColumn suggested fixes

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Kanav Arora 2023-12-01 21:19:18 +05:30 committed by GitHub
parent 8bd567c2b4
commit 9dc997e9ac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
front/src/modules/ui/object/record-board/components/RecordBoardColumn.tsx
View File

@ -1,9 +1,11 @@
import React, { useContext } from 'react'; import React, { useContext, useState } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { Draggable, Droppable, DroppableProvided } from '@hello-pangea/dnd'; import { Draggable, Droppable, DroppableProvided } from '@hello-pangea/dnd';
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
import { IconDotsVertical } from '@/ui/display/icon';
import { Tag } from '@/ui/display/tag/components/Tag'; import { Tag } from '@/ui/display/tag/components/Tag';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { RecordBoardCard } from '@/ui/object/record-board/components/RecordBoardCard'; import { RecordBoardCard } from '@/ui/object/record-board/components/RecordBoardCard';
import { BoardCardIdContext } from '@/ui/object/record-board/contexts/BoardCardIdContext'; import { BoardCardIdContext } from '@/ui/object/record-board/contexts/BoardCardIdContext';
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
@ -74,6 +76,11 @@ const StyledNumChildren = styled.div`
width: 16px; width: 16px;
`; `;
const StyledHeaderActions = styled.div`
display: flex;
margin-left: auto;
`;
type BoardColumnCardsContainerProps = { type BoardColumnCardsContainerProps = {
children: React.ReactNode; children: React.ReactNode;
droppableProvided: DroppableProvided; droppableProvided: DroppableProvided;
@ -108,22 +115,22 @@ export const RecordBoardColumn = ({
}: RecordBoardColumnProps) => { }: RecordBoardColumnProps) => {
const column = useContext(BoardColumnContext); const column = useContext(BoardColumnContext);
const [isBoardColumnMenuOpen, setIsBoardColumnMenuOpen] = const [isBoardColumnMenuOpen, setIsBoardColumnMenuOpen] = useState(false);
React.useState(false); const [isHeaderHovered, setIsHeaderHovered] = useState(false);
const { const {
setHotkeyScopeAndMemorizePreviousScope, setHotkeyScopeAndMemorizePreviousScope,
goBackToPreviousHotkeyScope, goBackToPreviousHotkeyScope,
} = usePreviousHotkeyScope(); } = usePreviousHotkeyScope();
const handleTitleClick = () => { const handleBoardColumnMenuOpen = () => {
setIsBoardColumnMenuOpen(true); setIsBoardColumnMenuOpen(true);
setHotkeyScopeAndMemorizePreviousScope(BoardColumnHotkeyScope.BoardColumn, { setHotkeyScopeAndMemorizePreviousScope(BoardColumnHotkeyScope.BoardColumn, {
goto: false, goto: false,
}); });
}; };
const handleClose = () => { const handleBoardColumnMenuClose = () => {
goBackToPreviousHotkeyScope(); goBackToPreviousHotkeyScope();
setIsBoardColumnMenuOpen(false); setIsBoardColumnMenuOpen(false);
}; };
@ -150,20 +157,39 @@ export const RecordBoardColumn = ({
<Droppable droppableId={column.id}> <Droppable droppableId={column.id}>
{(droppableProvided) => ( {(droppableProvided) => (
<StyledColumn isFirstColumn={isFirstColumn}> <StyledColumn isFirstColumn={isFirstColumn}>
<StyledHeader> <StyledHeader
onMouseEnter={() => setIsHeaderHovered(true)}
onMouseLeave={() => setIsHeaderHovered(false)}
>
<Tag <Tag
onClick={handleTitleClick} onClick={handleBoardColumnMenuOpen}
color={columnDefinition.colorCode ?? 'gray'} color={columnDefinition.colorCode ?? 'gray'}
text={columnDefinition.title} text={columnDefinition.title}
/> />
{!!boardColumnTotal && ( {!!boardColumnTotal && (
<StyledAmount>${boardColumnTotal}</StyledAmount> <StyledAmount>${boardColumnTotal}</StyledAmount>
)} )}
{!isHeaderHovered && (
<StyledNumChildren>{cardIds.length}</StyledNumChildren> <StyledNumChildren>{cardIds.length}</StyledNumChildren>
)}
{isHeaderHovered && (
<StyledHeaderActions>
<LightIconButton
accent="tertiary"
Icon={IconDotsVertical}
onClick={handleBoardColumnMenuOpen}
/>
{/* <LightIconButton
accent="tertiary"
Icon={IconPlus}
onClick={() => {}}
/> */}
</StyledHeaderActions>
)}
</StyledHeader> </StyledHeader>
{isBoardColumnMenuOpen && ( {isBoardColumnMenuOpen && (
<RecordBoardColumnDropdownMenu <RecordBoardColumnDropdownMenu
onClose={handleClose} onClose={handleBoardColumnMenuClose}
onDelete={onDelete} onDelete={onDelete}
onTitleEdit={handleTitleEdit} onTitleEdit={handleTitleEdit}
stageId={boardColumnId} stageId={boardColumnId}