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

Feat/hide board fields (#1271)

Browse Source 
* Renamed AuthAutoRouter

* Moved RecoilScope

* Refactored old WithTopBarContainer to make it less transclusive

* Created new add opportunity button and refactored DropdownButton

* Added tests

* Deactivated new eslint rule

* Refactored Table options with new dropdown

* Started BoardDropdown

* Fix lint

* Refactor dropdown openstate

* Fix according to PR

* Fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Lucas Bordeau
2023-08-24 13:19:42 +02:00
committed by GitHub
parent 64cef963bc
commit 252f1c655e
48 changed files with 860 additions and 580 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx
View File

@ -1,9 +1,9 @@
import { ChangeEvent, useState } from 'react';
import styled from '@emotion/styled';
import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
import { DropdownMenuSeparator } from '@/ui/dropdown/components/DropdownMenuSeparator';
import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
import { textInputStyle } from '@/ui/theme/constants/effects';
import { debounce } from '~/utils/debounce';
@ -75,7 +75,7 @@ export function BoardColumnEditTitleMenu({
debouncedOnUpdateTitle(event.target.value);
};
return (
<DropdownMenuItemsContainer>
<StyledDropdownMenuItemsContainer>
<StyledEditTitleContainer>
<StyledEditModeInput
value={internalValue}
@ -84,7 +84,7 @@ export function BoardColumnEditTitleMenu({
autoFocus
/>
</StyledEditTitleContainer>
<DropdownMenuSeparator />
<StyledDropdownMenuSeparator />
{COLOR_OPTIONS.map((colorOption) => (
<DropdownMenuSelectableItem
key={colorOption.name}
@ -98,6 +98,6 @@ export function BoardColumnEditTitleMenu({
{colorOption.name}
</DropdownMenuSelectableItem>
))}
</DropdownMenuItemsContainer>
</StyledDropdownMenuItemsContainer>
);
}

12
front/src/modules/ui/board/components/BoardColumnMenu.tsx
View File

@ -3,9 +3,9 @@ import styled from '@emotion/styled';
import { IconPencil } from '@tabler/icons-react';
import { Key } from 'ts-key-enum';
import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
import { icon } from '@/ui/theme/constants/icon';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
@ -50,14 +50,14 @@ export function BoardColumnMenu({
return (
<StyledMenuContainer ref={boardColumnMenuRef}>
<DropdownMenu>
<StyledDropdownMenu>
{openMenu === 'actions' && (
<DropdownMenuItemsContainer>
<StyledDropdownMenuItemsContainer>
<DropdownMenuSelectableItem onClick={() => setOpenMenu('title')}>
<IconPencil size={icon.size.md} stroke={icon.stroke.sm} />
Rename
</DropdownMenuSelectableItem>
</DropdownMenuItemsContainer>
</StyledDropdownMenuItemsContainer>
)}
{openMenu === 'title' && (
<BoardColumnEditTitleMenu
@ -67,7 +67,7 @@ export function BoardColumnMenu({
title={title}
/>
)}
</DropdownMenu>
</StyledDropdownMenu>
</StyledMenuContainer>
);
}

14
front/src/modules/ui/board/components/BoardOptionsDropdown.tsx Normal file
View File

@ -0,0 +1,14 @@
import { DropdownButton } from '@/ui/dropdown/components/DropdownButton';
import { BoardOptionsDropdownButton } from './BoardOptionsDropdownButton';
import { BoardOptionsDropdownContent } from './BoardOptionsDropdownContent';
export function BoardOptionsDropdown() {
return (
<DropdownButton
dropdownKey="options"
buttonComponents={<BoardOptionsDropdownButton />}
dropdownComponents={<BoardOptionsDropdownContent />}
></DropdownButton>
);
}

21
front/src/modules/ui/board/components/BoardOptionsDropdownButton.tsx Normal file
View File

@ -0,0 +1,21 @@
import { StyledHeaderDropdownButton } from '@/ui/dropdown/components/StyledHeaderDropdownButton';
import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
export function BoardOptionsDropdownButton() {
const { isDropdownButtonOpen, toggleDropdownButton } = useDropdownButton({
key: 'options',
});
function handleClick() {
toggleDropdownButton();
}
return (
<StyledHeaderDropdownButton
isUnfolded={isDropdownButtonOpen}
onClick={handleClick}
>
Options
</StyledHeaderDropdownButton>
);
}

55
front/src/modules/ui/board/components/BoardOptionsDropdownContent.tsx Normal file
View File

@ -0,0 +1,55 @@
import { useState } from 'react';
import { useTheme } from '@emotion/react';
import { DropdownMenuHeader } from '@/ui/dropdown/components/DropdownMenuHeader';
import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
import { IconChevronLeft } from '@/ui/icon';
type BoardOptionsDropdownMenu = 'options' | 'fields';
export function BoardOptionsDropdownContent() {
const theme = useTheme();
const [menuShown, setMenuShown] =
useState<BoardOptionsDropdownMenu>('options');
function handleFieldsClick() {
setMenuShown('fields');
}
function handleMenuHeaderClick() {
setMenuShown('options');
}
return (
<StyledDropdownMenu>
{menuShown === 'options' ? (
<>
<DropdownMenuHeader>Options</DropdownMenuHeader>
<StyledDropdownMenuSeparator />
<StyledDropdownMenuItemsContainer>
<DropdownMenuItem onClick={handleFieldsClick}>
Fields
</DropdownMenuItem>
</StyledDropdownMenuItemsContainer>
</>
) : (
menuShown === 'fields' && (
<>
<DropdownMenuHeader
startIcon={<IconChevronLeft size={theme.icon.size.md} />}
onClick={handleMenuHeaderClick}
>
Fields
</DropdownMenuHeader>
<StyledDropdownMenuSeparator />
{}
</>
)
)}
</StyledDropdownMenu>
);
}