mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

1259/add compact view in opportunities (#2182)

Browse Source 
* icons added

* recoil family state added for checking compact view in each card

* recoil state added for toggle button. Wether compact view show or not

* menu item modifed for right side content

* compact view toggle added in dropdown options

* dropdown width increased because compact view text was  overflowing

* compact view added in boardcard

* new animation added for in and out

* compact view enabled state added

* old state deleted

* sizes added in toggle component

* removed extra added code form navigation

* toggle size added in menuitem toggle

* MenuItemToggle added instead of MenuItemNavigate

* Compact view improved
This commit is contained in:
Abhishek Thory
2023-10-24 19:54:25 +05:30
committed by GitHub
parent 350410b0fe
commit bd0b886081
9 changed files with 216 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
front/src/modules/ui/layout/board/components/BoardOptionsDropdownContent.tsx
View File

@ -15,6 +15,7 @@ import { currentViewScopedSelector } from '@/ui/data/view-bar/states/selectors/c
import { viewsByIdScopedSelector } from '@/ui/data/view-bar/states/selectors/viewsByIdScopedSelector';
import { viewEditModeState } from '@/ui/data/view-bar/states/viewEditModeState';
import {
IconBaselineDensitySmall,
IconChevronLeft,
IconLayoutKanban,
IconPlus,
@ -28,6 +29,7 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { MenuItemNavigate } from '@/ui/navigation/menu-item/components/MenuItemNavigate';
import { MenuItemToggle } from '@/ui/navigation/menu-item/components/MenuItemToggle';
import { ThemeColor } from '@/ui/theme/constants/colors';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
@ -37,6 +39,7 @@ import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilSco
import { useBoardCardFields } from '../hooks/useBoardCardFields';
import { boardCardFieldsScopedState } from '../states/boardCardFieldsScopedState';
import { boardColumnsState } from '../states/boardColumnsState';
import { isCompactViewEnabledState } from '../states/isCompactViewEnabledState';
import { savedBoardCardFieldsFamilyState } from '../states/savedBoardCardFieldsFamilyState';
import { hiddenBoardCardFieldsScopedSelector } from '../states/selectors/hiddenBoardCardFieldsScopedSelector';
import { visibleBoardCardFieldsScopedSelector } from '../states/selectors/visibleBoardCardFieldsScopedSelector';
@ -72,6 +75,9 @@ export const BoardOptionsDropdownContent = ({
>();
const [boardColumns, setBoardColumns] = useRecoilState(boardColumnsState);
const [isCompactViewEnabled, setIsCompactViewEnabled] = useRecoilState(
isCompactViewEnabledState,
);
const hiddenBoardCardFields = useRecoilScopedValue(
hiddenBoardCardFieldsScopedSelector,
@ -194,6 +200,16 @@ export const BoardOptionsDropdownContent = ({
text="Stages"
/>
</DropdownMenuItemsContainer>
<DropdownMenuSeparator />
<DropdownMenuItemsContainer>
<MenuItemToggle
LeftIcon={IconBaselineDensitySmall}
onToggleChange={setIsCompactViewEnabled}
toggled={isCompactViewEnabled}
text="Compact view"
toggleSize="small"
/>
</DropdownMenuItemsContainer>
</>
)}
{currentMenu === 'stages' && (