twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-22 19:41:53 +03:00
Code Issues Packages Projects Releases Wiki Activity

Scrollable fixed dropdowns container minor refactor (#9159)

Browse Source 
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
nitin 2024-12-20 15:13:48 +05:30 committed by GitHub
parent 94136d953e
commit 54c4d64ae8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
20 changed files with 101 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx
View File

@ -1,8 +1,3 @@
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { PositionType } from '../types/PositionType';
import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector'; import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext'; import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-menu/states/recordIndexActionMenuDropdownPositionComponentState'; import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-menu/states/recordIndexActionMenuDropdownPositionComponentState';
@ -13,7 +8,10 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState'; import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { MenuItem } from 'twenty-ui'; import { MenuItem } from 'twenty-ui';
import { PositionType } from '../types/PositionType';
type StyledContainerProps = { type StyledContainerProps = {
position: PositionType; position: PositionType;

1
packages/twenty-front/src/modules/favorites/favorite-folder-picker/components/FavoriteFolderPicker.tsx
View File

@ -99,6 +99,7 @@ export const FavoriteFolderPicker = ({
toggleFolderSelection={toggleFolderSelection} toggleFolderSelection={toggleFolderSelection}
/> />
</DropdownMenuItemsContainer> </DropdownMenuItemsContainer>
<DropdownMenuSeparator />
<FavoriteFolderPickerFooter dropdownId={dropdownId} /> <FavoriteFolderPickerFooter dropdownId={dropdownId} />
</DropdownMenu> </DropdownMenu>
); );

35
packages/twenty-front/src/modules/favorites/favorite-folder-picker/components/FavoriteFolderPickerFooter.tsx
View File

@ -4,16 +4,9 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/useNavigationSection'; import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/useNavigationSection';
import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
import { useTheme } from '@emotion/react'; import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useRecoilState, useSetRecoilState } from 'recoil'; import { useRecoilState, useSetRecoilState } from 'recoil';
import { IconPlus, MenuItem } from 'twenty-ui'; import { IconPlus, MenuItem } from 'twenty-ui';
const StyledFooter = styled.div`
border-bottom-left-radius: ${({ theme }) => theme.border.radius.md};
border-bottom-right-radius: ${({ theme }) => theme.border.radius.md};
border-top: 1px solid ${({ theme }) => theme.border.color.light};
`;
export const FavoriteFolderPickerFooter = ({ export const FavoriteFolderPickerFooter = ({
dropdownId, dropdownId,
}: { }: {
@ -30,20 +23,18 @@ export const FavoriteFolderPickerFooter = ({
const { closeDropdown } = useDropdown(dropdownId); const { closeDropdown } = useDropdown(dropdownId);
return ( return (
<StyledFooter> <DropdownMenuItemsContainer scrollable={false}>
<DropdownMenuItemsContainer> <MenuItem
<MenuItem className="add-folder"
className="add-folder" onClick={() => {
onClick={() => { setIsNavigationDrawerExpanded(true);
setIsNavigationDrawerExpanded(true); openNavigationSection();
openNavigationSection(); setIsFavoriteFolderCreating(true);
setIsFavoriteFolderCreating(true); closeDropdown();
closeDropdown(); }}
}} text="Add folder"
text="Add folder" LeftIcon={() => <IconPlus size={theme.icon.size.md} />}
LeftIcon={() => <IconPlus size={theme.icon.size.md} />} />
/> </DropdownMenuItemsContainer>
</DropdownMenuItemsContainer>
</StyledFooter>
); );
}; };

2
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownFieldsContent.tsx
View File

@ -62,7 +62,7 @@ export const ObjectOptionsDropdownFieldsContent = () => {
showDragGrip={true} showDragGrip={true}
/> />
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuItemsContainer withoutScrollWrapper> <DropdownMenuItemsContainer scrollable={false}>
<MenuItemNavigate <MenuItemNavigate
onClick={() => onContentChange('hiddenFields')} onClick={() => onContentChange('hiddenFields')}
LeftIcon={IconEyeOff} LeftIcon={IconEyeOff}

2
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenFieldsContent.tsx
View File

@ -87,7 +87,7 @@ export const ObjectOptionsDropdownHiddenFieldsContent = () => {
closeDropdown(); closeDropdown();
}} }}
> >
<DropdownMenuItemsContainer withoutScrollWrapper> <DropdownMenuItemsContainer scrollable={false}>
<MenuItem LeftIcon={IconSettings} text="Edit Fields" /> <MenuItem LeftIcon={IconSettings} text="Edit Fields" />
</DropdownMenuItemsContainer> </DropdownMenuItemsContainer>
</UndecoratedLink> </UndecoratedLink>

4
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx
View File

@ -98,7 +98,7 @@ export const ObjectOptionsDropdownMenuContent = () => {
{/** TODO: Should be removed when view settings contains more options */} {/** TODO: Should be removed when view settings contains more options */}
{viewType === ViewType.Kanban && ( {viewType === ViewType.Kanban && (
<> <>
<DropdownMenuItemsContainer withoutScrollWrapper> <DropdownMenuItemsContainer scrollable={false}>
<MenuItem <MenuItem
onClick={() => onContentChange('viewSettings')} onClick={() => onContentChange('viewSettings')}
LeftIcon={IconLayout} LeftIcon={IconLayout}
@ -109,7 +109,7 @@ export const ObjectOptionsDropdownMenuContent = () => {
<DropdownMenuSeparator /> <DropdownMenuSeparator />
</> </>
)} )}
<DropdownMenuItemsContainer withoutScrollWrapper> <DropdownMenuItemsContainer scrollable={false}>
<MenuItem <MenuItem
onClick={() => onContentChange('fields')} onClick={() => onContentChange('fields')}
LeftIcon={IconTag} LeftIcon={IconTag}

2
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx
View File

@ -53,7 +53,7 @@ export const RecordTableHeaderPlusButtonContent = () => {
))} ))}
</DropdownMenuItemsContainer> </DropdownMenuItemsContainer>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuItemsContainer withoutScrollWrapper> <DropdownMenuItemsContainer scrollable={false}>
<UndecoratedLink <UndecoratedLink
fullWidth fullWidth
to={`/settings/objects/${getObjectSlug(objectMetadataItem)}`} to={`/settings/objects/${getObjectSlug(objectMetadataItem)}`}

4
packages/twenty-front/src/modules/object-record/relation-picker/components/MultiRecordSelect.tsx
View File

@ -144,7 +144,7 @@ export const MultiRecordSelect = ({
{dropdownPlacement?.includes('end') && ( {dropdownPlacement?.includes('end') && (
<> <>
{isDefined(onCreate) && ( {isDefined(onCreate) && (
<DropdownMenuItemsContainer> <DropdownMenuItemsContainer scrollable={false}>
{createNewButton} {createNewButton}
</DropdownMenuItemsContainer> </DropdownMenuItemsContainer>
)} )}
@ -181,7 +181,7 @@ export const MultiRecordSelect = ({
<DropdownMenuSeparator /> <DropdownMenuSeparator />
)} )}
{isDefined(onCreate) && ( {isDefined(onCreate) && (
<DropdownMenuItemsContainer withoutScrollWrapper> <DropdownMenuItemsContainer scrollable={false}>
{createNewButton} {createNewButton}
</DropdownMenuItemsContainer> </DropdownMenuItemsContainer>
)} )}

4
packages/twenty-front/src/modules/object-record/relation-picker/components/SingleRecordSelectMenuItemsWithSearch.tsx
View File

@ -69,7 +69,7 @@ export const SingleRecordSelectMenuItemsWithSearch = ({
<> <>
{dropdownPlacement?.includes('end') && ( {dropdownPlacement?.includes('end') && (
<> <>
<DropdownMenuItemsContainer> <DropdownMenuItemsContainer scrollable={false}>
{createNewButton} {createNewButton}
</DropdownMenuItemsContainer> </DropdownMenuItemsContainer>
{records.recordsToSelect.length > 0 && <DropdownMenuSeparator />} {records.recordsToSelect.length > 0 && <DropdownMenuSeparator />}
@ -117,7 +117,7 @@ export const SingleRecordSelectMenuItemsWithSearch = ({
<DropdownMenuSeparator /> <DropdownMenuSeparator />
)} )}
{isDefined(onCreate) && ( {isDefined(onCreate) && (
<DropdownMenuItemsContainer> <DropdownMenuItemsContainer scrollable={false}>
{createNewButton} {createNewButton}
</DropdownMenuItemsContainer> </DropdownMenuItemsContainer>
)} )}

53
packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx
View File

@ -8,7 +8,6 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useTheme } from '@emotion/react'; import { useTheme } from '@emotion/react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { useMemo } from 'react';
import { import {
ColorSample, ColorSample,
IconCheck, IconCheck,
@ -21,7 +20,6 @@ import {
MenuItem, MenuItem,
MenuItemSelectColor, MenuItemSelectColor,
} from 'twenty-ui'; } from 'twenty-ui';
import { v4 } from 'uuid';
import { computeOptionValueFromLabel } from '~/pages/settings/data-model/utils/compute-option-value-from-label.utils'; import { computeOptionValueFromLabel } from '~/pages/settings/data-model/utils/compute-option-value-from-label.utils';
type SettingsDataModelFieldSelectFormOptionRowProps = { type SettingsDataModelFieldSelectFormOptionRowProps = {
@ -81,17 +79,14 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
}: SettingsDataModelFieldSelectFormOptionRowProps) => { }: SettingsDataModelFieldSelectFormOptionRowProps) => {
const theme = useTheme(); const theme = useTheme();
const dropdownIds = useMemo(() => { const SELECT_COLOR_DROPDOWN_ID = 'select-color-dropdown';
const baseScopeId = `select-field-option-row-${v4()}`; const SELECT_ACTIONS_DROPDOWN_ID = 'select-actions-dropdown';
return {
color: `${baseScopeId}-color`,
actions: `${baseScopeId}-actions`,
};
}, []);
const { closeDropdown: closeColorDropdown } = useDropdown(dropdownIds.color); const { closeDropdown: closeColorDropdown } = useDropdown(
SELECT_COLOR_DROPDOWN_ID,
);
const { closeDropdown: closeActionsDropdown } = useDropdown( const { closeDropdown: closeActionsDropdown } = useDropdown(
dropdownIds.actions, SELECT_ACTIONS_DROPDOWN_ID,
); );
const handleInputEnter = () => { const handleInputEnter = () => {
@ -120,28 +115,26 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
/> />
</AdvancedSettingsWrapper> </AdvancedSettingsWrapper>
<Dropdown <Dropdown
dropdownId={dropdownIds.color} dropdownId={SELECT_COLOR_DROPDOWN_ID}
dropdownPlacement="bottom-start" dropdownPlacement="bottom-start"
dropdownHotkeyScope={{ dropdownHotkeyScope={{
scope: dropdownIds.color, scope: SELECT_COLOR_DROPDOWN_ID,
}} }}
clickableComponent={<StyledColorSample colorName={option.color} />} clickableComponent={<StyledColorSample colorName={option.color} />}
dropdownComponents={ dropdownComponents={
<DropdownMenu> <DropdownMenuItemsContainer>
<DropdownMenuItemsContainer> {MAIN_COLOR_NAMES.map((colorName) => (
{MAIN_COLOR_NAMES.map((colorName) => ( <MenuItemSelectColor
<MenuItemSelectColor key={colorName}
key={colorName} onClick={() => {
onClick={() => { onChange({ ...option, color: colorName });
onChange({ ...option, color: colorName }); closeColorDropdown();
closeColorDropdown(); }}
}} color={colorName}
color={colorName} selected={colorName === option.color}
selected={colorName === option.color} />
/> ))}
))} </DropdownMenuItemsContainer>
</DropdownMenuItemsContainer>
</DropdownMenu>
} }
/> />
<StyledOptionInput <StyledOptionInput
@ -165,10 +158,10 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
autoSelectOnMount={isNewRow} autoSelectOnMount={isNewRow}
/> />
<Dropdown <Dropdown
dropdownId={dropdownIds.actions} dropdownId={SELECT_ACTIONS_DROPDOWN_ID}
dropdownPlacement="right-start" dropdownPlacement="right-start"
dropdownHotkeyScope={{ dropdownHotkeyScope={{
scope: dropdownIds.actions, scope: SELECT_ACTIONS_DROPDOWN_ID,
}} }}
clickableComponent={ clickableComponent={
<StyledLightIconButton accent="tertiary" Icon={IconDotsVertical} /> <StyledLightIconButton accent="tertiary" Icon={IconDotsVertical} />

28
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx
View File

@ -16,7 +16,6 @@ import { SettingsSummaryCard } from '@/settings/components/SettingsSummaryCard';
import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/components/SettingsDataModelObjectTypeTag'; import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/components/SettingsDataModelObjectTypeTag';
import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel'; import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
@ -86,21 +85,20 @@ export const SettingsObjectSummaryCard = ({
accent="tertiary" accent="tertiary"
/> />
} }
dropdownMenuWidth={160}
dropdownComponents={ dropdownComponents={
<DropdownMenu width="160px"> <DropdownMenuItemsContainer>
<DropdownMenuItemsContainer> <MenuItem
<MenuItem text="Edit"
text="Edit" LeftIcon={IconPencil}
LeftIcon={IconPencil} onClick={handleEdit}
onClick={handleEdit} />
/> <MenuItem
<MenuItem text="Deactivate"
text="Deactivate" LeftIcon={IconArchive}
LeftIcon={IconArchive} onClick={handleDeactivate}
onClick={handleDeactivate} />
/> </DropdownMenuItemsContainer>
</DropdownMenuItemsContainer>
</DropdownMenu>
} }
dropdownHotkeyScope={{ dropdownHotkeyScope={{
scope: dropdownId, scope: dropdownId,

23
packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard.tsx
View File

@ -1,7 +1,6 @@
import { SettingsSummaryCard } from '@/settings/components/SettingsSummaryCard'; import { SettingsSummaryCard } from '@/settings/components/SettingsSummaryCard';
import { SettingsIntegrationDatabaseConnectionSyncStatus } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSyncStatus'; import { SettingsIntegrationDatabaseConnectionSyncStatus } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSyncStatus';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { import {
@ -64,18 +63,16 @@ export const SettingsIntegrationDatabaseConnectionSummaryCard = ({
<LightIconButton Icon={IconDotsVertical} accent="tertiary" /> <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
} }
dropdownComponents={ dropdownComponents={
<DropdownMenu> <DropdownMenuItemsContainer>
<DropdownMenuItemsContainer> <MenuItem
<MenuItem LeftIcon={IconTrash}
LeftIcon={IconTrash} text="Remove"
text="Remove" onClick={onRemove}
onClick={onRemove} />
/> <UndecoratedLink to="./edit">
<UndecoratedLink to="./edit"> <MenuItem LeftIcon={IconPencil} text="Edit" />
<MenuItem LeftIcon={IconPencil} text="Edit" /> </UndecoratedLink>
</UndecoratedLink> </DropdownMenuItemsContainer>
</DropdownMenuItemsContainer>
</DropdownMenu>
} }
/> />
</> </>

2
packages/twenty-front/src/modules/ui/input/components/Select.tsx
View File

@ -165,7 +165,7 @@ export const Select = <Value extends SelectValue>({
<DropdownMenuSeparator /> <DropdownMenuSeparator />
)} )}
{!!callToActionButton && ( {!!callToActionButton && (
<DropdownMenuItemsContainer hasMaxHeight withoutScrollWrapper> <DropdownMenuItemsContainer hasMaxHeight scrollable={false}>
<MenuItem <MenuItem
onClick={callToActionButton.onClick} onClick={callToActionButton.onClick}
LeftIcon={callToActionButton.Icon} LeftIcon={callToActionButton.Icon}

6
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx
View File

@ -38,16 +38,16 @@ export const DropdownMenuItemsContainer = ({
children, children,
hasMaxHeight, hasMaxHeight,
className, className,
withoutScrollWrapper, scrollable = true,
}: { }: {
children: React.ReactNode; children: React.ReactNode;
hasMaxHeight?: boolean; hasMaxHeight?: boolean;
className?: string; className?: string;
withoutScrollWrapper?: boolean; scrollable?: boolean;
}) => { }) => {
const id = useId(); const id = useId();
return withoutScrollWrapper === true ? ( return scrollable !== true ? (
<StyledDropdownMenuItemsExternalContainer <StyledDropdownMenuItemsExternalContainer
hasMaxHeight={hasMaxHeight} hasMaxHeight={hasMaxHeight}
className={className} className={className}

31
packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx
View File

@ -19,7 +19,6 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
import { isWorkflowSubObjectMetadata } from '@/object-metadata/utils/isWorkflowSubObjectMetadata'; import { isWorkflowSubObjectMetadata } from '@/object-metadata/utils/isWorkflowSubObjectMetadata';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { Dropdown } from '../../dropdown/components/Dropdown'; import { Dropdown } from '../../dropdown/components/Dropdown';
import { DropdownMenu } from '../../dropdown/components/DropdownMenu';
const StyledContainer = styled.div` const StyledContainer = styled.div`
z-index: 1; z-index: 1;
@ -93,22 +92,20 @@ export const ShowPageAddButton = ({
) )
} }
dropdownComponents={ dropdownComponents={
<DropdownMenu> <DropdownMenuItemsContainer>
<DropdownMenuItemsContainer> <MenuItem
<MenuItem onClick={() => handleSelect(CoreObjectNameSingular.Note)}
onClick={() => handleSelect(CoreObjectNameSingular.Note)} accent="default"
accent="default" LeftIcon={IconNotes}
LeftIcon={IconNotes} text="Note"
text="Note" />
/> <MenuItem
<MenuItem onClick={() => handleSelect(CoreObjectNameSingular.Task)}
onClick={() => handleSelect(CoreObjectNameSingular.Task)} accent="default"
accent="default" LeftIcon={IconCheckbox}
LeftIcon={IconCheckbox} text="Task"
text="Task" />
/> </DropdownMenuItemsContainer>
</DropdownMenuItemsContainer>
</DropdownMenu>
} }
dropdownHotkeyScope={{ dropdownHotkeyScope={{
scope: PageHotkeyScope.ShowPage, scope: PageHotkeyScope.ShowPage,

2
packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx
View File

@ -7,13 +7,13 @@ import { SummaryCard } from '@/object-record/record-show/components/SummaryCard'
import { RecordLayout } from '@/object-record/record-show/types/RecordLayout'; import { RecordLayout } from '@/object-record/record-show/types/RecordLayout';
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { RightDrawerFooter } from '@/ui/layout/right-drawer/components/RightDrawerFooter';
import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer'; import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer';
import { SingleTabProps, TabList } from '@/ui/layout/tab/components/TabList'; import { SingleTabProps, TabList } from '@/ui/layout/tab/components/TabList';
import { useTabList } from '@/ui/layout/tab/hooks/useTabList'; import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { useRecoilState, useRecoilValue } from 'recoil'; import { useRecoilState, useRecoilValue } from 'recoil';
import { RightDrawerFooter } from '@/ui/layout/right-drawer/components/RightDrawerFooter';
const StyledShowPageRightContainer = styled.div<{ isMobile: boolean }>` const StyledShowPageRightContainer = styled.div<{ isMobile: boolean }>`
display: flex; display: flex;

16
packages/twenty-front/src/modules/views/components/UpdateViewButtonGroup.tsx
View File

@ -112,15 +112,13 @@ export const UpdateViewButtonGroup = ({
/> />
} }
dropdownComponents={ dropdownComponents={
<> <DropdownMenuItemsContainer>
<DropdownMenuItemsContainer> <MenuItem
<MenuItem onClick={handleCreateViewClick}
onClick={handleCreateViewClick} LeftIcon={IconPlus}
LeftIcon={IconPlus} text="Create view"
text="Create view" />
/> </DropdownMenuItemsContainer>
</DropdownMenuItemsContainer>
</>
} }
/> />
</ButtonGroup> </ButtonGroup>

2
packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx
View File

@ -190,7 +190,7 @@ export const ViewPickerContentCreateMode = () => {
)} )}
</DropdownMenuItemsContainer> </DropdownMenuItemsContainer>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuItemsContainer> <DropdownMenuItemsContainer scrollable={false}>
<ViewPickerSaveButtonContainer> <ViewPickerSaveButtonContainer>
<ViewPickerCreateButton /> <ViewPickerCreateButton />
</ViewPickerSaveButtonContainer> </ViewPickerSaveButtonContainer>

2
packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentEditMode.tsx
View File

@ -89,7 +89,7 @@ export const ViewPickerContentEditMode = () => {
</ViewPickerIconAndNameContainer> </ViewPickerIconAndNameContainer>
</DropdownMenuItemsContainer> </DropdownMenuItemsContainer>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuItemsContainer> <DropdownMenuItemsContainer scrollable={false}>
<ViewPickerSaveButtonContainer> <ViewPickerSaveButtonContainer>
<ViewPickerEditButton /> <ViewPickerEditButton />
</ViewPickerSaveButtonContainer> </ViewPickerSaveButtonContainer>

2
packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx
View File

@ -97,7 +97,7 @@ export const ViewPickerListContent = () => {
/> />
</DropdownMenuItemsContainer> </DropdownMenuItemsContainer>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<StyledBoldDropdownMenuItemsContainer> <StyledBoldDropdownMenuItemsContainer scrollable={false}>
<MenuItem <MenuItem
onClick={handleAddViewButtonClick} onClick={handleAddViewButtonClick}
LeftIcon={IconPlus} LeftIcon={IconPlus}